HyperFrames: Detailed Introduction

[ikaijua]

HyperFrames: Detailed Introduction

HyperFrames is an open-source framework by HeyGen for turning HTML, CSS, media, and seekable animations into deterministic MP4 video. Use it locally with the CLI, from AI coding agents via skills, or as the rendering core behind hosted authoring workflows. Tagline: "Write HTML. Render video. Built for agents." As of 2026-10-19 it has 67.4k★, Apache-2.0, and is under very active development (still committing that day).

Table of Contents

• Overview
• Why it belongs in this list
• Quick start
• Core capabilities
• Use cases
• Pricing & license
• Example
• Links & resources
• Changelog

Overview

HyperFrames is a "write HTML, get video" framework rather than another text-to-video SaaS. It treats the web stack (HTML/CSS, GSAP animations, media elements) as the source format for video, then deterministically renders it to MP4 — the same input always produces frame-identical output. That determinism is what makes programmatic, reproducible, batch video production practical.

Key traits:

• Deterministic rendering: same HTML → frame-consistent MP4, ideal for engineering-grade batch production.
• Agent-native: ships 21 skills, a /hyperframes router, and a Claude Code plugin-marketplace entry; callable from Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents.
• Local + hosted: runs as a local CLI, as agent skills, or as the render core behind hosted workflows.
• Full ecosystem: Studio, Playground, Catalog (block-based modules), Docs, Showcase, and Discord.

Why it belongs in this list

Against the repo's admission criteria:

1. Unique & useful — every other Video Creation entry is a text-to-video / avatar SaaS (Runway, Kling, HeyGen, Jimeng…). HyperFrames is the first code framework in the section that renders video from HTML, filling the "programmatic, reproducible, agent-controllable" gap.
2. Broad applicability — any workflow that needs batch, reproducible, code/Agent-driven video; complements the existing developer/agent-leaning entries (OpenMontage, Palmier Pro, OpenShorts).
3. Actually usable — 67k★, installable npm package hyperframes, live Studio/Playground/Docs, clear quickstart.
4. Alive — commits landed the same day (2026-10-19).
5. No red flags — Apache-2.0, reputable vendor, not a clone, no obvious security risk.

Quick start

Local CLI (Node ≥ 22):

npm i -g hyperframes
hyperframes --help

AI coding agent (Claude Code):

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Then use /hyperframes:hyperframes; it installs each creation workflow on demand.

Standalone skills (incl. OpenCode):

npx skills add heygen-com/hyperframes

npx hyperframes skills update keeps the core set fresh.

Try: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music." The agent runs the full loop: plan → write valid HTML → wire seekable animations → add media → lint → preview → render.

Core capabilities

• HTML/CSS as source format — describe frames with familiar web tech; reuse the front-end ecosystem.
• Seekable animations — GSAP-style timelines, frame-accurate and positionable.
• Media & composition — background video, images, audio, captions, charts (Catalog has data-chart blocks).
• Deterministic MP4 output — frame-consistent across re-renders; great for CI / batch / diffing.
• Agent toolchain — 21 skills + router covering plan-to-render; MCP support (topic mcp).
• Multi-entry — Web Studio / Playground for visual work, CLI for engineering, plugins/skills for agents.
• Native desktop app — Mac / Linux native app launches from the Dock.

Use cases

• Batch, reproducible video (e-commerce/marketing templates, data-viz reports, weekly recaps).
• AI agents that autonomously produce on-brand short videos.
• Programmatic animation / caption / chart videos needing precise timeline control.
• Turning design drafts or web pages into finished video.
• Automating tutorials and demos from docs, charts, and code.

Pricing & license

• License: Apache-2.0 (permissive; commercial use allowed with attribution and change notices).
• Cost: the framework is free and open source; hosted Studio/Showcase services may have separate terms — see the site.
• Self-hosting: bring your own compute and FFmpeg; no license fee for the OSS parts.

Example

The smallest composition: write an index.html that describes the frames and timing, and HyperFrames renders it into a deterministic MP4.

<div id="root" data-composition-id="root"
     data-start="0" data-width="1920" data-height="1080">
  <img class="clip" src="assets/logo.png"
       data-start="0" data-duration="2" data-track-index="0" />
  <video class="clip" src="assets/video.mp4"
         data-start="2" data-duration="3" data-track-index="0"></video>
</div>

Rules: the outer element carries data-composition-id; every timed element gets class="clip" and timing via data-start / data-duration / data-track-index. The snippet above shows a 2-second logo, then a 3-second video clip — 5 seconds total (default 30 fps → 150 frames).

Local CLI flow (Node ≥ 22):

npx hyperframes init my-video     # scaffold the project (index.html + assets/)
# edit index.html and assets/, then:
npx hyperframes render            # deterministic local render to MP4
npx hyperframes preview           # local preview
npx hyperframes publish           # push to hosted rendering

During a render the engine asks the project for each exact frame as a still picture, so a slow machine never drops a moment — that is what makes rendering deterministic. Richer motion lives in a GSAP timeline inside <script>; the framework already handles play/seek from the data attributes, so scripts only own the creative motion.

Links & resources

• Repo: https://github.com/heygen-com/hyperframes
• Site: https://hyperframes.dev
• Docs: https://hyperframes.heygen.com/introduction
• Studio: https://www.hyperframes.dev/studio
• Playground: https://www.hyperframes.dev/
• Catalog: https://hyperframes.heygen.com/catalog/blocks/data-chart
• Showcase: https://hyperframes.heygen.com/showcase
• npm: https://www.npmjs.com/package/hyperframes

Changelog

• 2026-10-19: Post created alongside the README addition (Video Creation section, EN/CN). Snapshot: 67.4k★, 6.1k fork, Apache-2.0, active that day. Updated as the project evolves.