HyperFrames skill
Skills and CLI from HeyGen: the agent writes HTML compositions and renders them into MP4 videos, captions, motion graphics and decks
- 74,938 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- Runs the CLI, FFmpeg and a headless browser locally
- May call cloud rendering and media generation services
Install
- Works in
Manual install
npx hyperframes skills updateInstalls the core set from current main without the interactive picker.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs the CLI, FFmpeg and a headless browser locally
- May call cloud rendering and media generation services
This is third-party code. Review the repository files before installing.
What it does
HyperFrames turns HTML, CSS, media and seekable animations into deterministic MP4 video. The hyperframes router skill takes the request, clarifies the brief and picks a workflow: a site promo, an explainer, a pull request video, captions for a talking head, overlays, a music clip, a slide deck or a Remotion port. Domain skills cover the composition contract, GSAP, Lottie, Three.js and CSS animation, audio mixing, media sourcing, Figma import and the CLI loop from preview to render. The router installs creation workflows on demand.
Who it is for. For developers, marketers and content teams who want to make short videos with an agent from code rather than in a video editor.
Good fit when
- You need a product promo from a website URL
- You need captions or graphics on existing footage
- You need an animated feature explainer or a changelog video from a pull request
Not a fit when
- You need to edit long live-action footage
- You cannot install Node.js 22 and FFmpeg
Example request
Using /hyperframes, make a 15-second video about our app's new release from our website, with titles and background musicLimitations
Requires Node.js 22+ and FFmpeg. HeyGen cloud rendering, AWS Lambda rendering and voice, music or image generation need separate accounts and keys. The skills.sh registry can lag behind main; npx hyperframes skills update installs the current version.
How to disable. Remove the hyperframes and hyperframes-* folders from the agent's skills directory or uninstall the plugin via /plugin.
FAQ
Which skills should I install?
The core-skills set: the router, the hyperframes-* domain skills and media-use. The router installs creation workflows itself.
How does it differ from Remotion?
Compositions are plain HTML with no React or bundler, and the project is Apache 2.0 with no render fees.
Discussion
No questions or reviews yet.
Related
SkillsA skill that turns an article, README or website into a vertical HyperFrames promo video: brief and approval first, then assets, build and review
A skill that turns an idea, a link or a screen recording into finished video: HeyGen avatar, b-roll, captions and quality checks
A skill that makes your agent film a short product video: concept, edit, sound and render on Remotion or HyperFrames
A skill for promo films and kinetic type: idea and storyboard before the build, MP4 rendered through Chrome and ffmpeg, checked by six gates
A director skill: it interviews you about a video idea and turns it into a second-by-second shot script for HyperFrames
A kit of 14 skills for editing reels and Shorts in Codex or Claude Code: transcript-driven cuts, storytelling and motion graphics
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| HyperFrames (this entry) | no | 74,938 | |
| HeyGen Skills | yes | 525 | three HeyGen skills |
| motionmaxxing | no | 1,123 | a skill for promo films and kinetic type |
README in short
The README presents HyperFrames as an open framework for rendering video from HTML, used through the CLI, from agents with skills or as the engine behind hosted services. Skills install with npx skills add or npx hyperframes skills update, after which you just describe the video to the agent. It has tables of workflows and domain skills, a catalog of ready blocks via hyperframes add and a comparison with Remotion. Apache 2.0 licensed.
README badge
Original SKILL.md
--- name: hyperframes description: > Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session. --- # HyperFrames entry point HyperFrames **renders video from HTML** — a composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework. The full authoring contract lives in `/hyperframes-core`; read it before writing composition HTML. ## 1. Start from project state Apply the first matching row; do not evaluate lower state rows: | State | Action | | --- | --- | | Explicit port of existing Remotion source to HyperFrames | Read `references/routes/remotion-to-hyperframes.md`, then route directly to that workflow. Skip the intent layer. | | Specific operation on an existing HyperFrames project: inspect, diagnose, validate, preview, render, publish, or batch-render | Perform only that operation. Skip intent and workflow routing; load `/hyperframes-cli` and any required domain skills. | | Specific edit to an existing project | Make the edit. Do not run the intent layer. | | `BRIEF.md` exists | Read `workflow` and `flow`. Execute that workflow; `flow: companion` always executes in `/general-video`. Ask no brief questions. |