heygen-com/hyperframes

HyperFrames – turn HTML + CSS into deterministic MP4 videos

What it is – An open‑source Node.js framework that lets you describe a video as ordinary web markup (HTML, CSS, media files, and any seek‑able animation library). HyperFrames then renders that description to a perfectly repeatable MP4, either locally via a CLI or through cloud/Lambda back‑ends. It ships a set of skills that AI coding agents (Claude, Gemini, Cursor, etc.) can load, so an LLM can be instructed to “make a 10‑second product intro” and the agent will automatically generate the required HTML, pull assets, lint, preview, and finally call hyperframes render.

---

Core concepts

Concept	What it does
HTML‑based composition	You write a normal HTML file and add special data-* attributes (data-start, data-duration, data-track-index, etc.) that define the video timeline and track layout.
Seek‑able animation adapters	HyperFrames can drive GSAP, Lottie, Three.js, Anime.js, CSS WAAPI, or custom adapters, all of which are forced to be seek‑able so the renderer can jump to any frame deterministically.
Media‑OS (/media-use)	A unified asset manager that resolves images, audio, video, TTS, music, etc., either from local files or by calling generation models when a needed asset is missing.
Skill router	The /hyperframes skill is a tiny intent layer that maps a natural‑language request to one of the 10+ creation‑workflow skills (product‑launch video, faceless explainer, PR‑to‑video, etc.).
CLI	`npx hyperframes init

---

Main capabilities (the “creation workflows”)

• Product‑launch video – turn a website or script into a 30‑90 s marketing clip.
• Faceless explainer – generate a visual explainer from plain text, with LLM‑invented graphics.
• PR‑to‑video – feed a GitHub PR URL and get a changelog‑style walkthrough.
• Embedded captions / talking‑head recut – add subtitles or graphic overlays to existing footage.
• Motion graphics – short, un‑narrated kinetic pieces (logo stings, chart hits, etc.).
• Music‑to‑video – sync a beat‑driven video to an audio track.
• Slideshow / deck – output an interactive, navigable presentation rather than a flat video.
• General video – a catch‑all for any longer or multi‑scene composition.
• Remotion‑to‑HyperFrames – one‑way migration from a React‑based Remotion composition.

---

How to try it (quick start)

# 1. Install the HyperFrames skill set for an AI agent
npx skills add heygen-com/hyperframes   # interactive picker (core skills only)
# or for a non‑interactive run
npx hyperframes skills update          # installs the core set directly

# 2. Ask the agent a prompt, e.g.
# "Using /hyperframes, create a 10‑second product intro with a fade‑in title, a background video, and subtle background music."

# 3. The agent will generate an HTML composition, run `hyperframes preview` for you to check, then:
cd my-video
npx hyperframes render   # produces deterministic video.mp4

If you prefer to work manually, the same CLI works without any AI:

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # live‑reload in browser
npx hyperframes render    # creates MP4 (requires FFmpeg)

---

Ecosystem & extensibility

• Domain skills – tiny, on‑demand modules (/hyperframes-animation, /hyperframes-keyframes, /hyperframes-audio, /media-use, /figma, etc.) that the router composes.
• Catalog & registry – hyperframes catalog lets you browse and install reusable blocks (transitions, effects, design tokens) and contribute new ones upstream.
• Design bridge (frame.md) – a “design‑to‑video” spec that mirrors a brand’s web design system, making it easy for an LLM to respect brand tokens while composing.
• Cloud & serverless rendering – optional hosted rendering on HeyGen’s infrastructure or self‑hosted AWS Lambda functions.

---

Who might use it

• AI‑powered content pipelines – companies that want LLMs to auto‑generate marketing videos, PR walkthroughs, or data‑visualization clips.
• Design‑to‑video teams – designers who already maintain a web‑style design system and need a deterministic way to export motion graphics.
• Developers building video‑as‑code tools – anyone who prefers HTML/CSS over proprietary motion‑graphics DSLs.
• Educators / hobbyists – the skill system makes it easy to experiment with LLM‑driven video creation without writing code.

---

Installation & requirements

• Node.js ≥ 22 (the package is published on npm as hyperframes).
• FFmpeg on the host machine for local rendering.
• Optional: Bun (used for the Codex‑plugin packaging script).

---

Where to learn more

• Quickstart: https://hyperframes.heygen.com/quickstart
• Showcase (ready‑made videos you can remix): https://hyperframes.heygen.com/showcase
• Playground (online editor): https://www.hyperframes.dev/
• Docs / Introduction: https://hyperframes.heygen.com/introduction
• Discord community: https://discord.gg/EbK98HBPdk

---

Bottom line – HyperFrames provides a deterministic, HTML‑first way to author video, tightly integrated with AI coding agents via a skill‑router. It lets LLMs generate, preview, and render motion graphics without leaving the familiar web‑development stack.