hyperframes

Open source alternative to Remotion

68.4K stars
Apache-2.0
Active this week
Last commit 1 day ago

Last verified Oct 20, 2026

Build deterministic MP4 videos from HTML and CSS, with AI agent integration via 20 skills for Claude Code, Cursor, and other coding agents.

Visit website GitHub68.4K

Read the full breakdownWho it is for, how it works, trade-offs, the quick start and the FAQ

who it's for

Who hyperframes is for#

AI coding agents producing MP4 video outputs

Agents using Claude Code, Cursor, Gemini CLI, or Codex can install the HyperFrames skills and generate, preview, and render an MP4 from a text prompt. The router skill handles intent routing, domain skills handle animation and media, and the CLI handles rendering. No human needs to open a GUI.

Skip if:

Skip if your agent workflow requires a platform that manages compute, storage, and CDN delivery end-to-end. HyperFrames handles rendering but not hosting or delivery of the output video.

Developer teams building automated video pipelines

Developers who need to turn structured data (PR diffs, chart data, product specs) into short videos can write a HyperFrames composition template and render new outputs on each data update. The CLI fits into a CI/CD workflow, and deterministic rendering means the same input always produces the same output.

Skip if:

Skip if your content team is non-technical. HyperFrames requires writing HTML and CSS to define the video layout; it is not a drag-and-drop editor.

Teams creating product launch and feature announcement videos

The `/product-launch-video` skill accepts a website URL and produces a 30-to-90-second marketing video with the site's own visuals, a title, and background music. A developer can generate a new video for each feature release without involving a video production team.

Skip if:

Skip if you need talking-head video with a human presenter or AI avatar. HyperFrames produces motion graphic and screen-capture videos, not avatar or webcam recordings.

Developers migrating Remotion compositions to HTML

The `/remotion-to-hyperframes` skill converts an existing Remotion (React) composition to a HyperFrames HTML composition. Teams that have invested in Remotion and want to move to an HTML-native format can migrate without rebuilding animations from scratch.

Skip if:

Skip if you need to maintain the React component model or run Remotion and HyperFrames in parallel. The migration is one-way and does not preserve React component structure.

the problem

The problem it solves#

Creating videos programmatically means choosing between two options, neither of which scales: GUI-based tools that need a designer to operate, or raw FFmpeg pipelines that are too low-level to generate animations from structured data.

Tools like Adobe After Effects require proprietary project files no script or AI agent can produce reliably. Hosted AI video platforms like Synthesia charge per render and give you no access to the underlying infrastructure. For teams that want to automate video creation from a pull request diff, a data feed, or an agent-generated script, there is no clean path from structured content to MP4 without either a human designer or a paid third-party API.

how hyperframes solves it

How it solves it#

HTML and CSS as the video authoring format

Compose videos as standard web documents. Timing is set with `data-*` attributes on any DOM element, and the framework seeks through frames deterministically. Any HTML and CSS that renders in a browser will render in the output MP4, including custom fonts, SVG graphics, and embedded media.

20 agent skills for Claude Code, Cursor, Gemini CLI, and Codex

Install the skill set with `npx skills add heygen-com/hyperframes`. The router skill reads any video request and routes it to a matching workflow: product launch video, PR walkthrough, explainer, data visualization, motion graphic, or slideshow. Agents plan, write, lint, and render without human input.

Multiple animation runtime support

Wire animations with GSAP timelines, Lottie JSON, Three.js scenes, Anime.js, CSS keyframes, WAAPI, or TypeGPU. The framework handles seek-safe keyframe authoring across all runtimes. You are not locked to one animation library, and different animations in the same composition can use different runtimes.

CLI covering the full production loop

The CLI handles init, lint, preview, and render: `npx hyperframes init` scaffolds a project, `npx hyperframes preview` opens a live-reload browser preview, `npx hyperframes lint` checks composition validity, and `npx hyperframes render` writes the final MP4. Requires Node.js 22+ and FFmpeg on the host.

Cloud and AWS Lambda rendering

For teams that need render capacity without managing a server, HyperFrames supports HeyGen-hosted cloud rendering via `hyperframes cloud render` and AWS Lambda rendering via `hyperframes lambda deploy`. Both paths use the same HTML source, so local and cloud output is identical.

frame.md design system translation layer

frame.md converts an existing brand token file or `design.md` into a video-ready spec. It rewrites web-context design rules for the frame: correct scale, color grading, and typography for a video timeline. The output is a `DESIGN.md` superset any agent or CLI tool can read without guessing at video-safe values.

strengths · trade-offs

Strengths and trade-offs#

Strengths

Apache 2.0 license with no commercial restrictionsThe Apache 2.0 license allows self-hosting, commercial use, modification, and redistribution with no royalty or attribution requirement beyond the license text. Unlike paid video tools with per-render pricing or monthly subscription gates, you pay once for the compute and own the pipeline.
Agent-native architecture with a router skillThe `/hyperframes` router skill is the entry point for any coding agent. It reads the request intent, confirms the brief, and routes to one of nine creation workflow skills. Agents do not need to know the full API: the router handles capability mapping and installs the right domain skill on demand.
Deterministic rendering for automated pipelinesThe framework controls frame seeking rather than relying on real-time playback, so the same HTML source produces an identical MP4 every time. There is no timing drift or render variance across environments, which makes HyperFrames suitable for CI/CD pipelines where consistency matters.
Maintained by a funded team with strong adoptionThe repository is maintained by HeyGen, a venture-backed video company. Created in March 2026, the project attracted over 45,000 GitHub stars and 4,300 forks in under six months. Active maintenance and a large contributor base reduce the risk of abandonment that affects many open source video tools.

Trade-offs

-Requires Node.js 22+ and FFmpeg on every rendering hostSelf-hosting the rendering pipeline means installing and maintaining Node.js 22+ and FFmpeg on every machine that runs renders. The README does not document a Docker image for local development. Teams without existing Node.js infrastructure need to set up the runtime stack before rendering any video.
-Early-stage framework with 174 open issuesCreated in March 2026, HyperFrames is less than a year old. The open issues count (174 at the time of writing) reflects normal early-stage growth, but some edge cases in animation rendering and media handling are still being resolved. Plan for occasional rendering quirks in production pipelines.
-Cloud rendering path ties you to HeyGen's hosted serviceThe cloud rendering path (`hyperframes cloud render`) connects to HeyGen's own hosted infrastructure, which carries its own pricing and availability terms. The AWS Lambda path is the self-contained alternative, but it requires setting up Lambda yourself. Teams needing fully vendor-free rendering must use the local CLI path.

versus alternatives

hyperframes vs alternatives#

HyperFrames vs Adobe After Effects

Adobe After Effects is the industry standard for motion graphics, used by professional video editors and motion designers. HyperFrames serves a different user: a developer or AI agent who writes HTML and runs a CLI command, not a designer who opens a GUI timeline.

Feature	HyperFrames	Adobe After Effects
License	Apache 2.0	Proprietary subscription
Self-hosting	Yes (Node.js + FFmpeg)	No (desktop app, CC subscription)
Authoring format	HTML and CSS	Proprietary AE project files
AI agent integration	20 agent skills	None
Rendering	Deterministic, CLI-driven	GUI or Adobe Media Encoder
Price	Free (self-hosted)	$54.99/month (CC All Apps)

After Effects is the better choice when a professional motion designer needs pixel-level control over complex compositing, green screen keying, or 3D camera work. HyperFrames is the better choice when a developer or agent needs to generate a short video from structured data or code, integrate video production into a CI/CD pipeline, or produce videos at scale without a designer in the loop.

HyperFrames vs Synthesia

Synthesia is an AI video platform for creating talking-head videos with AI-generated avatars, aimed at non-technical business users producing training content and communications.

Feature	HyperFrames	Synthesia
License	Apache 2.0	Proprietary SaaS
Self-hosting	Yes	No
Output type	Motion graphics, animations, screen capture	Talking-head video with AI avatars
Code-driven authoring	Yes (HTML/CSS)	No
AI agent integration	Yes	No
Price	Free (self-hosted)	$29+/month

Synthesia is the better choice when a non-technical team member needs to produce talking-head videos without writing any code. HyperFrames is the better choice for developers and automated pipelines producing motion graphics, data visualizations, and screen-capture videos from HTML source.

install · quick start

Quick start#

bash

Install with Node.js 22+ and FFmpeg already on your system, then scaffold a project with the CLI.
```bash
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render
```

tech stack · detected from GitHub

What it's built on#

Languages: JavaScriptTypeScript
Infrastructure: AWS
Tooling: esbuildFFmpegPuppeteer

frequently asked

FAQ#

Is HyperFrames free to use?

Yes. HyperFrames is Apache 2.0 licensed and free to self-host and use commercially with no restrictions. The npm package is free, and you run renders on your own compute. HeyGen offers a paid hosted cloud rendering option for teams that need managed capacity, but the self-hosted path costs nothing beyond your server infrastructure.

What does HyperFrames require to run locally?

Node.js 22 or higher and FFmpeg must be installed on the rendering host. The CLI runs on those two dependencies with no other required infrastructure. For cloud rendering, HyperFrames supports HeyGen's hosted service or AWS Lambda, which removes the local FFmpeg dependency.

Which AI coding agents does HyperFrames support?

HyperFrames ships agent skills that work with Claude Code, Cursor, Gemini CLI, and Codex. Install them with npx skills add heygen-com/hyperframes. The skills teach agents the full production loop: brief confirmation, HTML authoring, animation wiring, linting, preview, and render.

Can I use HyperFrames without an AI agent?

Yes. The CLI covers the full workflow without any agent involvement. Run npx hyperframes init my-video to scaffold a project, edit the HTML source directly, and run npx hyperframes render to produce the MP4. The agent skills are optional productivity tools, not a requirement for the framework.

What animation libraries does HyperFrames support?

HyperFrames supports GSAP timelines, Lottie JSON animations, Three.js scenes, Anime.js, standard CSS keyframes, the Web Animations API (WAAPI), and TypeGPU. Each runtime integrates with the framework's seek-safe keyframe system so animations play back deterministically frame by frame during rendering.

also worth a look

Similar open-source tools#

Openfilm

Alternative toRemotion

AI video agent for coding agents; films are local web folders.

1,850 GitHub stars
Licence MIT

God's Eye View

Featured

Alternative toFlightradar24

Real-time global intelligence on a 3D globe

58,501 GitHub stars
Licence MIT with third-party data restrictions

inspo

Alternative toRefero

Real production sites as design reference for AI coding agents

903 GitHub stars
Licence MIT

bg0

Alternative toremove.bg

Background removal that runs in your browser, never uploads

451 GitHub stars
Licence Apache-2.0

garden-skills

InWeb Development

Production-ready agent skills for Claude Code, Cursor, and Codex

13,104 GitHub stars
Licence MIT

design.md

Alternative toSupernova

Generate UIs effortlessly with AI.

28,422 GitHub stars
Licence Apache-2.0

by category

Open source tools in these categories#

196

4,904 GitHub stars
Licence Apache-2.0
#AI Agents

Inbox Zero

Alternative toSuperhuman

AI email assistant that drafts replies and clears your inbox

12,712 GitHub stars
Licence AGPL-3.0
#Email

Omnara

Alternative toClaude Managed Agents

Open-source agent deployment API. Self-host or use Omnara Cloud.

2,957 GitHub stars
Licence Apache-2.0
#AI Agents

Feature your project

The projects we add and every new guide. Free, unsubscribe any time.

Find open source alternatives to paid software

HyperFrames vs Adobe After Effects

Feature	HyperFrames	Adobe After Effects
License	Apache 2.0	Proprietary subscription
Self-hosting	Yes (Node.js + FFmpeg)	No (desktop app, CC subscription)
Authoring format	HTML and CSS	Proprietary AE project files
AI agent integration	20 agent skills	None
Rendering	Deterministic, CLI-driven	GUI or Adobe Media Encoder
Price	Free (self-hosted)	$54.99/month (CC All Apps)

HyperFrames vs Synthesia

Synthesia is an AI video platform for creating talking-head videos with AI-generated avatars, aimed at non-technical business users producing training content and communications.

Feature	HyperFrames	Synthesia
License	Apache 2.0	Proprietary SaaS
Self-hosting	Yes	No
Output type	Motion graphics, animations, screen capture	Talking-head video with AI avatars
Code-driven authoring	Yes (HTML/CSS)	No
AI agent integration	Yes	No
Price	Free (self-hosted)	$29+/month

Who hyperframes is for#

AI coding agents producing MP4 video outputs

Skip if:

Developer teams building automated video pipelines

Skip if:

Teams creating product launch and feature announcement videos

Skip if:

Developers migrating Remotion compositions to HTML

Skip if:

The problem it solves#

How it solves it#

HTML and CSS as the video authoring format

20 agent skills for Claude Code, Cursor, Gemini CLI, and Codex

Multiple animation runtime support

CLI covering the full production loop

Cloud and AWS Lambda rendering

frame.md design system translation layer

Strengths and trade-offs#

Strengths

Trade-offs

hyperframes vs alternatives#

HyperFrames vs Adobe After Effects

HyperFrames vs Synthesia

Quick start#

What it's built on#

FAQ#

Similar open-source tools#

Open source tools in these categories#

Web Development

AI & Machine Learning

Design & Creative

Find open source alternatives to paid software

Who hyperframes is for#

AI coding agents producing MP4 video outputs

Skip if:

Developer teams building automated video pipelines

Skip if:

Teams creating product launch and feature announcement videos

Skip if:

Developers migrating Remotion compositions to HTML

Skip if:

The problem it solves#

How it solves it#

HTML and CSS as the video authoring format

20 agent skills for Claude Code, Cursor, Gemini CLI, and Codex

Multiple animation runtime support

CLI covering the full production loop

Cloud and AWS Lambda rendering

frame.md design system translation layer

Strengths and trade-offs#

Strengths

Trade-offs

hyperframes vs alternatives#

HyperFrames vs Adobe After Effects

HyperFrames vs Synthesia

Quick start#

What it's built on#

FAQ#

Similar open-source tools#

Open source tools in these categories#

Web Development

AI & Machine Learning

Design & Creative

Find open source alternatives to paid software