# Row Count
URL: https://remocn.dev/docs/numbers/row-count

A big number rolls up across stacked ruled rows, adding a row at each thousands group.

- Install: `npx shadcn@latest add @remocn/row-count`
- Vibe: data
- Natural length: 84f @ 30fps

## Installation

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

## Usage

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

const RowCountScene = () => <RowCount value={27300000} label="frames rendered in every region, every night" />;

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

The number counts up on a log curve beside a stack of ruled rows; each thousands group gets its own row, and a new row springs in as the count crosses 1,000, 1,000,000 and beyond, with the newest row tinted in the accent. A small label sits to the side. Pass `value`, `from`, `prefix` and `label`. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `27300000` | The number the count lands on. |
| `from` | `number` | `1` | Starting number; the count climbs on a log curve. |
| `prefix` | `string` | `""` | Text before the number. |
| `label` | `string` | `"frames rendered in every region, every night"` | Small label beside the stack. |
| `accent` | `string` | — | Tint for the newest row; 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 very large figure, such as millions of frames rendered, where the digit groups themselves are part of the story.
- A data-flavored stat beat with a small label to the side and an accent on the newest row.
- A count that spans several orders of magnitude and should visibly gain rows as it grows.

## Don't use when
- The number is small and needs no stacked rows - use `compact-stat`.
- You want trailing groups to fade quieter than the lead group - use `diminuendo`.
- The count should tick like a live feed - use `live-ticker`.