HyperFrames or Remotion: which should your agent use?

Should I use HyperFrames or Remotion?

Short answer: pick HyperFrames if you want an open licence that is free for any company and scenes written as plain web pages. Pick Remotion if your team already works in React or you want to reuse your app's React components, and read its licence first if your company is not very small. In our test, both made the same title card from one brief, with no fixes needed.

Our same-brief test

How we tested: we wrote one brief and gave it to the same coding agent for both engines. Each engine's official agent skill was installed, and the agent followed it. Both videos were rendered on our own Linux machine with free tools only: no account, no API key and no cloud render. We then compared both videos frame by frame.

The brief:

This is one small test with a simple title card. Longer films, footage, sound and captions may go differently, so treat it as a first look, not a full review.

What your agent writes

The same headline animation, as each engine wants it. Short extracts from our test.

HyperFrames: HTML plus a timeline

<h1 id="title" class="clip" data-start="0" data-duration="5">Ship it today</h1>
...
tl.fromTo("#title", { opacity: 0, y: 60 }, { opacity: 1, y: 0, duration: 0.8 }, 0.3);

Remotion: a React component

<h1 style={{
  opacity: interpolate(frame, [0.3 * fps, 1.1 * fps], [0, 1], clamp),
  translate: interpolate(frame, [0.3 * fps, 1.1 * fps], ["0px 60px", "0px 0px"], clamp),
}}>Ship it today</h1>

Both are deterministic: every frame comes from the timeline or the frame number, so the same code gives the same video each time.

Side by side

Sources: our test, the HyperFrames README, the Remotion skills README and the Remotion licence. No sponsored entries on this page.

Which agents can use each one?

Both work with any coding agent that reads skills. The HyperFrames README names Claude Code, Codex, Cursor and Gemini CLI, among others. The Remotion skills README names Claude Code, Codex, Kimi Code and Cursor. For step-by-step setup in Claude Code and in Codex, see How to make a video with Claude Code or Codex.

What went wrong, and what we changed

• HyperFrames needed a newer Node.js. Our machine had an older version than the one its README asks for. We added the newer version next to it, then everything worked.
• The empty first frame. The HyperFrames check warned that the video starts on a blank frame. The brief asked for a fade-in, so we kept it. For a social post, start with the title already on screen.
• The Remotion blank template size. It starts smaller and shorter than our brief, so we set the size and length in the composition.
• A harmless setup error. The Remotion setup tried to make a git commit and failed because git had no user name on our machine. The project was still created.
• Know what gets installed. HyperFrames setup added its skills to the user-wide skill folders that Claude Code, Codex and other agents read, and wrote instruction files for the agent into the project. That is expected, but check it on a shared computer.

Switching from one to the other

From Remotion to HyperFrames: HyperFrames has an on-demand skill for this, called remotion-to-hyperframes. Its README says it brings existing video code into HyperFrames and checks the result frame by frame against the original.

From HyperFrames to Remotion: we know of no tool for this. Ask your agent to rebuild each scene as a React component, then compare stills from both versions. In our test the same design moved across easily: a GSAP tween became an interpolate() call.

Related pages

• HyperFrames skill page Skill
• Remotion skills page Skill
• claude-remotion-skill Skill built on Remotion
• How to make a video with Claude Code or Codex Guide
• How to make a launch video with an AI agent Guide
• Motion graphics skills for coding agents Category
• HyperFrames docs Official
• Remotion agent skills docs Official