# Dot Map
URL: https://remocn.dev/docs/numbers/dot-map

A dotted world map lights up city by city while a counter rises to its final value.

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

## Installation

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

## Usage

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

const DotMapScene = () => <DotMap count={142} label="countries" />;

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

A dotted world map fades in and cities light up from west to east, each with a ripple ring, while the count rises with them to its final value and a label sits beneath. Pass `count`, `label` and `cities` as `{ lon, lat }` points. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `count` | `number` | `142` | Final number shown once every city is lit. |
| `label` | `string` | `"countries"` | Word shown beside the count. |
| `cities` | `DotMapCity[]` | `DEFAULT_CITIES` | Points that light up, each with lon and lat. |
| `accent` | `string` | `"#3B5BFD"` | Color of the ripple rings. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A coverage beat, such as countries or regions served, shown as points lighting up across a map.
- A data stat where the number should rise in step with visible cities.
- A calm, wide shot of the world with a big figure and a label beneath it.

## Don't use when
- You want a rotating globe with flight arcs - use `dot-globe`.
- The stat is not geographic - use `compact-stat`.
- The data is flows between sources and a target - use `sankey-flow`.