# Smash Count
URL: https://remocn.dev/docs/numbers/smash-count

A giant numeral hard-cuts up through larger values between corners and lands beside a small caption.

- Install: `npx shadcn@latest add @remocn/smash-count`
- Vibe: playful
- Natural length: 60f @ 30fps

## Installation

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

## Usage

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

const SmashCountScene = () => <SmashCount value={64} from={1} cuts={6} label="scenes, zero keyframes" />;

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

A giant numeral hard-cuts through a series of larger and larger values, each cut punching in at a new corner of the frame and the cuts speeding up, until the final value lands large at the bottom left and a caption appears in the top right. Pass `value`, `from`, `cuts` and `label`; `accent` is the numeral color. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `64` | The final number. |
| `from` | `number` | `1` | First number shown before the cuts. |
| `cuts` | `number` | `6` | How many hard cuts, including the final one. |
| `prefix` | `string` | `""` | Text before the number. |
| `suffix` | `string` | `""` | Text after the number. |
| `label` | `string` | `"scenes, zero keyframes"` | Caption shown top right on the final cut. |
| `accent` | `string` | `"#E60012"` | Color of the numeral. |
| `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 punchy stat reveal where the number should feel slammed into place, such as scenes made or shipped.
- A fast beat that should escalate in a handful of cuts rather than a smooth count.
- A bold single-color stat with a small caption in the opposite corner.

## Don't use when
- You want a smooth, glowing count - use `lumen-count`.
- The number should pause on each reading in blocky steps - use `module-count`.
- A sticker-style outlined number is the look - use `fuchidori-count`.