TimecodePro
SMPTE timecode with drop frame, editable by scrubbing a field, stepping or typing.
On this page
ProA timecode field on a frame scrubber: drag a field, step with arrows or type digits.
Installation
Usage
import { Timecode } from "@/components/ui/chatcn/pro/timecode"
<Timecode value={time} onValueChange={setTime} fps={29.97} dropFrame max={duration} showRate />The value is in seconds, so it pairs directly with FrameScrubber and the player. Drag across a field to scrub by that unit: frames under the frames, seconds under the seconds. Typing works the way edit suites take it: digits fill from the right (1204 is 12 seconds and 4 frames), + and - move relative to where you are, Enter commits and Esc puts the old value back. Drop frame labels apply at 29.97 and 59.94 and use a semicolon before the frames. toTimecode, fromTimecode and the frame helpers are exported.
Examples
States
ProSizes, a player bar, drop frame at 29.97 and 59.94, ten hours in, read only and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | number | Seconds |
onValueCommit | (seconds) => void | When a drag or a typed entry ends |
fps | 23.976 | 24 | 25 | 29.97 | 30 | 50 | 59.94 | 60 | Default 24 |
dropFrame | boolean | At 29.97 and 59.94 |
max | number | Seconds |
editable | boolean | Off renders a plain readout. Default true |
variant | "field" | "plain" | Default field |
size | "sm" | "md" | "lg" | Default md |
showRate | boolean | Shows 29.97 DF after the time |
disabled | boolean |
Keyboard
| Key | Action |
|---|---|
| Up and Right arrows | One frame forward; with Shift, one second |
| Down and Left arrows | One frame back; with Shift, one second |
| Page Up and Page Down | Ten seconds |
| Home and End | Start, or max |
| Digits, then Enter | Type a timecode; + or - first moves relative |
| Esc | Cancel the typed entry |
Accessibility
- The field is a spinbutton: its value is the frame number and its text reads the time in words.
- While typing, the spoken value says what has been typed so far.
- Time always reads left to right, also on right to left pages.
Motion
Nothing animates: timecode changes with every frame and every key press. Hover and focus change the fill in 150 ms.