hyperframes

SKILL.md

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

HyperFrames — start here

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.

Below: a capability map (the domain skills, loaded on demand) and the intent router (pick a workflow for any "make me a…" request — usually a video, but also a navigable deck or a composition port). The split is ownership, not output type: a workflow owns an end-to-end deliverable (its own project dir, gated steps, sub-agents, final artifact); a domain skill is a capability layer a workflow pulls in mid-flight and never owns the task.

Capability map — the domain skills

Atomic capabilities you load on demand — not full workflows; they never own the end-to-end task. For "make me a…" intent, use the intent router below.