Countdown Timer
A clock that runs down rather than a number that changes.
SceneScenes
countdown-timer30fps · 960×540
Install
$ npx remotion-ui@latest add countdown-timerThe ring drains continuously while the digit swaps on each whole second, so the
clock reads as running between ticks instead of sitting still. The last few
seconds take urgentColor, and zero lands with a single pop rather than ticking
on into negative time.
The digit is what a viewer would read off a wall clock: with 4.2 seconds left it
shows 5. Set zeroLabel to swap in a word at the end — LIVE, GO, ON AIR —
otherwise it rests on 0.
variant="numeric" drops the ring and keeps the number, for corners of the frame
where a 300-unit circle will not fit.
The ring drains continuously while the digit swaps on each whole second, so the clock reads as running rather than as a number that happens to change. It stops at zero instead of ticking into negative time.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/countdown-timer- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: from, variant, label, zeroLabel, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { CountdownTimer } from "@/remotion/scenes/countdown-timer";
<CountdownTimer from={5} label="Starting in" zeroLabel="Live" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| from | number | 5 | Seconds on the clock when the scene opens. |
| variant | "ring" | "numeric" | "ring" | Ring sweep with the number inside, or the number alone. |
| label | string | - | Caption above the clock — STARTING IN, DOORS OPEN. |
| zeroLabel | string | - | Shown once the clock reaches zero. Omit to hold on 0. |
| startDelaySeconds | number | 0.35 | Seconds before the clock starts running. |
| accentColor | string | "#E8B86D" | Ring colour above the urgent threshold. |
| urgentColor | string | "#F97362" | Accent applied over the last urgentUnder seconds. |
| urgentUnder | number | 3 | Seconds remaining at which the urgent accent takes over. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |