# Stat Rail
URL: https://remocn.dev/docs/numbers/stat-rail

A headline card shrinks over scenery while a rail of stats steps through on the left.

- Install: `npx shadcn@latest add @remocn/stat-rail`
- Vibe: clean
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/stat-rail
```

## Usage

```tsx
// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { StatRail } from "@/components/remocn/stat-rail";

const StatRailScene = () => (
  <StatRail image={staticFile("hero.jpg")} tagline="The *future* of launch video is code" stats={[{ value: "120", label: "components ready to install" }, { value: "4", label: "minutes to first render" }]} />
);

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

The tagline fills the frame over the image, then the image shrinks to the right as the rail slides in and each stat steps up in turn, the last one landing as a chip. By default it uses a stock image that only exists in the Remocn repo, so pass your own `image` URL or `staticFile(...)`. Wrap a tagline word in asterisks to set it in the accent serif; it ships light and dark through `theme`.

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 |
|---|---|---|---|
| `stats` | `Stat[]` | `DEFAULT_STATS` | Stats on the rail, up to four, each with a value and label. |
| `image` | `string` | — | Image URL for the scenery card. The default only exists in the Remocn repo. |
| `tagline` | `string` | `"The *future* of launch video is code"` | Headline over the image; wrap a word in asterisks to accent it. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `background` | `string` | — | Ground background color override. |
| `accent` | `string` | — | Accent color for the highlighted stat and chip. |
| `card` | `string` | — | Background color of the stat card. |
| `faded` | `string` | — | Color of stats that have not stepped in yet. |
| `ground` | `GshPresetId` | — | Gradient preset used as the background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient ground's parameters. |

## Use when
- A proof beat with up to four stats stepping through next to a headline and a photo.
- A launch recap that needs a scenic backdrop behind the figures.
- A closing stats beat where the last stat should get the payoff chip.

## Don't use when
- Each stat should count up big, one per beat — use `stat-sequence`.
- Only one headline number is needed — use `compact-stat`.
- You have no image and want a plain table — use `spec-sheet`.