HyperFrames Guide: How AI Agents Build Videos in HTML

Hyperframes is an open-source framework from HeyGen that lets AI coding agents — Claude Code, Cursor, Codex, and others — build videos by writing HTML, CSS, and JavaScript instead of clicking through a timeline editor.

An agent writes a composition, GSAP animates it frame-by-frame, and a renderer captures it into an MP4. This guide walks through how the workflow actually runs, what the seven-step production pipeline looks like, how it compares to Remotion, and where a planning-first tool like VidMuse fits for teams that want a directed video without hand-writing code.

Key Takeaways

• Hyperframes turns HTML, CSS, and GSAP code into rendered video — HeyGen calls this "vibe-coding" a video, and it's installed as a skill set for AI coding agents.
• It's open source under Apache 2.0, which means free commercial use at any scale with no per-render fees — a meaningfully different license model than Remotion's commercial license.
• The framework ships eight core agent skills and ten optional workflow skills (product launch, website-to-video, faceless explainer, and more) that install via a single CLI command.
• Production runs through a seven-step pipeline — capture, design, script, storyboard, voiceover, build, validate — that keeps every creative decision inspectable as a file on disk.
• Hyperframes requires Node.js 22+, FFmpeg, and comfort working inside a coding agent; it is not a no-code, drag-and-drop product.
• For teams that want a planned video workflow without writing or reviewing code, VidMuse's Assets Upload → Creative Brief → Reference Generation → Scene & Shots List → Storyboard → Video Generation flow covers similar planning ground through a guided interface.

What Is Hyperframes?

Hyperframes is a framework, originated by HeyGen and released as open source, that lets AI agents compose video by writing standard web code rather than a proprietary video-editor format. According to HeyGen's official site, Hyperframes "lets AI agents compose videos by writing HTML, CSS & JS" and is "originated by HeyGen, built for the community," distributed under the Apache 2.0 license. The core idea: a composition is just an .html file. An AI agent (or a human) writes timed elements into that HTML, attaches a GSAP animation timeline, and a renderer captures the result frame by frame into a deterministic MP4.

That's a different starting point than most consumer AI video generators, which take a text prompt and return a finished clip from a diffusion model. Hyperframes doesn't generate pixels from a prompt — it composes and animates content you (or your agent) provide, the way a motion-graphics editor would, except the "editor" is code and the operator is usually an LLM.

How the Vibe-Coding Workflow Runs

The fastest path into Hyperframes is installing it as a skill set inside an AI coding agent, then describing the video you want in plain language.

1. Install Hyperframes as an AI coding agent skill set

Per the official quickstart, the setup is a single command:

npx skills add heygen-com/hyperframes

Running this command installs a picker of core skills that register as slash commands in Claude Code. Cursor, Gemini CLI, Codex, Google Antigravity, and GitHub Copilot CLI load them too.

2. Use the core skill set to cover the full project workflow

The core skill set is built to cover a full project end to end. Per the docs, the eight core skills are:

3. Choose optional workflow skills for specific input types

On top of the core skills, optional workflow skills match specific input types. For example:

A reader evaluating Hyperframes for a specific use case should check whether one of these named skills already matches their input before building a composition from scratch.

4. Use Claude Design as a no-code starting point

For anyone who'd rather not run a CLI at all, HeyGen also offers a Claude Design entry path.

Per the docs, downloading a skill file from GitHub and attaching it to a Claude Design chat produces a valid first draft, including:

• Brand identity
• Scene content
• Animations
• Transitions

That draft is then refined inside an AI coding agent.

This is the closest Hyperframes gets to a no-code starting point, though the refinement step still happens in code.

Hyperframes, Claude, and Codex: Which Agents Are Supported

A common question searched alongside "hyperframes claude" and "hyperframes codex" is simply which coding agents the framework actually works with.

The answer, confirmed across the quickstart and prompt guide, is that Hyperframes isn't built for a single agent — it's built as a portable skill package. The same install command targets multiple coding agents:

npx skills add heygen-com/hyperframes

Supported agents include:

Claude Code gets a specific callout in the docs: after installing, the skills register as slash commands, and the guide recommends restarting the session and starting every prompt at /hyperframes so the agent routes the request correctly instead of guessing at generic HTML video conventions.

The prompting guide also warns against skipping that slash command. Without it, an agent "may guess at HTML video conventions instead of using the framework's actual rules." In other words, the choice of agent matters less than whether the Hyperframes skill is actually invoked correctly inside that agent.

The Seven-Step Production Pipeline

Hyperframes' most distinctive contribution isn't the renderer — it's the structure it imposes on agent-built video projects.

Per the official pipeline guide, every well-structured Hyperframes video flows through the same seven steps, regardless of whether it starts from a website, a PDF, a CSV, or a blank page.

The seven steps

Each step produces a named artifact the next step depends on.

What the project folder contains

In practice, that means a project folder accumulates real files instead of an opaque generation:

The guide notes that the order matters because scene durations are derived from the narration timestamps, and animation choices are derived from the storyboard. Skip a step and you lose the artifact the next one needs.

This pipeline structure is the part of Hyperframes most worth borrowing as a mental model even for teams that won't touch the code: separating capture, brand reference, script, and shot-by-shot direction into distinct, reviewable stages is exactly the kind of planning-before-generation approach that prevents AI video from collapsing into a single lucky, or unlucky, prompt.

Voiceover and TTS in Hyperframes

For narrated video, Hyperframes includes built-in text-to-speech as part of its media skill.

Per the prompt guide, TTS runs locally through Kokoro with no API key required. The agent can pick a voice automatically based on content type, or be told directly which one to use.

Examples include:

The pipeline guide adds that Hyperframes also ships ElevenLabs and HeyGen TTS adapters alongside Kokoro, so the local, no-key option isn't the only path if a project needs a different voice engine.

Generated narration doesn't just produce audio. Per the pipeline docs, the transcription step outputs a transcript.json with word-level timestamps that every later step reads for timing. This is how Hyperframes keeps caption sync and beat duration grounded in the actual spoken audio rather than estimated guesses.

Hyperframes vs. Remotion: Two Different Bets

"Hyperframes vs Remotion" is one of the more pointed comparisons in this space, partly because HeyGen used Remotion internally before building Hyperframes and has written its own detailed comparison.

The framing HeyGen gives is direct:

That single decision drives most of the differences downstream.

The most concrete difference: animation timing

The most concrete difference shows up in animation timing.

HeyGen ran the same four-second GSAP timeline through both renderers and reported different results:

That happens because, per the guide, GSAP drives its own timeline via performance.now(). Hyperframes pauses and seeks that timeline to frame / fps before capturing each frame, while Remotion has no equivalent primitive.

Other differences worth knowing

Neither tool is strictly better — they're optimized for different authors.

Teams with an existing React design system, or that need Lambda-scale distributed rendering today, have real reasons to stay on Remotion. Teams building agent-first pipelines, or that want a renderer whose source doubles as a directly editable, build-step-free DOM, are the audience Hyperframes is written for.

Prompting Hyperframes: A Quick Reference

Getting good output from Hyperframes is less about technical HTML knowledge and more about prompt vocabulary, since the installed skills translate plain-language adjectives into specific framework settings.

The prompt guide documents two reliable prompt shapes:

Warm-start prompts tend to produce richer, more grounded videos because the agent is writing about something specific instead of inventing copy.

Vocabulary mapping

The vocabulary mapping is worth knowing even at a glance:

Anti-patterns to avoid

The guide's anti-patterns list is just as useful:

Where Hyperframes Fits — and Where It Doesn't

Hyperframes is a strong fit for teams that:

It's a weaker fit for anyone who wants to skip code entirely. Even the Claude Design entry path produces a first draft that still gets refined inside a coding agent afterward. Distributed rendering for very long or high-volume projects is, by HeyGen's own account, still on the roadmap rather than shipped.

Where VidMuse Fits in the Workflow

That gap is exactly where a planning-first, no-code AI video tool earns its place.

VIDMUSE AI

Stop Guessing, Start Directing

VidMuse plans your scenes, shots, and storyboard before generating — no more one-shot prompting.

Try VidMuse Free↗

✦AI-directed workflow♪Music-aware scenes✓Ready to publish

VidMuse is positioned as an AI Director for video generation rather than a code framework. Instead of writing HTML and registering a GSAP timeline, the workflow runs through:

Where Hyperframes' seven-step pipeline — capture, design, script, storyboard, voiceover, build, validate — is something an engineer or agent assembles file by file, VidMuse aims to guide a similar planning sequence through an interface that doesn't require installing a CLI or reviewing HTML.

That planning sequence includes:

The two tools also sit at different points in a production chain rather than competing head-on for the same job.

Hyperframes explicitly says it composes rather than generates from a blank prompt. VidMuse's model-agent workflow, by contrast, helps users plan, direct, and iterate using leading text-to-video and image-to-video generation models, then carries that output through scene and shot planning, storyboard, and VidMuse 2.0's Timeline Editor and Shot Refine by Quoting for targeted iteration.

That makes VidMuse useful for teams whose starting point is an idea or a creative brief rather than an existing asset library to capture from.

For verified specifics on Hyperframes' rendering limits, licensing terms, or skill availability, check the official Hyperframes documentation directly, since CLI commands and skill packages update independently of this guide.

FAQ

Plan Your Next Video Without Writing Code

If Hyperframes' code-first workflow isn't the right fit for your team, VidMuse can structure scenes, shots, storyboards, and final video generation in one guided workflow — no HTML, CLI, or coding agent required.

Conclusion

Hyperframes proves that "code as the video format" is a genuinely useful bet for AI agents: HTML has no build step, GSAP timelines seek frame-accurately instead of racing at wall-clock speed, and the whole project — capture, design, script, storyboard, voiceover, build, validate — leaves an inspectable trail of files instead of a black-box render. For teams already living inside Claude Code, Cursor, or Codex, that's a fast, free, and unusually transparent way to turn assets and ideas into finished video.

The tradeoff is that Hyperframes asks you to operate inside a coding environment — Node.js, FFmpeg, slash commands, and an agent that knows the framework's rules. That's the right cost for engineering-led teams who want full control over every frame. It's the wrong cost for a marketer, founder, or creator who wants the same planning discipline — brief, references, scenes, shots, storyboard — without installing a CLI or reviewing HTML. That's the gap VidMuse is built to close: the same structured, plan-before-you-generate philosophy Hyperframes champions, delivered through a guided AI Director workflow instead of a code editor.

If Hyperframes' code-first workflow isn't the right fit for your team, VidMuse can structure scenes, shots, storyboards, and final video generation in one guided workflow — no HTML, CLI, or coding agent required.

VIDMUSE AI

Skip the Code, Keep the Control

VidMuse gives you a planned AI video workflow — assets, scenes, shots, storyboard — without writing a line of HTML.

Try VidMuse Free↗

✦AI-directed workflow♪Music-aware scenes✓Ready to publish