GlobePro

• Showing that something happens worldwide: traffic between regions, customers by city, shipping routes.
• A hero or section visual for infrastructure, payments and travel products.

• Comparing values between countries: use the map explorer block, which is a real choropleth with numbers.
• Exact positions or zooming to streets: use a map library.

Import it from @/components/ui/globe after installing.

import { Globe } from "@/components/ui/globe";

const arcs = [
  { from: [-74, 40.7], to: [-0.1, 51.5] },    // New York → London
  { from: [77.6, 12.97], to: [103.8, 1.35] }, // Bengaluru → Singapore
];
const markers = [
  { at: [-74, 40.7], label: "New York" },
  { at: [-0.1, 51.5], label: "London" },
];

export function Traffic() {
  return <Globe arcs={arcs} markers={markers} label="Traffic between regions" />;
}

• The canvas has role img and a name listing the labelled markers.
• Dragging is never needed: the arrow keys turn it too.

• Spins slowly when idle and keeps momentum after a drag.
• With reduced motion it holds still and arcs are drawn without travelling.

• Shrinks to its container; touch dragging works on phones.

• One canvas; land dots are computed once and shared by every globe on the page.
• Drawing pauses when the globe is off screen or the tab is hidden.
• Land outlines (about 56 KB) ship with the component, so there is nothing extra to fetch.

• Coordinates are [longitude, latitude], the same order as GeoJSON.
• Keep arcs to a dozen or so; more reads as noise.