Paste one line in a terminal
npx skills add heygen-com/hyperframesPLUGIN / HEYGEN-COM
HeyGen HyperFrames
Turns “make me a video” into markup and an MP4 — HeyGen's video engine, handed to a coding assistant as working instructions.
Why a video here gets written as code rather than laid out in an editor, which starting point sends a request down which route, which pieces can be opened alone when one layer of a video misbehaves, and at what point a HeyGen account starts to matter.
A video that is really a web page.
A HyperFrames video is an HTML file. Elements carry their own start times and durations, animation sits on a timeline that can be scrubbed to any point, and the renderer steps through that file frame by frame in headless Chrome before encoding the result with FFmpeg — so the same input gives back the same video.
Worth knowing before anything else: the assistant is writing a web page, not driving a timeline editor.
What you bring decides the route.
One skill is meant to be read before the rest. It takes the request as it arrives and routes it, mostly on what is already in hand:
- A product or marketing page, or just a brief — a launch piece.
- A topic with no product and no footage behind it — a narrated explainer whose visuals are all invented.
- A GitHub pull request, read through the gh command-line tool — a walkthrough of what changed.
- A music track — something cut to its beats.
- A recording of a person speaking — subtitles, or broadcast-style overlay cards.
- A Remotion project — rebuilt here, one way only.
- Nothing in particular — a deck, a short motion graphic, or a freeform piece worked out in conversation.
The parts every route leans on.
Under those routes sit the parts every one of them draws on, and any can be loaded by itself:
- The rules a file has to obey before it will render at all, and the motion vocabulary on top of them — including the seven animation runtimes it can drive, with GSAP as the default.
- The choices taken before building: palette, lettering, narration, the beat the thing is cut to.
- The supply side: visual blocks to install rather than write, music and images found or generated, a design carried over from Figma.
- The terminal tool that walks a project from empty folder to finished file.
Where it renders, and where it reaches.
The render runs on the machine it was started from; that same terminal tool can hand it to AWS Lambda instead.
The media step is the part that goes outward: it looks in the project first, then in a shared local store, and only then searches HeyGen's own hosted media, freezing whatever it finds into the project so the file cannot shift under a finished video. Reaching that hosted side is where an account on HeyGen's end comes into it.
What gets installed: 19 skills
Skills
The front door, and the only one intended to be loaded before anyone knows what is being asked for. It takes a video request in whatever words it turns up in, works out which route that request actually is, and names the lower pieces the route will need.
Five routes, each one beginning from material that exists before the video does — a product's own website, a subject to explain, a pull request on GitHub, a song, or a Remotion composition to port — and ending at a rendered file. What was handed over is usually what settles which of the five applies, not the kind of video wanted.
faceless-explainerA narrated explainer video with nobody on camera: since there is nothing to film and no product to show, every scene's visuals are invented from the script.music-to-videoHand it a music track and the whole video gets built around it, every cut and every word landing on the beat — with or without footage of your own.pr-to-videoTurns a proposed change to a codebase into a short video explaining it — what changed, why, and who wrote it — read out of the real code rather than a description of it.product-launch-videoYou are putting something out and need the video that goes with it — the promo, the feature reveal, the demo. Give it the product's website, or just a written brief, and it plans and builds the piece, borrowing the brand's own colours, fonts and screens.remotion-to-hyperframesA video built in one tool, Remotion, rebuilt in another, HyperFrames — then held up against the original frame by frame so you can see what the move cost. It goes one way only.
Both of these start from footage of someone speaking and leave it playing underneath, untouched. One adds the words, either as a readable rail along the bottom or composited into the scene behind the speaker. The other adds the graphics a broadcaster would: the name strip, the pulled quote, the figure that appears on screen as it is spoken.
embedded-captionsSubtitles for a video of one person talking, in any of 35 ready-made looks — from plain readable text along the bottom to a headline word that lands behind the speaker.talking-head-recutSomebody talking to camera — an interview, a podcast clip — dressed up with the graphics a broadcaster would put on it: the name strip, the pulled quote, the figure that appears on screen as it is spoken. The recording itself plays underneath, untouched.
For when there is no source material and no ready-made recipe. A few seconds of pure animation where the movement itself is the message. A deck to click through rather than a video to sit and watch. Or a longer freeform piece whose scenes, look and pacing are settled in conversation before anything gets built.
general-videoFor the video that doesn't fit any of the ready-made recipes: you describe what you want, and the scenes, the look and the pacing get worked out with you before anything is built.motion-graphicsA few seconds of pure animation, with no voice-over and nobody on screen, where the movement itself is the message.slideshowA presentation you click through rather than a video you sit and watch: slides that reveal a point at a time, spots you can click to branch off into a side sequence, and a presenter view with your notes on it.
Reach into one of these when a single thing has gone wrong and everything around it is fine: the timing attributes that make a file renderable, how animation is authored across several runtimes, the design decisions that precede a build, where effects and media are sourced, how a Figma file gets in, and the command that renders.
figmaBrings a design out of Figma and into a video — the logo, colours and layouts you already drew, made to move.hyperframes-animationThe movement half of the job — what should slide, pop, fade or fly, and when — kept as ready-made pieces, so a scene's motion is assembled rather than invented from nothing.hyperframes-cliOne command-line tool that carries a video project from empty folder to finished file, with the checks and previews that belong in between.hyperframes-coreThe rules a HyperFrames video file has to follow — how it marks out time, layers and sound — so that what you see in the browser is what comes out of the render.hyperframes-creativeThe look-and-feel decisions that come before anything gets built — the colours, the lettering, the shape of the story and its rhythm.hyperframes-keyframesCamera moves for a video that never had a camera: pushing in on a detail, drifting slowly across a still photo, whipping from one shot into the next.hyperframes-registryMost of the looks a video calls for — film grain, a glitch, a confetti burst — already exist as ready-made pieces; this finds the right one and fits it in, instead of building it from scratch.media-useWhatever a video needs and does not have yet — music, an icon, the real brand logo, a voice — found or generated, then saved into the project so it cannot change underneath you.
02Install the skills, then check the renderer can run:
INSTALL
Install the skills, then check the renderer can run:
Node.js 22 or newer, and FFmpeg.
Add the marketplace, then install the plugins you want
Typed inside the agent's own prompt, not in a terminal. The marketplace is called hyperframes, which is the part after the @.
- 01
/plugin marketplace add heygen-com/hyperframes - 02
/plugin install core-skills@hyperframes - 03
/plugin install hyperframes@hyperframes