Comparison

Remotion vs Hyperframes

Hyperframes vs Remotion is the same choice as Remotion vs Hyperframes: React components or plain HTML. Both turn web pages into video by drawing each frame in a real browser and encoding the result. Here is what each official docs page says, and how FrameJam reviews either render.

Facts about other tools are from their official docs and websites, as of Oct 2026. Each one links to its source, and all of them are listed under Sources.

At a glance

	Remotion	Hyperframes
You write	React components, registered as compositions	HTML, CSS and JavaScript
Build step	Bundler required (Hyperframes' comparison)	None; an `index.html` plays as-is
How motion is timed	Your code reads the frame with `useCurrentFrame()` and maps it with `interpolate()`	The renderer pauses and seeks GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI or another adapter
Existing web material	Rewritten as React components	HTML, CSS and a GSAP or Lottie animation usually drop in close to as-is
Rendering	Chrome Headless Shell, encoded with FFmpeg; `npx remotion render`	Headless Chrome, encoded with FFmpeg; `npx hyperframes render`
Preview	Remotion Studio	`npx hyperframes preview`; Studio marked "available, evolving"
Cloud rendering	Remotion Lambda on AWS	AWS Lambda, HeyGen-hosted cloud, and Google Cloud Run
License	Remotion License: free up to 3 employees, Company License above	Apache 2.0, no per-render fees
Agent support	Agent Skills and a Claude Code plugin	21 agent skills and a Claude Code plugin

As of Oct 2026; Remotion and Hyperframes rows re-read on October 17, 2026. Each cell links to the official page it comes from. Hyperframes facts without a more specific link are from its README or its HyperFrames vs Remotion guide.

Pick Remotion if

Hyperframes' own comparison says this plainly: Remotion is older and more established, with more templates, tutorials and production history. Remotion Lambda is the mature cloud renderer; Hyperframes calls its own newer.

Pick Remotion if your team already writes React. A Remotion video is more components, with props, TypeScript and the libraries you already use. The model is one function of the frame number: useCurrentFrame() and interpolate(), with no timeline to register. Remotion Studio edits those React compositions.

Check the license first. It is free for individuals, non-profits and for-profit companies with up to 3 employees. Bigger companies need a Company License; the pricing page lists $25 a month per seat for creators and $0.01 per render (with a $100 monthly minimum) for automation.

Pick Hyperframes if

Hyperframes is built for agents first: "Write HTML. Render video. Built for agents." Its comparison says you do not need React, a build step, or a component rewrite, and that an existing website, HTML prototype or browser animation is already close to a composition.

Pick Hyperframes if you want the agent to write most of the file, or you need a permissive license. It is Apache 2.0, with no per-render fees or commercial-use thresholds. It ships 21 agent skills and a Claude Code plugin, and its CLI can lint a composition before it renders. HeyGen built it and uses it in production.

It is also younger: its first npm release was 23 March 2026 (see the npm page), and its Studio is still marked as evolving. The README describes itself as inspired by Remotion.

The same prompt, both ways

The brief is identical. Only the tool and its render command change. FrameJam reviews renders/v1.mp4 either way. Hyperframes' own guide also shows the same three-second title card written as Remotion React and as Hyperframes HTML.

Ask for Remotion:

This is a Remotion project. Make a 30-second launch video for my app with the FrameJam playbook "Product Launch". Use real screenshots from ./screens, render with npx remotion render to renders/v1.mp4 and open it in FrameJam for review.

Ask for Hyperframes:

This is a Hyperframes project. Make a 30-second launch video for my app with the FrameJam playbook "Product Launch". Use real screenshots from ./screens, render with npx hyperframes render to renders/v1.mp4 and open it in FrameJam for review.

How FrameJam works with both

FrameJam isn't a third framework. It reviews the rendered file, so the loop is the same in either tool: the agent renders renders/v1.mp4, opens it in FrameJam, you comment on exact frames, and the agent gets each comment with a frame image and renders v2. FrameJam's playbooks set the method for the kind of video, and its styles set the look, in either tool. The agent never converts a project from one to the other.

More on each workflow: Remotion AI with your agent and the Hyperframes Claude workflow. For the wider list of code-video tools, see Remotion alternatives. The guide to making videos with Claude covers where each fits in the full process.

Playbooks to start from

A playbook is FrameJam's method for one kind of video. Your agent follows it in whichever tool the project uses.

make a SaaS launch video with AIProduct Launch: Your product goes in, a polished launch video with the real app on screen comes out.
make a narrated explainer video with AIExplainer: A topic, article or script goes in, a narrated animated explainer comes out.
make a motion design showreel with AIMotion Design Showreel: Give it your logo and a few things to show off, get a short motion piece cut to the beat.
make a 15-second launch teaser video with AILaunch Teaser: A name, one promise and a few real clips go in, a 15-second teaser that lands the name on the beat comes out.
make YouTube Shorts with AI from talking-head clipsSplit Screen Short: Raw talking-head clips go in, a tight vertical short that shows what you talk about while you say it comes out.
edit a YouTube intro hook with AIYouTube Hook: Your intro script or recording goes in, the 20–60 second opening that keeps people watching your long video comes out.
make a 3Blue1Brown math animation with AIMath Animation: A math or science idea goes in, a calm animated explainer in the style of 3Blue1Brown comes out.
edit shorts with AI, with layouts that switch as you talkDynamic Layout Short: A raw talking-head recording goes in, a vertical short that switches layout with what you say comes out.
make a cartoon music video with AISlopcore Cartoon: A song about a scene's memes goes in, a cartoon music video that explains every joke comes out, for a few dollars.

Questions

Is Remotion vs Hyperframes the same as Hyperframes vs Remotion?

Yes. Both phrases are the same choice: React components in Remotion, or plain HTML in Hyperframes. This page is the one answer for either order.

Is Hyperframes a Remotion alternative?

Yes, for most of the same jobs. Hyperframes' own comparison says both tools render web pages with headless Chrome and FFmpeg; Remotion's bet is React components and Hyperframes' bet is plain HTML. For other code-video tools, see Remotion alternatives.

Which is cheaper for a company?

As of Oct 2026, Hyperframes is Apache 2.0 with no per-render fees or commercial-use thresholds. Remotion is free for individuals, non-profits and companies with up to 3 employees; larger for-profit companies need a Company License. Remotion's pricing page lists $25 a month per seat for creators and $0.01 per render (with a $100 monthly minimum) for automation.

Do I need React?

Only for Remotion. A Remotion video is a React component registered as a composition. Hyperframes asks for an HTML file with data attributes; its docs say you do not need React, a build step, or a component rewrite.

Which one does FrameJam use?

Whichever your project uses. FrameJam reviews the rendered video, so the loop is the same. When a new project doesn't name a tool, the playbooks default to Hyperframes; ask for Remotion and the agent uses Remotion.

Can I switch an existing project from one to the other?

You can, but FrameJam never asks you to: its skill tells the agent to keep the project's own tool and render command. Hyperframes publishes a remotion-to-hyperframes skill for people who already want to port; FrameJam will not start that for you.

Do both work with Claude Code?

Yes. Remotion publishes Agent Skills and a Claude Code plugin. Hyperframes ships 21 agent skills and a Claude Code plugin. Both also work in Cursor and ChatGPT's Codex.

Which has better cloud rendering?

Hyperframes' own comparison says Remotion Lambda is the more mature, heavily documented system. Remotion Lambda renders in your AWS account. Hyperframes also documents AWS Lambda, plus HeyGen-hosted cloud rendering and Google Cloud Run. Both still use their own licenses.

Can I drop in existing HTML, CSS or GSAP?

That is Hyperframes' stated strength: HTML, CSS and a GSAP or Lottie animation usually drop in close to as-is. Remotion asks you to rewrite the same material as React components.

Does each tool have a visual editor?

Yes. Remotion Studio edits React compositions. Hyperframes Studio is listed as available and evolving; it edits the same DOM the renderer captures. Neither project's docs treat the studios as interchangeable.

Is Remotion open source?

Remotion's source is on GitHub under the Remotion License, which is not a standard OSI license: free for individuals, non-profits and companies with up to 3 employees. Hyperframes is Apache 2.0.

Which should an AI agent use?

If the project already has a tool, keep it. For a new project, Hyperframes is built for agents first and is the FrameJam default; Remotion is the natural pick if the team already writes React. The same FrameJam playbook and review loop work in either.

Guides

How to edit videos with ClaudeHow to edit videos with Claude: cut a raw recording, add animations, then point at the exact frames to change. Full video walkthrough.
How to make videos with ClaudeHow to make videos with Claude and how Claude video generation works: HyperFrames, Remotion or Manim, prompts, storyboards and feedback. Full video.
All guides to making videos with your AI agent

Sources

Checked on October 14, 2026. Prices and features change; the linked pages are current.

FrameJam is free, local and open source. Install it in Claude, ChatGPT or Cursor, and read how the review page works.