Timecode Text
SMPTE-style HH:MM:SS:FF running timecode display with frame-accurate advancement at 24, 30, or 60 fps for React video, broadcast, and audio applications using motion.
Timecode Text preview
A frame-accurate SMPTE timecode display, the kind that runs along the bottom of a Premiere or Resolve timeline. The four fields read hours, minutes, seconds, and frames — and the frame field actually advances every animation frame at the configured rate (24, 30, or 60 fps), driven by requestAnimationFrame rather than setInterval so the timing stays tight even under load. Each digit slot animates independently: when a value rolls over, the new digit slides up from below while the old one slides out the top, so only the digits that actually changed move. Use the SMPTE format for a full HH:MM:SS:FF readout, or compact for a tighter HH:MM:SS readout without frames. Hand it a startTime, listen to onTick on every second boundary, and pass running= to freeze the display. Built for video editor marketing, livestream lobbies, broadcast hero sections, audio engineering tools, and any surface that wants to feel like a control room.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the timecode-text text effect into my projectRelated Components
Clock Text
Live digital clock with pulsing colon
Countdown Text
Counts down to a target date with per-digit flip
Sliding Number
Slot-machine sliding digits for changing numbers
Counting Number
Animated number tween from one value to another
LCD Text
Seven-segment LCD-styled numeric display
Dot Matrix Text
Pixel matrix rendering of text characters
FAQ
Was this page helpful?
Sign in to leave feedback.