
HyperFrames Video
Guides making, editing and rendering HTML-based videos with the HyperFrames framework.
Install
npx skills add heygen-com/hyperframes --skill hyperframes -g -a claude-code -y- Repository
- heygen-com/hyperframes77.1k
- Category
- Media
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Mediumabout 1,709 tokens
- Runs scripts
- Yes, review before use
What it does
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.
Plugin installs: Before setup or freshness commands, follow plugin execution rules 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.

