Claude Design and Claude HTML to MP4
Drop the .zip you exported from Claude Design, or paste the HTML Claude wrote in a chat, and save it as an MP4, GIF or transparent WebM. Rendered frame by frame on your computer: no screen recording, no upload.
- ✓Drop the .zip as it is
- ✓Up to 4K at 60 fps
- ✓Free, no watermark
- ✓Nothing uploaded
1920×1080 MP4, drawn frame by frame on your computer: smooth whatever its speed, and nothing is uploaded.
Or start from a sample
Each one is a single HTML file. Load it, change it, export it.
From Claude to a video file
- 01
Export or copy
In Claude Design, export the project as a .zip. From a chat, copy the HTML or download the file.
- 02
Drop it in
Drop the .zip or the .html on the tool, or paste the code. Its images, scripts and fonts are read from the .zip.
- 03
Render
Pick MP4, GIF or WebM and the size; the file is drawn frame by frame and ready to download.
Formats
Every format from one paste
Choose the file for where it's going. The same page renders to any of them, at any of the three shapes.
MP4
H.264 · 720p, 1080p, 4K · 24/30/60 fps
For social posts, slides and video editors. Plays everywhere.
GIF
360p to 720p · 10/15/25 fps · loops
For a README, a Slack message, an email or docs.
WebM, transparent
VP9 with alpha · 720p to 4K
The page's background left out: an overlay for Premiere, DaVinci Resolve, Final Cut or CapCut.
PNG
1080p or 4K · any moment · transparent
One frame as a still: a poster, a thumbnail or a slide image.
Beyond this tool
One animation is a start. A skill makes the whole film.
This tool turns the HTML you already have into a video. A Motion Skill works a step earlier: in Claude Code, Codex or Cursor, your agent reads your product or your notes, plans the shots, writes every scene, scores the music and renders the finished MP4.
- ✓From your own material, not a blank prompt
- ✓Several scenes, cut together with music
- ✓Rendered on your computer, yours to use
Skills that pick up from here
Each one makes a different kind of film. The first is the closest to this page.
Making more than one kind of film?
Start free with Motion Director. One skill is $4.90; a plan unlocks every skill, and the new ones as they arrive.
Monthly
$9.90/ month
- ✓Every full-film skill, styles built in
- ✓New skills as they ship
- ✓Updates to existing skills
- ✓Commercial use of what you render
Yearly
Save 34%$79/ year
- ✓Every full-film skill, styles built in
- ✓New skills as they ship
- ✓Updates to existing skills
- ✓Commercial use of what you render
Founding lifetime
Founding offer$169one-time
- ✓Every full-film skill, styles built in
- ✓New skills as they ship
- ✓Updates to existing skills
- ✓Commercial use of what you render
- ✓One payment, no renewals
Get Motion Director (free) →One skill $4.90 · Pick a skill →
Questions
Does it work with a Claude Design export?
Yes: drop the .zip. The tool finds the page in it and reads every image, script, stylesheet and font it uses from the archive.
Why not just record the screen?
A recording keeps the dropped frames and colour banding of a busy page and needs the right window size. Here each frame is drawn at its exact moment, at the size you choose.
Is this made by Anthropic?
No. It's an independent free tool from Motion Skills that works with HTML from any source, Claude included.
Is my project uploaded?
No. It runs in a sandboxed frame in your browser and the video is encoded on your computer.