PRO

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.

Component

Pause

00:00

00:05

00:10

00:15

00:20

00:25

00:30

00:35

00:40

00:45

00:50

00:55

01:00

Install
npx shadcn@latest add https://ui.aryank.space/r/filmstrip-video-player.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
videoSrc / framesstring / string[]BLANK clip / 9 stillsFrames are decorative: seeking is by click ratio, so their count need not divide the duration.
timestampsstring[]00:00 to 01:00 in fivesLabels only. They are not derived from the clip, so set them to match your own duration.
Customize
playLabeltext

Cursor label while paused.

pauseLabeltext

Cursor label while playing.

Dependencies
None.