KQ-583 · WAVE/SCRUB

Wave Scrub

A scrubber that shows the sound. The played part is the same waveform in a second colour, revealed by a clip that chases the clock on a short linear tween — a spring would overshoot the present — and the elapsed readout is that same motion value formatted, so the digits roll with the fill. Dragging scrubs after 4px of travel, hovering floats the time under the pointer, the transport morphs between play and pause on snap, and Left and Right step five seconds on a slider whose aria-valuetext reads mm:ss.

KQ-583 · WAVE/SCRUB

Coldbrook field note

Voice memo

0:000:42

0:00 of 0:42 · paused

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/wave-scrub

Props

peaks: number[]; default —; Bar heights, 0–1, left to right.
duration: number; default —; Length of the recording, in seconds.
position / defaultPosition: number; default 0; Controlled or initial position, in seconds played.
onSeek: (seconds: number) => void; default —; Fires on every scrub, tap, and arrow press.
playing / defaultPlaying: boolean; default false; Controlled or initial transport state.
onPlayingChange: (playing: boolean) => void; default —; Fires when the transport button is pressed.

Prop	Type	Default	Description
peaks	number[]	—	Bar heights, 0–1, left to right.
duration	number	—	Length of the recording, in seconds.
position / defaultPosition	number	0	Controlled or initial position, in seconds played.
onSeek	(seconds: number) => void	—	Fires on every scrub, tap, and arrow press.
playing / defaultPlaying	boolean	false	Controlled or initial transport state.
onPlayingChange	(playing: boolean) => void	—	Fires when the transport button is pressed.