# Beeswarm
URL: https://remocn.dev/docs/numbers/beeswarm

Two dot swarms, before and after, settle on an axis showing 3.4 versus 10.6

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

## Installation

```bash
npx shadcn@latest add @remocn/beeswarm
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Beeswarm } from "@/components/remocn/beeswarm";

const BeeswarmScene = () => (
  <Beeswarm
    count={200}
    domain={[0, 14]}
    axisLabel="launch videos shipped per quarter"
    totalLabel="200 teams"
  />
);

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

A pour of dots falls onto an axis as one grey swarm, then splits into a before group and an after group that slide to their medians and label themselves. Pass `before` and `after` as groups (label, median, spread), `count` of dots, and the axis `domain` and `axisLabel`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `BeeswarmGroup` | `DEFAULT_BEFORE` | Starting group with a label, median and spread. |
| `after` | `BeeswarmGroup` | `DEFAULT_AFTER` | Improved group with a label, median and spread. |
| `count` | `number` | `200` | Number of dots in the swarm. |
| `domain` | `[number, number]` | `[0, 14]` | Axis range as a minimum and maximum. |
| `tickStep` | `number` | `2` | Spacing between axis ticks. |
| `axisLabel` | `string` | `"launch videos shipped per quarter"` | Caption under the axis. |
| `totalLabel` | `string` | `"200 teams"` | Label on the full swarm before it splits. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |

## Use when
- A distribution comparison where many individual dots show a before and after, such as 3.4 versus 10.6.
- A beat that proves an improvement across a whole population of teams or users.
- A data scene where the spread matters as much as the median.

## Don't use when
- You want one smooth curve moving left — use `distribution-shift`.
- You want each item's before and after in its own row — use `dumbbell-shift`.
- You want dots falling into a bell curve — use `galton-stack`.