# Stat Sequence
URL: https://remocn.dev/docs/numbers/stat-sequence

Three large stats cut in one after another, then shrink together into a summary row.

- Install: `npx shadcn@latest add @remocn/stat-sequence`
- Vibe: data
- Natural length: 126f @ 30fps

## Installation

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

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StatSequence } from "@/components/remocn/stat-sequence";

const StatSequenceScene = () => (
  <StatSequence name="remocn" eyebrow="in numbers" beat={26} stats={[{ value: "10,000", unit: "+", label: "builders" }, { value: "99.9", unit: "%", label: "uptime" }]} />
);

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

Each stat rises in at monumental size with its label and detail and is replaced by the next one every `beat` frames. The final stat then shrinks and all stats settle into a row. Pass `stats` and `name`; the total length is about 74 + (stats - 1) × `beat` frames, and it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `stats` | `Stat[]` | `DEFAULT_STATS` | Stats to show, each with a value, optional unit, label and detail. |
| `name` | `string` | `"remocn"` | Product name in the corner lockup. |
| `eyebrow` | `string` | `"in numbers"` | Muted text after the lockup. |
| `logo` | `React.ReactNode` | — | React node that replaces the default Remocn mark in the lockup. |
| `beat` | `number` | `26` | Frames each stat owns before the next one cuts in. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |

## Use when
- A social-proof beat of two to four headline numbers.
- A numbers recap that closes a product video.
- A figures beat where each stat deserves its own moment before a final summary.

## Don't use when
- You have only one stat — use `compact-stat`.
- The stats should sit beside a headline and photo — use `stat-rail`.
- You list facts as a table — use `spec-sheet`.