# Balance Beam
URL: https://remocn.dev/docs/numbers/balance-beam

A seesaw tips as one Remocn block outweighs a pile of hours, tools and revisions

- Install: `npx shadcn@latest add @remocn/balance-beam`
- Vibe: playful
- Natural length: 146f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/balance-beam
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BalanceBeam } from "@/components/remocn/balance-beam";

const BalanceBeamScene = () => (
  <BalanceBeam
    items={["$4,800", "62 hours", "3 tools", "9 revisions"]}
    accentLabel="remocn"
    title="One block."
    subtitle="Outweighs the whole stack."
  />
);

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

Blocks labeled with costs drop one by one onto a seesaw and weigh it down, then the hero block lands on the other side and tips the beam while the title and subtitle fade in. Pass `items` (up to eight labels), `accentLabel` for the hero block, and `title` and `subtitle`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | — | Labels for the pile of blocks, up to eight. |
| `accentLabel` | `string` | `"remocn"` | Text on the hero block; Remocn draws the logo. |
| `title` | `string` | `"One block."` | Headline shown after the beam tips. |
| `subtitle` | `string` | `"Outweighs the whole stack."` | Line under the headline. |
| `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 value claim where one thing outweighs a pile of costs, such as hours, tools and revisions.
- A playful beat that sets one hero block against a stack of effort and ends on a short title.
- A pricing or ROI scene where the metaphor carries the message instead of numbers.

## Don't use when
- You have real measured values to compare — use `area-compare`.
- You want two stopwatches racing — use `timer-duel`.
- You want a two-sided stat comparison — use `versus-split`.