World Map

Dotted SVG world map with markers, pulsing hubs and animated connection arcs.

3.8 KB gzipped
Zero dependencies
Reduced-motion safe
Base UI & Radix compatible

Open in v0

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/world-map.json

Adds components/velora/world-map.tsx.

Examples

Remote team across timezones

Team card with labelled city markers, arcs from HQ and a member list with UTC offsets.

Design team

6 people across 6 timezones, HQ in Berlin

4 online

Maya ChenToronto · UTC−4
Leo OrtizMexico City · UTC−6
Ines MoreauLisbon · UTC+1
Tomas BergBerlin · UTC+2
Aarav ShahBengaluru · UTC+5:30
Hana SatoTokyo · UTC+9

Props

Prop	Type	Default
`markers` Highlighted points, as { lat, lng, label?, pulse? }	`WorldMapMarker[]`	`[]`
`arcs` Curved connections, as { from: [lat, lng], to: [lat, lng] }	`WorldMapArc[]`	`[]`
`duration` Seconds for one highlight to travel along an arc (including a short rest)	`number`	`4`
`label` Accessible name; generated from the arcs and marker labels when omitted	`string`	`—`

Also accepts every <div> attribute, forwarded to the root element.

WorldMapMarker

interface WorldMapMarker {
  /** Latitude in degrees */
  lat: number;
  /** Longitude in degrees */
  lng: number;
  /** Text shown in a pill above the marker and used in the accessible name */
  label?: string;
  /** Ring that pulses outward from this marker */
  pulse?: boolean;
}

WorldMapArc

interface WorldMapArc {
  /** Start as [lat, lng] */
  from: [number, number];
  /** End as [lat, lng] */
  to: [number, number];
}

Accessibility

Reduced motion: Arcs are drawn in full with no travelling highlight and markers do not pulse. The server render is this static state too; animation is added after hydration.
Keyboard: Decorative — nothing to operate.
Screen readers: Exposed as one image (role="img") whose name lists each connection by marker label (or coordinates), or uses the label prop; the SVG and label pills are aria-hidden.