ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(captions): add overflow and audio-reactive constraints

Browse Source 
- Never overflow: hidden on caption containers — clips glow/scale effects
- Music requires audio-reactive captions (any genre, any energy level)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-04-01 22:28:05 -07:00
co-authored by Claude Opus 4.6
parent 483c24123b
commit 0d037ebd64
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/hyperframes-captions/SKILL.md
+2
View File
@@ -215,4 +215,6 @@ Place this **before** `window.__timelines[id] = tl` so it runs at composition in
- **Sync to transcript timestamps.** Words appear when spoken.
- **One group visible at a time.** No overlapping caption groups.
- **Every caption group must have a hard `tl.set` kill at `group.end`.** Exit animations alone are not sufficient.
- **Never `overflow: hidden` on caption containers or groups.** Glow, shadow, and scale effects paint outside the box — clipping them creates hard visual cutoffs. Always use `overflow: visible`.
- **Music requires audio-reactive captions.** If the source audio is music (any genre, any energy level), extract audio data with `extract-audio-data.py` and wire bass/treble reactivity into the composition. See [dynamic-techniques.md](./dynamic-techniques.md). This is not optional.
- **Check project root** for font files before defaulting to Google Fonts.
skills/hyperframes-captions/dynamic-techniques.md
+4 -2
View File
@@ -16,9 +16,11 @@ You are here because SKILL.md told you to read this file before writing animatio
**Emphasis words always break the pattern.** When a word is flagged as emphasis (emotional keyword, ALL CAPS, brand name), give it a stronger animation than surrounding words (larger scale, accent color, overshoot ease). This creates contrast.
## Audio-Reactive Captions
## Audio-Reactive Captions (Mandatory for Music)
When audio data is available, tie caption properties to the music. This is the one pattern that requires HyperFrames-specific wiring — the async loading and timeline registration order matters.
**If the source audio is music (vocals over instrumentation, beats, any musical content), you MUST extract audio data and add audio-reactive animations.** This is not optional — music without audio reactivity looks disconnected. Even low-energy ballads get subtle bass pulse and treble glow.
This is the one pattern that requires HyperFrames-specific wiring — the async loading and timeline registration order matters.
**Critical: register the timeline inside the fetch callback**, not before. If the timeline is registered before the audio `tl.call()` entries are added, they won't fire.