# Figure Reels
URL: https://remocn.dev/docs/numbers/figure-reels

A figure rolls up like an odometer between two scrolling image reels, then a label and mark fade in.

- Install: `npx shadcn@latest add @remocn/figure-reels`
- Vibe: premium
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/figure-reels
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FigureReels } from "@/components/remocn/figure-reels";

const FigureReelsScene = () => <FigureReels from={396} to={400} prefix="$" suffix="M" images={["https://example.com/a.jpg", "https://example.com/b.jpg"]} />;

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

The figure rolls its last digits up like an odometer (for example from $396M to $400M) while two reels of images scroll in above and below it, and a lockup with the Remocn mark and a label fades in. The default images are files that only exist in the Remocn repo, so pass `images` with your own URLs or paths from your `public` folder. It ships light and dark through `theme`; `ground` and `groundParams` change the animated background.

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 |
|---|---|---|---|
| `from` | `number` | `396` | Starting number the digits roll up from. |
| `to` | `number` | `400` | Final number the figure lands on. |
| `prefix` | `string` | `"$"` | Text before the figure, such as a currency sign. |
| `suffix` | `string` | `"M"` | Text after the figure, such as M or B. |
| `label` | `string` | `"Announcing"` | Text beside the mark in the lockup. |
| `images` | `string[]` | `DEFAULT_IMAGES` | Image URLs or public paths for the two reels; default files only exist in the Remocn repo. |
| `accent` | `string` | — | Accent color for highlights. |
| `ink` | `string` | — | Text color; defaults to the theme ink. |
| `background` | `string` | — | Stage background color; overrides the theme ground. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `ground` | `GshPresetId` | — | Preset id for the animated gradient ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground gradient parameters. |

## Use when
- A funding or milestone announcement where a figure should land between rows of product imagery.
- A premium beat that needs real screenshots or photos moving behind the number.
- A reveal that ends with a small lockup and an announcing line.

## Don't use when
- You have no images and want a number on a clean ground - use `figure-to-label`.
- The figure should be one of several stats counting in a row - use `stat-sequence`.
- A plain animated count is enough - use `compact-stat`.