# Speedrun Timer
URL: https://remocn.dev/docs/social/speedrun-timer

A speedrun split table fills row by row against personal bests and ends on a gold world record banner

- Install: `npx shadcn@latest add @remocn/speedrun-timer`
- Vibe: playful
- Natural length: 130f @ 30fps

## Installation

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

## Usage

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

const SpeedrunTimerScene = () => (
  <SpeedrunTimer
    category="Launch video · Any%"
    splits={[
      { name: "Script", time: 300, pb: 340 },
      { name: "Edit", time: 900, pb: 950 },
      { name: "Ship", time: 1500, pb: 1620 },
    ]}
    banner="World record"
  />
);

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

The panel slides in with a header and one row per split. The run clock starts, each split locks in with the time and a green or red delta against its personal best, and the last split goes gold before a banner lands. Pass `splits` (cumulative seconds for `time` and `pb`), `category` and `banner`; it ships dark and light via `theme`. The header uses the Remocn wordmark, swap `RemocnLogo` in the copied file for your own.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `category` | `string` | `"Launch video · Any%"` | Category line in the header, after the logo. |
| `splits` | `SpeedrunSplit[]` | `DEFAULT_SPLITS` | The splits in order. The last one is the finish and goes gold. |
| `banner` | `string` | `"World record"` | The banner that lands when the run finishes. |
| `accent` | `string` | `"#3B5BFD"` | Color of the current-split marker. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the animated ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground shader parameters. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A launch video that frames shipping as a speedrun, with steps like script, edit, render and ship.
- Showing a workflow's time savings as per-step splits that beat a previous best.
- A playful milestone beat that ends on a celebratory banner after a timed sequence.

## Don't use when
- You only need one counting number, not a split table — use `rolling-number`.
- You want two timers racing side by side instead of splits — use `timer-duel`.
- The data is a ranking that climbs a list, not elapsed time — use `leaderboard-climb`.