Filmstrip Video Player
A full-bleed player whose scrubber is a strip of still frames rather than a bar. The playhead is a red rule positioned from the video's own timeupdate as a percentage, with a half second linear transition so it glides between the roughly four-per-second events instead of stepping. Clicking the strip seeks by ratio and moves the marker in the same gesture, and the click handler stops propagation so seeking does not also toggle playback: anywhere else in the frame is a play or pause target, reported by a label that trails the cursor on a one second ease-out.
npx shadcn@latest add @compronents/filmstrip-video-playerInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| videoSrc / frames | string / string[] | BLANK clip / 9 stills | Frames are decorative: seeking is by click ratio, so their count need not divide the duration. |
| timestamps | string[] | 00:00 to 01:00 in fives | Labels only. They are not derived from the clip, so set them to match your own duration. |
playLabeltextCursor label while paused.
pauseLabeltextCursor label while playing.








