Case study
Supersededvideo-to-site
The first version of this idea, and the one this site itself is built with. A single bash script that upscales a clip, extracts a frame sequence, and scaffolds a Next.js project where scrolling drives playback. Superseded by SiteForge, kept because it still does one thing in about as few lines as possible.
What it does
Point it at a video and it produces a scroll-scrubbed site: upscale the clip, extract frames, scaffold the project, map scroll position onto frame index. One script, no configuration.
The hard part
A 24fps clip stretched across a long scroll reads as a flipbook. The script runs FFmpeg's motion-compensated interpolation offline to compute genuine in-between frames from motion vectors, so scrubbing has real intermediate motion instead of duplicated frames — with none of the ghosting you get from alpha-blending two frames in the browser.
Why offline
Doing the interpolation in the browser is tempting and much worse. You either blend frames (which ghosts on sharp footage) or you decode on demand (which stalls). Computing the frames once, offline, means the browser only ever draws finished images.
What became of it
This is what you are looking at right now — the sequence on this page was generated by this pipeline. It has since grown into SiteForge, which covers video backgrounds, section structure, effects and a demo recorder rather than just this one job. This stays up because the narrow version is still the clearest explanation of how the whole idea works.
What I learned
- Doing expensive work offline changes what the browser has to do at runtime, and that trade is usually worth making.
- Keeping the frame sequence and the scroll mapping as separate concerns makes both far easier to reason about.
What it doesn't do yet
Listed deliberately — a project's limits are as useful to a reviewer as its features.
- Superseded by SiteForge — not where new work is going.
- One fixed sequence; no branching or state.