eq-visualizer

The 8-bar sensory equalizer from The DJ Calendar, extracted as a zero-dependency widget. Pure CSS animation. This demo is the documentation that moves.

Default

<span data-eq></span>

Knobs

color #0A66C2
color #f85149, speed 0.6s

Hover reveal - the homepage card

the production behavior: click the card once (browser autoplay policy), then roll over - the 30-second preview plays, the overlay fades in with "you are now listening to", and the canvas EQ dances to the REAL audio frequencies along the bottom edge; roll out and everything stops

#1 click once You are now listening to: Titanium (feat. Sia) David Guetta

this card's audio half is ported from dj-card-preview, the production-verbatim extraction: iTunes preview + Web Audio analyser (fftSize 64, smoothing 0.8) driving 8 canvas bars from dataArray[i*2]

No-JavaScript mode

hand-written bars, no eq.js

Resize your system motion settings to reduced and the bars settle to a calm, static meter - by design, with zero JavaScript involved.