# Diminuendo
URL: https://remocn.dev/docs/numbers/diminuendo

Huge counter climbs to 860,000 while each trailing digit group fades quieter than the last

- Install: `npx shadcn@latest add @remocn/diminuendo`
- Vibe: data
- Natural length: 78f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/diminuendo
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Diminuendo } from "@/components/remocn/diminuendo";

const DiminuendoScene = () => <Diminuendo value={860000} label="frames rendered from the registry last month" ratio={0.8} />;

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

A big figure counts from `from` to `value` on a log-like curve, adding new leading digits as it passes each power of ten. Each digit group to the right is drawn smaller and fainter by `ratio`, and digits roll as they change. A caption fades in at the top left. Pass `value`, `label`, `ratio` and optionally `prefix`, `suffix` and `separator`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `860000` | The final number the count lands on. |
| `from` | `number` | `0` | The number the count starts from. |
| `prefix` | `string` | `""` | Text placed before the number, such as a currency sign. |
| `suffix` | `string` | `""` | Text placed after the number, such as a unit. |
| `label` | `string` | `"frames rendered from the registry last month"` | Caption at the top left. |
| `ratio` | `number` | `0.8` | Size of each lower digit relative to the one before it, 0.5 to 0.95. |
| `separator` | `string` | `","` | Thousands separator character. Pass an empty string for none. |
| `accent` | `string` | `"#8ACE00"` | Base colour of the digit ramp and the tint of the stage. |
| `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-number beat where the figure grows as it climbs and each trailing digit group is drawn smaller and quieter than the last.
- A scale statement such as 860,000 frames rendered that wants to feel like a musical decrescendo of digits.
- A bold single-figure scene with a short caption at the top and an accent-tinted stage.

## Don't use when
- You want a plain, evenly weighted figure — use `compact-stat`.
- You want a thin-to-heavy weight change on digits that are still changing — use `churn-count`.
- You want the number to slam in with impact — use `smash-count`.