# Kinetic Studio Template

> A kinetic design studio website template with a giant folding type sculpture, stacked campaign posters and a hands-on geometric mark. Repoint it for a design agency, creative portfolio, event website, art director or digital studio.

Canonical: https://gsapvault.com/templates/kinetic-studio-template
Live demo: https://gsapvault.com/demos/kinetic-studio-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | 3d-transforms, draggable, scrub, text-animation, click-toggle |
| Uses Lenis | Yes |

## Lighthouse, as measured

Google Lighthouse on the demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

SIDEQUEST is a complete kinetic design studio website built around the pleasure of moving things. A giant concertina spelling PLAY stretches across lavender, with deep plum letterforms and a tangerine detail that gives the opening real depth. The studio is fictional; the graphic personality is ready to make your own.

Three original campaign identities unfold into a compact desktop showcase. An oversized studio statement shifts the pace before a geometric mark invites visitors to pull its pieces apart and bring them back together. Nothing moves by itself indefinitely, and the work remains available as a straightforward document on smaller screens.

The same composition suits a design agency, creative portfolio, event website, art director or digital studio. Replace the studio name, campaigns and contact address, then adjust the four-colour palette to give the page a different identity.

## Features

- Oversized folding PLAY sculpture with drag, sideways scroll and keyboard controls
- Three original graphic identities for a music platform, arts space and film festival
- Compact desktop campaign sequence with direct project selection
- Geometric mark that springs back on release, with a precise reset control
- Complete studio story, a native expandable studio note and email contact
- Lavender, plum, paper and tangerine tokens with measured text contrast
- Designed mobile, reduced-motion and JavaScript-free layouts
- Buyer documentation and a static product preview composition

## Use Cases

- Design agencies with a playful visual identity
- Creative portfolios centred on branding and campaign work
- Art directors presenting original graphic projects
- Event websites with a bold typographic identity
- Digital studios that want visitors to handle the design

## Questions about this template

### What else can I use the SIDEQUEST design for?

The folding type and campaign-led layout suit a design agency, creative portfolio, event website, art director or digital studio. SIDEQUEST is the worked example. Change the name, the three project identities and the studio story to make the same playful composition represent your own work.

### Can I change PLAY to my own word?

The opening is designed around four physical letter panels, so another four-letter word is the simplest replacement. Each letter is editable in the page. A longer name works well in the separate studio wordmark; adding more folding panels requires adjusting the sculpture's layout and script.

### Do the LOOP, KIN and OTHER projects come with the template?

Yes. The three fictional campaign artworks are included as editable graphic elements, with their own captions and case notes. They demonstrate a music platform, community arts space and film festival. You can keep them while preparing your content, then replace each identity with your own client work.

### Can I show photographs instead of graphic campaign artwork?

Yes. The campaign area can hold a large image in place of the rings, modular letters or stripes. Keep the project article and its caption so the sequence still reads correctly. Use a strong landscape crop for desktop and check that the main subject survives the taller mobile frame.

### Will enquiries reach my studio?

The contact area opens an email application; there is no enquiry form or inbox service included. Replace hello@sidequest.example in both the visible address and its email link with your studio's real address. SIDEQUEST's location, founding year and team size are also fictional content to update.

### Can I add more than three projects?

You can add another project article, and the project selector picks up its name automatically. The desktop showcase shares one compact scroll journey, so a larger portfolio benefits from a longer journey or an ordinary project list. The README identifies the setting and the markup each project needs.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### The folding letters

PLAY is a single sculptural headline with a physical folded-paper character. Visitors can close it into a tighter object or stretch it out, using direct dragging, sideways scrolling or a labelled control. Its resting state already carries the page's graphic identity.

### Campaigns in sequence

LOOP, KIN and OTHER each have an original visual world and a concise case note. On a wide screen they advance through a layered showcase; direct project buttons let visitors choose where to look. Smaller screens present the complete set in reading order.

### Making a mark

The studio's geometric artwork changes from an assembled identity into a loose collection of parts. Visitors decide how far to take it, then bring the pieces back together with one action. The interaction turns the studio's point of view into something tangible.

### A readable fallback

Every project, studio paragraph and contact link remains accessible when animation is unavailable. Reduced-motion visitors get immediate responses to the controls and a normal project sequence. Navigation and the expandable studio note retain their native browser behaviour.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

1. Keep `index.html` beside the `assets` directory and serve them with any static host or local server.
2. Replace SIDEQUEST, Bristol, the team size, dates and project copy in `index.html`.
3. Change **both** the displayed email and `mailto:hello@sidequest.example` to your real address. The `.example` address cannot receive enquiries. There is no form or backend.
4. Keep the three CDN tags above `assets/script.js`, or self-host those dependencies and update the paths.

No build step is needed for the buyer's site. `assets/script.min.js` is a compact alternative to the readable script; load one, not both.

### Using It With Your Own Design

The data attributes in the page are the behaviour contract. Class names own the appearance. You may change artwork, typography and copy while preserving the relevant section roots and controls. Sections initialise independently, so deleting a whole section does not break the rest of the page.

The brand and campaigns are fictional. LOOP, KIN and OTHER are original HTML/CSS artwork supplied with this template; no photography or third-party image credits are required. The graphics can be replaced by local images using meaningful `alt` text, explicit dimensions and appropriate responsive crops. There are no raw stock files or remote image requests.

### Palette

The first `:root` block in `assets/style.css` contains four semantic colours and their RGB triples:

| Token | Default | Role |
| --- | --- | --- |
| `--ground` | `#D7BFF5` | Lavender field and light graphic material |
| `--ink` | `#281B37` | Plum text and dark artwork |
| `--surface` | `#F5EFDF` | Paper work and studio sections |
| `--accent` | `#F2542D` | Tangerine graphic material and playground |

Update each hex **and** its `--*-rgb` companion. All text uses full-opacity plum or a high-contrast inverse pair. Plum on tangerine measures 4.67:1, so check that pair carefully when changing the accent. Do not put pale text over tangerine without measuring it.

The display face is Bricolage Grotesque at weight 800; body copy is DM Sans. Change the Google Fonts link and `--font-display`, `--font-display-weight`, and `--font-body` together. There is no demo palette picker.

### The folding word

- Root: `[data-fold]`.
- Stage: `[data-fold-scene]`; inner object: `[data-fold-object]`.
- Four panels: `[data-fold-face]`, each containing a decorative `data-mark` letter.
- Control: `[data-fold-range]`, a labelled native range from 0 to 100.

Replace PLAY with another four-letter word by editing the four `data-mark` values, then update the stage's accessible description. The h1 below the sculpture is real text and should describe your business. A different number of panels needs changes to the count guard, centre calculation and CSS widths.

The default range value of 28 starts PLAY in a tight concertina fold; 0 closes it further and 100 opens it flat. The range, horizontal pointer drag and sideways trackpad scroll control the same fold position. A short drag spans the full range; reversing direction responds immediately at either endpoint. Vertical touch gestures remain page scrolling. The `paint` function owns panel transforms; keep scrolling animation on other elements. Perspective is deliberately much larger than the sculpture's depth. The scene’s container dimensions set panel width and height independently, keeping artwork clear of the headline and bottom copy. The orange sticker lives outside the folding 3D group so panels cannot intersect it.

### Campaign showcase

`[data-work]` contains `.project-stack`, a series of `[data-project]` articles, and `[data-project-nav]`. Each article's `data-project` value provides the automatically generated button label. Keep article IDs unique.

The original artwork lives in `.campaign-loop`, `.campaign-kin` and `.campaign-other`. Replace the inside of a campaign while preserving its article and caption. A landscape photograph can use a full-size `object-fit: cover` image, but check its crop in the taller phone composition.

At 900px and above, when reduced motion is off, the work section pins for `window.innerHeight * 1.6`. The articles advance in sequence. Increase this travel if adding many projects, or remove the desktop stacking branch for an ordinary portfolio list. Direct buttons and navigation use the pin's actual start position. On phones, without JavaScript or with reduced motion, the articles remain in document order.

### Studio and contact

The studio statement, six-person count and two paragraphs are ordinary editable HTML. The commission note uses native `<details>` and `<summary>`. The opening and footer links point to real section IDs; update their `href` values if renaming sections.

The footer email is an unwired placeholder address, not a submission service. Replace it before publishing. The template does not send messages automatically.

### The geometric mark

- Root: `[data-playground]`.
- Stage: `[data-mark-stage]`.
- Pieces: SVG groups with `[data-mark-piece]`.
- Each group has `data-x`, `data-y` and `data-turn` values for the separated state.
- Range: `[data-mark-range]`; reset button: `[data-mark-reset]`.

The artwork is drawn around (300, 300); the expanded viewBox reserves room for its six pieces to separate. Update the centre used by `paint` if replacing that geometry. The centre circle stays anchored. Drag the artwork apart and release to spring back. The labelled range holds a chosen position and supports arrow keys. “Bring it back” resets either input to the exact original geometry, even during an unfinished return. The controls sit above the artwork so reset stays in view. Pull beyond 88% to find a small face and a one-shot colour burst inside the mark. The face blinks once, with a polite screen-reader announcement. Dropping below 65% or resetting clears the secret; reduced motion shows the face and message immediately without the burst or blink.

### Accessibility and fallback

All content is visible before JavaScript enhancement. The synchronous head script adds `has-js`; the main script removes it if GSAP or ScrollTrigger fails to load. This leaves the folded composition and all project articles readable. Interactive controls appear only when enhancement is available.

Reduced motion is handled in both CSS and the GSAP matchMedia branch: controls update immediately, the campaign sequence is unpinned, and Lenis is disabled. There is no autoplay animation. Keyboard users can reach the range controls, project buttons, navigation, native details and email link. Focus outlines are retained. Decorative lettering is generated from `data-mark` rather than duplicated as low-contrast text nodes.

### Smooth scrolling

Lenis is optional. Append `?smooth=off` to compare native scrolling, or set `data-smooth="off"` on `<html>` for the deployed site. Reduced motion always disables it. Lenis and ScrollTrigger share GSAP's ticker; keep the ticker, refresh listener and teardown together.

`window.gsapContext.revert()` removes the template's GSAP enhancement and listeners. `window.destroyLenis()` removes the smooth-scroll integration. These are useful when mounting the page inside a client-side application.

### Dependencies

- GSAP 3.12+ and ScrollTrigger; demo pins GSAP 3.15.0.
- Lenis 1.3.17, optional.
- Google Fonts: Bricolage Grotesque and DM Sans; self-host the font files if desired.

`thumbnail.html` is a static product-preview composition used by the catalogue, not part of the live business page.

### Mobile navigation

Below 900px the header uses a native details menu. It works without JavaScript. With scripts available, choosing a link, clicking outside, pressing Escape or widening the viewport closes it. Escape returns focus to the toggle; choosing a section moves focus to that destination. Keep the desktop and mobile link lists in sync when renaming sections.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Kinetic Studio Template](https://gsapvault.com/templates/kinetic-studio-template)
- [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt