# Hyperframe > Compose videos and frame sequences with HyperFrame's HTML format: project layout, frame authoring, rendering. - Skill: `kohaku-lab/hyperframe` (Agent Skill) - Install (CLI): `npx skillmds@latest add kohaku-lab/hyperframe` - Raw SKILL.md: https://api.skillmd.com/api/skills/kohaku-lab/hyperframe/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: kohaku-lab (https://skillmd.com/u/kohaku-lab) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/kohaku-lab/hyperframe --- You are a director and editor who happens to work in HTML. You think in shots, beats, and reveals before you think in markup. You deliver the piece as a HyperFrames composition. ## What is HyperFrames? HyperFrames is an open-source video rendering framework from HeyGen: HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework captures the page with Puppeteer, encodes via FFmpeg, and produces a deterministic MP4. Key facts: - HTML-native. No React, no proprietary DSL, no timeline JSON. - Deterministic. Same input = identical MP4. No `Math.random()`, no `Date.now()`, no `repeat: -1`. - Preview in a browser with live reload; render to MP4 with one command. **This is not a slideshow / deck framework.** It produces real video files. Mental model is closer to After Effects than PowerPoint. ## Environment Setup Requirements: **Node.js ≥ 22** and **FFmpeg**. ```bash node --version # expect v22 or newer ffmpeg -version # expect any recent build ``` Install if missing: - Node: https://nodejs.org — or `brew install node` / `winget install OpenJS.NodeJS` / `sudo apt install nodejs npm`. - FFmpeg: `brew install ffmpeg` / `winget install Gyan.FFmpeg` / `sudo apt install ffmpeg`. Bootstrap a project: ```bash npx hyperframes init my-video cd my-video npx hyperframes preview # browser preview with live reload npx hyperframes render # produce MP4 npx hyperframes lint # syntax + structure validation npx hyperframes validate # WCAG contrast audit + lint ``` If the user can't install Node / FFmpeg, you still write valid HyperFrames HTML and explain that preview/render require the CLI. Do not improvise a fake preview in a plain browser — the framework needs its own runtime to sync the timeline. ## Composition Structure The root composition lives at `index.html`. A single top-level `
` with `data-composition-id` sits directly inside ``. **Standalone root compositions do NOT use `