# Benchmark Race
URL: https://remocn.dev/docs/numbers/benchmark-race

Lanes race on a shared clock and Remocn finishes first, shown as 12x faster

- Install: `npx shadcn@latest add @remocn/benchmark-race`
- Vibe: data
- Natural length: 104f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/benchmark-race
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BenchmarkRace } from "@/components/remocn/benchmark-race";

const BenchmarkRaceScene = () => (
  <BenchmarkRace
    statement="12× faster"
    title="Cold render, 1080p · median of 50 runs"
    lanes={[
      { label: "remocn", seconds: 0.42, highlight: true },
      { label: "Kitebase", seconds: 2.38 },
      { label: "Before", seconds: 5.06 },
    ]}
  />
);

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

Lanes arrive and race on a shared clock; the highlighted lane hits the finish first and its time freezes with a pulse while the others dim and keep crawling. The camera then glides down and the `statement` rolls in above. Pass `lanes` (label, seconds, optional highlight), `statement` and `title`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lanes` | `BenchmarkLane[]` | `DEFAULT_LANES` | Lanes to race, each with a label, finish time and optional highlight. |
| `unit` | `string` | `"s"` | Suffix on the clocks. |
| `statement` | `string` | `"12× faster"` | Lands above the lanes after the hit. A leading number rolls in. |
| `title` | `string` | `"Cold render, 1080p · median of 50 runs"` | Small caption over the lanes: what was measured. |
| `decimals` | `number` | `2` | Digits after the decimal point on the clocks. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |

## Use when
- A performance claim where your product finishes a benchmark first and the multiplier lands above the lanes.
- A speed comparison against one or two alternatives, each with a live clock.
- A launch beat that needs a clear winner and a short statement, such as 12x faster.

## Don't use when
- You want two stopwatches side by side with no lanes — use `timer-duel`.
- You want a single bar that shrinks — use `cut-stat`.
- You want a score-style head-to-head — use `versus-split`.