# Shot Clock
URL: https://remocn.dev/docs/numbers/shot-clock

A shot clock counts down to 0.0 in red, then 'SHIPPED' lands 'at the buzzer'

- Install: `npx shadcn@latest add @remocn/shot-clock`
- Vibe: playful
- Natural length: 137f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shot-clock
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShotClock } from "@/components/remocn/shot-clock";

const ShotClockScene = () => (
  <ShotClock
    from={24}
    title="Shipped"
    subtitle="at the buzzer"
    period="Q4 · 00:24"
  />
);

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

A large shot clock drops in with a light bar above and a possession bar below. Whole seconds tick down, the clock turns red at the tenths threshold and counts tenths, and at 0.0 the frame flashes and the light stays lit. The clock then shrinks upward and the title and subtitle slam in. Pass `from`, `title`, `subtitle`, `label` and `period`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `24` | Seconds on the clock when it starts. Whole seconds, then tenths below `tenthsBelow`. |
| `tenthsBelow` | `number` | `5` | Below this many seconds the clock shows tenths and turns red. |
| `title` | `string` | `"Shipped"` | The big word that slams in at the buzzer. Set in caps. |
| `subtitle` | `string` | `"at the buzzer"` | The line under it. |
| `label` | `string` | `"Shot clock"` | Small label over the clock, left. |
| `period` | `string` | `"Q4 · 00:24"` | Small label over the clock, right. |
| `alarm` | `string` | `"#FF4433"` | Colour of the last seconds and the buzzer light. |
| `accent` | `string` | `"#3B5BFD"` | The live marker next to the period label. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A deadline beat framed as a basketball shot clock that counts down, turns red for tenths and ends on a buzzer with 'Shipped'.
- A 'just in time' story where the title slams in at the buzzer with a line like 'at the buzzer'.
- A sports-flavoured launch teaser with a period label and a possession bar running out.

## Don't use when
- You want a rocket-launch style mission clock with telemetry — use `t-minus`.
- You want the big cinematic 3-2-1 numerals instead of a scoreboard clock — use `countdown`.
- The clock should freeze on a lap time with a delta, not run to zero — use `split-flash`.