hyperframeslisted

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
nateherkai/hyperframes-video-pipeline · ★ 4 · Web & Frontend · score 67

Install: claude install-skill nateherkai/hyperframes-video-pipeline

# 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 Before writing HTML, think at a high level: 1. **What** — what should the viewer experience? Identify the narrative arc, key moments, and emotional beats. 2. **Structure** — how many compositions, which are sub-compositions vs inline, what tracks carry what (video, audio, overlays, captions). 3. **Timing** — which clips drive the duration, where do transitions land, what's the pacing. 4. **Layout** — build the end-state first. See "Layout Before Animation" below. 5. **Animate** — then add motion using the rules below. For small edits (fix a color, adjust timing, add one element), skip straight to the rules. ### Visual Identity Gate <HARD-GATE> Before writing ANY composition HTML, you MUST have a visual identity defined. Do NOT write compositions with default or generic colors. Check in this order: 1. **DESIGN.md exists in the project?** → Read it. Use its exact colors, fonts, motion rules, and "What NOT to Do" constraints. 2. **visual-style.md exists?** → Read it. Apply its `style_prompt_full` and structured fields. (Note: `visual-style.md` is a project-specific file. `visual-styles.md` is the style library with 8 named presets — different files.) 3. **User named a style** (e.g., "Swiss Pulse", "dark and techy"