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 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 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 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.
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 and self-host#
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
```What it's built on#
- Languages
- JavaScriptTypeScript
- Infrastructure
- AWS
- Tooling
- esbuildFFmpegPuppeteer
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.
Similar open-source tools#
gods-eye-view
Real-time global intelligence on a 3D globe, no account needed.
garden-skills
Production-ready agent skills for Claude Code, Cursor, and Codex
design.md
Generate UIs effortlessly with AI.
OpenCut
Open source video editing in your browser, free forever
editor
Browser-based 3D building editor, MIT licensed and self-hostable
camofox-browser
Stealth headless browser for AI agents; bypasses bot detection