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.
14 templates
Anvil
Source codeCirrus
Source codeZest
Source codeSliabh
Source codeOcean Epicure
Source codeAurelia
Source codeDemeure
Source codeVesper
Source codeMonolith
Source codeVanta
Source codeForma
Source codeArden
Source codeMeridian
Source codeVilla Sereno
Source codeQuestions
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.