# Claude Motion vs Remotion vs HyperFrames: Which Route to Use

https://createmotion.io/guides/claude-motion-vs-remotion-hyperframes/ · Written by motif with Claude Fable 5.1 · Facts checked 2026-11-05

Claude Motion is a beta Claude artifact type on Team and Enterprise plans that writes animations as code and exports MP4. Chat and Claude Design artifacts run on every plan but do not export MP4. Claude Code with Remotion (React) or HyperFrames (plain HTML) renders MP4 locally on any paid plan, with more setup and more control.

### What are the four ways to make motion with Claude?

**Claude Motion** is a beta feature inside Claude. It writes each animation as code with no video model involved, so you can change any word, number or timing, then export an MP4 ([@claudeai on X](https://x.com/claudeai/status/2108271558170976743)). It launched in beta on Team and Enterprise on 2026-10-08 ([Claude: dashboards and motion](https://claude.com/resources/articles/dashboards-and-motion)).

A **chat or Claude Design artifact** uses the general artifact system, available on Free, Pro, Max, Team and Enterprise. Designs export as a .zip, PDF, PowerPoint or standalone HTML; among artifact templates, only Motion animations export as MP4 ([Claude Help Center: artifacts](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them)).

**Claude Code + Remotion** renders React components to video with npx remotion render ([Remotion docs: render](https://www.remotion.dev/docs/render)). **Claude Code + HyperFrames** uses HeyGen's open-source framework that turns HTML, CSS, media and seekable animations into deterministic MP4s ([HyperFrames README](https://github.com/heygen-com/hyperframes)).

### How do the four routes compare?

Four routes compared, as of 2026-10-16; Setup row updated 2026-10-27. Sources: Claude Help Center, Claude pricing, Remotion docs and LICENSE.md, HyperFrames README, docs and releases.

|  | Claude Motion | Chat / Claude Design artifact | Claude Code + Remotion | Claude Code + HyperFrames |
| --- | --- | --- | --- | --- |
| Access / plans | Beta; Team (on by default), Enterprise (owner enables) | Free, Pro, Max, Team, Enterprise | Claude Code on any paid plan or API credits; Remotion free up to 3 employees, else Company License | Claude Code on any paid plan or API credits; Apache 2.0, no per-render fees |
| Output | Animation written as code | Interactive artifact or design | React composition, video or still | Plain HTML/CSS composition, video |
| MP4 | Yes, Export > MP4 | No; Designs export .zip, PDF, PowerPoint, HTML | Yes, npx remotion render (H.264 by default); FFmpeg built in since 4.0 | Yes, npx hyperframes render; FFmpeg required |
| Setup | None; Output picker > Motion | None; Cloud code execution and file creation (Create and edit files) on | Node 16+ or Bun 1.0.3+; npx skills add remotion-dev/skills or the Remotion Claude Code plugin | Node.js 22+, FFmpeg; Claude Code plugin |
| Editability | Chat or editor; one detail changes, rest stays | Chat or direct edit; legacy artifacts: view code, copy, download | Code; Studio, plus a skill that makes code editable in Studio | Code; Studio (available, evolving) |
| Best for | Explainers, data viz, no setup | Interactive pieces, mockups, prototypes | React teams, precisely specified films, more templates and tutorials | Plain HTML, no build step, Claude Design handoff |
| Limits | No realistic footage or people; uses plan limits | No MP4 | Company License above 3 employees; licence changes slightly in 5.0 | Pre-1.0 (v0.8.x); younger and less established than Remotion |

### Who can use each route, as of 2026-10-16?

Claude Motion is on by default on Team; on Enterprise an owner turns it on in Organization settings > Artifacts ([Claude Help Center: Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)). Team Standard seats cost $20 per seat per month billed annually or $25 monthly, for teams of 2 to 150 ([Claude pricing](https://claude.com/pricing)).

Artifacts need Cloud code execution and file creation (called Create and edit files in the updated Settings layout) turned on. Chat artifacts made before September 16, 2026 are legacy: they keep working, but you cannot make new ones. In the iOS and Android apps you can ask for a design, deck or doc, view it in the Artifacts tab and edit it; changing sharing settings needs Claude on the web or desktop ([Claude Help Center: artifacts](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them)).

Claude Code is included in all paid plans, shares their usage limits, is not on the Free plan, and can switch to pay-as-you-go API credits through a Console account ([Claude pricing](https://claude.com/pricing)). Remotion is free for individuals, for-profit companies with up to 3 employees, non-profits and evaluation; larger companies need a Company License, and the licence will slightly change in Remotion 5.0 ([Remotion LICENSE.md](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md)). HyperFrames is Apache 2.0 with no per-render fees or commercial-use thresholds ([HyperFrames README](https://github.com/heygen-com/hyperframes)).

### Which routes export MP4?

In Claude Motion, click Export and choose MP4; new animations are private to you until you share them ([Claude Help Center: Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)). Remotion renders with npx remotion render, uses the H.264 codec by default ([Remotion docs: encoding](https://www.remotion.dev/docs/encoding)), and since 4.0 FFmpeg is baked into the renderer ([Remotion docs: v4 migration](https://www.remotion.dev/docs/4-0-migration)). HyperFrames renders locally with npx hyperframes render and requires FFmpeg ([HyperFrames README](https://github.com/heygen-com/hyperframes)).

Note: The help center documents no MP4 export for chat or Claude Design artifacts. HyperFrames documents a handoff: save a Claude Design project to disk, then open that folder with a coding agent, which checks timing, motion, media, captions and rendering ([HyperFrames docs: Claude Design](https://hyperframes.heygen.com/guides/claude-design)).

### How much setup does each route need?

Claude Motion needs no install: select Output in the message box and choose Motion ([Claude Help Center: Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)). The Claude Code routes need a local toolchain.

#### How do you set up Claude Code + Remotion?

1. Install Node 16+ or Bun 1.0.3+ ([Remotion docs](https://www.remotion.dev/docs/)).
2. Run npx skills add remotion-dev/skills; the skills cover rendering and Studio preview ([Remotion: Agent Skills](https://www.remotion.dev/docs/ai/skills)).
3. Or install Remotion's Claude Code plugin, which includes the Agent Skills: in the Claude desktop app select Code, open Customize, choose Plugins > Discover, search for remotion and click Add. From a terminal: claude plugin marketplace add remotion-dev/claude-code-plugin, then claude plugin install remotion@remotion, and restart Claude Code ([Remotion docs: Claude Code plugin](https://www.remotion.dev/docs/ai/claude-code-plugin)).
4. Ask Claude Code for a composition, then run npx remotion render ([Remotion docs: render](https://www.remotion.dev/docs/render)).

#### How do you set up Claude Code + HyperFrames?

1. Install Node.js 22+ and FFmpeg ([HyperFrames README](https://github.com/heygen-com/hyperframes)).
2. Run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes ([HyperFrames README](https://github.com/heygen-com/hyperframes)).
3. Ask Claude Code for a composition, preview it in HyperFrames Studio, then run npx hyperframes render ([HyperFrames README](https://github.com/heygen-com/hyperframes)).

### How editable is each result?

Each Claude Motion animation is code, so you can change one detail, like a word, a number or the timing, and the rest stays as it was, either by chatting or directly in the editor ([Claude Help Center: Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)). Archive example: [Claude Motion one-shot a 30-second real estate explainer](https://createmotion.io/motions/x-2110685315979448355/).

HyperFrames' own comparison guide says both Remotion and HyperFrames ship a visual editor that saves changes back to source ([HyperFrames vs Remotion, vendor guide](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion)). Remotion has a skill for making code editable in Studio ([remotion-dev/skills](https://github.com/remotion-dev/skills)); HyperFrames Studio is listed as available and evolving ([HyperFrames README](https://github.com/heygen-com/hyperframes)).

### Which route fits which job?

- **Quick explainer or data viz on Team or Enterprise**: Claude Motion. Example: [the new claude motion artifact + opus 5.5 is truly insane for data viz stuff](https://createmotion.io/motions/x-2108932593911816392/).
- **Interactive piece, game or mockup on any plan**: a chat or Claude Design artifact. Example: [Popcorn hero battles a moon and a diner robot](https://createmotion.io/motions/archive-2104045641706189192/), a mini-game shared as a Claude artifact rather than a pure animation.
- **Long, precisely specified film**: Claude Code + Remotion. Example: [History of AI told in a code-rendered three-minute film](https://createmotion.io/motions/archive-2102844654169575547/), prompted for Remotion at 1920x1080, 30 fps, exactly 180 s.
- **Plain HTML, no build step, or a Claude Design handoff**: Claude Code + HyperFrames. Examples: [Editor UI mockup shows a redwood forest clip](https://createmotion.io/motions/archive-2102441708395041170/) and [Image grid swirls into a taste cosmos for a moodboard app](https://createmotion.io/motions/archive-2103481296018092204/).

### Can Hermes Agent make motion with Claude?

Yes, as a different harness for the same code routes. Hermes Agent is Nous Research's open-source, MIT-licensed agent; version 0.22.7 came out on 3 November 2026 ([Hermes Agent on GitHub](https://github.com/NousResearch/hermes-agent)). It uses the same SKILL.md format as Claude Code (the [agentskills.io](https://agentskills.io) standard), can import Claude Code's skills and settings with `hermes import-agent claude-code`, and can run Claude models with an Anthropic API key. Checked 2026-11-05.

- **Built-in creative skills:** manim-video, ascii-video, p5js and claude-design ship in the main skills folder ([skills/creative](https://github.com/NousResearch/hermes-agent/tree/main/skills/creative)).
- **HyperFrames:** an optional hyperframes skill installs HeyGen's renderer, so Hermes renders HTML video the same way Claude Code does ([optional-skills/creative](https://github.com/NousResearch/hermes-agent/tree/main/optional-skills/creative)).
- **Remotion:** Hermes ships no Remotion skill; Remotion's own [agent skills](https://github.com/remotion-dev/skills) use the same format and can be added.
- **What motif has seen:** 3 archived videos mention Hermes, and none says the creator ran a Claude model inside Hermes. Until creators post such work, treat this route as possible rather than proven.

### What are the limits and open questions?

Claude Motion does not use a video generation model, so it does not create realistic footage or people, and longer or more complex animations use more of your plan limit ([Claude Help Center: Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)). HyperFrames is still pre-1.0 (v0.8.x, checked 27 October 2026; it ships several patch releases a day) ([HyperFrames releases](https://github.com/heygen-com/hyperframes/releases)), and its own guide concedes Remotion is older and much more established ([HyperFrames vs Remotion, vendor guide](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion)); treat comparisons from that guide as vendor claims.

Reported, not confirmed: **Send to HyperFrames Studio from Claude Motion**: [@HyperFrames_ on X](https://x.com/HyperFrames_/status/2108274305570390403) says you choose Send to and pick HyperFrames. Anthropic's launch article names HeyGen among tools for finishing an animation, not HyperFrames or a Send to menu. **Timing head-to-head**: [@koumei_ai5566](https://x.com/koumei_ai5566/status/2108319598735130977) reports Claude Motion took about 10 minutes with no audio versus about 30 minutes with narration for Claude Code + HyperFrames, on the same script; one person's test, archived as [Claudeの新機能Motion来たぁぁぁ！！！](https://createmotion.io/motions/x-2108319598735130977/). **GIF export, built-in synth audio, no audio import**: [@ryu_f_web](https://x.com/ryu_f_web/status/2108504471693385895); official docs mention MP4 only. **Automatic music, drag-to-reorder clips**: [@erhanmeydan](https://x.com/erhanmeydan/status/2108931418365501716).

### What does the motif archive show?

Of 3,599 motions as of 2026-10-15, 494 mention Claude Code, 244 Remotion, 87 HyperFrames and 19 both. Only 13 name Claude Motion, which launched on 2026-10-08. Among Remotion entries 164 credit Opus 5.5 and 4 credit Sonnet 5.5, as stated by the creators.

### FAQ

#### Can Pro or Max users use Claude Motion?

Not as of 2026-10-16; it is in beta on Team and Enterprise only ([Claude Help Center](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)). Pro and Max include Claude Code, so Remotion or HyperFrames are the MP4 routes there ([Claude pricing](https://claude.com/pricing)).

#### Does Claude Motion generate realistic video?

No. It does not use a video generation model, so it does not create realistic footage or people ([Claude Help Center](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)).

#### Do I need FFmpeg for Remotion or HyperFrames?

Not for Remotion, where FFmpeg is baked into the renderer since 4.0 ([Remotion docs](https://www.remotion.dev/docs/4-0-migration)). HyperFrames requires FFmpeg and Node.js 22+ ([HyperFrames README](https://github.com/heygen-com/hyperframes)).

#### Is Remotion free to use?

Free for individuals, for-profit companies with up to 3 employees, non-profits and evaluation; larger for-profit companies need a Company License ([LICENSE.md](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md)).

#### Can a Claude Design artifact export MP4?

No. Designs export as .zip, PDF, PowerPoint or standalone HTML; among artifact templates, only Motion animations export as MP4 ([Claude Help Center](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them)).

#### Can I use Hermes Agent instead of Claude Code for motion?

Yes, for the code routes. Hermes Agent reads the same SKILL.md skills, imports Claude Code's with `hermes import-agent claude-code`, ships Manim and p5.js skills and an optional HyperFrames skill, and can run Claude models with an Anthropic API key ([Hermes Agent on GitHub](https://github.com/NousResearch/hermes-agent)).

### Sources

- [Claude Help Center: Get started with Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)
- [Claude Help Center: What are artifacts and how do I use them?](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them)
- [Claude: Build live dashboards and animate explainers with Claude](https://claude.com/resources/articles/dashboards-and-motion)
- [@claudeai on X (2026-10-08)](https://x.com/claudeai/status/2108271558170976743)
- [Claude pricing](https://claude.com/pricing)
- [Remotion docs: Render your video](https://www.remotion.dev/docs/render)
- [Remotion docs: Encoding guide](https://www.remotion.dev/docs/encoding)
- [Remotion docs: Getting started](https://www.remotion.dev/docs/)
- [Remotion: Agent Skills](https://www.remotion.dev/docs/ai/skills)
- [Remotion docs: Claude Code plugin](https://www.remotion.dev/docs/ai/claude-code-plugin)
- [remotion-dev/skills README](https://github.com/remotion-dev/skills)
- [Remotion docs: Upgrading from v3 to v4](https://www.remotion.dev/docs/4-0-migration)
- [Remotion LICENSE.md](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md)
- [heygen-com/hyperframes README](https://github.com/heygen-com/hyperframes)
- [heygen-com/hyperframes releases](https://github.com/heygen-com/hyperframes/releases)
- [HyperFrames docs: HyperFrames vs Remotion (vendor)](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion)
- [HyperFrames docs: Claude Design guide](https://hyperframes.heygen.com/guides/claude-design)
- [@HyperFrames_ on X](https://x.com/HyperFrames_/status/2108274305570390403)
- [@koumei_ai5566 on X](https://x.com/koumei_ai5566/status/2108319598735130977)
- [@ryu_f_web on X](https://x.com/ryu_f_web/status/2108504471693385895)
- [@erhanmeydan on X](https://x.com/erhanmeydan/status/2108931418365501716)
- [Hermes Agent on GitHub (README, skills)](https://github.com/NousResearch/hermes-agent)
- [Hermes Agent releases](https://github.com/NousResearch/hermes-agent/releases)
- [agentskills.io](https://agentskills.io)