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
HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.
Approach
Discovery (exploratory requests only)
For open-ended requests ("make me a product launch video", "create something for our brand") where the user hasn't committed to a direction, understand intent before picking colors:
- Audience — who watches this? Developers? Executives? General consumers?
- Platform — where does it play? Social (15s), website hero, product demo, internal?
- Priority — what matters most? Motion quality? Content accuracy? Brand fidelity? Speed?
- Variations — does the user want options, or a single best shot?
For specific requests ("add a title card", "fix the timing on scene 3"), skip discovery.
For exploratory requests, consider offering 2-3 variations that differ meaningfully — not just color swaps, but different pacing, energy levels, or structural approaches. One safe/expected, one ambitious. Don't mandate this — it's a tool available when appropriate.