Hyperframes
Create video compositions, animations, title cards, overlays, captions, voiceovers...
Install
npx skills add nateherkai/herk-edit-kit --skill hyperframes -g -a claude-code -y- Repository
- nateherkai/herk-edit-kit2.5k
- Category
- Design
- Updated
- 21d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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:
- What, what should the viewer experience? Identify the narrative arc, key moments, and emotional beats.
- Structure, how many compositions, which are sub-compositions vs inline, what tracks carry what (video, audio, overlays, captions).
- Timing, which clips drive the duration, where do transitions land, what's the pacing.
- Layout, build the end-state first. See "Layout Before Animation" below.
- 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:
