# Timing Tower
URL: https://remocn.dev/docs/numbers/timing-tower

A racing timing tower reorders lap by lap until the hero reaches P1, then settles into a poster with the gap.

- Install: `npx shadcn@latest add @remocn/timing-tower`
- Vibe: data
- Natural length: 143f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/timing-tower
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TimingTower } from "@/components/remocn/timing-tower";

const TimingTowerScene = () => (
  <TimingTower code="RMC" lap={41} laps={58} interval="+12.408" intervalLabel="Gap to P2" />
);

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

The tower wipes in with ten cars, then the hero car passes the car ahead each lap while the gaps rewrite, until it turns purple at P1. The tower then peels off and a poster with the code and the interval counts in. Pass `code`, `field`, `lap`, `laps`, `interval` and `intervalLabel`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `code` | `string` | `"RMC"` | Three-letter code of the hero car that climbs to P1. |
| `field` | `string[]` | — | The nine other cars, leader first. The hero starts behind the seventh. |
| `lap` | `number` | `41` | Lap the tower opens on. One lap ticks per overtake. |
| `laps` | `number` | `58` | Race distance shown after the slash in the lap counter. |
| `interval` | `string` | `"+12.408"` | Gap to P2 shown on the final poster. |
| `intervalLabel` | `string` | `"Gap to P2"` | Small label over the poster interval. |
| `accent` | `string` | `"#3B5BFD"` | Color of the live dot in the tower header. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A we-moved-up-the-ranking beat with a motorsport feel.
- A competitive comparison told as overtakes against named rivals.
- A closing poster showing the winner and its gap to second place.

## Don't use when
- You rank products in a plain list — use `rank-climb`.
- Two timers race side by side — use `timer-duel`.
- A single lap time should freeze with a delta — use `split-flash`.