Individual skill
hyperframes
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 dev-loop CLI commands (init, lint, inspect, preview, render) see the hyperframes-cli skill; for asset preprocessing commands (tts, transcribe, remove-background) see the hyperframes-media skill.
hyperframes/SKILL.md
Source commit 645553ca7622570479e330cc089c65fcf34e0ba8
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 6, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 453
- Repository last updated
- Nov 4, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- operations Derived category
- writing Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 30,613 bytesSKILL.mdcore · 30,613 bytesSKILL.mdcore · 30,613 bytesSKILL.mdcore · 30,613 bytesSKILL.mdcore · 30,613 bytesSKILL.mdcore · 30,613 bytesSKILL.mdcore · 30,613 bytesSKILL.mdcore · 30,613 bytesdata-in-motion.mddoc · 1,296 byteshouse-style.mddoc · 5,055 bytespalettes/bold-energetic.mddoc · 417 bytespalettes/clean-corporate.mddoc · 410 bytespalettes/dark-premium.mddoc · 389 bytespalettes/jewel-rich.mddoc · 394 bytespalettes/monochrome.mddoc · 454 bytespalettes/nature-earth.mddoc · 399 bytespalettes/neon-electric.mddoc · 380 bytespalettes/pastel-soft.mddoc · 392 bytespalettes/warm-editorial.mddoc · 411 bytespatterns.mddoc · 5,539 bytesreferences/audio-reactive.mddoc · 3,064 bytesreferences/beat-direction.mddoc · 6,139 bytesreferences/captions.mddoc · 5,515 bytesreferences/css-patterns.mddoc · 8,312 bytesreferences/design-picker.mddoc · 12,209 bytesreferences/dynamic-techniques.mddoc · 6,886 bytesreferences/motion-principles.mddoc · 8,790 bytesreferences/narration.mddoc · 3,482 bytesreferences/prompt-expansion.mddoc · 5,554 bytesreferences/techniques.mddoc · 11,127 bytesreferences/transcript-guide.mddoc · 5,864 bytesreferences/transitions.mddoc · 11,709 bytesreferences/transitions/catalog.mddoc · 6,290 bytesreferences/transitions/css-3d.mddoc · 421 bytesreferences/transitions/css-blur.mddoc · 1,787 bytesreferences/transitions/css-cover.mddoc · 1,448 bytesreferences/transitions/css-destruction.mddoc · 4,484 bytesreferences/transitions/css-dissolve.mddoc · 2,462 bytesreferences/transitions/css-distortion.mddoc · 1,803 bytesreferences/transitions/css-grid.mddoc · 370 bytesreferences/transitions/css-light.mddoc · 2,376 bytesreferences/transitions/css-mechanical.mddoc · 1,613 bytesreferences/transitions/css-other.mddoc · 838 bytesreferences/transitions/css-push.mddoc · 1,195 bytesreferences/transitions/css-radial.mddoc · 1,060 bytesreferences/transitions/css-scale.mddoc · 715 bytesreferences/typography.mddoc · 9,326 bytesreferences/video-composition.mddoc · 3,663 bytesscripts/animation-map.mjsruns · 19,405 bytesscripts/contrast-report.mjsruns · 12,574 bytesscripts/package-loader.mjsruns · 8,328 bytestemplates/design-picker.htmlasset · 44,098 bytesvisual-styles.mddoc · 11,765 bytes
Read excerpt
# 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?