Globe

A rotating dotted globe drawn on canvas, with pulsing city markers, great-circle arcs carrying travelling light, drag-to-spin inertia and a soft atmosphere.

10 regions · drag to spin

Open

dotColor

accent

speed8

tilt18

density12000

showLabels

Installation

npx shadcn@latest add @glint-ui/globe

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/globe.json

Usage

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

<Globe
  markers={[
    { lat: 37.77, lon: -122.42, label: "San Francisco" },
    { lat: 51.5, lon: -0.12, label: "London" },
    { lat: 35.68, lon: 139.69, label: "Tokyo" },
  ]}
  arcs={[[0, 1], [0, 2]]}
/>

Props

Prop	Type	Default	Description
dotColor	string	"#94a3b8"	Land dot color.
accent	string	"#c6ff3d"	Markers, arcs and atmosphere.
speed	number	8	Auto-rotation, degrees per second.
tilt	number	18	Axial tilt in degrees.
density	number	12000	Dots sampled over the sphere.
showLabels	boolean	false	City labels on the front side.
markers	ReactNode	—	`{ lat, lon, label? }[]`. Ships with ten world cities.
arcs	ReactNode	—	`[fromIndex, toIndex][]` into `markers`.
className	string	—	Extra classes for the root element.