▶ Claude→Video

Turn Claude animations into real video

Built something in Claude Design? It renders in a headless browser and captures every frame deterministically — full-quality MP4, WebM, or GIF.

up to 4K · 60 fpsframe-perfect, no screen recording
1 Add your animation
2 Choose output
3 Render & download

Paste the full standalone HTML of your animation — inline CSS and JS, or CDN URLs that load without authentication.

Output settings

FREE

Set these now or after you add a file — either way.

Format
WebM and GIF support a transparent background.
Resolution
Output: 1920×1080
Frame rate
Advanced — quality, transparency, cropping, warm-up
Quality
Capture only element (CSS selector, optional)
Warm-up delay — 0s
Lets async assets settle before capture starts.
This render
Free
priced once we know the size and length
Sign in for full quality up to 4K, no watermark.
Sign in →

No export handy? Try an example

Load a sample animation and hit render — see the quality for yourself.

Frequently asked questions

How is this different from screen recording?
It never records the screen. The animation runs in a headless browser where we control the clock (requestAnimationFrame, timers, CSS timelines), render each frame at an exact timestamp, and encode with ffmpeg. The result is lossless with no dropped or blurred frames, regardless of how fast your machine is.
What can I upload?
A Claude Design project archive (.zip), a standalone .html file, or pasted HTML. From Claude Design: Share → Export → Project archive (.zip) or Standalone HTML, then drop it here.
My archive has several designs — can I pick one?
Yes. When a .zip contains multiple HTML files, a picker appears so you can choose exactly which design to export.
Which animations work?
Canvas, WebGL, SVG, the Web Animations API, and pure CSS — anything self-contained that reads time from the standard browser APIs. No special <Stage> component or React hook layout is required. See the Docs for the full spec.
How is the video length decided?
It is read from the animation itself — set window.CLAUDE_VIDEO = { duration: seconds } (recommended), otherwise it falls back to the design’s size and a sensible default. There is no length slider; the clip is exactly as long as the animation.
What does it cost?
Converting on the free tier is free but adds a small watermark and caps at 720p. For full quality up to 4K with no watermark, you pay per render — priced by resolution × frame rate × length, shown before you render. Top up from $5; your balance never expires. Clips over 60 seconds are billed at a higher rate.
What formats and resolutions can I export?
MP4 (H.264), WebM (VP9, with optional transparency), and GIF — up to 4K at 24, 30, or 60 fps.
Is my animation uploaded to a third party?
No. Rendering happens on our own server and render worker, then the file is streamed back to you. Nothing is sent to an outside service.
What if a render fails?
If a paid render fails, the charge is automatically refunded — you can see every top-up, spend, and refund on your account page.
Made for Claude Design animations · runs a real headless Chromium and encodes with ffmpeg — nothing is uploaded to a third party.