H
heygen-com/hyperframes
Write HTML. Render video. Built for agents
View on GitHub ↗Link checked 2026-11-12 · HTTP 200 · opens the vendor's own site
Install & config
Client config (built from the install command this repo gives)
{
"mcpServers": {
"heygen-com-hyperframes": {
"command": "npx",
"args": ["skills"]
}
}
}Parsed from the README we fetched on 2026-10-26; we have not executed it.
command/args come from the install command the repository states. When it is ambiguous, the project README wins.
VS Code (.vscode/mcp.json - the key is servers)
{
"servers": {
"heygen-com-hyperframes": {
"command": "npx",
"args": ["skills"]
}
}
}Same server, but VS Code keeps it under <code>servers</code>.
Claude Code (command line)
claude mcp add --transport stdio heygen-com-hyperframes -- npx skills
Claude Code does not read a config file; add the server with this command.
Key names differ by client: Clients & CLI
- Star count
- 83,864 ★ · heygen-com/hyperframes · read from the GitHub search API · (checked 2026-11-13 20:00:50)
- Source
- read directly from its GitHub page · type: open-source project
- Harvest history
- first seen 2026-10-26 · last seen 2026-11-14 · seen 23× · listed by 1 sources
- Score
- score 249 · 83,864 ★ · 1 sources · repo
- Install
npx skills
FAQ (answers come from our records)
How do I install it?
The repository provides this install command:
npx skills. It comes from the repository itself; we cannot guarantee it runs as-is in your client.Who is it for?
We filed it under these tags: 开源项目. The tags come from the entry itself, not a taxonomy we imposed.
Who maintains it?
repository
heygen-com/hyperframes；first catalogued 2026-10-26；last seen 2026-11-14。There is no official certification or quality rating here — we record sources and dates only.Write HTML. Render video. Built for agents.
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
Studio |
Quickstart |
Showcase |
Playground |
Catalog |
Docs |
Discord
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:
bash
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:
bash
npx skills add heygen-com/hyperframes
> The picker opens with nothing pre-selected — the Core Skills group is all you need; /slideshow, /remotion-to-hyperframes and /figma install on demand. Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas skills add --all installs all 7 published skills. The six repo-internal skills under .claude/skills / .agents/skills are excluded by default. For the full published set use npx hyperframes skills.
> skills add resolves the skills.sh registry blob, which can lag main by hours. npx hyperframes skills update installs from the current main, 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 for just one (bare name, no leading /).
Quickstart |
Showcase |
Playground |
Catalog |
Docs |
Discord
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:
bash
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:
bash
npx skills add heygen-com/hyperframes
> The picker opens with nothing pre-selected — the Core Skills group is all you need; /slideshow, /remotion-to-hyperframes and /figma install on demand. Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas skills add --all installs all 7 published skills. The six repo-internal skills under .claude/skills / .agents/skills are excluded by default. For the full published set use npx hyperframes skills.
> skills add resolves the skills.sh registry blob, which can lag main by hours. npx hyperframes skills update installs from the current main, 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 for just one (bare name, no leading /).
Listed badge (optional)
Copy this line into the README if you want the listing mark. Optional, and it does not affect being listed.
[](https://anclum.com/en/s/heygen-com-hyperframes/)
- Source
- github · https://github.com/heygen-com/hyperframes
- Browse by field
- Open source
- Traction
- 83,864 ★
- added
- today
More like this
Filed under
Every tag opens the full list for that filter. Counts are the live catalogue figures.