HyperFrames or Remotion?

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. 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.

The same title card, twice

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. HyperFrames Studio 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 Studio. 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 --full-depth

Then ask your agent to port the composition. It maps useCurrentFrame and interpolate onto timeline tweens, Sequence onto clips, and converts frames to seconds. Roughly 80% of a typical composition translates mechanically. The other 20% is 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.

Start here

Explore

Choose where to create

Prompt Guide

Workflows

Build the project

Help

HyperFrames or Remotion?

The same title card, twice

Where they actually differ

What Remotion does better

What HyperFrames does better

Moving a Remotion project across

​The same title card, twice

​Where they actually differ

​What Remotion does better

​What HyperFrames does better

​Moving a Remotion project across

​Related topics

The same title card, twice

Where they actually differ

What Remotion does better

What HyperFrames does better

Moving a Remotion project across

Related topics