911 Carrera
A scroll-scrubbed concept microsite for the Porsche 911 Carrera — each clip’s playback position is your scroll position.
The problem
Apple product pages feel incredible because the imagery is tied to your scroll. I wanted that effect without their pipeline — no sliced frame sequences, no 3D, no WebGL.
What I built
A premium single-page microsite where each chapter’s video has its currentTime driven straight by scroll position — hero orbit, exterior, engine, wheels, interior, performance tunnel, final reveal. Everything is CSS transforms and native video seeking, so nothing competes with scroll compositing.
What I learned
That the 3D car placeholder was the entire performance cost — a shadow map recomputing every frame. Removing it and switching to scrubbed footage cut the page’s JS from ~424KB to under 4KB, and it felt better.
Overview
An unofficial, fan-made concept build — no Porsche branding or assets. A study in scroll-driven storytelling: “born from heritage, engineered for speed”, told through nine chapters of scrubbed footage.
Features
Scroll-scrubbed video
Each clip’s playback position is the scroll position; clips are reused and frame-held where an SVG overlay does the animating instead.
SVG overlays
Energy lines over the engine, airflow lines over the aero section, a speed HUD in the cockpit, spec reveals in the tunnel.
Tuned for smoothness
One scrub value site-wide and threshold-gated seeks, so the scroll stays connected without stutter.
How it's put together
- 01Next.js 15 with Turbopack; GSAP ScrollTrigger for every scrubbed section; Lenis for smooth scroll.
- 02No Three.js or React Three Fiber — removed deliberately after profiling showed it was 99% of the JS.
- 03Source clips trimmed and cropped to remove third-party badges and a generation artifact before use.
Challenges
Smoothness
Video seeking and scroll compositing fight each other — solved with threshold-gated currentTime updates and a single light scrub value everywhere.
Bundle size
The 3D scene was almost all of the JS; cutting it was the single biggest performance win.
Where it landed
A sub-4KB-JS microsite that feels like a high-budget product page, running on native browser features.
Screens
Want something like this?
Get in touch →