hyperframes
starsforks
How to install hyperframes?
heygen-com/hyperframes
$git clone https://github.com/heygen-com/hyperframesHyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
README.md
| 1 | <p align="center"> |
| 2 | <picture> |
| 3 | <source media="(prefers-color-scheme: dark)" srcset="docs/logo/dark.svg"> |
| 4 | <source media="(prefers-color-scheme: light)" srcset="docs/logo/light.svg"> |
| 5 | <img alt="HyperFrames" src="docs/logo/light.svg" width="300"> |
| 6 | </picture> |
| 7 | </p> |
| 8 | |
| 9 | <p align="center"> |
| 10 | <a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/v/hyperframes.svg?style=flat" alt="npm version"></a> |
| 11 | <a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/dm/hyperframes.svg?style=flat" alt="npm downloads"></a> |
| 12 | <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="License"></a> |
| 13 | <a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D22-brightgreen" alt="Node.js"></a> |
| 14 | <a href="https://discord.gg/EbK98HBPdk"><img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" alt="Discord"></a> |
| 15 | </p> |
| 16 | |
| 17 | <p align="center"><b>Write HTML. Render video. Built for agents.</b></p> |
| 18 | |
| 19 | <p align="center"> |
| 20 | <a href="https://hyperframes.heygen.com/quickstart">Quickstart</a> | |
| 21 | <a href="https://hyperframes.heygen.com/showcase">Showcase</a> | |
| 22 | <a href="https://www.hyperframes.dev/">Playground</a> | |
| 23 | <a href="https://hyperframes.heygen.com/catalog/blocks/data-chart">Catalog</a> | |
| 24 | <a href="https://hyperframes.heygen.com/introduction">Docs</a> | |
| 25 | <a href="https://discord.gg/EbK98HBPdk">Discord</a> |
| 26 | </p> |
| 27 | |
| 28 | <p align="center"> |
| 29 | <img src="docs/public/images/hyperframes-logo-motion-1280-trimmed.webp" alt="HyperFrames demo: HTML code on the left transforms into a rendered video on the right" width="800"> |
| 30 | </p> |
| 31 | |
| 32 | HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows. |
| 33 | |
| 34 | ## Quick Start |
| 35 | |
| 36 | ### With an AI coding agent |
| 37 | |
| 38 | Install the HyperFrames skills, then describe the video you want: |
| 39 | |
| 40 | ```bash |
| 41 | npx skills add heygen-com/hyperframes --full-depth |
| 42 | ``` |
| 43 | |
| 44 | > The picker opens with nothing pre-selected — the **Core Skills** group is all you need: the `/hyperframes` router installs each creation workflow on demand. Agents and non-interactive runs should use `npx hyperframes skills update` instead — it installs exactly the core set, whereas a non-interactive `skills add` without `--skill` installs all 19. |
| 45 | > |
| 46 | > `--full-depth` does a full clone of the repo's current `main`. Without it, `skills add` fetches the skills.sh registry blob, which lags `main` by hours — you'd get an older copy of a skill. (`hyperframes skills update` already installs full-depth.) |
| 47 | |
| 48 | Try a prompt like: |
| 49 | |
| 50 | > Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and subtle background music. |
| 51 | |
| 52 | The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills. |
| 53 | |
| 54 | ## Skills |
| 55 | |
| 56 | HyperFrames ships 19 skills agents load on demand. Read `/hyperframes` first — it's the router and capability map; it picks a workflow for any "make me a…" request — video, deck, or composition port — and points to the domain skills below. |
| 57 | |
| 58 | Default to the **core set** — the router installs each creation workflow on demand. `npx hyperframes skills update` installs exactly that from anywhere; the interactive picker (`npx skills add heygen-com/hyperframes --full-depth`) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without `--skill` installs all 19. Use `npx skills add heygen-com/hyperframes --all --full-depth` to install all 19 deliberately (skips the picker), or `npx skills add heygen-com/hyperframes --skill <name> --full-depth` for just one (bare name, no leading `/`). Keep `--full-depth` — it in |
People who liked this also viewed
6 picksType
- elevenlabs-mcpThe official ElevenLabs MCP serverMCP ServersJul 2026
- MonetEdit Videos and Design Images with Claude code or CodexMCP ServersJul 2026
- scribe.jsJavaScript OCR and text extraction for images and PDFs.MCP ServersJul 2026
- gliana-aiPay-per-call generative AI — 60+ models (image, video, music, speech). No signup, no API key; pay per call from your wallet over MPP/x402.MCP Serversrecently
- nanobanana-mcp-serverAI image generation MCP server powered by Google Gemini, with smart model selection and 4K outputMCP ServersMay 2026
- FramesailCreate long-form (faceless YouTube) videos end to end from any MCP client: script, locked character references, storyboard, voiceover, and final video editing — with characters and style held consistent across every shot. Making long-form MCP Serversrecently
