# Concentric Scale
URL: https://remocn.dev/docs/numbers/concentric-scale

Concentric dotted discs scale up step by step until the last glowing disc lands a large figure and label.

- Install: `npx shadcn@latest add @remocn/concentric-scale`
- Vibe: data
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/concentric-scale
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ConcentricScale } from "@/components/remocn/concentric-scale";

const ConcentricScaleScene = () => <ConcentricScale steps={[{ value: "1" }, { value: "100" }, { value: "10,000", label: "creators" }]} />;

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

Dotted discs scale up one at a time as the camera pulls back, each ring labeled with a step value, until the last disc glows at its rim and its large figure and label land beside it. Pass `steps` as 2 to 7 entries of `{ value, label? }`; the label of the final step becomes the caption. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `ScaleStep[]` | `DEFAULT_STEPS` | Two to seven scale steps; each has a value and an optional label. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the rings and glow. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A scale story that jumps by orders of magnitude, such as one user to a hundred thousand.
- A sequence of values that should each get a disc before the final number lands.
- A data beat where the last value deserves a glowing planet-like emphasis.

## Don't use when
- Only two values are compared as discs - use `area-compare`.
- The scale should read as a rescaling axis of bars - use `log-rescale`.
- A tree of multiplying branches is closer to the idea - use `branch-tree`.