# Hyperframes > Author HTML compositions that the `render_video` tool turns into deterministic MP4 video — animated charts and dashboards, data explainers, text/quote cards, kinetic typography, product teasers, and branded short-form social clips. Use when the user asks Brigade to make, render, animate, or produce a video from data, text, or a layout (NOT photoreal/AI footage — that's `generate_video`). - Skill: `spinabot/hyperframes` (Agent Skill) - Install (CLI): `npx skillmds@latest add spinabot/hyperframes` - Raw SKILL.md: https://api.skillmd.com/api/skills/spinabot/hyperframes/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: spinabot (https://skillmd.com/u/spinabot) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/spinabot/hyperframes --- # hyperframes — HTML → deterministic MP4 The `render_video` tool renders an **HTML composition** you write into a pixel-exact MP4. A headless Chrome steps a **GSAP master timeline** frame by frame, captures one image per frame, and FFmpeg encodes them — so the same HTML always produces the same video. This is the right tool for anything **programmatic and data-driven**; reach for `generate_video` only when you need photoreal/AI-generated footage. **Great fits:** animated bar/line/donut charts, KPI dashboards, "N facts about X" explainers, quote/announcement cards, kinetic typography, countdowns, before/after reveals, branded intros/outros, vertical social clips. ## The composition contract (this is what makes or breaks a render) Write ONE self-contained HTML document. Two things are mandatory and non-obvious: 1. **A paused GSAP timeline registered to `window.__timelines[]`.** HyperFrames seeks *this* timeline to render each frame. **Total video duration = `tl.duration()`** — you do NOT set duration with an attribute. 2. **`data-*` attributes** on the root and on every timed element. **Root composition element** — required: `data-composition-id` (must match the `window.__timelines` key), `data-width`, `data-height`, `data-start`; plus `data-track-index`. **Timed children** — `data-start` + `data-track-index` on every one; **visible elements (``, text/graphic `
`s) also need `class="clip"`**; `` also takes `data-duration`. Do **not** put `data-duration` on the root/composition — its duration comes from the timeline. ```html
Ship faster.
``` - Vertical `1080×1920` for TikTok/Reels/Shorts, `1920×1080` for landscape, `1080×1080` for square feed posts. - Frame rate is an engine default (the tool doesn't expose an fps flag) — author for smooth motion at 30fps. ## GSAP + assets The tool renders a single standalone `index.html` (no project scaffold), so the composition must bring its own GSAP and assets: - **GSAP**: load it via a `