HyperFrames

HeyGen's HyperFrames skill: turn HTML and design into finished video, straight from your agent.

Agent Skills
Agent SkillsVideo GenerationHTML to VideoAI AgentsHeyGenMotion Design
Verified

Install

npx skills add heygen-com/hyperframes
Works with:Claude CodeCodexCursorGemini CLIIBM BobOpenCodeGitHub CopilotVS Code

Skill files (9)

  • skills/hyperframes/SKILL.md
  • skills/hyperframes-cli/SKILL.md
  • skills/hyperframes-registry/SKILL.md
  • skills/media-use/SKILL.md
  • skills/figma/SKILL.md
  • skills/slideshow/SKILL.md
  • skills/remotion-to-hyperframes/SKILL.md
  • skills/reverse-any-video/SKILL.md
  • skills/style-sampling/SKILL.md

Quality and security

License100
Maintenance100
Security90
Documentation95
License: Apache-2.0
Version: v0.9.26
Last updated: 2026-11-09

Pricing

Free and open source (Apache 2.0). Renders locally; no per-render fees.

HyperFrames
HyperFrames
HyperFrames
HyperFrames

HyperFrames Review: Turn HTML Into Finished Video, From Your Agent

Video is the most expensive content to make. A motion designer, an editing timeline, and a render farm, or a week of learning a video tool for one clip. Most teams skip video entirely, even though it is the format that performs best on every platform.

HyperFrames is the Agent Skill from HeyGen that turns HTML and design into finished video. Version 0.9.26, released in November 2026, ships 9 skill files covering the core renderer, the command line, a template registry, media handling, Figma import, slideshows, and video conversion. You describe the video, the agent writes the HTML, and HyperFrames renders it locally in a headless browser and encodes it with FFmpeg. No API key, no per-render fee, and no waiting for a cloud render.

What is HyperFrames?

HyperFrames is an open-source project and Agent Skill from HeyGen. It is built on the idea that a web page is already a video storyboard: layout, typography, colour, and motion are all things HTML and CSS describe well. HyperFrames takes that page, animates it in a headless browser, and records it as video.

The skill installs with one command into Claude Code, Codex, Cursor, Gemini CLI, and four other agents. It ships 9 skill files: the core skill, a command-line skill, a registry skill for templates, a media skill, a Figma import skill, a slideshow skill, a converter from Remotion projects, a reverse-any-video skill, and a style-sampling skill. A catalogue of around 450 design blocks and templates gives the agent starting points, so it rarely begins from a blank page.

Key Features

1. HTML in, video out

The agent writes HTML and CSS, HyperFrames animates it and records the result. If you can describe a web page, you can describe a video, and the agent can build both.

2. A catalogue of 450 design blocks

Around 450 ready-made blocks and templates cover titles, lower thirds, product showcases, and social formats. The agent picks a block, adapts it to your content, and renders it, instead of designing every frame from scratch.

3. Figma import and style sampling

Import a Figma design directly, or sample the style from an existing video and apply it to a new one. The skill bridges the design you already have and the video you want.

4. Slideshows, reverse video, and conversion

Turn a slide deck into a video, reverse-engineer an existing video back into editable frames, or convert a Remotion project into HyperFrames. The skill covers the whole video workflow, not just one render.

5. Local rendering, no per-render cost

Rendering happens on your machine in a headless browser with FFmpeg. There is no API key to manage and no fee per video, so iterating is free and fast.

How It Works

Install the skill with one command into your agent, then describe the video you want: the message, the style, and the length. The agent picks a template or writes the HTML, previews the frames, and renders the video locally. Because the source is HTML, you can change a word, a colour, or a timing and re-render in seconds.

The command line gives you the same renderer without an agent, for scripts and automation. The core skill is the one most people start with; the registry and media skills extend it when you need templates or asset handling.

Who Should Use HyperFrames?

Developers and marketers who need video but do not have a video team, indie hackers who want a product trailer without learning an editor, and agents that already write HTML and should be able to finish the job as video. If your content is text and design today, this is the skill that turns it into motion.

HyperFrames Pricing

Free and open source (Apache 2.0). Renders locally; no per-render fees.

HyperFrames Pros and Cons

Pros

  • Turns HTML and design into finished video with one command
  • 450 design blocks and templates, plus Figma import and style sampling
  • Local rendering with no API key and no per-video fee
  • Very actively maintained: a new release the day this was written

Cons

  • Video quality depends on the HTML and design the agent produces; a weak template gives a weak video
  • Local rendering needs a machine with a browser and FFmpeg installed
  • The skill is new and the ecosystem is still growing; some workflows are less polished than a mature video editor

Final Verdict

If you can describe a web page, you can now describe a video. HyperFrames is the skill that makes that true for an agent, and it does it locally, for free, with a template catalogue that keeps the agent from starting blank. Install it, ask for a product trailer, and watch the frames come back.

Try HyperFrames on GitHub