Skip to main content

REMOTION VS HYPERFRAMES

Remotion vs HyperFrames: two ways to make video with code

Both turn code into MP4, and both work with Claude Code and Codex. Remotion builds videos as React components; HyperFrames renders plain HTML, CSS and seekable animations. Here is how they differ, and where Claude Motion fits.

Try it on HyperFramesSee rendered examples

Facts checked against both GitHub repos on Oct 26, 2026 · Claude Motion is independent, not affiliated with Anthropic, HeyGen or Remotion

A paid Creator or Studio subscription is required. There is no Free plan.

REMOTION

  • Videos as React components
  • Remotion Studio preview
  • Free for individuals and teams up to 3
  • Company license above that

HYPERFRAMES

  • Videos as plain HTML and CSS
  • HyperFrames Studio timeline
  • Apache-2.0 open source, by HeyGen
  • Agent skills ship with it

REMOTION: REACT, REMOTION LICENSE · HYPERFRAMES: HTML, APACHE-2.0 · CLAUDE MOTION RENDERS ON HYPERFRAMES

Side by side

The biggest difference is what your agent writes. With Remotion it writes React: components, props and frame math with hooks like useCurrentFrame. With HyperFrames it writes an ordinary HTML page whose clips carry timing attributes, and any seekable animation, such as GSAP or CSS, plays on that timeline.

  • Remotion

    Best if your team already thinks in React and wants typed, reusable video components.

  • HyperFrames

    Best if you want any web page, chart or animation library to become a video with no build step.

  • Both

    Render locally to MP4 and run from Claude Code, Codex or Cursor.

Get started
REMOTIONHYPERFRAMES
Your agent writesReact componentsHTML, CSS and JS
TimingFrame math in codeAttributes on each clip
Preview and editRemotion StudioHyperFrames Studio timeline
Ready-made blocksTemplates and packagesAbout 450 registry blocks
Agent skillsRemotion skillsSeven skills in the repo
LicenseFree up to 3 people, then company licenseApache-2.0
NeedsNode.js and a React projectNode.js 22+ and FFmpeg

Which one fits you

Neither is better in general. Pick by what you start from and who owns the code afterwards.

  • Licensing

    For-profit companies with more than 3 employees need a Remotion company license. HyperFrames is Apache-2.0 for everyone.

  • Moving over

    HyperFrames ships a /remotion-to-hyperframes skill that ports Remotion code and checks it frame by frame.

  • Not only video

    Because HyperFrames is HTML, the same composition can also run as an interactive web page.

See the examples

A quick rule of thumb

  1. 01You already have a Remotion codebase or React design system → stay with Remotion.
  2. 02You want typed components and server rendering at scale → Remotion.
  3. 03You are a company over 3 people and want no license fee → HyperFrames.
  4. 04You want your agent to turn a web page, chart or doc into video → HyperFrames.

Where Claude Motion fits

Claude Motion is a set of skills and a CLI that sit on top of HyperFrames. You hand your agent a document, script or idea; it plans the scenes in a motion style, writes the HyperFrames composition, adds voiceover and music if you want, and renders the MP4 on your computer. You still get plain HTML you can open and edit.

  • Start from a document

    Docs, slides, lesson notes or a blog post, not a blank scene.

  • Edit on a timeline

    Retime and trim in HyperFrames Studio, or just ask your agent.

  • Interactive output

    Charts, quizzes and filters in a share link, plus the MP4.

Browsing styles works for any connected account. Creating, rendering, voiceover and sharing need a Creator ($19.9/mo) or Studio plan. HyperFrames and Remotion themselves can be used without Claude Motion.

Install Claude Motion

Rendered on HyperFrames

Every card is a real HyperFrames render made by an agent from a brief. Open one to see how it was built.

Open the example library

What Claude Motion adds on top of HyperFrames

  • Motion styles

    Pick a style or let your agent design freely.

  • Animated charts

    ECharts built in, styled to match.

  • Quizzes & drag-and-drop

    Interactive by default.

  • HyperFrames timeline

    Edit clips, timing and blocks.

  • Voiceover

    English and Chinese, brand names said right.

  • Music

    Generate now or add later.

  • Share links

    Public or password, with stats.

  • MP4 render

    Local and deterministic.

Make your first HyperFrames video with Claude Motion in 3 steps

  1. 1Paste the one-line install from the install guide into Claude Code or Codex.
  2. 2Drop in your doc and pick a motion style; choose music now or later.
  3. 3Fine-tune on the HyperFrames timeline, then render MP4 or share a link.
Install Claude Motion: run npx -y claudemotion@latest setup and follow the output.

First run opens your browser to sign in — one click, no terminal.

Your questions, answered

Is HyperFrames a Remotion alternative?

Yes, for most agent-made videos. Both render code to MP4. HyperFrames uses plain HTML instead of React and is Apache-2.0, so there is no company license to buy. Remotion is the more mature choice if you want React components.

Is HyperFrames free?

Yes. HyperFrames is open source under Apache-2.0 and renders on your own computer. It needs Node.js 22 or newer and FFmpeg.

Is Remotion free?

For individuals, non-profits and for-profit companies with up to 3 employees, yes, including commercial use. Larger for-profit companies need a Remotion company license.

Can I convert a Remotion project to HyperFrames?

HyperFrames publishes a /remotion-to-hyperframes skill for coding agents that ports Remotion code and compares the result frame by frame. Check the output yourself before you replace a production pipeline.

Do I need Claude Motion to use HyperFrames?

No. Install HyperFrames and its skills from GitHub and ask your agent for a video. Claude Motion adds motion styles, document-to-video planning, voiceover, charts, quizzes and share links on top.

Explore more

Turn your next document into a HyperFrames video

Get Claude Motion now