# Domino Run
URL: https://remocn.dev/docs/numbers/domino-run

Dominoes tip over in a chain, each bigger than the last, until the largest sets off a big stat.

- Install: `npx shadcn@latest add @remocn/domino-run`
- Vibe: playful
- Natural length: 135f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/domino-run
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DominoRun } from "@/components/remocn/domino-run";

const DominoRunScene = () => <DominoRun count={13} value="10x" caption="Every push tips a bigger one." />;

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

A row of dominoes, each taller than the one before, tips over one after another until the largest falls and the big value and caption fade in. Pass `count` (5 to 24) for the number of dominoes, plus `value` and `caption`. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `count` | `number` | `13` | Number of dominoes, from 5 to 24. |
| `value` | `string` | `"10×"` | The stat revealed when the last domino falls. |
| `caption` | `string` | `"Every push tips a bigger one."` | Caption under the stat. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the stat gradient. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A compounding or chain-reaction story, such as one small step leading to a 10x result.
- A playful beat where the number is the payoff of a visible setup.
- A stat with an italic caption that explains the cause.

## Don't use when
- The multiplication should be shown with a flipping sign - use `times-turn`.
- You want bars that overshoot with spring - use `spring-bars`.
- A plain multiplier headline is enough - use `magnitude-push`.