Scroll-scrubbed video templates
A scroll-scrubbed video ties a clip's playhead to scroll position: scroll down and the film advances frame by frame, scroll up and it rewinds. Done well it's the most cinematic effect on the web — a single continuous shot becomes the whole page.
The trick that makes it judder-free is encoding the video all-intra (every frame a keyframe, `-g 1` in ffmpeg) so the browser can seek to any exact frame, then lerping `video.currentTime` toward a scroll-derived target on GSAP's ticker. Every template below is built that way.
These are Next.js 16 + TypeScript + Tailwind, with a free Claude Code prompt and an optional tested-source download.
10 templates
Ocean Epicure
A scroll-scrubbed chef's film opening into a bright editorial story.
Aurelia
A voyage from above the clouds to a dinner at sea — scroll is the ship.
Demeure
Scroll composes an empty shell into a fully furnished home.
Vesper
Scroll assembles the watch — component by component to the finished piece.
Monolith
The tower builds itself as the page goes down.
Vanta
Orbit to street level — a 420 km scroll dive.
Forma
Drafting-paper storytelling with a red line that draws itself.
Arden
True video scrub through a single golden property.
Meridian
Fly the Amalfi route — boarding pass and all.
Villa Sereno
A house tour that plays as you scroll.
Questions
How does scroll-scrubbed video work?
Scroll position is mapped to a target time; a ticker lerps the video's currentTime toward it. The video must be encoded all-intra (every frame a keyframe) so the browser can seek to any frame without judder — otherwise it snaps to the nearest keyframe.
Why does the video need to be re-encoded?
Standard H.264 only stores full keyframes every few seconds, so seeking snaps between them. Re-encoding all-intra with ffmpeg's `-g 1` makes every frame a keyframe, which is what lets currentTime land on any exact frame as you scroll.