How to Turn a Claude Design Animation into a Video (MP4, WebM, or GIF)
You built something in Claude Design — a slick canvas animation, an animated chart, a looping hero graphic — and now you want to post it, drop it in a deck, or send it to a client. The problem: it lives as HTML in the browser, and there's no "Save as video" button.
Here's how to turn it into a real, shareable video file in about a minute.
The short version
- In Claude Design, open Share → Export and download either the Project archive (.zip) or Standalone HTML.
- Go to claudevideo.app, drag the file onto the converter.
- Pick your format (MP4, WebM, or GIF) and resolution (up to 4K).
- Click Render and download the file.
That's it. No screen recorder, no editing software.
Why not just screen-record it?
Screen recording captures whatever your monitor happens to show, at whatever frame rate your machine can manage in that moment. You get dropped frames, tearing, a fixed resolution tied to your display, and the browser's UI creeping into the edges. For a smooth animation, it looks worse than the original.
The converter takes a different approach: it loads your animation in a headless browser and controls the animation clock directly — requestAnimationFrame, timers, and CSS timelines — rendering every single frame at an exact timestamp, then encoding them with ffmpeg. The result is lossless and perfectly smooth, no matter how heavy the animation is.
Choosing your settings
- Format: MP4 (H.264) for anything you'll post or embed; WebM if you need a transparent background; GIF for a quick, silent loop.
- Resolution: 1080p is plenty for social; go 4K for presentations or when you want to downscale later. "Native" matches the design's own dimensions.
- Length: it's read straight from the animation, so you don't guess. Want a precise loop? Set
window.CLAUDE_VIDEO = { duration: 6 }in your design.
Getting the cleanest export
A few habits make exports flawless:
- Keep the animation self-contained — everything it needs (fonts, images, JS) inside the file or archive.
- Read time from the standard browser clock, not
Date.now()wall-clock hacks. - If your project archive has several pages, the converter shows a picker so you can choose exactly which design to export.
The full authoring spec is in the Docs.
Try it
Drop your export onto the converter — the free tier renders a watermarked 720p preview, and a few dollars unlocks full-quality 4K with no watermark. Most animations export in under a minute.