Frame scrubberPro
Scrub a clip frame by frame on a strip of thumbnails or a thin bar. Hover shows the frame under the pointer with its timecode; dragging and the arrow keys land on whole frames.
On this page
ProScrub a 6 s clip on its thumbnails. Hover for the frame under the pointer, drag, or step with the arrow keys.
Installation
Usage
import { FrameScrubber } from "@/components/ui/chatcn/pro/frame-scrubber"
<FrameScrubber source={clip} duration={6} value={time} onValueChange={setTime} />Thumbnails are drawn from source and cached per clip, or pass ready made thumbnails. Media time runs left to right in every language, so the track keeps dir="ltr" in a right to left page.
Examples
States
ProThumbnails from the server, a loop range, loading, frames that failed, the bar and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
duration, fps | number | Seconds and frames per second |
value, defaultValue, onValueChange | number | Seconds, snapped to frames |
variant | "strip" | "bar" | Default strip |
source, thumbnails, count | What the strip shows | |
range, markers | Loop range and ticks | |
status | "ready" | "loading" | "error" | |
preview, format, label, disabled |
Keyboard
| Key | Action |
|---|---|
| Arrows | One frame, Shift for a second |
PageUp, PageDown | Five seconds |
Home, End | First and last frame |
Accessibility
- A slider with the time and frame number as its value text.
Motion
- The preview grows from the track in 125 ms and then follows the pointer directly. Thumbnails fade in over 200 ms.