# Tally Marks
URL: https://remocn.dev/docs/numbers/tally-marks

Hand-drawn tally marks fill rows, straighten into neat groups and resolve into a counted total.

- Install: `npx shadcn@latest add @remocn/tally-marks`
- Vibe: paper
- Natural length: 152f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tally-marks
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TallyMarks } from "@/components/remocn/tally-marks";

const TallyMarksScene = () => <TallyMarks value={1240} label="videos rendered on launch day" />;

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

Hand-drawn tally strokes scratch in across the frame while the camera drifts over them, then straighten into neat tally groups before collapsing into a gradient total with a label beneath. Pass `value` and `label`; `rows` and `groupsPerRow` size the tally field and `accent` colors the numeral. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `1240` | The total the tally resolves into. |
| `label` | `string` | `"videos rendered on launch day"` | Caption under the total. |
| `rows` | `number` | `4` | How many rows of tally groups. |
| `groupsPerRow` | `number` | `9` | How many tally groups sit in each row. |
| `accent` | `string` | `"#3B5BFD"` | End color of the numeral gradient. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A paper or hand-made beat where a big count should be earned one stroke at a time.
- A launch-day total, such as videos rendered, that should read as counted by hand before it turns digital.
- A slower, tactile stat beat with a label under a gradient numeral.

## Don't use when
- You need the number to arrive fast and clean - use `compact-stat`.
- The number should be built from drawn pen strokes of its own digits - use `single-stroke`.
- A pixel field organizing into the number is the look - use `number-mosaic`.