Generate Video

Turn a web page (usually a small Next.js/React scene you build) into a smooth, deterministic MP4. The core trick: don't screen-capture whatever the browser happens to paint — drive the animation off an injected virtual clock and render exactly N evenly-spaced frames per second as lossless PNGs, then encode with ffmpeg. Every frame is an exact point in time, so there is zero judder.

This is the pipeline behind the Kernel blog/launch animation clips (timeline races, fan-outs, throughput counters, live browser grids).

When to use

• "make a short video of this", "record this animation", "I need a demo/launch/explainer clip"
• Animated visualizations: stat counters, timeline/race bars, architecture diagrams, before/after, live grids
• The user iterates: "make it smoother", "snappier", "try a few versions", "re-cut with X"
• Anytime a previous screen-recording looked choppy or had hitches

If the video is a brand asset

Build the scene with your design system's tokens (colors, type stack, border treatment) before animating anything. On-brand scene → on-brand video.

Composing the scene