Live page · scroll inside

Premiumfilm production · dark · landing page · gsap · lenis · html

Reel

A film-production studio site in black: a sprocket-holed 35 mm filmstrip that drifts and reacts to scroll velocity under a WebGL light-leak shader, a slate-captioned work grid, a pinned credits crawl that scrolls into the distance, three service columns and a clapperboard contact slate.

What's inside

01
Reel preloader
The wedge sweeps one turn per number over 0.5 s each, the number flips, a flash, the slab cuts away.
02
Fixed bar with a REC dot
Turns translucent after 80 px; the dot blinks 1.2 s four times on load. While transparent over the hero it keeps light type in every palette.
03
Filmstrip hero with light leak
The strip drifts left at 40 px/s and adds scroll velocity × 0.6 (skews up to 6° with velocity); the light leak is a two-octave value-noise shader with slowly drifting warm blobs that brighten toward the pointer; the h1 lines rise; the strip's frames settle from 1.1 scaled on load. The pause button stops the drift and freezes the leak (hidden under reduced motion, where both are still).
04
Selected work
Stills unroll on enter; hovering scales the still 1.04 and slides the caption; the frame number ticks on hover.
05
Credits crawl
Scrolling 250 vh scrubs the crawl from below the frame to beyond the vanishing point (rotateX 28°, translateY from 60 % to −130 %); the mark behind drifts; a hairline flicker runs on the crawl.
06
Services
Columns rise with a stagger; list items draw their rules.
07
Contact slate
The card's stripes slide in; the top board claps shut once on enter; submit flashes the board.
08
Minimal 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…

What's inside

Reel preloader

The wedge sweeps one turn per number over 0.5 s each, the number flips, a flash, the slab cuts away.

Fixed bar with a REC dot

Turns translucent after 80 px; the dot blinks 1.2 s four times on load. While transparent over the hero it keeps light type in every palette.

Filmstrip hero with light leak

The strip drifts left at 40 px/s and adds scroll velocity × 0.6 (skews up to 6° with velocity); the light leak is a two-octave value-noise shader with slowly drifting warm blobs that brighten toward the pointer; the h1 lines rise; the strip's frames settle from 1.1 scaled on load. The pause button stops the drift and freezes the leak (hidden under reduced motion, where both are still).

Selected work

Stills unroll on enter; hovering scales the still 1.04 and slides the caption; the frame number ticks on hover.

Credits crawl

Scrolling 250 vh scrubs the crawl from below the frame to beyond the vanishing point (rotateX 28°, translateY from 60 % to −130 %); the mark behind drifts; a hairline flicker runs on the crawl.

Services

Columns rise with a stagger; list items draw their rules.

Contact slate

The card's stripes slide in; the top board claps shut once on enter; submit flashes the board.

Minimal 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.