Volume Knob

Build a rotary volume knob component. Structure: a circular knob (about 76px wide) sitting inside an arc of 11 small tick marks arranged around it from -135deg to +135deg (a 270deg sweep). Below the knob, a small monospace readout like "vol 50%". Behavior: clicking the knob steps the volume through 25% -> 50% -> 75% -> 100% and back to 25%. The knob face is a dark disc with a short accent-colored needle at its top edge; when the level changes, rotate the whole disc so the needle points at the new level. Use a spring (stiffness ~220, damping ~16) so the needle overshoots slightly and settles, like a real dial with mass. Ticks: each tick whose angle is at or below the current needle angle is lit in the accent color; the rest stay at 18% opacity ink. Ticks change color with a 0.3s ease, so stepping the volume sweeps a little trail of light behind the needle. At 100%, also switch the readout text to the accent color. Accessibility: the knob is a button with an aria-label announcing the current volume; the readout has aria-live="polite". Under prefers-reduced-motion, rotate instantly with no spring. Keep all colors as tokens: ink for the disc, one accent for needle/ticks/readout. 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.