hyperframes

name	hyperframes
description	Generate deterministic MP4 videos from HTML, CSS, media, and seekable animations using HeyGen's HyperFrames framework. Use when someone asks to "render HTML to video", "make a video with HyperFrames", "create a programmatic video", "turn an animation into MP4", "build a launch/product video from HTML", "render GSAP/Lottie/Three.js to video", or set up an agent-driven video pipeline. Covers init/preview/render/add/lint/inspect commands, data-* timing attributes, animation adapters, and the component catalog.
license	Apache-2.0
compatibility	Node.js 22+, FFmpeg, headless Chrome (Chromium). macOS, Linux, Windows.
metadata	{"author":"terminal-skills","version":"1.0.0","category":"content","tags":["video","html","ffmpeg","animation","rendering"]}
evals	[{"name":"render-gsap-to-mp4","prompt":"I have an index.html with a GSAP animation and some text. How do I turn it into an MP4 video that comes out identical every time I render it?","rubric":"Pass criteria: (1) names HyperFrames and uses `npx hyperframes render`;\n(2) explains rendering is via headless Chrome seeking each frame + FFmpeg encoding;\n(3) ties determinism to binding animation progress to the timeline (paused/seekable),\nnot real time — warns against Date.now()/Math.random()/wall-clock motion;\n(4) mentions previewing (`hyperframes preview`) and/or `lint` before render.\nScore higher for concrete commands over prose.\n"},{"name":"ci-launch-video-pipeline","prompt":"Set up an automated pipeline that renders a product launch video from an HTML file on every release, with no manual editor step.","rubric":"Pass criteria: (1) uses HyperFrames non-interactive CLI (`lint` then `render`) in CI;\n(2) lists the real prerequisites — Node.js 22+ and FFmpeg installed on the runner;\n(3) leverages deterministic output so the artifact only changes when the composition does;\n(4) shows or describes a concrete CI job (e.g. GitHub Actions) producing an MP4 artifact.\nScore higher for a runnable workflow over generic CI advice.\n"},{"name":"composition-timing-and-audio","prompt":"In a programmatic HTML video, how do I control exactly when each element appears and disappears, set the canvas size, and add background music at reduced volume?","rubric":"Pass criteria: (1) uses `data-start` and `data-duration` in seconds on elements;\n(2) sets canvas via `data-width`/`data-height` on the stage element;\n(3) uses an <audio> element with `data-volume` (0.0-1.0) for the music bed;\n(4) optionally references `data-track-index` for layering and `data-composition-id`.\nScore higher for a correct HTML snippet over a prose description.\n"}]

HyperFrames

Overview

HyperFrames is an open-source (Apache-2.0) framework from HeyGen that turns HTML, CSS, media, and animations into deterministic MP4 videos — identical input always produces identical output. It parses HTML compositions annotated with data-* timing attributes, drives headless Chrome to seek and capture each frame, and encodes the result with FFmpeg. There is no build step, no React requirement, and no per-render fee. It is designed to be agent-friendly: the CLI is non-interactive by default, so it slots cleanly into automated content pipelines.

Use this skill to scaffold projects, author HTML compositions, preview them with live reload, and render frame-accurate video — including animations driven by GSAP, CSS, Lottie, Three.js, Anime.js, or the Web Animations API.

Instructions

Prerequisites

Confirm the environment before starting:

• Node.js 22+ (node --version)
• FFmpeg on PATH (ffmpeg -version)
• Headless Chrome/Chromium is downloaded by the engine on first run.

Scaffolding a project

npx hyperframes init my-video    # scaffold a project (creates index.html + package.json)
cd my-video

For agent-managed setup inside an existing AI-agent workspace, the skill can be installed with npx skills add heygen-com/hyperframes.

Authoring a composition

Compositions are plain index.html files. A root stage element declares the canvas and composition id; child elements declare when they appear and how long they last via data-* attributes. Time values are in seconds.

Attribute	Purpose
data-composition-id	Names the composition (target for render/inspect)
data-start	When the element enters the timeline (seconds)
data-duration	How long the element stays on the timeline (seconds)
data-width / data-height	Canvas dimensions in pixels (on the stage element)
data-track-index	Layer/track ordering for stacked audio or video