Globe
A self-rotating, interactive WebGL-style globe (GitHub-style), simulated with a canvas 2D point cloud, arcs, and an atmospheric glow.
A rotating point-cloud globe whose landmasses are drawn from an equirectangular mask, draggable with a pointer, complete with travelling arcs and glowing markers. Pure canvas 2D — no WebGL and no three.js.
Loading preview…
npx shadcn@latest add https://webberui.com/r/globe.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
300
0.12
8
<Globe />
Installation
npx shadcn@latest add https://webberui.com/r/globe.jsonOr, once registries are configured in components.json, install it as @webberui/globe.
Usage
import { Globe } from "@/components/ui/globe";
<Globe size={460} />Custom colors and markers:
<Globe
size={400}
dotColor="#34d399"
arcColor="#a7f3d0"
arcCount={10}
markers={[
{ lat: 25.03, lng: 121.56 },
{ lat: 37.77, lng: -122.42 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 460 | Globe diameter (px); the container is square and constrained by max-w-full |
dotColor | string | Theme-aware | Color of the landmass point cloud |
arcColor | string | Theme-aware | Color of the arcs and travelling pulses |
baseColor | string | Theme-aware | Base color of the sphere (the ocean) |
glowColor | string | Theme-aware | Color of the atmospheric glow |
autoRotate | boolean | true | Whether the globe rotates on its own |
rotationSpeed | number | 0.12 | Rotation speed (radians / second) |
interactive | boolean | true | Whether the globe can be dragged to rotate with a pointer |
arcCount | number | 8 | Number of random arcs; set 0 to turn them off |
markers | GlobeMarker[] | Built-in cities | Highlighted markers, typed { lat, lng, size? } |
className | string | — | Forwarded to the container |
Accessibility
- When the user has "reduce motion" enabled at the system level, a static globe is rendered — no rotation and no arc animation
- The canvas is marked
aria-hiddenas a purely decorative layer, so it does not affect assistive technology - When colors are unspecified they follow the light/dark theme automatically; you can also use
--wb-globe-darkto observe the current theme