hyperframes
Create, compose, animate, and render HTML-based video compositions using HyperFrames — an open-source video rendering framework built for AI agents. Covers composition authoring with data attributes, GSAP timelines, caption/subtitle generation, text-to-speech narration, audio-reactive animations, scene transitions, variable-driven parametrized renders, and the full video production workflow.
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill hyperframes --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# HyperFrames — Video Composition Authoring Write HTML. Render video. Built for agents. HyperFrames is an open-source video rendering framework where **HTML is the source of truth**. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync. **Requirements:** Node.js >= 22, FFmpeg **Install:** \Created my-video/ AGENTS.md CLAUDE.md hyperframes.json index.html meta.json package.json Get started: 1. Install AI coding skills (one-time): npx skills add heygen-com/hyperframes 2. Open this project with your AI coding agent: cd my-video then start Claude Code, Cursor, or your preferred agent 3. Try a starter prompt: "Using /hyperframes, create a 15-second intro about [your topic]" More patterns: hyperframes.heygen.com/guides/prompting 4. Preview in the browser: cd my-video && npm run dev 5. Check the composition: cd my-video && npm run check 6. Render to MP4 when ready: cd my-video && npm run render Full docs: hyperframes.heygen.com **License:** Apache 2.0 (fully open source) --- ## Core Concepts ### The Composition Model Every video is a **composition**
- Core Concepts
- The Composition Model
- Data Attributes Reference
- Step-by-Step: Building a Video
- Discovery Phase (Exploratory Requests Only)
- Step 1: Design System
- Step 2: Layout Before Animation
- Step 3: Composition Structure
- Step 4: Variables (Parametrized Compositions)
- Advanced Topics
- Scene Transitions
- Captions & Subtitles
- Text-Behind-Subject (Presenter Behind Headline)
- Animating with Frame Adapters
npx hyperframes render --variables '{"title":"Q4 Report","theme":"dark"}' --output q4.mp4What does the hyperframes skill do?
Create, compose, animate, and render HTML-based video compositions using HyperFrames — an open-source video rendering framework built for AI agents. Covers composition authoring with data attributes, GSAP timelines, caption/subtitle generation, text-to-speech narration, audio-reactive animations, scene transitions, variable-driven parametrized renders, and the full video production workflow.
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill hyperframes --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.