# Number Mosaic
URL: https://remocn.dev/docs/numbers/number-mosaic

A field of ticking digits dims while the cells forming the number light up, then a lockup appears beneath.

- Install: `npx shadcn@latest add @remocn/number-mosaic`
- Vibe: tech
- Natural length: 114f @ 30fps

## Installation

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

## Usage

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

const NumberMosaicScene = () => <NumberMosaic value="10,000" name="acme" label="launch videos rendered" />;

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

A dim field of ticking digits fills the frame while the cells that form the number light up into a gradient and the rest fall back; a lockup of mark, product name and label then appears under the figure. Pass `value` as a string such as "10,000" or "2.4M", plus `name` and `label`, or `logo` to swap the mark. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"10,000"` | The number that emerges from the field. Supports digits and `, . + % k K M x`; other characters leave a gap. |
| `label` | `string` | `"launch videos rendered"` | Text after the lockup, under the number. |
| `name` | `string` | `"remocn"` | Product name in the lockup. |
| `logo` | `React.ReactNode` | — | Replaces the default Remocn mark in the lockup. |
| `accent` | `string` | `"#3B5BFD"` | Gradient accent for the lit cells. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A milestone beat, such as total renders or users, where the figure should emerge from a sea of data.
- A closing stat that needs the product lockup (mark, name and a label) under the number.
- A tech-flavored launch video where the number should feel computed rather than typed.

## Don't use when
- You need a quick, simple stat with no lockup - use `compact-stat`.
- The point is growth over time rather than sheer scale - use `growth-line`.
- The number should read as a pixel-block display - use `module-count`.