# Packed Count
URL: https://remocn.dev/docs/numbers/packed-count

A counter climbs with digits packing tight, then a blue fill sweeps across it under a caption.

- Install: `npx shadcn@latest add @remocn/packed-count`
- Vibe: clean
- Natural length: 110f @ 30fps

## Installation

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

## Usage

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

const PackedCountScene = () => <PackedCount value={41900} from={120} label="replays on a single launch clip" />;

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

Digits rise out of a mask as the counter climbs from a small start, packing tight and gaining a place each time a new digit joins. A caption slides in above at the start, and once the count lands a blue fill sweeps across the figure digit by digit. Pass `value`, `from` and `label`; `accent` recolors the fill. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `41900` | The number the count lands on. |
| `from` | `number` | `120` | Starting number the count climbs from. |
| `prefix` | `string` | `""` | Text before the number. |
| `suffix` | `string` | `""` | Text after the number. |
| `label` | `string` | `"replays on a single launch clip"` | Caption above the number. |
| `accent` | `string` | — | Color of the final fill sweep; defaults to a sky blue. |
| `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 large audience number, such as views, replays or downloads, that should gain a digit at a time.
- A clean one-number beat with a single caption line above it.
- A count that starts small and visibly spreads wider as new places join.

## Don't use when
- The figure should lean forward with italic energy - use `lean-count`.
- Trailing digit groups should fade quieter than the first - use `diminuendo`.
- The number should hard-cut upward instead of rolling - use `smash-count`.