Kinetic Studio Template

£10

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.

ScrollTrigger Lenis advanced

5 more details

3d-transformsdraggablescrubtext-animationclick-toggle

Kinetic Studio Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab

About this template

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.

Read the full template overview

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.

What's included

8 items

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

Perfect for

5 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

How it works

4 sections

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.

Plugins ScrollTrigger

Difficulty Advanced

Smooth scroll Lenis integration

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

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

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

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.

Paid template

Purchase to unlock the code.

Buying Kinetic Studio Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

Keep index.html beside the assets directory and serve them with any static host or local server.
Replace SIDEQUEST, Bristol, the team size, dates and project copy in index.html.
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.
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.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.