Track List Hover

Build a music tracklist of 3 songs in a light card. Each row: track number, title, and duration in monospace. One row is the "now playing" row. Hover: hovering any non-playing row swaps its track number for a small accent play triangle and tints the row background with 4.5% ink - the classic Spotify affordance. Playing row: its number cell shows a tiny 3-bar equalizer instead - three 2.5px accent bars that continuously animate their scaleY between 0.35 and 1 with staggered delays (0, 0.18s, 0.36s, ~1.1s cycle, easeInOut), transform-origin bottom. The title turns accent and bold, the row gets a 7% accent background, and a 3px accent bar sits flush on the row's left edge. Switching: clicking a row makes it the playing row. Animate the left edge marker to the new row as one shared element (Framer Motion layoutId or equivalent) with a spring (stiffness ~420, damping ~32) so it hops between rows rather than teleporting. Accessibility: rows are buttons with aria-pressed on the playing one; the equalizer is aria-hidden. Under prefers-reduced-motion the equalizer bars hold still at 70% height and the marker moves instantly. Colors as tokens: paper card, ink text, one accent. 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.