# Module Count
URL: https://remocn.dev/docs/numbers/module-count

A block-pixel number snaps through stepped values on a gridded ground, then a short caption fades in.

- Install: `npx shadcn@latest add @remocn/module-count`
- Vibe: playful
- Natural length: 98f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/module-count
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ModuleCount } from "@/components/remocn/module-count";

const ModuleCountScene = () => <ModuleCount value={120} suffix="+" label="Scenes snapped to one grid" />;

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

A five-row block-pixel number snaps through a series of stepped values on a faint grid, each step morphing the modules, then locks on the final figure while a short caption fades in word by word. Pass `value`, optional `prefix` and `suffix`, and `label`; `steps` sets how many readings it snaps through. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `48` | The number the count snaps to. |
| `from` | `number` | `0` | Starting number of the first reading. |
| `prefix` | `string` | `""` | Text before the number, such as a currency sign. |
| `suffix` | `string` | `""` | Text after the number. |
| `label` | `string` | `"Scenes, every one snapped to a single grid"` | Caption that fades in word by word. |
| `steps` | `number` | `11` | How many stepped readings the count passes through. |
| `accent` | `string` | — | Color of the digit modules; defaults to the theme accent. |
| `background` | `string` | — | Stage background color; overrides the theme ground. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A playful or retro stat beat where the digits should read as LED-style modules on a grid.
- A count that should tick up in visible, discrete steps instead of rolling smoothly.
- A short caption that should fade in word by word right as the number locks.

## Don't use when
- You need a smooth rolling, odometer-style count - use `live-ticker`.
- The number should be quiet typography rather than blocky pixels - use `packed-count`.
- The steps should lock to a music tempo - use `beat-count`.