Dev builds MP4 export tool for Claude Design animations

Claude Design, which launched recently, lets users generate animated visuals from a single prompt — but provides no way to download or export those animations. Screen recording emerged as the default workaround, but Tom Pavlin argues it produces visibly degraded output: color banding on gradients, dropped frames on fast animations, and crushed transparency, all caused by GPU compositing, monitor color profiles, and real-time H.264 compression happening before the recording even begins.

The core insight is that Claude Design renders animations as live React code running in the browser — not a video file — so there is no export pipeline to tap into.

Pavlin's solution, published at claude2video.com, avoids screen recording entirely. The core insight is that Claude Design renders animations as live React code running in the browser — not a video file — so there is no export pipeline to tap into. His tool uses Playwright with headless Chromium to take control of the animation clock itself, freezing it and advancing it manually frame by frame. For React-based animations, this involves walking the React fiber tree to locate the component, then calling its internal time hook directly with precise timestamps (0ms, 16.6ms, 33.3ms, and so on for 60fps). Each frame is deterministic: the animation jumps to an exact moment, the browser paints it, and Playwright screenshots it. The raw PNGs stream directly into ffmpeg for H.264 encoding.

A few non-obvious implementation details emerged during development. Detecting animation duration required probing the page's React component tree and extracting the value from the `Stage` component's props, since no standard API exposes this. After setting the time, the tool must wait two `requestAnimationFrame` cycles — one for the DOM update and one for the compositor to paint — before screenshotting, or it captures the previous frame. For animations that use raw canvas or WebGL instead of React Stage, the tool replaces `window.requestAnimationFrame` with a stub and calls the page's render function directly at each timestamp.

Key facts

1. 01Claude Design launched recently and has no built-in export or download feature for animations
2. 02Tom Pavlin built claude2video.com to export Claude Design animations as MP4 files
3. 03The tool uses Playwright with headless Chromium and ffmpeg for encoding
4. 04Instead of screen recording, it freezes the animation clock and advances it manually frame by frame
5. 05For React-based animations, it walks the React fiber tree and calls the component's internal time hook at exact timestamps (0ms, 16.6ms, 33.3ms, etc.) for 60fps capture