hyperframes
Frameworkheygen-com/hyperframes
HTML-based video rendering framework for AI agents.
Overview
Hyperframes lets developers compose videos using HTML and CSS, with deterministic rendering via headless Chrome. It includes a CLI for previewing and exporting MP4 files, and provides first-class integration with AI coding agents through skill plugins. Supports animation runtimes like GSAP, Lottie, and CSS animations via its Frame Adapter pattern.
README Preview
\n \n \n \n \n \n\n\n\n \n \n \n \n \n\n\nWrite HTML. Render video. Built for agents.\n\n\n \n\n\nHyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents.\n\n## Quick Start\n\n### Option 1: With an AI coding agent (recommended)\n\nInstall the HyperFrames skills, then describe the video you want:\n\n```bash\nnpx skills add heygen-com/hyperframes\n```\n\nThis teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code, the skills register as slash commands — invoke `/hyperframes` to author compositions, `/hyperframes-cli` for the dev-loop commands (init, lint, preview, render), `/hyperframes-media` for asset preprocessing (TTS, transcription, background removal), `/tailwind` for `init --tailwind` projects, `/gsap` for timeline animation help, or the adapter skills (`/animejs`, `/css-animations`, `/lottie`, `/three`, `/waapi`) when a composition uses those runtimes.\n\nFor Claude Design, open [`docs/guides/claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub and click the download button (↓) to save it, then attach the file to your Claude Design chat. It produces a valid first draft; refine in any AI coding agent. See the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design).\n\nFor Codex specifically, the same skills are also exposed as an [OpenAI Codex plugin](./.codex-plugin/plugin.json) — sparse-install just the plugin surface:\n\n```bash\ncodex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets\n```\n\nFor Claude Code, the repo also ships a [Claude Code plugin manifest](./.claude-plugin/plugin.json): test it locally with `claude --plugin-dir .`. The m
FAQ (3)
TroubleshootingWhy do GSAP tweens not show in rendered video after 1700 seconds in hyperframes?
Known bug in hyperframes 0.6.52: GSAP tweens with start time > ~1700s (absolute) are not applied during render. Workaround: restructure animations so tweens start at time 0 and use duration to control visibility, or split the composition into shorter segments. A continuous tween from t=0 works correctly. Track issue #1107 for a permanent fix.
TroubleshootingWhy does a white or black bar appear at the bottom of my rendered video after upgrading HyperFrames to v0.6.11?
This is a known regression in HyperFrames v0.6.11+ (including latest v0.6.31). For the first ~37 seconds of a 1080x1920 portrait composition, the bottom strip is not covered by the video element. The only current workaround is to downgrade to v0.6.10, which renders correctly. Use: npx --yes hyperframes@0.6.10 render --output out.mp4. Track issue #1009 for a permanent fix.
TroubleshootingHow to select an element hidden behind another element in Studio?
Currently, clicking on the preview only selects the topmost element. To select an occluded element, use the Layers panel to manually pick the layer. A feature to cycle through stacked layers by repeated clicks or modifier+click is proposed (see issue #1125) but not yet implemented.