Remotion or HyperFrames for making videos with an agent
React or HTML/CSS, license, rendering, use cases: how to choose between Remotion and HyperFrames when a coding agent writes the video.
Updated on
Remotion and HyperFrames both turn web pages into video: a browser draws each frame, then an encoder assembles the MP4. The difference is what your agent has to write: a React component for Remotion, an HTML file for HyperFrames.
How each one works
Remotion describes a video as a function of the frame number. The component reads the current frame and returns what to draw, and timing is computed in frames. The project is a React and TypeScript project. Remotion documents use with Claude Code, Codex, Kimi Code and OpenCode, and offers Agent Skills installed with npx remotion skills add.
HyperFrames (an open-source project from HeyGen) describes a video as an HTML page. data-start and data-duration attributes say when each element is on screen, and a paused GSAP animation says how it moves. At render time the engine seeks the animation to the exact moment of each frame before capturing it. Its skills are installed with npx skills add heygen-com/hyperframes.
License
This is often the deciding factor.
- HyperFrames: Apache-2.0, with no seat count and no license review.
- Remotion: its own license, not a standard open-source one. Free for individuals and companies of up to three people, commercial use included. Above that, a company license is required. At the time of writing, the site lists $25 per month per user for manual creation ("Creators"), or $0.01 per render with a $100 monthly minimum for automation ("Automators"). An Enterprise plan starts at $500 per month.
Prices change: read the official page again before you commit.
Rendering
Both tools render in a browser and export MP4. Both can render on AWS Lambda. According to HeyGen's guide, HyperFrames also renders locally, on HeyGen's cloud and on Google Cloud Run. That guide is written by the makers of HyperFrames, and it admits that Remotion's Lambda rendering is older and better documented.
On reliability, HyperFrames imposes rules: a paused animation, no system clock, no unseeded randomness. Remotion needs fewer, because a pure component depends only on the frame number.
Which one to pick
| Criterion | Remotion | HyperFrames |
|---|---|---|
| What the agent writes | React and TypeScript | HTML, CSS and JavaScript (GSAP) |
| Timing | In frames, read from the frame number | In seconds, on a timeline the engine steps through |
| License | Its own; paid above three people | Apache-2.0 |
| Starting material | Existing React components | Existing HTML pages, GSAP or Lottie animations |
| Maturity | Older, more templates and tutorials | Newer |
| Hosted rendering | AWS Lambda | AWS Lambda, HeyGen cloud, Google Cloud Run |
Remotion fits if your team already writes React: components, design system and charting libraries carry over as they are. HyperFrames fits if you start from a website, an HTML mockup or a GSAP animation, or if the license must stay free of conditions.
In its own test, HeyGen gave the same request to an agent with each tool. Both videos rendered in about twelve minutes. One run proves nothing about quality, but what you are left with differs: a React project on one side, HTML files on the other.
Moving from one to the other
HyperFrames ships a skill, remotion-to-hyperframes, that translates a Remotion composition into HTML. It then compares both renders frame by frame and notes what it could not translate. It refuses animations driven by useState or useEffect and third-party React UI libraries. There is no way back.
Catalog resources
The PalateKit catalog ships no scripts: these resources guide the agent, they do not render the video for it. For videos made in code, see the motion design templates. A DESIGN.md file gives the agent your brand (colors, fonts, spacing) before it writes the composition. Skills cover neighboring tasks, and video prompts help you word the request. To install a resource, follow Install your first resource.
Sources
Frequently asked questions
Is Remotion free?
For individuals and companies of up to three people, yes: the free license covers commercial use. Above that, a paid license is required. Check the current terms on Remotion's site.
Does HyperFrames require React?
No. A composition is an HTML file with timing attributes and a GSAP animation, technologies coding agents know well.
Can I move from Remotion to HyperFrames?
Yes, in that direction only: HyperFrames ships a migration skill. It refuses compositions driven by React state (useState, useEffect) and third-party UI libraries.