HyperFrames vs Remotion: which one fits your Claude Code videos?

Full disclosure first: our puppy reels were rendered with HyperFrames. Our trackpad and AirPods reels came from a small renderer of our own that works on the same idea: headless Chrome plays the scene frame by frame, FFmpeg encodes it. We’re not affiliated with HeyGen, the company behind HyperFrames, or with Remotion AG, the company behind Remotion. So this page sticks to what each project documents.

HyperFrames vs Remotion: the short answer

If you or your team already write React, Remotion is the natural pick. It’s the older project, and even HyperFrames’ own comparison concedes that Remotion offers more templates and tutorials and a much longer production history.⁵ If you’re after a Remotion alternative with a permissive open-source license, where Claude writes plain HTML pages you can open in a browser, HyperFrames fits. For a 60-second vertical explainer reel like the ones in our Claude course for 3D explainer reels, either tool can render the format.²⁶ The deciding factors are the license and the kind of project you want to be left with.

What HyperFrames is

HyperFrames is an open-source framework that turns HTML, CSS, media and seekable animations into MP4 videos, and the same input always gives the same output.¹ A video is an ordinary HTML page. The root element declares size and length with attributes like data-width, data-height and data-duration, and every clip gets its own start time and track. In short, HTML and CSS handle the look, and the data attributes handle the timing.²

Motion comes from libraries you may know from the web. The README lists GSAP, CSS animations, Lottie, Three.js, Anime.js and the Web Animations API, connected through adapters. Nothing needs compiling: an index.html composition runs straight in the browser.¹ The HyperFrames GitHub repository, heygen-com/hyperframes, holds the CLI, the rendering engine and seven agent skills. You need Node.js 22 or newer plus FFmpeg. Without an agent, a project starts like this:¹

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

What Remotion is

Remotion takes the React route. Its docs sum up the idea as a frame number and a blank canvas that you fill using React.⁶ You write a component, read the current frame with useCurrentFrame() and return what belongs on screen at that moment. A composition pairs that component with four properties: width, height, durationInFrames and fps. Change something on every frame and you have an animation.⁶

Remotion comes with components for text, images, video, audio and shapes.⁶ You can render from Remotion Studio with a button, from the command line with npx remotion render, through a server-side rendering API, on AWS Lambda or in a GitHub Action.⁷

How rendering works in each

Under the hood, the two are close relatives, and HyperFrames names Remotion as its inspiration.¹ It captures every frame in headless Chrome and hands the frames to FFmpeg for encoding.¹ Remotion installs Chrome Headless Shell into your project to render videos⁸ and relies on FFmpeg for encoding.⁹

The real difference is how motion gets timed. In Remotion, your code receives the frame number and calculates what the screen shows at that frame. HyperFrames freezes your animation and seeks it to the exact time of each frame before capturing it.⁵ That model asks for some discipline: a paused timeline, no wall-clock timers, no unseeded randomness. HyperFrames’ own guide admits a composition can break without an obvious error when you ignore those rules.⁵

Both can render in the cloud. Remotion has Remotion Lambda.⁷ HyperFrames renders on your own AWS Lambda, Google Cloud Run or Docker, or on HeyGen’s cloud, which bills credits to a HeyGen account. Local rendering costs nothing and doesn’t require an account.³

Licensing: the part to read twice

HyperFrames uses the Apache 2.0 license. You may use it, modify it and pass it on, commercial projects included. Fonts, music or footage you add still come with their own licenses.³

Remotion uses its own license, the Remotion License. You may use Remotion for free if you are an individual, a for-profit organization with up to 3 employees, a non-profit or not-for-profit organization, or evaluating whether Remotion is a good fit and not yet using it commercially. The Free License covers commercial use, too. Everyone else needs a Company License.¹⁰ The license file also notes that the terms will change slightly with Remotion 5.0.¹⁰

Two details from Remotion’s License FAQ matter for Claude Code users. What counts is your company’s total headcount, not how many people use Remotion. And “Remotion for Creators,” the Company License for organizations that make videos without an automation, is charged per person writing Remotion code, whether they type it themselves or have an agentic coding tool write it: $25 per month at the time of writing. Organizations that build automations pay per render instead, under “Remotion for Automators.”¹¹ So letting Claude Code write the code doesn’t change who needs a seat. One more case from the FAQ: an agency of 3 or fewer people that hands over only the finished video file is covered by the Free License.¹¹

Remotion and HyperFrames in Claude Code

Both projects teach Claude through Agent Skills: written instructions that show the agent how to build valid projects.¹¹³ If skills are new to you, read Claude Skills vs CLAUDE.md first. Our own Claude kit for explainer reels also works with written instructions: a CLAUDE.md that Claude Code reads automatically when you open the folder, plus four rule files.

HyperFrames: plugin or standalone skills

HyperFrames recommends its Claude Code plugin. Run these two commands in your terminal, then start a new Claude Code session or run /reload-plugins:⁴

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Then open Claude Code in an empty folder and ask for a video with /hyperframes:hyperframes. Claude builds the project, checks it and opens a local preview, and you ask for changes in the same conversation. To render, run npx hyperframes render --output final.mp4 or ask Claude to do it. Prefer standalone skills? Run npx skills add heygen-com/hyperframes in your project folder and choose Core Skills.⁴

Remotion: the official Agent Skills

For a Remotion setup in Claude Code, the docs list four steps: create a blank project, install the Remotion Agent Skills, start the preview, then start your agent in a second terminal.¹²

npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

In the second terminal, run cd my-video and then claude.¹² Which Remotion skill does what? /remotion-best-practices covers all the others. Separate skills handle markup, rendering, captions, maps, the Studio, upgrades and license questions. You can also install the set with npx skills add remotion-dev/skills.¹³

Learning curve

If you know React, Remotion will feel familiar quickly. HyperFrames’ own comparison calls Remotion’s model easier to keep in your head: one pure function of the frame number and no timeline to set up.⁵ If you know HTML and CSS, HyperFrames feels like building a web page. There’s no React to learn and nothing to compile, and existing HTML, CSS or GSAP work often carries over with few changes.⁵

With Claude Code doing the typing, the question shifts. You won’t write much code yourself, but you’ll read it when a frame looks off. HyperFrames’ guide sums up the trade-off: Remotion gives you a pure function to reason through, HyperFrames gives you a web page to open and inspect in your browser’s developer tools.⁵ HeyGen also gave Claude Code the same request twice, once with each tool’s official skills, and judged both results good videos. Its own caveat: “a single run decides nothing about quality.”⁵

HyperFrames vs Remotion at a glance

Which fits short explainer reels?

An explainer reel is short, vertical and tightly timed: 1080 × 1920 pixels, a voice-over, and a new image on every key word. Both tools set width and height per composition, so the format itself is no problem for either.²⁶ These questions decide it:

• License: are you solo, or a for-profit company with up to 3 employees? Then Remotion’s Free License covers you. Bigger company? Budget for a Company License, or use Apache-licensed HyperFrames.¹⁰³
• Timing: if your voice track comes with word timestamps in seconds, HyperFrames lets you write the timing in seconds, while Remotion counts in frames.⁵
• Skills you already have: React developers can bring their existing components, design system and chart libraries to Remotion. Web designers can reuse HTML, CSS and GSAP work in HyperFrames.⁵
• What you end up with: either a React codebase or a set of HTML files that open in a browser.⁵

We rendered the puppy reel below with HyperFrames. That reflects our workflow, not a verdict on Remotion.

The renderer is only one step, though. A reel also needs a plan with sourced facts, a hook, a script that fits 60 seconds, an AI voice with a timestamp for every word, scenes that land on those words, and a check before handover. That’s the workflow we teach in Explain It in 60, our course on 3D explainer reels with Claude Code. New to video with Claude? Start with Can Claude make videos?