# Stripe Count
URL: https://remocn.dev/docs/numbers/stripe-count

A figure counts up on a bold full-bleed color field as stripes fill its outline, under a caption band.

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

## Installation

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

## Usage

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

const StripeCountScene = () => <StripeCount value={184} accent="#FF4F00" label="scenes that take your brand colour from one prop" />;

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

The frame floods with the accent color and a dark caption band sits at the top. The figure counts up as an outline while horizontal stripes sweep across and thicken until the digits are solid dark; the caption rises in word by word. Pass `value`, `from` and `label`; `stripes` sets the stripe count and `accent` the frame color. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `184` | The number the count lands on. |
| `from` | `number` | `0` | Starting number of the count. |
| `prefix` | `string` | `""` | Text before the number. |
| `suffix` | `string` | `""` | Text after the number. |
| `label` | `string` | `"scenes that take your brand colour from one prop"` | Caption in the top band, rising word by word. |
| `stripes` | `number` | `12` | How many horizontal stripes fill the figure. |
| `accent` | `string` | — | Full-bleed frame color; defaults to orange. |
| `background` | `string` | — | Fill of the caption band; defaults to the theme field. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A loud, brand-colored stat beat where the whole frame becomes the accent color.
- A count that should start as an outline and thicken into a solid figure.
- A bold number with a caption set in a band above it.

## Don't use when
- You want a quiet, dark stage rather than a full-bleed color - use `lumen-count`.
- The big number should be framed by a yellow band with a roman numeral - use `roman-edition`.
- The number belongs on a teal panel with gear steps - use `gear-shift`.