# Dot Sort
URL: https://remocn.dev/docs/numbers/dot-sort

Dots sort into rows by group, the logo row largest at 41%

- Install: `npx shadcn@latest add @remocn/dot-sort`
- Vibe: data
- Natural length: 111f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/dot-sort
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DotSort } from "@/components/remocn/dot-sort";

const DotSortScene = () => (
  <DotSort
    highlight={0}
    groups={[
      { label: "remocn", value: 41 },
      { label: "Kitebase", value: 23 },
      { label: "Lumen", value: 17 },
      { label: "Other", value: 19 },
    ]}
  />
);

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

Four hundred dots start in a cloud, then sort into rows by group; the highlighted row gets the gradient, the rest dim, and its percentage and caption land. Pass `groups` (label and value) and `highlight`, the index of the hero group. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `groups` | `DotSortGroup[]` | `DEFAULT_GROUPS` | Groups the dots sort into, each with a label and value. |
| `highlight` | `number` | `0` | Index of the hero group. |
| `caption` | `string` | — | Line under the percentage; defaults to a choose line. |
| `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 share-of-choice beat where hundreds of dots sort into rows and the winning row is largest, such as 41%.
- A survey or market scene where the individual dots make the percentage feel like real people.
- A comparison of four or five groups with one clear leader.

## Don't use when
- You want a gradient ring and one percentage — use `share-donut`.
- You want a 10 by 10 grid reading a single percent — use `unit-grid`.
- You want rectangles sized by value — use `treemap-split`.