# Globe

> A dotted globe with arcs travelling between places and pulsing markers. Drag to spin.

Component · Pro · https://lodeui.com/components/globe

## When to use

- Showing that something happens worldwide: traffic between regions, customers by city, shipping routes.
- A hero or section visual for infrastructure, payments and travel products.

## When not to use

- Comparing values between countries: use the map explorer block, which is a real choropleth with numbers.
- Exact positions or zooming to streets: use a map library.

## Installation

```bash
npx shadcn@latest add @lode/globe
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, d3-geo, topojson-client, world-atlas

## Usage

```tsx title="example.tsx"
import { Globe } from "@/components/ui/globe";

const arcs = [
  { from: [-74, 40.7], to: [-0.1, 51.5] },    // New York → London
  { from: [77.6, 12.97], to: [103.8, 1.35] }, // Bengaluru → Singapore
];
const markers = [
  { at: [-74, 40.7], label: "New York" },
  { at: [-0.1, 51.5], label: "London" },
];

export function Traffic() {
  return <Globe arcs={arcs} markers={markers} label="Traffic between regions" />;
}
```

## API reference

### Globe

A canvas globe of land dots. Arcs lift off the surface and travel; markers pulse.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| arcs | `{ from: [lng, lat]; to: [lng, lat]; color? }[]` | – | Routes drawn as lifted great circles with a travelling head. |
| markers | `{ at: [lng, lat]; label?; size?; color? }[]` | – | Pulsing points. Labels show on hover and are read out in the accessible name. |
| size | `number` | `520` | Diameter in px; shrinks to fit the container. |
| speed | `number` | `6` | Idle spin in degrees per second. 0 to hold still. |
| initial | `[lng, lat]` | `[10, 18]` | The point facing the viewer at the start. |
| sphere / dots / accent | `string` | `"#0b0b0c" / "#f4f1ea" / "#e9a23b"` | Colours of the sphere, land dots, and arcs and markers. CSS variables work. |
| density | `number` | `1.8` | Degrees between land dots. Smaller is denser. |
| arcDuration | `number` | `2.4` | Seconds for an arc to travel. |
| label | `string` | `"Globe"` | Accessible description. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focus the globe |
| ← → ↑ ↓ | Turn it |

## Accessibility

- The canvas has role img and a name listing the labelled markers.
- Dragging is never needed: the arrow keys turn it too.

## Motion

- Spins slowly when idle and keeps momentum after a drag.
- With reduced motion it holds still and arcs are drawn without travelling.

## Responsive behavior

- Shrinks to its container; touch dragging works on phones.

## Performance

- One canvas; land dots are computed once and shared by every globe on the page.
- Drawing pauses when the globe is off screen or the tab is hidden.
- Land outlines (about 56 KB) ship with the component, so there is nothing extra to fetch.

## Notes for AI

- Coordinates are [longitude, latitude], the same order as GeoJSON.
- Keep arcs to a dozen or so; more reads as noise.

## Related

- [Map explorer](https://lodeui.com/blocks/map-explorer) — A choropleth of US states or world countries with zoom, search, a ranked list and metric switching.
- [Sankey flow](https://lodeui.com/components/sankey-flow) — Volumes flowing between stages as ribbons. Hover a stage to trace everything that passes through it.
- [Mesh gradient](https://lodeui.com/components/mesh-gradient) — A slowly moving mesh gradient drawn on the GPU, with grain, behind any content.