# Area Compare
URL: https://remocn.dev/docs/numbers/area-compare

Two discs compare bundle sizes while 14x smaller settles in big type

- Install: `npx shadcn@latest add @remocn/area-compare`
- Vibe: data
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/area-compare
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AreaCompare } from "@/components/remocn/area-compare";

const AreaCompareScene = () => (
  <AreaCompare
    label="Bundle size"
    beforeValue={1200}
    afterValue={84}
    unit="KB"
  />
);

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

Two discs, sized by area, start at the same scale, then the second shrinks to its true ratio while a tag appears and the multiplier settles in large type with the verdict word. Pass `before` and `after` names, `beforeValue` and `afterValue` with a `unit`, and set `shape` to circle or square. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"Bundle size"` | Small heading naming what is measured. |
| `before` | `string` | `"Before"` | Name of the original item. |
| `after` | `string` | `"remocn"` | Name of the improved item. |
| `beforeValue` | `number` | `1200` | Original measurement. |
| `afterValue` | `number` | `84` | Improved measurement; the ratio sets the multiplier. |
| `unit` | `string` | `"KB"` | Unit appended to the values. |
| `verdict` | `string` | `"smaller"` | Word after the multiplier, such as smaller. |
| `shape` | `"circle" \| "square"` | `"circle"` | Draw the two items as circles or squares. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A size or footprint claim, such as a bundle shrinking from 1200 KB to 84 KB, where area makes it obvious.
- A beat that should show how much smaller, cheaper or lighter something is with two shapes.
- A simple two-value comparison that ends on a big multiplier word.

## Don't use when
- You have more than two values to compare — use `spring-bars`.
- You want the measurement drawn with dimension lines — use `measure-dim`.
- You want a duration comparison — use `timer-duel`.