Live page · scroll inside

PremiumMotion design studio · dark · landing page · gsap · lenis · html

Motionlab

A motion-design studio site in near-black with signal orange and lavender: the hero pins while scrolling scrubs a 288-frame procedural showreel drawn live on canvas (title card, bouncing kinetic type with a colour wipe, a circle-square-triangle morph with trails, a rippling dot field, a logo resolve), with an editor strip of timecode, scene name, frame counter and a keyframe ruler with playhead. Then a hover work index, a ten-week Gantt process, plain capability columns and an orange contact band.

What's inside

01
Keyframe bar
Solid after 80 px.
02
Scroll-scrubbed showreel
Pinned for three screens; scrolling scrubs a 288-frame procedural reel (title card, kinetic type, shape morph, dot field, logo resolve) with a 0.6 s scrub lag. Timecode, frame count, scene label and the playhead follow every frame.
03
Work index
Rows rise; hover moves the name 12 px and reveals the still.
04
Ten-week Gantt
Bars grow from their start week as the chart scrolls in.
05
Capability columns
Columns rise in sequence.
06
Render-out CTA
Heading lines rise.
07
Footer
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Motionlab

What's inside

Keyframe bar

Solid after 80 px.

Scroll-scrubbed showreel

Pinned for three screens; scrolling scrubs a 288-frame procedural reel (title card, kinetic type, shape morph, dot field, logo resolve) with a 0.6 s scrub lag. Timecode, frame count, scene label and the playhead follow every frame.

Work index

Rows rise; hover moves the name 12 px and reveals the still.

Ten-week Gantt

Bars grow from their start week as the chart scrolls in.

Capability columns

Columns rise in sequence.

Render-out CTA

Heading lines rise.

Footer

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.