A scroll-driven camera flight
2026 · Interactive film
One continuous camera move, scrubbed by scroll position, with measurably invisible seams — built twice, in two completely different registers.
- Vanilla JS
- ffmpeg
- Generative video
- Next.js
The problem
Scroll-driven video usually fails in one of two ways: the transitions between scenes visibly jump, or the page weighs forty megabytes and destroys the very metrics the site exists to win.
What I built
- Five generated scenes joined into one continuous forward take. Each leg begins on the previous leg's actual final frame, so a join isn't a transition at all — it's the same frame, continuing.
- The first approach dove into each scene then pulled back out to fly to the next. Reversing direction at every join reads as a rewind, and two independently generated scenes disagree about the world in between — buildings morphed into vehicles. Rebuilt so the camera only ever moves forward.
- Seams verified by measurement, not by eye: two adjacent frames inside a single moving clip set the benchmark, and every finished join matches or beats it.
- Static text paints first and the clips stream in beneath it, so page speed never waits on the video. Reduced-motion preferences get the stills and no video at all.
- Scroll snapping on proximity rather than mandatory, so you can still scrub slowly through a scene but never rest mid-transition.
What I took from it
One diagnosis nearly cost a good clip. A seam measured badly and I blamed the model that generated it — the actual culprit was a crop I'd applied myself. The uncropped source measured almost pixel-perfect. Measuring the thing you suspect is cheaper than replacing it.