shadcn.io is not affiliated with official shadcn/ui
Timecode Text runs a timecode the way a timeline or a broadcast monitor shows it: hours, minutes, seconds and frames, HH:MM:SS:FF, the frames racing at 24, 25, 30, 50 or 60 a second. It can start anywhere, show the seconds without the frames, and pause on the frame it's on.
Use it for a hero on a video product, a livestream lobby, a recording indicator, or an editing tool's marketing page. For the time of day, use Clock Text; for a countdown, Countdown Text. There's no timer: each field is a column of its values stepped through by a CSS keyframe animation the install adds to your stylesheet, so it renders on the server, keeps time while the tab is in the background, and never re-renders.
Installation
Usage
import { TimecodeText } from "@/components/ui/timecode-text";<TimecodeText />Demos
Frame rate
fps is the frames per second, 30 by default: 24 for film, 25 and 50 for PAL broadcast, 30 and 60 for NTSC and the web. The frames count from 00 up to one less than the rate.
Start
start is where it starts, in seconds, fractions included: at 24 fps, 5025.5 is 01:23:45:12. Give it a new key to start again from there.
Running
running={false} pauses it on the frame it's on, and running again carries on from there. frames={false} leaves out the frames, for HH:MM:SS.
Accessibility
Screen readers read the timecode it starts from once (00:00:00:00) from a visually hidden copy; the running fields are hidden from them, since a value that changes thirty times a second can't be read. Put it in an element with role="timer" to say it's a running count. With reduced motion it holds still on its start, as if paused.
FAQ
Does it keep time?
Yes. Each field is a CSS animation whose length is its whole cycle (a second for the frames, a minute for the seconds, a day for the hours), so the browser's own clock moves it, without a timer that could drift or fall behind in a background tab.
How does it start part-way?
The start time is a negative delay on every field's animation, so they all begin as if they had already been running that long, and stay in step.
Can it follow a video's playback?
Not frame for frame: it runs on the page's clock, not the video's. Pause it with the video's pause event and give it a new key and start from the video's currentTime when it plays again.
Does it do drop-frame timecode?
No. It counts whole frames, non-drop, at whole rates; 29.97 drop-frame timecode skips frame numbers it doesn't model.
API Reference
TimecodeText
<span> data-slot="timecode-text"
fps?24 | 25 | 30 | 50 | 60
Frames per second: 24 for film, 25 and 50 for PAL broadcast, 30 and 60 for NTSC and the web.
- Type
24 | 25 | 30 | 50 | 60- Default
30
frames?boolean
Whether it shows the frames after the seconds (HH:MM:SS:FF). @default true.
- Default
true
running?boolean
Whether it runs; paused, it holds the frame it's on. @default true.
- Default
true
start?number
Where it starts, in seconds: 90.5 is 00:01:30:15 at 30 fps. @default 0.
- Default
0
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
data-state?string
"running" when running is true, otherwise "paused".
--timecode-text-atstring--timecode-text-countstringRelated
- Pro
Clock Text
NumbersThe time of day instead
- Pro
Countdown Text
NumbersCount down to a moment
- Pro
LCD Text
DecorativeSeven-segment digits for a readout
Sliding Number
NumbersDigits that roll to a new value
- Pro
Status Pulse Text
DecorativeA live dot for a recording badge
- Pro
Waveform Text
MotionA title that moves like sound