HyperFrames vs Remotion for coding agents

HyperFrames and Remotion render video the same way: they draw a web page frame by frame in headless Chrome and encode the frames with FFmpeg. HyperFrames has your agent write plain HTML with a seekable animation timeline and is Apache-2.0, free for everyone; Remotion has it write React components, brings a longer track record and a mature AWS Lambda renderer, and needs a paid company license once your company reaches four people. Choose HyperFrames for agent-first work with no license review, and Remotion if your team already builds in React.

Both projects now ship official skills for Claude Code, Codex and Cursor. So the old question, which framework a developer prefers, has become a new one: which framework should your agent write? This is the comparison on the points that change an agent workflow. If you're still deciding whether an agent can make video at all, start with Can Claude make videos?

The spec sheet

What your agent writes

This is the real difference. A HyperFrames composition is an HTML file. Each visible clip carries data-start, data-duration and data-track-index attributes, and motion lives in a paused GSAP timeline registered on window.__timelines. Skip that registration and the render comes out as a still frame. Other runtimes plug in through adapters: CSS animations, Lottie, Three.js, Anime.js and the Web Animations API.

A Remotion composition is a React component that works as a function of the current frame number. Timing is math in frames, and Remotion's docs state the one rule plainly: animate with useCurrentFrame(), because CSS transitions and other animations that run on their own clock flicker in the render.

Agents write HTML and React fluently, so neither is hard for them. HeyGen's own comparison counted 4 HTML files and 822 lines for a HyperFrames launch video, against 10 TypeScript files, 1,037 lines and about 950 MB of node_modules for the Remotion version. That is one vendor-run test, but it shows the shape: HyperFrames is less code with no build step, Remotion is a typed project your developers can maintain.

How each one renders

Under the hood they are close cousins; the HyperFrames README says it was inspired by Remotion. Both open a real browser, draw one frame at a time and hand the frames to FFmpeg.

HyperFrames pauses your timeline, seeks it to the exact time of each frame in headless Chrome, captures it and encodes with FFmpeg. Because every frame is a seek, GSAP, Web Animations and Lottie render deterministically: the same input gives the same video.

Remotion installs Chrome Headless Shell into node_modules and ships its own FFmpeg, so there is nothing else to set up. Since v4.0.534 it encodes frames while Chrome draws the next ones, and on Apple Silicon Macs (macOS 15 or later) and recent Linux it passes raw bitmaps straight to FFmpeg instead of compressing each screenshot first. Remotion publishes no speed figures for either change.

Local and cloud rendering

Both render on your own machine by default, which is what happens in a Claude Code session. The difference shows up when you need hundreds of renders.

Remotion Lambda splits a video into chunks and renders them in parallel across AWS Lambda functions; Remotion calls it the recommended default. It also supports Vercel Sandbox, Cloud Run (still alpha), Cloudflare Containers and your own Node.js server. Even HeyGen's comparison calls Remotion Lambda mature and heavily documented.

HyperFrames has its own AWS Lambda path: a Step Functions workflow plans the render, fans out up to 256 chunks and assembles the MP4 in S3. Its documented limits today are no completion webhook, SDR output only and a 15-minute cap per Lambda invocation. HeyGen also lists its hosted cloud and Google Cloud Run.

hyperframes lambda deploy
hyperframes lambda render ./my-project --width 1920 --height 1080 --wait
hyperframes lambda destroy

Speed

There is no neutral benchmark, and the two published single runs point in opposite directions.

• HeyGen's test: Claude Code, one paragraph of prompt, a 15-second 1920×1080 launch video. Remotion took 12 min 30 s to a rendered MP4; HyperFrames took 11 min 50 s. HeyGen adds that one run decides nothing about quality.
• Agent Skills Hub's test, October 11: sixteen skills made the same 15-second 1080p promo in Claude Code. Remotion's official skills finished in 4.5 minutes, HyperFrames in 23.5. Claude Code with no skill at all took 4.4.

Read together, they say the renderer is rarely the bottleneck. Most of the clock goes to the agent planning, writing, linting and checking its work, which depends on the skill and the brief more than on HTML versus React. Time your own brief on both before you commit.

Agent skills and plugins

Both teams maintain official skills, and these matter more than the framework: they are what keeps your agent from breaking the one rule above.

HyperFrames ships seven skills. The core set is /hyperframes (the render contract and work loop), /hyperframes-cli, /hyperframes-registry (about 450 ready-made blocks such as transitions, captions, charts and maps) and /media-use (music, voiceover, images and other media). /figma, /slideshow and /remotion-to-hyperframes install on demand. HyperFrames is also listed in Anthropic's official plugin marketplace, pinned to a commit.

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

Remotion publishes remotion-dev/skills, including /remotion-best-practices, /remotion-create, /remotion-render, /remotion-captions and /remotion-docs, which fetches current documentation pages. The Claude Code plugin bundles them; npx skills add remotion-dev/skills installs them for other agents.

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

Already have Remotion projects? HyperFrames' remotion-to-hyperframes skill maps useCurrentFrame and interpolate to timeline tweens and Sequence to clips, flags React state it can't translate, and compares both renders frame by frame. Install it with npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes. For the wider field, see the best Claude skills for video.

Licensing

HyperFrames is Apache-2.0: commercial use, no seat count and no per-render fees, at any company size.

Remotion uses its own source-available license. It is free for individuals, for-profit companies with up to three employees, non-profits and anyone still evaluating it. Everyone else needs a company license. On remotion.pro, Remotion for Creators costs $25 per seat a month and explicitly covers making videos locally with AI agents; Remotion for Automators costs $0.01 per render with a $100 monthly minimum; Enterprise starts at $500 a month. An open pull request for Remotion 5.0 would also count contractors toward team size.

The license follows the renderer, not the skill. A free skill or a paid template pack that renders with Remotion still needs a Remotion company license if your company has four or more people.

Which to choose

Still unsure? Have your agent build the same short video in both and compare the results.

Editing your own footage is a different job; see Claude video editing. Both frameworks' skills also run in Codex, which Can ChatGPT make videos? covers.