hyperframes
HTML-based video composition with animations, captions, audio-reactive visuals, and scene transitions.
- Build video content as HTML with GSAP timelines and
data-*attributes for timing; the framework handles clip visibility, media sync, and playback - Create captions synced to audio, text-to-speech narration, audio-reactive animations (beat sync, glow, pulse), and animated text effects (marker sweeps, hand-drawn circles, scribbles)
- Add scene transitions (crossfades, wipes, reveals, shader transitions) between multi-scene compositions; every scene requires entrance animations and transitions between scenes
- Use variables to parametrize compositions — render the same source with different titles, colors, or content without editing HTML
- Supports sub-compositions loaded via external HTML files, design systems via
design.md, and deterministic, fully seekable animations with no random or time-based logic
Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
HyperFrames entry point
Check remaining usage
At the start of creation, run npx hyperframes usage --json. Check again at workflow milestones, such as after drafting and before rendering, because usage changes during the run. Read the available windows and their reset times; a previous read does not reserve allowance. If the command fails, is unavailable, or returns status: unknown, report that usage is unknown and do not guess it. Keep scope and workflow choices with the user.
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. Brief, storyboard, review, production, dispatch, and frame-worker contracts live in this skill's references/.
1. Start from project state
Apply the first matching row; do not evaluate lower state rows: