mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
ukimsanov
e60bef3f57
Rewrites the pages that survive the restructure so they lead with what a reader can accomplish, and points them at the sections added in the previous commit. Page set and navigation are unchanged here; only content moves. Keeps the skill count in README. CLAUDE.md's catalog-maintenance rule requires the count to live in README and CLAUDE.md, and both now agree with the 19 directories under skills/.
104 lines
5.7 KiB
Plaintext
104 lines
5.7 KiB
Plaintext
---
|
||
title: "HyperFrames or Remotion?"
|
||
description: "A practical comparison of HTML-first HyperFrames and React-first Remotion."
|
||
---
|
||
|
||
Both tools create videos with web technology and render them through a browser. The main difference is the authoring model.
|
||
|
||
- **HyperFrames** treats HTML, CSS, and browser animation as the composition.
|
||
- **Remotion** treats React components and frame-based React code as the composition.
|
||
|
||
Neither choice is universally better. Pick the one that fits the source material, team, and workflow.
|
||
|
||
## At a glance
|
||
|
||
| Question | HyperFrames | Remotion |
|
||
| --- | --- | --- |
|
||
| Main authoring surface | HTML, CSS, and JavaScript | React and TypeScript |
|
||
| Agent workflow | Built around agent skills and plain HTML projects | Provides agent skills and React video workflows |
|
||
| Visual editing | HyperFrames Studio edits the rendered DOM and project source | Remotion Studio can edit and animate React compositions visually, then save changes back to code |
|
||
| Existing web material | Can often be used directly or adapted as HTML | Usually translated into React components |
|
||
| Animation model | Seeks registered browser timelines frame by frame | Commonly derives visuals from the current frame in React |
|
||
| Reuse | HTML scenes, components, and Catalog items | React components and the React ecosystem |
|
||
| Cloud rendering | Local, hosted cloud, AWS Lambda, and other deployment paths | Mature AWS Lambda and server-rendering options |
|
||
| License | Apache 2.0 | Custom license with free and paid eligibility rules |
|
||
|
||
## Choose HyperFrames when
|
||
|
||
HyperFrames is a strong fit when:
|
||
|
||
- an AI agent will do most of the authoring;
|
||
- the source is a website, HTML prototype, design artifact, or browser animation;
|
||
- you want GSAP and other browser timelines to be seeked deterministically;
|
||
- a human should review and edit the same DOM the renderer consumes;
|
||
- Apache 2.0 licensing matters;
|
||
- you want a project that can remain mostly plain HTML.
|
||
|
||
The main tradeoff is ecosystem maturity. HyperFrames is newer, and some advanced deployment and integration surfaces have less history than Remotion’s.
|
||
|
||
## Choose Remotion when
|
||
|
||
Remotion is a strong fit when:
|
||
|
||
- your team already builds in React and TypeScript;
|
||
- you want to reuse React components and tooling;
|
||
- frame-driven React code is a natural way to express the animation;
|
||
- you depend on Remotion’s established templates, community, or production infrastructure;
|
||
- its mature Lambda ecosystem is important;
|
||
- your organization is comfortable with its current license.
|
||
|
||
The main tradeoff is translation. Existing HTML, imperative browser animation, or a non-React design artifact may need to be adapted into React’s model.
|
||
|
||
## Animation is the deepest technical difference
|
||
|
||
Remotion compositions commonly calculate visual state from the current frame. This is explicit and works naturally with React.
|
||
|
||
HyperFrames can also use frame-derived logic, but its distinctive path is a **frame adapter**: the renderer pauses a browser animation timeline and seeks it to the exact output time before capturing the frame.
|
||
|
||
That makes GSAP, Web Animations, Lottie, and other supported browser runtimes usable without letting their wall clock control the render.
|
||
|
||
See [Frame adapters](/concepts/frame-adapters) and [Deterministic rendering](/concepts/determinism).
|
||
|
||
## Studio works differently
|
||
|
||
HyperFrames Studio selects and edits elements in the live composition DOM. It includes Storyboard and Preview views, direct canvas editing, layers, a timeline, animation controls, assets, captions, variables, source files, lint handoff, and export.
|
||
|
||
That does not mean every structural change should be made visually. Broader story and source changes are often better handled by the agent.
|
||
|
||
Remotion Studio is a development and visual-editing environment for React compositions. It supports direct manipulation and animation controls, then saves the result back to React code. Remotion also publishes tooling for building custom editing applications.
|
||
|
||
The two Studios are not interchangeable. HyperFrames Studio operates on the DOM and HTML project that HyperFrames renders; Remotion Studio operates on React compositions.
|
||
|
||
## Rendering and deployment
|
||
|
||
Remotion Lambda is a mature distributed-rendering system with extensive AWS documentation.
|
||
|
||
HyperFrames supports local rendering, HeyGen-hosted cloud rendering, AWS Lambda, Google Cloud Run, and custom deployment. The right comparison depends on the destination, expected volume, and how much infrastructure the team wants to operate.
|
||
|
||
See [HyperFrames deployment](/developers) and [Remotion Lambda](https://www.remotion.dev/docs/lambda).
|
||
|
||
## Licensing
|
||
|
||
HyperFrames is available under the [Apache 2.0 license](https://github.com/heygen-com/hyperframes/blob/main/LICENSE).
|
||
|
||
Remotion uses its own license. Its current terms allow free use for individuals and companies of up to three people, with a Company License required for larger organizations. Pricing and eligibility can change, so check the [official Remotion license page](https://www.remotion.pro/license) instead of relying on a copied price here.
|
||
|
||
## Moving an existing project
|
||
|
||
Do not migrate only because one framework looks newer. First identify what the current project depends on:
|
||
|
||
- React components and React-specific libraries;
|
||
- imperative browser animation;
|
||
- cloud-rendering infrastructure;
|
||
- visual editing;
|
||
- licensing;
|
||
- team familiarity.
|
||
|
||
If a Remotion composition is a good candidate for HyperFrames, ask `/hyperframes` to route the work through the Remotion-to-HyperFrames migration workflow. Validate the result scene by scene; source migration is not a mechanical file conversion.
|
||
|
||
## Related topics
|
||
|
||
- [Understand the HyperFrames project model](/concepts)
|
||
- [Choose a rendering path](/deploy/overview)
|
||
- [Build on HyperFrames](/developers)
|