# Churn Count
URL: https://remocn.dev/docs/numbers/churn-count

A huge frame counter reaches 72,960 under a small blue caption on black

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

## Installation

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

## Usage

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

const ChurnCountScene = () => <ChurnCount value={72960} label="frames played back live, straight from your props" />;

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

A giant number sits at the bottom right and counts from `from` to `value` with a fast ease-out. Digits that are still changing are drawn thin and in the accent colour, then thicken back to full weight as they settle. A small caption fades in beside it. Pass `value`, `from` and `label`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `72960` | The final number the count lands on. |
| `from` | `number` | `0` | The number the count starts from. |
| `label` | `string` | `"frames played back live, straight from your props"` | Small caption beside the figure. |
| `accent` | `string` | — | Colour of digits while they are still changing. Hex value expected. |
| `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 huge-figure beat where a counter races up and the changing digits flash thin and blue before settling at full weight.
- A throughput claim such as frames played back live that needs a monumental number with a small caption beside it.
- A scene layered over footage or a gradient, using a transparent background.

## Don't use when
- You want a slower number that builds with carries — use `carry-count`.
- You want a number with a spring landing and a punch — use `smash-count`.
- You want a number that rolls its digits like a live feed — use `live-ticker`.