World Map
A dotted world map that draws animated arcs between locations, with pulsing endpoint pins.
A dotted equirectangular map with animated arcs connecting any set of coordinates. Each beam draws in and loops, and every endpoint gets a pulsing pin. The land dots and lines follow your theme.
Ship to every region
Traffic routes to the nearest edge — visualized live across the globe.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/world-map.json"WorldMap generates the land dots with dotted-map
and projects each connection's coordinates onto the same grid, so the arcs land
exactly on the dots. The dots render inline with currentColor, so they stay
theme-aware without regenerating the SVG.
Usage
import { WorldMap } from "@/components/godui/world-map";<WorldMap
connections={[
{
start: { lat: 37.7749, lng: -122.4194, label: "San Francisco" },
end: { lat: 51.5074, lng: -0.1278, label: "London" },
},
]}
/>Colors
lineColor and dotColor take any CSS color, so you can match a brand or a
section background.
<WorldMap
lineColor="var(--primary)"
dotColor="color-mix(in oklch, var(--muted-foreground) 40%, transparent)"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
connections | WorldMapConnection[] | Global sample set | Arcs to draw, each a { start, end } pair. |
lineColor | string | var(--primary) | Color of the arcs and endpoint pins. |
dotColor | string | Muted token | Color of the land dots. |
loop | boolean | true | Re-draw the arcs on a loop. |
duration | number | 1.6 | Seconds for one arc to draw in. |
Each point is { lat: number; lng: number; label?: string }. WorldMap also
forwards every standard <div> attribute to the root element.