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
HyperFrames entry point
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.
1. Start from project state
Apply the first matching row; do not evaluate lower state rows:
| State | Action |
|---|---|
| Explicit port of existing Remotion source to HyperFrames | Read references/routes/remotion-to-hyperframes.md, then route directly to that workflow. Skip the intent layer. |
| Specific operation on an existing HyperFrames project: inspect, diagnose, validate, preview, render, publish, or batch-render | Perform only that operation. Skip intent and workflow routing; load /hyperframes-cli and any required domain skills. |
| Specific edit to an existing project | Make the edit. Do not run the intent layer. |
BRIEF.md exists |
Read workflow and flow. Execute that workflow; flow: companion always executes in /general-video. Ask no brief questions. |
No brief, but hyperframes.json or STORYBOARD.md exists |
Resume from project files and recorded preferences. Infer the owning workflow from existing artifacts. If it cannot be determined uniquely, ask one routing-only question; do not run the intent interview. |
| Fresh creation | Run the intent layer — references/intent-interview.md — then route once using § 2's table. |
If a fresh request does not identify the subject or input, ask what the video is about before routing. Check preferences and recipes before asking anything (references/intent-interview.md, step 1). A figma.com input or a named recipe changes intake, not routing — the interview's "Adapt orthogonal inputs" section handles both.