Exporting Claude Artifacts as Video: The Complete Guide

Claude can generate genuinely impressive interactive graphics — animated charts, generative art, product mockups, hero animations. But they're HTML and JavaScript running in a browser, not video files. To use them anywhere else — a Reel, a pitch deck, a landing page, a client hand-off — you need to turn them into video. Here's the complete guide.

Step 1: Export from Claude

In Claude Design, use Share → Export and download one of:

• Project archive (.zip) — the whole thing, including any assets. Best for multi-file designs.
• Standalone HTML — a single self-contained file. Best for simple, one-file animations.

You can also paste raw HTML directly if that's what you have.

Step 2: Load it into the converter

Go to claudevideo.app and drop your .zip or .html on the converter. If the archive contains several designs, a picker appears so you choose exactly which one to export. The converter inspects the animation and pre-fills the detected size and length.

Step 3: Choose your output

• Format — MP4, WebM, or GIF. MP4 for most uses; WebM for transparency; GIF for tiny loops.
• Resolution — 720p, 1080p, 2K, 4K, or Native (the design's own size).
• Frame rate — 24, 30, or 60 fps.
• Transparency — toggle it on for WebM/GIF to keep an alpha background.

Step 4: Control the length precisely

Length is read from the animation itself, so there's no guessing slider. For a clean, exact loop, set this in your design:

window.CLAUDE_VIDEO = { duration: 6 }; // seconds

If you don't set it, the converter falls back to a sensible default based on the design.

How the render works (and why it's clean)

Rather than screen-recording, the converter re-renders your animation deterministically — controlling the animation clock and capturing every frame at an exact timestamp, then encoding with ffmpeg. No dropped frames, no browser UI, no resolution lock-in. It works with canvas, WebGL, SVG, the Web Animations API, and pure CSS.

What it costs

• Free tier: render any animation with a small watermark, capped at 720p — great for previews.
• Pay as you go: from $5, unlock full quality up to 4K with no watermark. You're charged per render based on resolution × frame rate × length, shown before you commit, and a failed render is automatically refunded.

Tips for flawless exports

• Keep everything self-contained inside the file or archive.
• Read time from the standard browser clock, not wall-clock hacks.
• Preview on the free tier first, then render the final at full quality.

Ready? Open the converter and drop your export in, or read the full authoring spec in the Docs.