Setting the file. One moment.
Skill 22 · Hyperframes Creative
Subchapter 22.1
references/audio-reactive.mdMarkdown3 KBView on GitHub
Drive visuals from music, voice, or sound. Any GSAP-animatable property can respond to pre-extracted audio data.
var AUDIO_DATA = {
fps: 30,
totalFrames: 900,
frames: [{ bands: [0.82, 0.45, 0.31, ...] }, ...]
};frames[i].bands[] — frequency band amplitudes, 0-1. Index 0 = bass, higher = treble.| Audio signal | Visual property | Effect |
|---|---|---|
| Bass (bands[0]) | scale | Pulse on beat |
| Treble (bands[12-14]) | textShadow, boxShadow | Glow intensity |
| Overall amplitude | opacity, y, backgroundColor | Breathe, lift, color shift |
| Mid-range (bands[4-8]) | borderRadius, width | Shape morphing |
Any GSAP-tweenable property works — clipPath, filter, SVG attributes, CSS custom properties.
Audio provides timing and intensity. The visual vocabulary comes from the narrative.
Never add: equalizer bars, spectrum analyzers, waveform displays, musical notes clip art, generic particle systems, rainbow color cycling, strobing white on beats, abstract pulsing orbs.
Instead: Let content guide the visual and audio drive its behavior. Bass makes warmth swell. Treble sharpens contrast. The visual choice comes from “what does this piece feel like?”
Audio reactivity requires per-frame sampling via a for loop with tl.call(), not a single tween:
// ✅ Correct — sample every frame
for (var f = 0; f < AUDIO_DATA.totalFrames; f++) {
tl.call(
(function (frame) {
return function () {
draw(frame);
};
})(AUDIO_DATA.frames[f]),
[],
f / AUDIO_DATA.fps,
);
}
// ❌ Wrong — single tween, doesn't react to audio
gsap.to(".el", { scale: 1.2, duration: totalDuration });Without per-frame sampling, the composition doesn’t actually react to audio.
textShadow on a parent container with semi-transparent children (e.g., inactive caption words at rgba(255,255,255,0.3)) renders a visible glow rectangle behind all children. Fix: apply scale to the container for beat pulse, but apply textShadow to individual active words only.
extract-audio-data.py from this skill’s scripts/)Math.random() or Date.now()