Music Visualizer

Create a music player with an equalizer visualizer. A dark now-playing card: a disc icon in a tinted circle that spins continuously while playing (360deg per 6s, linear), the track title, a row of ~14 thin equalizer bars, and a small round play/pause button. The bars dance while playing: each animates scaleY through an irregular pattern (base → 1 → 60% of base → 0.9 → base) on an ease-in-out loop, with per-bar durations varied by index (0.9s + (i % 4) * 0.18s) so they never sync, transform-origin bottom. Derive each bar's base height deterministically from its index (a sine hash), not from randomness. Every third bar is accent-colored, the rest paper at 40% opacity. Pausing collapses all bars to a low flat line (scaleY 0.18, 300ms) and stops the disc. In production, drive bar heights from real frequency data (Web Audio AnalyserNode) instead of loops. Accessibility: the play button uses aria-pressed and a swapping label; bars and disc are decorative (aria-hidden). If prefers-reduced-motion is set, show static mid-height bars and no spinning. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.