# Number Wheel
URL: https://remocn.dev/docs/typography/number-wheel

Odometer that rolls a number from one value to another with direction inferred from the values

- Install: `npx shadcn@latest add @remocn/number-wheel`
- Vibe: data
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/number-wheel
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NumberWheel } from "@/components/remocn/number-wheel";

const NumberWheelScene = () => (
  <NumberWheel from={0} to={24813} fontSize={120} />
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `0` | Starting value. Direction is inferred from whether to is greater or less than from. |
| `to` | `number` | `24813` | Target value the wheel settles on. If greater than from, counts up; if less, counts down. |
| `fontSize` | `number` | `120` | Font size in pixels |
| `color` | `string` | `"#171717"` | Text color |
| `speed` | `number` | `1` | Multiplier for animation speed |

Direction is determined by the relationship between `from` and `to` — no separate direction prop is needed. All values must be integers and non-negative.

## Count Up

Rolls upward from 0 to 24813:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { NumberWheel } from "@/components/remocn/number-wheel";

<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <NumberWheel from={0} to={24813} fontSize={120} />
</Backdrop>
```

## Count Down

Rolls downward from 24813 to 0:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { NumberWheel } from "@/components/remocn/number-wheel";

<Backdrop fill={{ type: "color", value: "#ffffff" }}>
  <NumberWheel from={24813} to={0} fontSize={120} />
</Backdrop>
```

## Use when
- A metric, stat, or count should animate to its value in a satisfying odometer roll.
- A data-driven scene needs a number to tick up (or down) to convey growth, reduction, or change.
- Dashboard-style video content requires a numeric reveal with clear direction and mechanical rhythm.

## Don't use when
- The value is not an integer — this component is designed for whole numbers; format decimals upstream before passing them in.
- The number should appear all at once without rolling — use `micro-scale-fade` for a static entrance of a pre-formatted number string.
- The scene requires text alongside the number to animate together — compose `NumberWheel` with a static text node in a flex container rather than embedding units in the `to` value.
- The value carries a prefix or suffix like `$99` or `1.2M` — use `slot-machine-roll` (accepts arbitrary strings); for very large multi-digit metrics counting up, `rolling-number` is purpose-tuned.