content / skill
HyperFrames
Write a video as HTML, preview it in a browser and render it to MP4 from the command line or through your coding agent.
At a glance
- Purpose
- Write a video as HTML, preview it in a browser and render it to MP4 from the command line or through your coding agent.
- Runs in
- Local agent with shell, Web service
- Operating systems
- macOS, Linux
- Needs
- Runtime: Node.js 22+ and FFmpeg; Needs internet: Not stated; Needs accounts or API keys beyond your agent: Not stated
- Files and data
- Reads files: Yes; Writes files: Yes; Sends data to other services: Yes
- Tool type
- Skill
- Delivery
- From GitHub
- Version
- Latest on the main branch
- Access
- Code on GitHub
- Compatibility
- According to the README, the skills work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob and other coding agents that support skills. It names plugin routes for Claude Code, Copilot, VS Code, Cursor and Gemini CLI, and standalone skills for OpenCode. The README says the command-line tool needs Node.js 22 or later and FFmpeg.
- External costs
- The repository is Apache-2.0 licensed. The README says it has no per-render fees or commercial-use thresholds. It also names optional HeyGen-hosted cloud rendering and AWS Lambda rendering and does not state their prices. Your coding agent or model provider may charge for usage.
- Permissions
- The skills act through your coding agent with the access you give it. According to the README, they plan videos, write HTML, add media, and run lint, preview and render commands, and the render writes MP4 files. The command-line skill also lists a publish command, HeyGen-hosted cloud rendering, and deploying and running an AWS Lambda render stack, and the /hyperframes router skill installs workflow skills on demand with npx. The README says some workflows read a website from its URL, read a GitHub pull request through the gh command-line tool, or import from Figma. It says the media skill can source or generate music, sound effects, images and voice, and can transcribe and caption. The README's example composition loads the GSAP animation library from a public CDN.
- Usage terms
- Apache License 2.0, as stated in the repository. See its LICENSE file for the exact terms.
Code on GitHub
heygen-com/hyperframes
Apache-2.0Write HTML. Render video. Built for agents.
Topics: ai animation ffmpeg framework gsap html mcp puppeteer
Public GitHub data fetched · 0 days old
View on GitHub ↗What it does
HyperFrames is a framework that turns HTML, CSS, media and seekable animations into MP4 videos. According to the README, you describe a video as an HTML file with data attributes for timing and tracks, preview it in a browser, and render it locally or in Docker with headless Chrome and FFmpeg. The README says the same input produces the same video.The repository also ships agent skills. The README says there are 21, led by a /hyperframes router skill that picks a workflow. Creation workflows cover product launch videos, explainers from text, pull request videos and short motion graphics. Others add captions and graphic overlays to talking-head footage, make beat-synced music videos, build slide decks and port Remotion projects. Other skills cover the composition format, animation, keyframes, creative direction, media sourcing, the command-line tool, audio mixing, a block catalog and Figma import.
The README also describes a Studio editor, AWS Lambda rendering, a catalog of reusable blocks, and frame.md. It says frame.md adapts a web design spec so an agent can compose video from it.
Who it is for
People who want to make videos from HTML and code, either with the command-line tool or by asking a coding agent.Example tasks
Create a 10-second product intro with a title, a background video and music.Turn a GitHub pull request into an explainer video.
Add captions to an existing talking-head video.
Make a beat-synced video from a music track.
Port a Remotion composition to HyperFrames HTML.