Chapter 05 · Our Favourite Skills · Reading 04

HyperFrames, video from HTML, built for agents

Radiant Digital · ~2 min read

The open-source framework we use to turn HTML, CSS and GSAP into finished MP4s, and the 20 skills that teach an agent to run it. By HeyGen, Apache 2.0.

What it is

HyperFrames is a video renderer that takes a web page (HTML, CSS, media, a seekable GSAP timeline) and renders it frame by frame into a deterministic MP4. That sounds like a niche trick until you realise what it means for an AI agent: an agent can already write HTML, so with HyperFrames it can write a video. Title cards, captions, product promos, explainer scenes, whole short-form edits, all authored as code, checked by a linter, and rendered locally.

We use it for every short-form video we publish: the same deep-space look as this website, liquid-glass caption cards, karaoke-style word timing, rendered from one index.html per video.

Author: the HyperFrames team at HeyGen. Apache 2.0 licensed.

Repository: github.com/heygen-com/hyperframes. Docs at hyperframes.heygen.com, playground at hyperframes.dev.

The skills inside it

The framework ships 20 skills. Read the router first; it installs the rest on demand.

• hyperframes. The router and capability map. Read it first for any "make me a video" request; it confirms the brief, then picks the workflow below.
• hyperframes-core. The composition contract: the data-start and data-duration timing attributes, class="clip", tracks, sub-compositions, and the rules that keep a render deterministic.
• hyperframes-animation. All the motion knowledge: atomic motion rules, scene blueprints, transitions, and the runtime adapters (GSAP by default, plus Lottie, Three.js, Anime.js, CSS keyframes, the Web Animations API and TypeGPU).
• hyperframes-keyframes. Punch-ins, Ken Burns, camera moves, masks, SVG draw-on, 3D depth. Seek-safe keyframes.
• hyperframes-creative. The non-animation direction: design specs, palettes, type, narration, beat planning, brand decisions.
• hyperframes-audio. Mixing audio already in the composition: fades, ducking, EQ, compression, automation.
• hyperframes-cli. The development loop: init, lint, check, preview, snapshot, render, transcribe, publish, and how to read a failed render.
• hyperframes-registry. Search and install the roughly 400 hosted blocks and components (scanlines, glitch, film grain, charts, code windows, liquid glass) before hand-building any of them.
• media-use. One skill for every media need: find or generate music, sound effects, images, logos and voice, produce voiceover and captions, and keep a ledger of what was used.
• Creation workflows: product-launch-video, faceless-explainer, motion-graphics, general-video, music-to-video, talking-head-recut, embedded-captions, slideshow, pr-to-video, remotion-to-hyperframes, and figma. Each one owns a kind of video from brief to render.

Install it

npx skills add heygen-com/hyperframes

The picker opens with the core set selected for you; the router installs each creation workflow when it is first needed. Then, in your agent:

Using /hyperframes, create a 10-second product intro with a fade-in title,
a background video, and subtle background music.