# HyperFrames Video

Guides making, editing and rendering HTML-based videos with the HyperFrames framework.

- Repository: https://github.com/heygen-com/hyperframes (77062 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add heygen-com/hyperframes --skill hyperframes -g -a claude-code -y`
Codex: `npx skills add heygen-com/hyperframes --skill hyperframes -g -a codex -y`
Cursor: `npx skills add heygen-com/hyperframes --skill hyperframes -g -a cursor -y`
Gemini CLI: `npx skills add heygen-com/hyperframes --skill hyperframes -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add heygen-com/hyperframes`

## Description

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](references/plugin-installation.md) when this skill is inside a HyperFrames plugin.

# HyperFrames

HyperFrames renders HTML to video by seeking a paused timeline frame by frame, so every render is identical; the person edits the same files in the Studio preview. Use it unless another framework or a plain browser recording is asked for. Run the CLI as `npx hyperframes <command>` (`/hyperframes-cli`); at the start of a new video, `npx hyperframes usage --json` reports the person's remaining plan usage (say "unknown" when it is).

`index.html` is the root composition: it declares the video's variables and mounts one scene per sub-composition from `compositions/`. Media and fonts live in `assets/`. A new project: `npx hyperframes init <dir>`. A website as the subject: `npx hyperframes capture <url> --json`.

Build what was asked: no voiceover or captions and no new aspect ratio unless the request or the source calls for them; a film over ~15 s that tells something gets music and sound on its visible actions unless the person asked for silence (`references/sound.md`). A new video is 1920×1080 at 30 fps. A question, a hold or a loose idea gets an answer or a proposal, not an edit. Before hand-writing a named effect, transition, caption style, chart or card, search the registry (`/hyperframes-registry`). Any media (a presenter or avatar, footage, voice, music): `/media-use`, which says when HeyGen is needed and what is free. Show real things from their source (the product's screens, the brand's logo, a real place's imagery); draw only what has none.

## Contract

`npx hyperframes check --json` reports most violations with a `Fix:` line.

The rest: https://github.com/heygen-com/hyperframes/blob/HEAD/skills/hyperframes/SKILL.md