# Speed Trap
URL: https://remocn.dev/docs/numbers/speed-trap

A speed readout locks on 348 km/h over a segmented bar with last year's marker and delta

- Install: `npx shadcn@latest add @remocn/speed-trap`
- Vibe: data
- Natural length: 65f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/speed-trap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpeedTrap } from "@/components/remocn/speed-trap";

const SpeedTrapScene = () => (
  <SpeedTrap
    value={348}
    previous={300}
    unit="km/h"
    banner="Top speed"
  />
);

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

A three-sector bar track snaps out and the readout floods up to the final value while a gradient bar races with it. On lock the number kicks, a banner wipes in, last year's mark drops onto the bar and the delta slice and comparison line appear. Pass `value`, `previous`, `max` and `unit`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `348` | Speed the readout locks on. |
| `previous` | `number` | `300` | Last year's mark, drawn as a line on the bar. The delta is computed from it. |
| `max` | `number` | `360` | Full scale of the bar. |
| `unit` | `string` | `"km/h"` | Unit after the number. |
| `banner` | `string` | `"Top speed"` | Banner that flashes when the readout locks. |
| `previousLabel` | `string` | `"2025"` | Label on the previous mark. |
| `comparison` | `string` | `"vs last year"` | Text after the delta, e.g. "vs last year". |
| `label` | `string` | `"Speed trap · Sector 3"` | Small label at the top left. |
| `accent` | `string` | `"#3B5BFD"` | The live dot next to the label. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A performance beat where a top-speed style readout locks on your headline number against last year's mark.
- A release recap that wants a motorsport telemetry look: segmented bar, sector labels and a delta against the previous version.
- A speed or throughput claim that needs a visible year-over-year comparison, not just a bare number.

## Don't use when
- You want a single quiet figure with no bar or comparison — use `compact-stat`.
- The comparison is between two timers racing each other — use `timer-duel`.
- The value is a percentage or a score on a dial rather than a speed — use `radial-bars`.