I Built a Tool to Export Claude Design Animations as MP4

Tom Pavlin — Fri, 24 Apr 2026 16:20:34 +0000

This is an animation I made in Claude Design:

Claude Design launched a week ago. People started creating stunning animations with a single prompt - but there's no way to download them. No export button. No "Save as video." The same frustration kept showing up on X, Reddit, Hacker News.

Most people's workaround? Screen recording. Which works — until you notice the color banding, dropped frames, and blurry gradients.

So I built a tool to fix it.

The Problem

Claude Design renders animations as live React code in the browser. It's not producing a video file — it's running a web app. There's no export pipeline. Screen recording is the default, but the result is visibly worse than what you see in the browser: color banding on gradients, dropped frames on fast animations, crushed transparency.

This isn't a settings problem. Screen recorders capture your display output — after GPU compositing, monitor color profiles, and real-time H.264 compression. The frame has been transformed multiple times before it lands in your file.

How I Built It

The stack: Playwright with headless Chromium, ffmpeg for encoding.

The interesting part is how you capture frames from a live animation without screen recording. You can't just screenshot at regular intervals — JavaScript's requestAnimationFrame keeps running and you'll miss frames or get timing drift.

The trick is to take control of the animation clock. Instead of letting time flow naturally, the backend freezes it and advances it manually — frame by frame.

For Claude Design's React-based animations, this means walking the React fiber tree to find the <Stage> component, grabbing its internal time hook, and calling it directly with exact timestamps: 0ms, 16.6ms, 33.3ms, and so on for 60fps. The animation jumps to that precise moment, the browser paints it, and Playwright screenshots it. No racing against real-time. Every frame is deterministic.

The screenshots stream as raw PNGs into ffmpeg, which encodes them to H.264.

A few things that were trickier than expected:

Detecting animation duration — there's no standard way to ask "how long is this animation?" The tool probes the page's React component tree and extracts the duration from the Stage component's props.
Two RAF cycles — after setting the time, you need to wait two requestAnimationFrame cycles before screenshotting. One for the DOM update, one for the compositor to actually paint. Screenshot too early and you get the previous frame.
Canvas/WebGL animations — not all Claude Design outputs use React Stage. Some use raw canvas. For those, the tool replaces window.requestAnimationFrame with a stub and calls the page's render function directly at each timestamp.

And here is my tool: claude2video.com

Would love to hear what you think.

DEV Community: Tom Pavlin

I Built a Tool to Export Claude Design Animations as MP4

The Problem

How I Built It