# Timer Duel
URL: https://remocn.dev/docs/numbers/timer-duel

Two stopwatch timers run side by side, the faster one ending on 38x faster

- Install: `npx shadcn@latest add @remocn/timer-duel`
- Vibe: data
- Natural length: 138f @ 30fps

## Installation

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

## Usage

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

const TimerDuelScene = () => (
  <TimerDuel
    before={2718.4}
    after={70.9}
    beforeLabel="Before"
    afterLabel="With remocn"
  />
);

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

Two stopwatch readouts start together. The faster one stops first and lights up in the accent colour, then the slower one runs on, slows and freezes dimmed. The row rises and a large multiplier such as '38x faster' lands below it. Pass `before` and `after` in seconds, and `beforeLabel` and `afterLabel` to name the two clocks. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `number` | `2718.4` | Duration of the slower run, in seconds. |
| `after` | `number` | `70.9` | Duration of the faster run, in seconds. |
| `beforeLabel` | `string` | `"Before"` | Label under the slower clock. |
| `afterLabel` | `string` | `"With remocn"` | Label under the faster clock. |
| `delta` | `string` | — | Text of the big result line. Defaults to the computed ratio, e.g. '38× faster'. |
| `accent` | `string` | `"#3B5BFD"` | Colour of the faster clock once it stops. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A speed-comparison beat where two stopwatches start together and the faster one stops first, with a big multiplier left on screen.
- A before-and-after time claim, such as hours by hand against minutes with the product, shown as two running clocks.
- A short, literal 'we are faster' moment that needs no chart, only two clocks and a delta.

## Don't use when
- The two values should be shown as one slab that physically squeezes — use `thin-slab`.
- You need more than two contenders racing on a shared clock — use `benchmark-race`.
- You want a sports-broadcast framing with a final scoreline — use `score-bug`.