Globe

Dotted canvas globe with markers, great-circle arcs, drag and keyboard rotation.

5.2 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/globe.json

Adds components/velora/globe.tsx.

Examples

Global edge network

Marketing section pairing copy and stats with a globe of edge locations and arcs from the origin.

Global edge network

Served from the city next door, wherever that is.

Deploy once and every request is answered by the closest edge, with origin traffic routed over our private backbone.

Edge cities: 310+
To 95% of users: < 50 ms
Uptime SLA: 99.99%

Props

Prop	Type	Default
`markers` Highlighted points, as { lat, lng, label? }	`GlobeMarker[]`	`[]`
`arcs` Great-circle connections, as { from: [lat, lng], to: [lat, lng] }	`GlobeArc[]`	`[]`
`center` [lat, lng] facing the viewer on first paint	`[number, number]`	`[20, 10]`
`speed` Auto-rotation in degrees per second (negative spins west); 0 turns it off	`number`	`6`
`samples` Points sampled over the sphere; roughly 3 in 10 land and become dots	`number`	`12000`
`dotColor` Land dot color: any CSS color, var() tokens included	`string`	`"var(--muted-foreground)"`
`accentColor` Marker and arc color: any CSS color, var() tokens included	`string`	`"var(--brand)"`
`label` Accessible name; generated from marker labels when omitted	`string`	`—`

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

GlobeMarker

interface GlobeMarker {
  /** Latitude in degrees */
  lat: number;
  /** Longitude in degrees */
  lng: number;
  /** Name drawn beside the marker and included in the accessible name */
  label?: string;
}

GlobeArc

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

Accessibility

Reduced motion: Auto-rotation, marker pulses and travelling arc highlights stop; one static frame is drawn with arcs shown in full. Dragging and arrow keys still rotate it, arrow keys in instant 15° steps.
Keyboard: The globe is a single Tab stop with a focus ring; Left/Right arrows turn it west/east and Up/Down tilt it north/south. Auto-rotation pauses while it has focus or is hovered.
Screen readers: Exposed as one image (role="img") named from the marker labels and arc count, or from the label prop; the canvas is aria-hidden.