# Compact Stat
URL: https://remocn.dev/docs/numbers/compact-stat

A long number retracts into a compact figure with a gradient K, M or B suffix, then grows.

- Install: `npx shadcn@latest add @remocn/compact-stat`
- Vibe: premium
- Natural length: 96f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/compact-stat
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CompactStat } from "@/components/remocn/compact-stat";

const CompactStatScene = () => <CompactStat value={1200000} decimals={1} label="frames rendered with remocn" />;

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

The full number rises in digit by digit, then its trailing digits retract on a reel and a magnitude suffix (K, M, B or T) springs in; the shortened figure scales up in a gradient with a soft ground glow, under a caption. Pass `value` as the full number, with `decimals`, `prefix` and `label`; the suffix is picked automatically unless you pass `suffix`. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `1200000` | The full number; it is shortened with a K, M, B or T suffix. |
| `decimals` | `number` | `1` | Decimal places on the shortened figure. |
| `suffix` | `string` | — | Overrides the automatic magnitude suffix. |
| `prefix` | `string` | `""` | Text before the number. |
| `label` | `string` | `"frames rendered with remocn"` | Caption under the figure. |
| `accent` | `string` | `"#3B5BFD"` | Color of the gradient suffix and glow. |
| `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 big total, such as frames rendered, that should be shortened to a headline form like 1.2M on screen.
- A premium stat beat where the suffix gets a gradient treatment and the number scales up.
- A caption-led stat on a dark ground with a soft glow underneath.

## Don't use when
- The count should stay as a full long number - use `row-count`.
- You want a count on a ruled scale - use `pitch-over`.
- Several stats should sit in a row - use `stat-sequence`.