A scroll-driven landing page for a fictional YouTube channel audit by the invented brand Reelstra. One 3D play button carries the story across twelve screens: it drains and cracks while the page lists a stalled channel's problems, refills while the audit "scans" it, wears a score ring on the sample report, sweeps a radar over rivals, is circled by orbiting tool cards, turns into silver, gold and diamond creator awards, and comes back as red lacquer for the final call to action. It is ported from an earlier project of mine and adapted to this site; nothing on it is a real offer, and every button stays on the page.

How it's built

• One playhead for the button. A single scrubbed GSAP timeline spans the whole page. Each screen has a pose in frames.ts (position, turn, fill, award tier, glow and effect strengths), and the timeline tweens a plain state object between them. It is rebuilt on every ScrollTrigger refresh because the positions come from the layout.
• GSAP writes, the render loop reads. React Three Fiber renders on demand; the button applies the state in its frame callback, so scrolling never re-renders React.
• Built in code. The button is an extruded, bevelled shape with a clearcoat material. A shader patch adds the liquid fill line and the Voronoi cracks; the award finishes blend in code, and the studio lighting is baked once into an environment map from emissive planes (no HDRI download).
• Warm-up before reveal. Every shader is compiled and every texture uploaded while the loader is still up (compileAsync), so hidden effects do not stall the page mid-scroll; the page reports ready after that first frame.
• The HTML does the talking. All text, the charts, the report card, counters and the benchmark are HTML and SVG animated with GSAP; a 2D canvas dot grid parts around the mouse and picks up the button's red.
• Scoped design. The page's CSS is plain CSS with every rule under the experiment root, so nothing leaks into the rest of the site. The loader is the shared one with its own look: a glass play button that fills with red, then presses and opens the page as a circle.

Performance and fallbacks

• Phones and low-end machines start on the light tier (smaller pixel ratio, lighter geometry, flat backdrops instead of blur); a slow device drops to it once at runtime.
• Without WebGL a flat play button stays in place and the page still reads in full; on a lost graphics context the flat button returns.
• Reduced motion: no smooth scroll, no button travel or idle float, each screen cuts to its pose behind a short fade, and the counters and lists show their final state.