# Combo Counter
URL: https://remocn.dev/docs/numbers/combo-counter

A gradient hit counter climbs to '12 HIT COMBO' with rating words like 'PERFECT'

- Install: `npx shadcn@latest add @remocn/combo-counter`
- Vibe: playful
- Natural length: 102f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/combo-counter
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ComboCounter } from "@/components/remocn/combo-counter";

const ComboCounterScene = () => (
  <ComboCounter
    hits={["Captions", "Transitions", "Charts", "Templates"]}
  />
);

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

Feature names hit one after another with a star flash and slash, each hit faster than the last, while a combo meter on the left counts up and its rating swaps from Nice to Great to PERFECT. After the final hit the frame flashes, the meter glides to the centre as a poster with a gradient number, and the logo rises in. Pass `hits` and optionally `ratings`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `hits` | `string[]` | — | One hit per feature, in order. The combo count is the number of hits landed. |
| `ratings` | `ComboRating[]` | — | Ratings, swapped in as the count passes `from`. The last one is the poster's. |
| `accent` | `string` | `"#3B5BFD"` | Small marker next to the rating. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A feature-rundown beat where each capability slams in as a hit and a combo meter climbs to 'PERFECT'.
- A playful 'everything included' moment that lists a dozen features fast, with rising rating words.
- A launch video finale that ends on a big gradient count and the logo, in a game-HUD style.

## Don't use when
- You want a calm, readable list of features rather than rapid hits — use `stat-sequence`.
- The moment is a single new record with a leaderboard — use `high-score`.
- You want one number counting up on a beat without feature names — use `beat-count`.