> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-canary-calibration-notes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# HyperFrames or Remotion?
> The same three-second title card written in Remotion React and in HyperFrames HTML, plus an honest read on which tool 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.
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.
```tsx theme={null}
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 (
HELLO
);
};
```
A `` 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.
```html theme={null}
```
That is the whole file apart from `` 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](/reference/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](https://github.com/heygen-com/hyperframes/blob/main/LICENSE) | Its own license — free for individuals and companies up to three people, paid above that. Check the [current terms](https://www.remotion.pro/license) |
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](/concepts/frame-adapters) and
[Deterministic rendering](/concepts/determinism).
Both projects ship a visual editor and both save changes back to source.
[HyperFrames Studio](/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](/deploy/overview).
## 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](/guides/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:
```bash theme={null}
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.
## Related topics
* [How a HyperFrames composition works](/concepts/compositions)
* [Install and use the agent skills](/guides/skills)
* [Choose a rendering path](/deploy/overview)