World Map
A dotted world map / connection diagram with procedural animation, drawn on canvas 2D, with intercontinental arcs and endpoint pulses.
An equirectangular projection approximates the continents as a dotted base map, then arcs are drawn progressively between the locations you specify — a good fit behind a hero or a global-footprint layout. Pure canvas 2D: no WebGL and no external images.
npx shadcn@latest add https://webberui.com/r/world-map.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<WorldMap />
Installation
npx shadcn@latest add https://webberui.com/r/world-map.jsonOr, once registries are configured in components.json, install it as @webberui/world-map.
Usage
Each item in connections is made of two GeoPoints ({ lat, lng }), from and to, and the component draws an arc across them in order.
import { WorldMap } from "@/components/ui/world-map";
<WorldMap
connections={[
{ from: { lat: 37.77, lng: -122.42 }, to: { lat: 51.51, lng: -0.13 } },
{ from: { lat: 51.51, lng: -0.13 }, to: { lat: 35.68, lng: 139.69 } },
]}
lineColor="#38bdf8"
/>When the base map dot color is unspecified it uses currentColor, so it follows your text-* class and the light/dark theme automatically. The container defaults to aspect-[2/1], and you can override its look and size with className.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
connections | MapConnection[] | A set of intercontinental routes | The start and end GeoPoint of each arc |
dotColor | string | currentColor | Base map dot color; follows the theme when unspecified |
lineColor | string | "#38bdf8" | Arc and endpoint color |
dotGap | number | 16 | Spacing between base map dots (CSS px) |
dotRadius | number | 1.1 | Radius of a base map dot (CSS px) |
lineDuration | number | 1.6 | Duration for one arc to finish drawing (seconds) |
staggerDelay | number | 0.6 | Stagger interval between the start of each arc (seconds) |
curvature | number | 0.3 | Arc bulge height multiplier (relative to the distance between the endpoints) |
GeoPoint is { lat: number; lng: number }; MapConnection is { from: GeoPoint; to: GeoPoint }.
Accessibility
- When the user has "reduce motion" enabled at the system level, the complete map and every arc are drawn statically and the animation loop never starts
- The base map and arcs are decorative only, and the container is marked
aria-hidden, so it does not interfere with assistive technology