hyperframes

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.

1. Every timed element has class="clip", data-start and data-duration in seconds, and shows over [start, start + duration): land an end state just before its end. data-track-index is only a Studio lane; paint order is z-index.
2. The video's length is the root's data-duration: overrun is cut, an early end holds the last frame.
3. Each composition builds one paused timeline and registers it after its tweens: window.__timelines["<data-composition-id>"] = tl.
4. No Date.now(), unseeded Math.random(), network fetches, timers or repeat: -1. Everything visible is a function of timeline time.
5. Never tween display, visibility or autoAlpha on a .clip; animate a child.
6. No CSS transform on an element GSAP transforms; animate transforms, not left/top/width/height.
7. Never play(), pause() or seek media. A <video> keeps its sound with data-has-audio="true", else it is muted; music, voice, replacement sound and J/L cuts are a separate <audio>.
8. Every <audio> has an id or it is left out of the mix. No crossorigin on media. Time a <video> or its wrapper, never both.
9. Only the bundled fonts (references/format.md) resolve by name; any other family needs @font-face to a file in assets/fonts/.
10. Asset paths are root-relative (assets/...), in sub-compositions too.
11. Grades, grain, blur and vignettes on footage go through npx hyperframes media-treatment (/media-use), never CSS filters.
12. A scene file puts its styles, markup and scripts inside <template> and styles its root as #root. Intended overflow or overlap: data-layout-allow-overflow, data-layout-allow-overlap.