# Drop Timer
URL: https://remocn.dev/docs/typography/drop-timer

A countdown to a drop ends in a huge gradient 'LIVE NOW' with a URL and logo

- Install: `npx shadcn@latest add @remocn/drop-timer`
- Vibe: playful
- Natural length: 111f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/drop-timer
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DropTimer } from "@/components/remocn/drop-timer";

const DropTimerScene = () => (
  <DropTimer label="DROPS IN" from={5} live="LIVE NOW" url="acme.dev" />
);

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

A clock counts down from `from` seconds, one film second per `tick` frames, and at zero it smashes into a full-bleed gradient payoff with your name, URL and a live dot. Pass `label`, `from`, `live`, `name` and `url`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"DROPS IN"` | Small line over the countdown. |
| `from` | `number` | `5` | Seconds on the clock when the shot opens; it counts down to zero. |
| `tick` | `number` | `14` | Frames per counted second (a film second, not a real one). |
| `units` | `[string, string, string]` | `["HRS", "MIN", "SEC"]` | Unit captions under the three digit pairs. |
| `live` | `string` | `"LIVE NOW"` | What the clock smashes into at zero, set full-bleed. |
| `name` | `string` | `"remocn"` | Brand over the payoff; "remocn" renders the real logo. |
| `logo` | `React.ReactNode` | — | Replaces the logo / name over the payoff. |
| `url` | `string` | `"remocn.dev"` | Line under the payoff. |
| `accent` | `string` | `"#3B5BFD"` | The small "live" dot beside the url. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A product drop or launch teaser that counts down and smashes into a huge LIVE NOW payoff.
- A release-day video that ends on a URL and your logo.

## Don't use when
- You want an escalating word sequence instead of a clock — use `escalate-cards`.
- You want a rolling number, not a countdown — use `rolling-number`.