Globe
An auto-rotating, drag-to-spin 3D globe rendered with WebGL (cobe). Highlight cities or data points with markers, switch light/dark presets, and tune rotation speed — all SSR-safe.
Pro Features
Unlock advanced capabilities with the Pro version
WebGL 3D Globe
GPU-rendered globe built on cobe with 16k map samples for a crisp, tactile surface.
Drag to Spin
Pointer-driven rotation with capture — auto-rotation pauses on grab and resumes on release.
Location Markers
Plot cities or data points from [lat, lng] pairs with per-marker sizing.
Clickable Markers
Add label/content to open a popover on click, or handle onMarkerClick for drill-downs.
Speed Control
Tune auto-rotation with a single speed prop — pause with 0 or reverse with a negative value.
Light & Dark Presets
Neutral WebGL presets and matching shadows for both light and dark surfaces.
Brand Color Hook
Markers read your --primary token automatically, with RGB escape hatches for full control.
SSR-Safe
createGlobe runs only after mount, so it imports cleanly in Next.js App Router server components.
Motion-Aware
Respects prefers-reduced-motion by pausing auto-rotation while drag interaction stays available.
Installation
Install via CLI
npx @moontra/moonui-cli add globeUsage
Examples
Interactive & Auto-Rotating
By default the globe rotates on its own and can be dragged to spin. The speed prop controls the auto-rotation rate — set 0 to pause or a negative value to reverse.
Marked Locations
Pass a markers array of [latitude, longitude] pairs to spotlight cities or points of interest. Markers inherit the theme's primary color by default.
Dark Mode
The mode prop selects a neutral light or dark WebGL preset and a matching drop shadow. Colors stay neutral by design — only markers carry your brand color.
Custom Marker Color
WebGL cannot read CSS tokens, so colors are passed as RGB triplets in the 0–1 range. Override markerColor (and optionally baseColor / glowColor) to match a specific brand.
Advanced Config
Reach past the presets with the config escape hatch — a Partial<COBEOptions> that passes any static cobe option straight through. Here a brighter map and stronger diffuse lighting give a more luminous globe. Explicit color props still win over config, while size, markers, and rotation stay component-managed.
Static (No Auto-Rotation)
Set speed={0} to switch off auto-rotation. The globe holds its position but stays fully interactive — users can still drag to spin it and no extra state is required.
Clickable Markers with Popover
Give a marker a label and content to make it clickable: clicking one opens a popover anchored to that point and pauses auto-rotation so it can be read. Handle onMarkerClick to drive your own UI — here it updates the selection below the globe. With pauseOnClick, tapping the globe itself (away from a marker) also toggles rotation.
Click a marker to open its popover