# Branch Tree
URL: https://remocn.dev/docs/numbers/branch-tree

A tree branches level by level from one root into many leaves, then lands the leaf count in big type.

- Install: `npx shadcn@latest add @remocn/branch-tree`
- Vibe: tech
- Natural length: 88f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/branch-tree
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BranchTree } from "@/components/remocn/branch-tree";

const BranchTreeScene = () => <BranchTree depth={3} branching={[3, 4, 4]} title="variants" rootLabel="1 component" />;

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

A single root node branches level by level into a growing fan of leaves, then the leaf count lands in large type with a caption. The count is the product of the branching, so 3 by 4 by 4 gives 48. Pass `depth` (1 to 5), `branching` as one number or one per level, `title` for the word after the count, and `rootLabel`. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `depth` | `number` | `3` | Number of branching levels, from 1 to 5. |
| `branching` | `number \| number[]` | `[3, 4, 4]` | Children per node; one number, or one per level. |
| `title` | `string` | `"variants"` | Word shown after the final leaf count. |
| `rootLabel` | `string` | `"1 component"` | Label next to the root node. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the branches and count. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A beat about variety or combinations, such as one component becoming dozens of variants.
- A scale story where a single thing multiplies and the total is the punchline.
- A tech-flavored stat where the final count should be computed from the branching.

## Don't use when
- Cells should divide on a grid rather than branch - use `cell-divide`.
- The sizes of categories matter more than the count - use `treemap-split`.
- A simple multiplier number is enough - use `magnitude-push`.