Scroll-driven scenes — the page as a timeline

Build a scroll-scrubbed scene: a section ~220vh tall containing a sticky inner panel (position: sticky, top offset under my header, ~70vh tall). Compute a TARGET progress 0→1 from how far the section has scrolled through the viewport (scroll listener on getBoundingClientRect), but never apply it directly — mouse wheels scroll in ~100px steps and the animation would jump. Instead run a continuous requestAnimationFrame loop that eases a displayed value toward the target each frame (displayed += (target - displayed) × 0.12) and drive the animation from the displayed value — that smoothing is what makes it flow. Map it to the inner graphic's transform — translateX across the panel, a full 360° rotate, scale 0.6→1.5 — and fade a headline in only over the last 40% so the message lands as the scene completes. Transform and opacity only. Under prefers-reduced-motion, render the finished state statically with no listener or loop.