HyperFrames vs Remotion

The same launch video made by an agent with Remotion and with HyperFrames, side by side; the same title card in both codes; and an honest read on which fits your project.

Both tools make video out of web pages. Both open a real browser, draw each frame, and encode the result. The difference is what you write.

Remotion asks for a React component. HyperFrames asks for an HTML file.

Same request, two agents

We gave Claude Code (Opus 5.5) the same one-paragraph request twice: once with only Remotion’s official agent skills installed, once with only HyperFrames’. One run each, no retries, nothing edited afterwards.

Make a 15-second 1920x1080 launch video for a fictional note-taking app called Inkwell (tagline: “Write it down. Find it later.”). Logo reveal, three short feature lines, then an end card with the tagline. No voice. Render the final MP4 to out.mp4 in this folder. Don’t ask me questions; make the choices yourself.

Remotion

HyperFrames

	Remotion	HyperFrames
Time to a rendered MP4	12 min 30 s	11 min 50 s
What it wrote	10 TypeScript files, 1,037 lines	4 HTML files, 822 lines
Installed into the project	about 950 MB of node_modules	nothing
Sound	none	a music bed and five sound effects it chose

Both are good videos; a single run decides nothing about quality. The difference that lasts is what you are left holding: a React project to keep building in code, or HTML files you can open in a browser, edit with an agent, or keep changing in the Studio app.

The same title card, written both ways

Here is the same three seconds — a title that fades in, holds, and fades out — written both ways. Neither version is padded or crippled to make a point.

Remotion. The component is a function of the current frame number. You do the timing math yourself, in frames.

import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const TitleCard = () => {
  const frame = useCurrentFrame();

  // fade in over frames 0-15, hold to 75, fade out by 90
  const opacity = interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{ backgroundColor: "#0a0a0a", justifyContent: "center", alignItems: "center" }}
    >
      <div style={{ fontSize: 160, fontWeight: 800, color: "#fff", opacity }}>HELLO</div>
    </AbsoluteFill>
  );
};

A <Composition> entry in another file registers it as 90 frames at 30fps, 1280×720.

HyperFrames. The markup declares when things are on screen. A GSAP timeline declares how they move. Both live in one file.

<style>
  #stage { position: relative; width: 1280px; height: 720px; overflow: hidden; background: #0a0a0a; }
  .clip  { position: absolute; inset: 0; display: grid; place-items: center; }
  #title { font-size: 160px; font-weight: 800; color: #fff; opacity: 0; }
</style>

<div id="stage" data-composition-id="title-card" data-start="0"
     data-width="1280" data-height="720" data-duration="3" data-fps="30">
  <div id="card" class="clip" data-start="0" data-duration="3" data-track-index="0">
    <div id="title">HELLO</div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
  // same fade, written in seconds instead of frames
  const tl = gsap.timeline({ paused: true });
  tl.to("#title", { opacity: 1, duration: 0.5, ease: "none" }, 0);
  tl.to("#title", { opacity: 1, duration: 2.0, ease: "none" }, 0.5);
  tl.to("#title", { opacity: 0, duration: 0.5, ease: "none" }, 2.5);

  window.__timelines = window.__timelines || {};
  window.__timelines["title-card"] = tl;
</script>

That is the whole file apart from <head> boilerplate. Three rules make it render: every visible slot carries class="clip" with an id, data-start, data-duration, and data-track-index; the timeline is created paused; and it is registered on window.__timelines under the same id as the root element. Miss the last one and you get a still frame with no motion. The HTML schema lists every attribute.

Neither file is obviously better. The Remotion one is a pure function you can reason about in your head. The HyperFrames one is a page you can open in a browser and inspect with devtools.

Where they actually differ

	HyperFrames	Remotion
What you write	HTML, CSS, and JavaScript	React and TypeScript
How motion is timed	The renderer pauses your animation and seeks it — jumps it to an exact moment — before capturing each frame	Your code reads the frame number and returns the values for that frame
Existing web material	HTML, CSS, and a GSAP or Lottie animation usually drop in close to as-is	Rewritten as React components
License	Apache 2.0	Its own license — free for individuals and companies up to three people, paid above that. Check the current terms

The seeking model is the interesting one. Because HyperFrames drives the animation rather than watching a clock, GSAP, Web Animations, Lottie, and other browser runtimes render deterministically — the same frame comes out the same every time. See Frame adapters and Deterministic rendering.

Both projects ship a visual editor and both save changes back to source. The HyperFrames browser editor edits the same DOM the renderer captures. Remotion Studio edits React compositions. They are not interchangeable, and neither replaces editing the source for real structural changes.

Both render on AWS Lambda. HyperFrames also renders locally, on HeyGen’s hosted cloud, and on Google Cloud Run — see rendering paths.

What Remotion does better

Say this plainly, because it matters if you are choosing today.

Remotion is older and much more established. It has more templates, more tutorials, more answered questions, and far more production history. Remotion Lambda in particular is a mature, heavily documented rendering system; ours is newer.

If your team already writes React, Remotion gives you your components, your design system, your charting libraries, and typed, validated composition inputs for free. Nothing to translate.

And its model is genuinely simpler to hold in your head. One pure function of the frame number, no timeline to register, no contract to get subtly wrong. HyperFrames asks you to follow rules — paused timeline, no wall clocks, no unseeded randomness — and breaks quietly if you don’t.

What HyperFrames does better

You do not need React, a build step, or a component rewrite. A website, an HTML prototype, an exported design, or an existing browser animation is already close to a composition.

It is built for an AI agent to author. The agent skills encode the framework’s rules, so the agent writes valid compositions instead of guessing, and a human can then edit the same file in the browser editor.

And Apache 2.0 means no seat count and no license review.

Moving a Remotion project across

There is a real migration path, not a promise. Install the skill:

npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes

Then ask your agent to port the composition. It maps useCurrentFrame and interpolate onto timeline tweens, Sequence onto clips, and converts frames to seconds.

The harder cases are the point of the skill. It refuses to translate what does not fit: React state machines built on useState or useEffect, async metadata, third-party React UI libraries. Those get flagged instead of silently mistranslated. It also grades its own output — it renders both versions and compares them frame by frame, and it writes down anything it dropped.

Migrate because your source material or your team fits better on this side. Not because one framework looks newer.

Related topics

• How a HyperFrames composition works
• Install and use the agent skills
• Choose a rendering path