ns-ui
Media scrubber rendered as a film strip: sprocket-holed edges, one cell per second, a gate-claw playhead that snaps hole-to-hole on a slow drag and releases into a continuous glide on a fast one, buffered range showing as faintly noise-filled exposed frames.
Use when a playback position control for audio/video where the physical claw-and-perforation metaphor communicates both position and buffered range, and where slow vs. fast scrubbing should visibly feel different (discrete frame-stepping vs. released continuous seek). Reach for slider-loupe instead for a generic single-value slider with no playback/buffer semantics — scrubber-film-strip is specifically a playback scrubber, not a value input.
Install
npx shadcn add https://design.helpmarq.comns-ui / scrubber-film-strip
Drag slowly to feel the claw catch each perforation; drag fast and it releases into a continuous glide.
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | — | Controlled position in seconds. Omit for uncontrolled (see defaultValue). |
| defaultValue? | number | — | Initial position in seconds when uncontrolled. Default 0. |
| duration | number | — | Total duration in seconds. |
| buffered? | number | — | Buffered range from 0, in seconds. Default 0. |
| onValueChange? | (value: number) => void | — | Fires on every committed position change (drag, keyboard). |
| label? | string | — | Accessible name for the slider. Default "Scrub position". |
| className? | string | — | — |