# Treemap Split
URL: https://remocn.dev/docs/numbers/treemap-split

A treemap splits into category tiles, the biggest tile in gradient with a 38% label

- Install: `npx shadcn@latest add @remocn/treemap-split`
- Vibe: data
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/treemap-split
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TreemapSplit } from "@/components/remocn/treemap-split";

const TreemapSplitScene = () => (
  <TreemapSplit
    items={[
      { label: "Captions", value: 38 },
      { label: "Transitions", value: 16 },
      { label: "Text", value: 12 },
      { label: "Shaders", value: 8 },
      { label: "Icons", value: 6 },
    ]}
  />
);

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

A rectangle splits recursively with drawn lines into category tiles, then the highlighted tile fills with gradient, the rest dim, and its share counts up with its label. Pass `items` (label and value, up to ten) and optionally `highlight`, the index of the hero item; it defaults to the largest. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `TreemapItem[]` | `DEFAULT_ITEMS` | Up to ten categories; tile area follows value. |
| `highlight` | `number` | — | Index in items of the hero tile; defaults to the largest. |
| `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 catalog or usage breakdown where one category, such as 38%, is the headline and the rest are context.
- A beat that should show how a whole divides into labeled categories.
- A scene with up to ten categories where the biggest tile gets the gradient and a label.

## Don't use when
- You want a ring with a single percentage in the center — use `share-donut`.
- You want free-floating bubbles instead of tiles — use `bubble-pack`.
- You want shares changing across years — use `stacked-shift`.