hyperframes
Write HTML. Render video. Built for agents.
HyperFrames is an agent skill collection that enables AI coding agents to generate MP4 videos from HTML, CSS, and animations. It ships 20 modular skills covering video production workflows—product launches, explainer videos, PR walkthroughs, captions, slideshows, and motion graphics—each teaching agents domain-specific patterns the framework requires. Developers install the core skills router via npx, then prompt their agent to create videos; the agent composes HTML with data-timing attributes, wires seekable animations (GSAP, CSS, Lottie, Three.js), adds media, and renders deterministic output. Built by HeyGen for agents that already write HTML but need video production knowledge.
Key Features
Use Cases
- 01Generate product launch videos and feature announcement clips from website URLs or marketing briefs
- 02Convert GitHub pull requests into narrated code walkthrough videos with animated diffs and captions
- 03Create faceless explainer videos from topic descriptions using LLM-invented typography, diagrams, and data visualizations
- 04Add embedded captions or kinetic graphic overlays to existing talking-head or podcast footage
- 05Produce beat-synced music videos from audio tracks with lyric displays or slideshow visuals
- 06Automate social media content pipelines with reusable motion graphics, lower-thirds, and kinetic type
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
hyperframes — FAQ
What is HyperFrames agent skill?+
HyperFrames is a collection of 20 agent skills that teach AI coding agents how to produce MP4 videos from HTML compositions using data-timing attributes and seekable animations. It provides workflow skills for product videos, explainers, PR walkthroughs, captions, and motion graphics.
How do I install HyperFrames skills for my AI agent?+
Run npx skills add heygen-com/hyperframes --full-depth and select the Core Skills group (router and domain skills); the router installs creation workflows on demand. For non-interactive or agent runs, use npx hyperframes skills update to install exactly the core set.
Which AI agents and clients work with HyperFrames?+
HyperFrames skills support Claude Code, Cursor, Gemini CLI, Codex, and any coding agent compatible with the skills.sh protocol. Agents must be able to write HTML and execute CLI commands.
What are the prerequisites to use HyperFrames?+
Node.js 22 or higher and FFmpeg are required for local rendering. No API keys are needed for the core framework; optional media sourcing via /media-use may use TTS, music, or image generation models.
Is HyperFrames free and open source?+
Yes, HyperFrames is released under the Apache 2.0 license with no per-render fees or commercial-use restrictions. The framework, CLI, and all 20 agent skills are open source.
Can I use HyperFrames without an AI agent?+
Yes, you can manually create compositions with the CLI using npx hyperframes init, write HTML directly, preview in browser with npx hyperframes preview, and render with npx hyperframes render. The skills are optional teaching aids for agents.
How do I install hyperframes?+
Open the source repository on GitHub and follow its README. hyperframes is a skill — MCP Agents Market links you directly to the official repo.
Is hyperframes free?+
hyperframes is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.