# Motion World Map

Dotted world map with animated route arcs between regions.

- id: `motion-world-map`
- Page: https://agentic-ui-kit.com/components/motion-world-map
- Live preview: https://agentic-ui-kit.com/live/component/motion-world-map?piece=motion-world-map

## Install

```bash
agentic-ui add motion-world-map
npx shadcn@4.17.0 add @agentic-ui/motion-world-map
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dotted-world-map, bundled-land-mask, route-arcs, travelling-pulses, end-point-rings, routes-legend, no-network, scales-with-container, pause-offscreen, reduced-motion-fallback
- **Intents:** show-composition, monitor-live, communicate
- **Suits domains:** marketing, saas, devops-status, logistics, analytics, fintech
- **Interaction:** view-only
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** dotted world map with animated route arcs between regions, global infrastructure map with pulses between data centres, landing page map showing customers or shipping lanes around the world, dot matrix world map with animated connections and markers
- **Avoid when:** Interactive maps with zoom, pan or real geography (use a map library), Precise locations at city level; the dots are 4 degrees apart, Real-time data with changing markers (use motion-globe-dots or a map feature), Polar regions; the map covers 84 N to 58 S
- **Preserve when adapting:** bundled-land-mask, single-dots-path, routes-as-text, pause-offscreen
- **Replace when adapting:** routes, places, density, lift, duration, legend
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion