# Beat Count
URL: https://remocn.dev/docs/numbers/beat-count

A big thin numeral counts to 64 in steps locked to a BPM, with a small caption

- Install: `npx shadcn@latest add @remocn/beat-count`
- Vibe: premium
- Natural length: 144f @ 30fps

## Installation

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

## Usage

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

const BeatCountScene = () => <BeatCount value={64} beats={8} bpm={120} label="cuts, each one landing on the kick" />;

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

A big numeral steps from `from` to `value` in `beats` equal jumps, one per beat at the given `bpm`. On each beat it squashes down and thins its weight before releasing, and the last beat rebounds with a spring. A small caption fades in at the top left after the first beat. Pass `value`, `beats`, `bpm`, `label`, and optionally `prefix`, `suffix` and `decimals`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `64` | The final number the count lands on. |
| `from` | `number` | `0` | The number shown before the first beat. |
| `beats` | `number` | `8` | How many steps the count takes, one per beat. |
| `bpm` | `number` | `120` | Tempo in beats per minute; 30 at minimum. Sets the frames per step. |
| `decimals` | `number` | `0` | Decimal places shown on the number. |
| `prefix` | `string` | `""` | Text placed before the number, such as a currency sign. |
| `suffix` | `string` | `""` | Text placed after the number, such as a unit. |
| `label` | `string` | `"cuts, each one landing on the kick"` | Caption at the top left. |
| `accent` | `string` | — | Colour of the caption text. |
| `background` | `string` | — | Stage colour; pass 'transparent' to layer over other footage. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A beat-synced number reveal where the figure steps up in time with a track and squashes on every kick.
- A stat moment in a music-driven launch video that needs a thin, heavy-weight numeral and a small caption.
- A count from any start value to a target, such as 64 cuts, with a prefix, suffix or decimals.

## Don't use when
- You want a smooth continuous count rather than discrete steps on a beat — use `live-ticker`.
- You want the number to build with visible carries between digits — use `carry-count`.
- The count should feel heavy and slam in from zero — use `smash-count`.