Frame-exact video renderer for Claude Design animations

I design product animations in Claude Design for my case studies. For my projects, its built-in MP4 export came out softer than I wanted, and I also needed the same animations as cover loops in other aspect ratios. So I built a small renderer.

The animation engine already exposes a seek event for its own exporter. The renderer opens the HTML in headless Chrome, pauses the timeline, and for every frame it dispatches that seek with a synchronous commit, then captures the stage at a high device-pixel ratio. Frames stream straight into ffmpeg, which encodes H.264.

Because every frame is seeked rather than recorded, the output is deterministic: no dropped frames, and any resolution you ask for.

Every animation in my PageToll and Shortlist projects was rendered with it: seven videos in 16:9 and 4:5, plus the 4:3 cover loops on my project cards.

It renders at a higher device-pixel ratio, then downsamples, so small text stays crisp.

Frames go straight from Chrome to ffmpeg over a pipe, with no temporary files.

Cover loops are rotated to start on a strong frame, so a card's resting thumbnail is never a blank fade-in.

Videos are re-encoded to fit upload limits without visible quality loss.