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 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.