Vyond alternatives for animated explainer videos (2026)Read
All posts

Insight

HyperFrames vs Remotion: which code-to-video framework should you use? (2026)

November 2, 20268 min read

TL;DR

Pick HyperFrames if an AI agent will write most of your videos, your team thinks in HTML and CSS, or you want an Apache 2.0 license with no fees at any company size. Pick Remotion if your team already writes React, you need data-driven videos at scale, or you want the older ecosystem with more examples and a proven cloud renderer. Both turn code into MP4. Neither is a video editor, so if nobody on your team writes code, look at the alternatives at the end.

Until recently this wasn't much of a contest. If you wanted to make videos with code, you used Remotion. Then HeyGen open-sourced HyperFrames, built it around plain HTML instead of React, and shipped it with skills for coding agents like Claude Code, Codex and Cursor. Now a lot of teams are asking the same question: which one should we build on?

The short version is that they solve the same problem with different bets. Remotion bets on React. HyperFrames bets that HTML is what both people and AI models already write best. Here's how that plays out in practice.

What is the difference between HyperFrames and Remotion?

Remotion lets you write videos as React components. Every frame is a render of your component at a given frame number, which you read with useCurrentFrame(). You animate by computing values from that number. If you know React, it feels natural. If you don't, it's a lot to learn just to move a logo.

HyperFrames lets you write videos as HTML files. You lay out the scene with HTML and CSS, add data attributes for timing and tracks, and animate with whatever you like, as long as the animation can be seeked: GSAP timelines, CSS animations, Lottie, Three.js, Anime.js or the Web Animations API. The renderer opens the page in headless Chrome, seeks to each frame, and encodes the result with FFmpeg.

Both are deterministic: the same code gives you the same video every time, which is the whole point of making video with code. The difference is the language you write it in, and that decides who on your team (or which agent) can work on it.

HyperFrames vs Remotion at a glance

HyperFrames and Remotion compared on who makes them, what you write, timing, build step, license, cost, rendering, AI agent support and best fit, checked November 3, 2026
HyperFramesRemotion
Made byHeyGen (open source)Remotion (source-available)
You writeHTML, CSS and seekable JavaScript animation (GSAP, Lottie, Three.js and more)React components (TSX)
TimingData attributes, in secondsFrame numbers, via useCurrentFrame()
Build stepNone: an index.html composition plays as-isA bundler is required
LicenseApache 2.0, free at any company sizeFree for individuals, non-profits and teams of up to 3; a Company License above that
Cost for a bigger companyUS$0 license (you pay for your own rendering)US$25 a month per seat, or US$0.01 per render with a US$100 monthly minimum; Enterprise from US$500 a month
RenderingHeadless Chrome and FFmpeg, through the CLI, locally, in Docker or on AWS Lambda; needs Node.js 22+ and FFmpegCLI or Node API, plus Remotion Lambda, Cloud Run and Vercel for cloud rendering
AI agent supportOfficial skills and plugins for Claude Code, Codex, Cursor and Gemini CLIOfficial Agent Skills for Claude Code, Codex, Cursor and others
Best forAgent-written videos, web teams, motion that looks like a websiteReact teams, data-driven video at volume, mature cloud rendering

License and pricing checked on github.com/heygen-com/hyperframes and remotion.dev on November 3, 2026. Prices change, so check before you commit.

Which one is better for AI-generated video?

This is the question most people are really asking, because the reason both projects are suddenly popular is that coding agents can now write decent motion graphics on their own.

HyperFrames was designed for this. It ships a set of skills you install into your agent, and the CLI is non-interactive by default, so an agent can run init, preview and render without getting stuck on a prompt. There's no build step either: the composition is a web page that plays as it is. More important, the output is HTML, which is the thing language models have seen more of than anything else. When an agent writes a GSAP timeline on a web page, it's on home turf.

Remotion works with agents too. It now maintains its own official agent skills, for creating projects, writing compositions, rendering, captions and maps, and plenty of people generate Remotion videos with Claude or Cursor every day. The friction is that the agent has to get React, the frame math and Remotion's own APIs right at the same time. When it goes wrong, the error is usually a React error, not a video one, which is harder for a non-developer to fix.

If a human developer will own the code long term, this matters less. If an agent writes the first draft and someone tweaks it by asking for changes, HyperFrames has the edge right now.

Is HyperFrames free? And what does Remotion cost?

HyperFrames is Apache 2.0. You can use it commercially at any company size, with no per-render fees. You still pay for wherever you render it: your own machine, a server, or a cloud function. A few optional agent skills, such as rebuilding an existing video as a HyperFrames project, need HeyGen's paid HyperFrames Pro. The framework itself doesn't.

Remotion is free for individuals, non-profits and teams of up to three people. Above that you need a Company License, and the count is your whole organization, not just the people who use Remotion. On remotion.dev the options are US$25 per month for each person who writes Remotion code (by hand or with an agent), or US$0.01 per rendered video with a US$100 monthly minimum if you render programmatically or embed the Remotion Player. An Enterprise License has a US$500 monthly minimum. For a five-person team building a product on top of it, that's a real but modest line item: the US$100 minimum covers 10,000 renders a month. For a company rendering hundreds of thousands of personalized videos a month, do the math first.

Fair to Remotion: the license fee pays for a full-time team maintaining it, and Company License holders get answered first, which you won't get from an open-source repo.

Where does Remotion still win?

Ecosystem. Remotion has been around much longer. There are more templates, more examples, more answered questions and more people who have hit your exact bug before.

Data-driven video at scale. If you're generating thousands of videos from a database, one per customer, Remotion's React model makes it easy to pass data in as props, and Remotion Lambda is a well-trodden path for rendering in parallel in the cloud. HyperFrames has an AWS Lambda render path too, but it's newer.

React teams. If your product is already React, your components, design system and types can come straight into your videos. That's a big deal and HyperFrames can't match it.

Where does HyperFrames win?

No React required. Anyone who can write a web page can write a HyperFrames video. That widens the group of people (and agents) who can touch it.

Use any web animation library. If your team already animates with GSAP or Lottie for the website, the same skills and even the same code carry over.

License. No seat counting, no render counting, no conversation with procurement.

Built for agents. The skills, the CLI defaults and the HTML-first design all assume an AI is doing a lot of the writing.

What are the best HyperFrames alternatives?

If neither fits, these are the options worth a look, sorted by who writes the video.

Remotion, covered above. The default alternative if you know React.

Motion Canvas. MIT-licensed. You write scenes in TypeScript, they're drawn to a canvas instead of the DOM, and an editor previews them in real time. It's loved for hand-crafted explanatory videos and visualizations synced to a voice-over, the kind of thing you'd see in a programming or math YouTube video. Less suited to automated pipelines.

Revideo. Also MIT-licensed and also TypeScript scenes, with a headless render API, so you can generate videos from a server, a queue or a cron job, plus a React player for previews. It runs anywhere Node and a headless browser run, including Google Cloud Run. Good for template-driven video at volume if you like writing scenes as code.

No-code and AI motion tools. If nobody on the team wants to touch code at all, a framework is the wrong layer. There are now tools that do the writing for you: you describe the video in plain language, an AI builds the animation, and you export an MP4. Our roundup of AI motion graphics tools compares them, and if you came here from HeyGen's other products, our HeyGen alternatives guide covers the avatar side.

So which should you pick?

Ask who will write the code. If it's a React developer, Remotion. If it's an AI agent, or a web developer who'd rather write HTML and GSAP, HyperFrames. If it's nobody, neither: use a tool that writes it for you.

And if you're still unsure, build the same 10-second clip in both. It takes an afternoon, and you'll know by the end which one your team wants to live in.

Frequently asked questions

Is HyperFrames better than Remotion?
Neither is better across the board. HyperFrames is better when an AI agent writes the video or your team prefers HTML and CSS. Remotion is better for React teams and for data-driven video at high volume.
Is HyperFrames free?
Yes. HyperFrames is open source under the Apache 2.0 license, free for commercial use at any company size, with no per-render fees. A few optional agent skills need HeyGen's paid HyperFrames Pro, but the framework, the CLI and the core skills don't.
What is a good HyperFrames alternative?
Remotion if you write React, Motion Canvas for hand-crafted explanatory videos, Revideo for rendering from a server or a queue, or an AI motion graphics tool if you don't want to write code at all.
Do I have to pay for Remotion?
Only if your organization has four or more people, counting everyone, not just the people who use Remotion. Individuals, non-profits and teams of up to three use it free. Bigger companies need a Company License, priced per seat or per render.
How do I start a HyperFrames project?
Install Node.js 22 or newer and FFmpeg, then run npx hyperframes init. Use npx hyperframes preview to watch it in the browser and npx hyperframes render to export an MP4.
Can AI write Remotion or HyperFrames videos?
Yes. Both ship official agent skills for coding agents like Claude Code, Codex and Cursor. HyperFrames output is plain HTML with no build step, which tends to make it easier for agents to get right on the first try.

Licenses and prices were checked on github.com/heygen-com/hyperframes, remotion.dev and remotion.pro on November 3, 2026 and change often. Disclosure: this comparison is published by fluos, an AI motion graphics tool. fluos is built on HyperFrames and uses it to render the videos it makes. We have no commercial relationship with HeyGen or Remotion.

Ready to meet your motion agent?

Describe one prompt — the agent builds a polished motion video you can iterate in minutes.