# Countdown
URL: https://remocn.dev/docs/numbers/countdown

A monumental countdown numeral inside a ring resolves into a Live lockup

- Install: `npx shadcn@latest add @remocn/countdown`
- Vibe: premium
- Natural length: 92f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/countdown
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Countdown } from "@/components/remocn/countdown";

const CountdownScene = () => (
  <Countdown
    from={3}
    finalLabel="Live"
    caption="remocn 2.0"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="Countdown"
    component={CountdownScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Giant numerals count down from `from`, each held for `beat` frames and leaving by a ring wipe, a horizontal slice or a rush past the camera. The final label then hits with a spring over a glowing halo, with an accent dot and a small caption lockup underneath. Pass `from`, `finalLabel` and `caption`. It ships light and dark through the `theme` prop. The length shown is for the defaults of 3 numerals at 20 frames; it is `from * beat + 32` in general.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `3` | First number of the countdown. |
| `finalLabel` | `string` | `"Live"` | What the countdown lands on: "Live", a product name, a date. |
| `indicator` | `boolean` | `true` | Show the small accent dot before the final label. |
| `caption` | `string` | `"remocn 2.0"` | Small lockup under the final label. Pass "" to hide it. |
| `logo` | `React.ReactNode` | — | Replaces the default Remocn mark in the lockup. |
| `beat` | `number` | `20` | Frames per number. |
| `accent` | `string` | `"#3B5BFD"` | Colour of the ring sweep, cut line and final dot. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- An opening beat that counts 3, 2, 1 in monumental numerals and lands on 'Live' or a product name.
- A launch-day or event teaser that needs tension before the reveal, ending on a small logo lockup.
- A video intro where each number exits differently, with a ring wipe, a slice and a final rush past the camera.

## Don't use when
- You want a countdown to a specific calendar date, not 3-2-1 — use `launch-date`.
- You need a mission-clock style T-minus readout with rolling characters — use `t-minus`.
- You want a small sports-style clock running down to zero — use `shot-clock`.