How to convert a Claude HTML animation to MP4

Start with a portable animation

Ask Claude for a complete, standalone HTML file. A single main canvas is the simplest capture path. Inline CSS and JavaScript avoid missing relative files. Use only source code you trust and review it before importing.

This workflow applies to HTML and canvas motion generated by Claude. It is not a way to download every Claude artifact: React projects, remote embeds, and other artifact types may need changes before they work as standalone HTML.

Create a standalone HTML canvas animation in a single file.
Use a 720 × 1280 canvas for a vertical video.
Keep CSS and JavaScript inline. Do not load external assets.
Use requestAnimationFrame and make the animation loop every 15 seconds.
Return the complete HTML source.

Export the HTML to video

1. Save the complete source as an .html file. Open it locally and confirm that the animation runs.
2. Open HTML to Video and choose or drop the file. Keep external resources off unless you deliberately need remote assets.
3. Select Canvas animation and the main canvas. If the animation is built with DOM/CSS instead, use the separate playback tab and Tab recording.
4. Start with 720 × 1280, 30 FPS, and your intended duration. Use Contain to preserve the source proportions.
5. Choose Mute for a silent export, or Replace audio to add a local soundtrack. Set trim, start time, fades, and looping as needed.
6. Choose MP4 if it is available, then select Create video. Preview the result and download the actual output file.

When MP4 is not available

MP4 requires browser support for the selected encoding settings. Audio MP4 also requires AAC encoding. The converter checks these capabilities and offers WebM when an MP4 path is unavailable. Changing a .webm extension to .mp4 does not convert the file.

Recording runs in real time. A busy device or a background tab can reduce the actual frame rate. Compare the measured FPS with your target and try lower dimensions or a lighter animation if necessary.

Try the same workflow before using your own file

Download the sample HTML below, or use Try a sample animation in the converter. The accompanying four-second, 720 × 1280 MP4 was exported with this application. It demonstrates the canvas path; it is not evidence that every Claude artifact is compatible.

A real canvas export

This four-second silent MP4 was created with this converter from the downloadable canvas sample at 720 × 1280. Try the same source before importing your own animation.

Questions before you start