HyperFrames: Create Videos with HTML & AI Agents

HeyGen's open-source "video as code" framework — turn HTML, CSS, and JavaScript into deterministic MP4 videos, designed for AI agents and power users.

← Part of the Tech knowledge base

What is HyperFrames?

HyperFrames is an open-source framework (Apache 2.0) from HeyGen that lets you (or AI agents) create professional videos by writing HTML, CSS, and JavaScript.

Think of it as "video as code". You define your video like a web page using familiar web technologies, add timing and animation instructions, and HyperFrames renders it into a clean, frame-accurate MP4 file.

As a long-time HeyGen user, you probably use the main HeyGen platform for avatar videos, templates, and quick AI-generated content. HyperFrames is separate — it's the developer and agent-focused layer for advanced post-production, motion graphics, automation, and complex video pipelines.

Why HeyGen Built and Open-Sourced It

HeyGen built HyperFrames internally to power their own high-volume video generation workflows. They open-sourced it so the community (and especially AI agents) could benefit from the same tools.

It excels at:

  • Adding motion graphics, captions, overlays, transitions, and polished edits to your existing HeyGen avatar footage.
  • Automating complex video production at scale (turning websites, PRs, scripts, or product pages into full videos).
  • Agentic workflows where AI does the heavy creative and technical lifting.

The Big Update: Agent Skills & Intent-Driven Workflows

HeyGen recently announced major improvements to HyperFrames "skills" — pre-packaged knowledge that teaches AI coding agents (Claude Code, Cursor, etc.) how to use the framework effectively.

There are now dedicated workflows (skills) that the agent can intelligently route to based on your natural language request. Instead of you having to remember specific commands, you describe what you want in plain English.

Examples of the 9+ workflows include:

  • Product launch video
  • Music video (beat-synced)
  • Captions + overlays
  • Website-to-video
  • Talking-head recut
  • PR-to-video (GitHub pull requests)
  • Motion graphics
  • Faceless explainer
  • General video / slideshow

The agent reads your intent, picks the right workflow, and handles the details. This is a big UX improvement for working with AI on video production.

See the official announcement tweet →

How It Works: HTML → Video

You create an HTML file with special data attributes that tell HyperFrames the timing for each element.

<div data-composition-id="demo" data-width="1920" data-height="1080">
  <video id="clip-1" data-start="0" data-duration="5" src="intro.mp4"></video>
  <h1 id="title" class="clip" data-start="1" data-duration="4">Welcome!</h1>
  <!-- Add GSAP animations, Lottie, CSS, Three.js, etc. -->
</div>

Then use the CLI:

  • npx hyperframes preview — Live browser preview with instant reload (edit and see changes immediately).
  • npx hyperframes render --output video.mp4 — Renders a deterministic, frame-accurate MP4 using headless Chrome + FFmpeg.

Because it's deterministic (same input always produces the exact same output), it's excellent for automation, CI/CD pipelines, and reliable agent workflows.

Key Advantages for HeyGen Users & AI Agents

Agent-Native

LLMs are extremely good at HTML/CSS/JS. Install the skills and let Claude, Cursor, or other agents build and iterate on videos for you.

Works with Your HeyGen Avatars

Generate your talking-head or avatar clips in the main HeyGen platform, then bring them into HyperFrames for professional post-production, captions, motion graphics, and overlays.

No Heavy Framework Required

Unlike Remotion (which uses React/TSX), HyperFrames works directly with standard web technologies. Simpler for agents and many developers.

Rich Animation Support

Native support for GSAP, Lottie, Three.js, CSS animations, and more — with precise, seekable timing control.

Getting Started

  1. Install the CLI: Requirements are Node.js 22+ and FFmpeg. See the repo for full setup.
  2. Add skills for your AI agent:
    npx skills add heygen-com/hyperframes
    This gives your coding agent (Claude Code, Cursor, etc.) the knowledge of all the workflows and best practices.
  3. Start creating: Describe the video you want in natural language. The agent will use the right workflow and generate the HTML composition.
  4. Preview and render: Use npx hyperframes preview during development and render for final MP4 output.

Resources:

HyperFrames vs Remotion

If you're familiar with Remotion, HyperFrames is the lighter, more agent-friendly alternative:

  • Remotion = React components (very powerful for complex apps).
  • HyperFrames = Plain HTML + CSS + JS (easier for most AI agents to generate and modify).

Many people use both depending on the project. HyperFrames is especially strong when you want to combine HeyGen avatars with code-driven post-production.

Related