Hyperframes vs Remotion: Which to Use with Claude

Hyperframes and Remotion do the same job: they turn code into video by opening each frame in a headless browser and encoding the frames with FFmpeg. Remotion, the older of the two, uses React components. Hyperframes, released by HeyGen in 2026, uses plain HTML with timing attributes, and its README says it was inspired by Remotion. Pick Remotion if your team writes React and wants a mature tool. Pick Hyperframes if you want plain HTML, a permissive licence, and workflow skills built for agents.

At a glance

	Hyperframes	Remotion
Made by	HeyGen	Remotion
You write	HTML, CSS and JavaScript	React and TypeScript
Animation	GSAP, CSS, Lottie, Three.js, Anime.js or WAAPI, seeked to each frame	A function of the current frame number
Build step	None; an index.html plays as it is	A bundler
Cloud rendering	Local, AWS Lambda, HeyGen-hosted	Remotion Lambda
Licence	Apache 2.0	Source-available Remotion Licence; company licence above three employees
Agent skills	About 20, including workflow skills	About a dozen, focused on Remotion itself
Maturity	New in 2026	Older, with more templates, tutorials and answered questions

The rows on authoring, build step, rendering and licence come from the Hyperframes README and the Remotion licence. The point on maturity is one Hyperframes' own comparison guide makes.

How you write a video

In Remotion, a video is a React component. The component reads the current frame number and returns what that frame shows. To fade a title in, you calculate its opacity from the frame. This is a simple model to hold in your head: every frame is a pure function of its number. If you already have React components, a design system or a charting library, you can use them directly.

In Hyperframes, a video is an HTML file. Elements carry data- attributes for when they start, how long they last and which track they sit on. Animation is written with ordinary web tools such as a GSAP timeline or CSS keyframes. At render time Hyperframes pauses the animation and seeks it to the exact moment of each frame before capturing it. An existing web page, HTML prototype or browser animation is already close to a composition.

For an agent, both work. Claude writes React and HTML equally well. The difference shows when you want to edit by hand or reuse what you already have.

Licence

This is the clearest difference.

Hyperframes is Apache 2.0. Any company can use it commercially, with no seat count and no licence review.

Remotion is free for individuals, for-profit organisations with up to three employees, non-profits, and anyone evaluating it before commercial use. Other for-profit companies need a company licence from remotion.pro. The licence file notes that the terms change slightly with Remotion 5.0.

If you are a freelancer or a small team, both are free. If you work at a larger company, Remotion means a purchase and Hyperframes does not.

Skills for Claude

Both projects publish official skills and a Claude Code plugin.

Hyperframes ships a router skill, HyperFrames, that picks a workflow for any "make me a video" request. The workflows are complete recipes:

• Product Launch Video from a product URL, script or brief
• Faceless Explainer from an article or a topic
• Motion Graphics for short kinetic type, stat hits and logo stings
• PR to Video from a GitHub pull request
• Embedded Captions for an existing talking-head video

Domain skills cover animation, keyframes, audio and media. Install them with npx skills add heygen-com/hyperframes, or in Claude Code with the plugin from the official marketplace: /plugin install hyperframes@claude-plugins-official. The Hyperframes plugin page has the details.

Remotion ships Remotion Best Practices as its entry point, with skills to create a project, write markup, open the Studio, render, and add captions or maps. Install them with npx skills add remotion-dev/skills, or npx remotion skills add inside a project. The full setup is in Remotion with Claude Code.

Hyperframes also has Remotion to Hyperframes, a skill that ports an existing Remotion composition to Hyperframes HTML.

Which to choose

Choose Remotion when:

• your team already writes React and wants to reuse its components
• you want the larger body of templates, tutorials and community answers
• you need Remotion Lambda, its established cloud renderer
• you qualify for the free licence, or your company will buy one

Choose Hyperframes when:

• you want to write or edit videos as plain HTML, with no build step
• your company needs a permissive open-source licence
• you want ready-made workflows, such as launch videos and explainers, that the agent follows end to end
• your source material is already a web page, prototype or browser animation

If you are unsure, try the same prompt in both. Each takes a few minutes to set up, and the first render will show which way of working you prefer.

Where to go next

• For other ways Claude can produce video, such as editing footage or calling AI video models, read Can Claude make videos?.
• Browse every video and media skill in the directory.