How I built a scroll-driven video hero that still scores 100

Originally published on hadimoussawi.com. The hero on my site is a ten second film. Your scroll is its timeline: scroll down and the camera descends, scroll back and it climbs. It streams while it downloads, it never loads at all on phones, and the page still scores 100 for performance in Lighthouse. Here is how it works, and the four traps that cost me the most time. The idea A video that plays on scroll is not a video that autoplays. There is no playback at all. The page maps scroll position to video.currentTime, so the viewer is scrubbing, exactly like dragging the playhead in a video editor. The hero is seven screens tall and pinned, and five caption bands fade in and out across that distance. 1. The scroll engine never touches React state Scroll drives the video and five caption bands about sixty times a second. Routing that through React state would mean a re-render per animation frame, which is exactly the cost this design cannot afford. So React owns