Globe
A draggable, auto-rotating WebGL globe with glowing location markers.
All systems operational
Deployed across every region on Earth
Your app runs at the edge in 35 regions, routed to the closest data center for sub-50ms responses anywhere on the planet.
35
Regions
50ms
p95 latency
99.99%
Uptime SLA
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/globe.json"Globe renders a WebGL globe with cobe, driven
by a requestAnimationFrame loop. It auto-rotates while idle and hands rotation
to the pointer on drag, picking up where the spin left off. Drag it to spin.
Usage
tsx
import { Globe } from "@/components/godui/globe";tsx
<Globe />Custom markers and colors
config is merged over the defaults and accepts any
cobe option — markers, arcs, colors, glow.
tsx
<Globe
config={{
markerColor: [0.9, 0.5, 0.1],
markers: [
{ location: [37.7595, -122.4367], size: 0.1 },
{ location: [40.7128, -74.006], size: 0.1 },
],
}}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
config | Partial<COBEOptions> | — | Override any cobe option (markers, colors, glow). |
Globe also forwards every standard <div> attribute to the root element.