Podcast Scrubber

A draggable playhead with chapter ticks and a cycling speed chip

Ep. 42 · Motion matters
15:3652:00

Create a podcast scrubber. A dark player card: episode title, a speed chip, a seek bar with chapter markers, and elapsed/total times in monospace. The seek bar: a 5px track with an accent fill up to the playhead and a round paper-colored thumb (soft shadow). Dragging uses pointer events with setPointerCapture so the drag survives leaving the track; while dragging, the thumb scales to 135% and the fill tracks the pointer with zero lag (no transition), snapping back to smooth 150ms updates when released. Small vertical tick marks sit at chapter positions, brightening once passed. Set touch-action: none on the track. The speed chip cycles 1x → 1.5x → 2x on click with a fixed min-width so the pill never resizes. Accessibility: the track uses role="slider" with aria-valuemin/max/now and aria-valuetext as a readable time, plus ArrowLeft/Right keyboard seeking (5s steps); the speed chip is aria-live="polite". If prefers-reduced-motion is set, drop the thumb scale and any eased movement. 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.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data