# Bubble Pack
URL: https://remocn.dev/docs/numbers/bubble-pack

Packed bubbles for categories grow around one big gradient bubble reading 420

- Install: `npx shadcn@latest add @remocn/bubble-pack`
- Vibe: data
- Natural length: 108f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bubble-pack
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BubblePack } from "@/components/remocn/bubble-pack";

const BubblePackScene = () => (
  <BubblePack
    highlight={0}
    items={[
      { label: "Launch videos", value: 420 },
      { label: "Demos", value: 180 },
      { label: "Changelogs", value: 150 },
      { label: "Tutorials", value: 70 },
    ]}
  />
);

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

Category bubbles pop in and pack together; the highlighted one swells into a large gradient bubble while its value counts up. Pass `items` (label and value, up to 16) and `highlight`, the index of the hero item. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `BubbleItem[]` | `DEFAULT_ITEMS` | Up to 16 categories; bubble area follows value. |
| `highlight` | `number` | `0` | Index in items of the bubble that grows into the hero. |
| `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 beat showing what a product is used for, where one category clearly dominates the others.
- A content-mix or usage-breakdown scene where bubble size carries the story.
- A recap where the biggest category should swell into a gradient hero and count up.

## Don't use when
- The parts add up to a whole and you want a percentage reading — use `share-donut`.
- You want every category labeled in a tidy rectangle layout — use `treemap-split`.
- Order and rank matter more than size — use `rank-climb`.