elastic slider

A volume slider micro-interaction where the track is strung like a string. A dark glass card shows "Volume", the headphones' name, a big percentage and a speaker icon, on a near-black stage lit violet from behind. A demo cursor drags the knob four times. From 30 to 78 %, the string bends down under the knob and vibrates when it's let go. To 100 % and past it, the knob stretches past the end of the track like a rubber band and springs back. Down to 0 %, the speaker's waves fade one by one and a cross draws in: muted. Back to 30 %, the sound returns and the loop starts again. The percentage rolls like an odometer, its columns appearing as the number grows; the tick marks under the track light up behind the knob and dip with the bend; the glow behind the card brightens and dims with the volume; the lit part of the string thins as it stretches. The headphones, Velmoor One, are invented. No images: inline SVG for the string, knob and icon (Lucide's volume icons), CSS gradients and shadows for the card, a fine film grain, Inter for the type, a 1080 × 1080 stage that scales to fit any window, one render(t) function for every frame and a frame-exact recorder (?rec and window.__render). Reduced motion shows the string at its deepest bend as a still.