How to Turn a Claude HTML Animation into an MP4
An HTML animation becomes a smooth MP4 when a renderer steps its clock frame by frame: HyperFrames for HTML, Remotion for React, timecut for an existing JavaScript page and CCapture.js for a canvas. Claude Motion exports MP4 directly on Team and Enterprise plans. A screen recording works anywhere but drops frames.
AI-assisted writing: this guide was drafted with Claude Opus 5.5, and each fact is linked to its sources.
Checked 2026-11-05. Claude usually hands you an animation as an HTML page: an artifact in the Claude app, a file from Claude Code or a design from Claude Design. To post it, you need a video file. There are two ways to get one: a renderer that advances the animation's clock one frame at a time and saves each frame, or a screen recording of the page playing in real time.
Which method should you use?
| Method | Works on | Frame by frame? | Licence or plan | How |
|---|---|---|---|---|
| Claude Motion | Animations made in a Claude Motion artifact | Yes, exported by Claude | Team and Enterprise plans, beta | Export MP4 from the artifact |
| HyperFrames | HTML written as a HyperFrames composition | Yes | Apache-2.0, free | `npx hyperframes render` |
| Remotion | React components written for Remotion | Yes | Free for individuals and small companies; company licence above that | `npx remotion render` |
| timecut | An existing page animated with JavaScript | Yes, by overriding the page's time functions | BSD-3-Clause, last updated 2023 | `timecut` plus the page URL, with ffmpeg installed |
| CCapture.js | A canvas animation (Three.js, p5.js, 2D canvas) | Yes, at a fixed frame rate | MIT | Add `capturer.capture(canvas)` to the render loop |
| Screen recording | Any page | No: real time, so heavy scenes drop frames | Free | Record the browser, then convert to MP4 with ffmpeg |
Why does a screen recording stutter?
A screen recording captures whatever the browser manages to draw each moment, so a frame that takes too long is simply missed. A renderer instead pauses the animation's clock, waits until each frame is drawn and then saves it. timecut's README describes this as slower-than-real-time capture that still gives a smooth video (timecut). HyperFrames calls its output deterministic: the same project renders the same MP4 every time (HyperFrames).
How do you render a Claude animation with HyperFrames?
- Install Node.js 22 or newer, then add HyperFrames to Claude Code with `claude plugin marketplace add heygen-com/hyperframes` and `claude plugin install hyperframes@hyperframes` (README).
- Start a project with `npx hyperframes init my-video`.
- Ask Claude for the video with `/hyperframes`, describing the scenes, timing and text.
- Preview with `npx hyperframes preview`, ask Claude for changes, then run `npx hyperframes render` to write the MP4.
If you prefer React, Remotion follows the same pattern with its own agent skills; Claude Code + Remotion launch video walks through it, and Claude Motion vs Remotion vs HyperFrames compares the routes.
What if Claude already made the page?
- Ask Claude to port it. Claude Code can rewrite a finished page as a HyperFrames or Remotion composition, which is the most reliable way to a smooth MP4.
- JavaScript-driven animation: timecut opens the page in a headless browser, overrides its time functions and passes the frames to ffmpeg. Its README warns that changes made by CSS transitions or CSS animations will likely not render as intended (timecut).
- Canvas animation: CCapture.js captures canvas frames at a fixed frame rate (30, 60 or more) and can write MP4; you add the capturer to the page's render loop (CCapture.js).
- Short or simple clips: a screen recording may be enough, as long as the page plays smoothly on your machine.
How do you convert a recording to MP4?
Browsers and many recorders save WebM. ffmpeg converts it to an H.264 MP4 that plays almost everywhere: `ffmpeg -i input.webm -c:v libx264 -pix_fmt yuv420p output.mp4`. The `yuv420p` pixel format is what most players expect (FFmpeg H.264 guide).
Questions
Can Claude export an animation as MP4?
Claude Motion can, on Team and Enterprise plans (Claude Help Center). Otherwise Claude writes the animation as code and a renderer such as HyperFrames or Remotion turns it into MP4 on your machine.
What is the best free way to turn HTML into video?
For new work, ask Claude Code to build it as a HyperFrames composition and run `npx hyperframes render`; HyperFrames is free and Apache-2.0 (HyperFrames). For an existing JavaScript page, timecut renders it frame by frame.
Why is my screen recording of the animation choppy?
Recording happens in real time, so frames the browser draws late are lost. Frame-by-frame renderers such as HyperFrames, Remotion, timecut and CCapture.js wait for each frame, so the video stays smooth however heavy the scene is.
Do CSS animations work with timecut?
Often not. timecut controls JavaScript time functions and video playback, and its README says changes from CSS transitions or animations will likely not render as intended (timecut). Port the page to HyperFrames or Remotion instead.