heygen
Skills and MCP tools that let an AI coding agent create avatar videos, giving it a digital face and voice so it can send video messages. Works with Claude Code and other AI coding agents.
1 MCP527
@heygen-comVideo & Audio
Plugin
hyperframes
A plugin of skills for building videos from HTML with HyperFrames, covering motion design, transitions, captions, cursor effects and changelog videos. Useful for developers and agents who want to render motion graphics and product videos.
Plugin Signal87/100Strong
maintained100
capable56
documented100
adopted100
Claude Code
> /plugin marketplace add heygen-com/hyperframes> /plugin install hyperframes@hyperframes
Codex
$ npx skills add heygen-com/hyperframes --skill captions-overlay changelog-video cut-the-curve motion-doctrine oversized-cursor seam-craft figma hyperframes-cli hyperframes-registry hyperframes media-use remotion-to-hyperframes reverse-any-video slideshow -a codex
Cursor
$ npx skills add heygen-com/hyperframes --skill captions-overlay changelog-video cut-the-curve motion-doctrine oversized-cursor seam-craft figma hyperframes-cli hyperframes-registry hyperframes media-use remotion-to-hyperframes reverse-any-video slideshow -a cursor
Gemini CLI
$ npx skills add heygen-com/hyperframes --skill captions-overlay changelog-video cut-the-curve motion-doctrine oversized-cursor seam-craft figma hyperframes-cli hyperframes-registry hyperframes media-use remotion-to-hyperframes reverse-any-video slideshow -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add heygen-com/hyperframes$ copilot plugin install hyperframes@hyperframes
OpenCode
$ npx skills add heygen-com/hyperframes --skill captions-overlay changelog-video cut-the-curve motion-doctrine oversized-cursor seam-craft figma hyperframes-cli hyperframes-registry hyperframes media-use remotion-to-hyperframes reverse-any-video slideshow -a opencode
Windsurf
$ npx skills add heygen-com/hyperframes --skill captions-overlay changelog-video cut-the-curve motion-doctrine oversized-cursor seam-craft figma hyperframes-cli hyperframes-registry hyperframes media-use remotion-to-hyperframes reverse-any-video slideshow -a windsurf
What's inside
14 Skills
/captions-overlayOverlay doctrine for captions in HyperFrames videos — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a/changelog-videoTurn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video"./cut-the-curveThe technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve/motion-doctrineGATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you/oversized-cursorHouse-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and/seam-craftRender-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam
Badges
README
Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord
Download the desktop app: macOS · Windows · Linux (.deb)
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.
Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video.
Quick Start
With an AI coding agent
For Claude Code, install the versioned plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
To enable auto-update for the hyperframes marketplace, run claude in a
terminal in your project. In Claude Code's terminal UI, run /plugin, then select
Marketplaces → hyperframes → Enable auto-update. Afterward, use
/hyperframes:hyperframes. See the plugin guide
for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.
For standalone skills (including OpenCode), use:
npx skills add heygen-com/hyperframes
The picker opens with nothing pre-selected — the Core Skills group is all you need;
/slideshow,/remotion-to-hyperframesand/figmainstall on demand. Agents and non-interactive runs should usenpx hyperframes skills updateinstead — it installs exactly the core set, whereasskills add --allinstalls all 7 published skills. The six repo-internal skills under.claude/skills/.agents/skillsare excluded by default. For the full published set usenpx hyperframes skills.
skills addresolves the skills.sh registry blob, which can lagmainby hours.npx hyperframes skills updateinstalls from the currentmain, so reach for it when you need the newest copy of a skill.
Run project-local installs from your video project's directory. From a HyperFrames
checkout, use npx hyperframes skills update for a global install instead: a
project-local installer target can overlap the tracked skills/ source and
overwrite uncommitted edits. See contributor setup.
Try a prompt like:
Using
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
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, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that support skills.
Skills
HyperFrames ships 7 skills. Make any video by asking for it; the /hyperframes skill carries the contract and the references (film, captions, overlays, motion, look). Read it first.
For standalone installation, default to the core set (/hyperframes, /hyperframes-cli, /hyperframes-registry, /media-use). npx hyperframes skills update installs exactly that from anywhere; the interactive picker (npx skills add heygen-com/hyperframes) 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 7. Use npx skills add heygen-com/hyperframes --all to install the complete published set deliberately (skips the picker), or npx skills add heygen-com/hyperframes --skill <name> for just one (bare name, no leading /).
Standalone installs stay lean after that: npx hyperframes init installs the core set only when it is missing and never touches a skill you already have (npx hyperframes skills update refreshes them, and never removes one); /figma, /slideshow and /remotion-to-hyperframes install on demand with npx hyperframes skills update <name>. Nothing re-pulls the full set behind your back.
Plugin packages
Plugins bundle the full skill catalog and use their agent's update manager.
bun run package:agent-plugin builds the committed portable ZIP, source metadata,
and SHA-256 checksum. See the maintainer checklist.
Upload to Codex
Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:
bun run package:codex-plugin
This writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit.
Core set
| Skill | Use when |
|---|---|
/hyperframes | Read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays with HyperFrames (HTML rendered to video). Holds the render contract and the work loop, and points to the references for format, motion, look, captions, whole films and storyboards. |
/hyperframes-cli | The HyperFrames CLI by job — scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history — plus reading its JSON and recovering from build or render failures. |
/hyperframes-registry | About 450 ready-made blocks and components installed as editable source — transitions, overlays, titles, kinetic type, captions, charts, maps, 3D, camera moves. Use before hand-building any named visual; also for hyperframes add and catalog. |
/media-use | Get or make any media for a video — music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks — with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull. |
On demand
| Skill | Use when |
|---|---|
/figma | Bring Figma into a video — rendered assets, brand tokens, components, storyboard frames as reconstructed motion, shaders and connector-assisted motion. Use when you paste a figma.com link. |
/slideshow | A presentation, pitch deck or interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode with speaker notes. Output is a navigable deck, not a rendered MP4. |
/remotion-to-hyperframes | Bringing existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, other tools' renders), verified frame by frame. |
For visual design handoff workflows, see the Claude Design guide and Open Design guide.
Manually with the CLI
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser with live reload
npx hyperframes render # render to MP4
Requirements: Node.js 22+, FFmpeg
What You Can Build
Need ideas? Browse the Showcase for finished videos you can watch, read, run, and remix.
- Product launch videos and feature announcements
- PR walkthroughs with animated code diffs, narration, and captions
- Data visualizations, chart races, and map animations
- Social videos with kinetic captions, overlays, and music
- Docs-to-video, PDF-to-video, and site-tour explainers
- Reusable motion graphics for automated content pipelines
Frame.md
frame.md — your design system, ready for video.
Every brand has a design.md. None of them were written for a camera. frame.md is the missing translation layer: it takes your web-context design spec and inverts it for the frame — the same tokens, the same rules, but rewritten so an AI agent can compose a promo video without guessing at scale or reaching for web chrome.
The output is a DESIGN.md superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script.
Biennale Yellow
BlockFrame
Stars on GitHub
Momentum
- stars in total
- 82.3k
File tree
More plugins by @heygen-com.
View @heygen-com’s profile@heygen-comSimilar plugins.
See 12 hyperframes alternatives
openmontage
An open-source video production system that turns an AI coding assistant into a video studio, with production pipelines, tools, and skills for generating music, voiceover, avatar videos, AI video clips, and transcripts.
49 skills3 commands+174k
@calesthioremotion
Skills for building videos programmatically with React using Remotion. They cover creating new videos, transcribing and animating captions, structuring interactive video, and searching the Remotion documentation.
13 skills72k
@remotion-devseedance-20
A set of skills for writing Seedance video prompts, covering camera movement, character consistency, audio and lip-sync, continuation of earlier shots, and cutting generic filler language. Aimed at people planning and directing AI-generated video.
28 skills8k
@emily2040skills
Agent skills from Remotion that guide Claude Code and similar AI agents in building videos with Remotion, covering video creation, captions, interactivity and searching the Remotion docs.
13 skills6.7k
@remotion-devQuestions about hyperframes.
Install it with the command on its page. It includes captions-overlay, changelog-video, cut-the-curve. Its skills do not fire on their own yet. Free and open source.
- What is hyperframes?
- heygen-com/hyperframes is a plugin that writes HTML and renders it to video, shipping skills for motion design, captions, scene transitions and cursor effects. Use it when an agent needs to produce product or changelog videos from HTML.
- How do I install hyperframes?
- Run these in Claude Code: /plugin marketplace add heygen-com/hyperframes then /plugin install hyperframes@hyperframes. Then prompt normally.
- Does hyperframes auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin.
- Is hyperframes free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use hyperframes's skills?
- hyperframes installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it