# Dot Globe
URL: https://remocn.dev/docs/numbers/dot-globe

A dotted globe spins while arcs fly between cities and a counter ticks up with each landing.

- Install: `npx shadcn@latest add @remocn/dot-globe`
- Vibe: tech
- Natural length: 210f @ 30fps

## Installation

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

## Usage

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

const DotGlobeScene = () => <DotGlobe count={142} prefix="Live in" suffix="countries" />;

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

A dotted globe fades in and keeps rotating while accent arcs lift off one city and land on another along great circles; each landing pulses a ring, drops a labeled pin and ticks the counter up by one, ending on the final count in big type. Pass `count`, `prefix`, `suffix` and `routes` (pairs of `{ name, lat, lon }` cities). It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `count` | `number` | `142` | Final counter value; it ticks up once per landed route. |
| `prefix` | `string` | `"Live in"` | Text before the counter. |
| `suffix` | `string` | `"countries"` | Text after the counter. |
| `routes` | `GlobeRoute[]` | `DEFAULT_ROUTES` | Arcs to draw; each has a from city and a to city with name, lat and lon. |
| `accent` | `string` | `"#3B5BFD"` | Color of the arcs, pins and rings. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A global-reach beat, such as countries served, where each arc represents a new market.
- A tech launch stat that should show movement across the world rather than a flat map.
- A counter that should tick up in sync with visible events.

## Don't use when
- A flat map lighting up city by city is the look - use `dot-map`.
- The stat is one number with no geography - use `compact-stat`.
- The count should be built from a sentence - use `stat-inline`.