Audio-Reactive Hero

What this builds

A full-viewport hero section where a visual layer (canvas-rendered waveform, frequency bars, radial spectrum, or particle field) reacts in real time to an audio track or microphone input. The hero includes play/pause controls, a static fallback for autoplay-blocked states, and a graceful reduced-motion alternative.

• Frequency data drives visual parameters: bass pulses the background, mids control particle density, highs trigger sparkle/glint effects
• Canvas visualization runs at 60fps with a capped frame budget
• Audio does not autoplay. A user gesture is required. The hero shows an inviting static state until the user clicks play.
• Beat detection triggers discrete visual events (flash, scale pulse) on kick drum hits
• prefers-reduced-motion shows a static hero with visible play controls but no animation
• The visualization adapts to viewport size via ResizeObserver

When to use / when not to

• Use for music artist landing pages, audio product pages, podcast hero sections, creative agency portfolios.
• Use when the audio IS the content, not background decoration.
• Do NOT use for e-commerce or text-heavy pages where audio would be an unwanted distraction.
• Do NOT use when you only need a simple audio player UI; a <audio controls> element is the right tool.
• For the frequency analysis primitives without the hero structure, see primitives audio-reactive-visuals.