Globe

An autorotating, interactive globe rendered in WebGL.

Globe wraps cobe in a small, declarative component: hand it a list of coordinates and it pins them on a dotted sphere, with a soft glow around the rim and a subtle tilt.

It turns on its own and can be dragged to spin, with the motion spring-damped so it settles naturally. Rendering pauses while the globe is scrolled out of view, and the auto-rotation stops when the visitor has asked for reduced motion.

Globe is the one component in this library with an optional dependency. Install it in your app before using the component:

pnpm add cobe

It is loaded lazily, so nothing is pulled into your bundle until a MGlobe actually mounts. Without it the component renders an install hint instead of breaking the page.

Usage

<script setup lang="ts">
const markers = [
  { lat: 14.5995, lng: 120.9842, size: 0.03, label: 'Manila' },
  { lat: 19.076, lng: 72.8777, size: 0.1, label: 'Mumbai' },
  { lat: 40.7128, lng: -74.006, size: 0.1, label: 'New York' },
]
</script>

<template>
  <MGlobe :data="markers" />
</template>

Examples

Customize

Arc Color

Arc Height0.2

Arc Width1

Aria LabelInteractive globe

Auto Rotate

Base Color

Dark0

Device Pixel Ratio2

Diffuse0.4

Glow Color

Map Base Brightness0

Map Brightness1.2

Map Samples16000

Marker Elevation0.05

Marker Color

Opacity1

Phi0

Rotate Speed0.3

Scale1

Theta0.3

Props

Prop	Type	Default	Description
`data`	`GlobePoint[]`	`[]`	Markers pinned to the globe, each `{ lat, lng, size?, label?, color? }`. `lat` and `lng` are degrees; `size` is the marker's radius, from `0` to `1`.
`autoRotate`	`boolean`	`true`	Turn the globe on its own. Dragging pauses the spin while the pointer is down.
`rotateSpeed`	`number`	`0.3`	Radians per second the globe turns on its own.
`theta`	`number`	`0.3`	Tilt of the globe, in radians. `0` looks at it head on.
`phi`	`number`	`0`	Starting rotation around the vertical axis, in radians.
`dark`	`number`	`0`	`0` renders a light globe, `1` a dark one.
`diffuse`	`number`	`0.4`	Sharpness of the light falling across the sphere.
`mapSamples`	`number`	`16000`	Number of samples used to build the landmass texture. Higher is more detailed and slower.
`mapBrightness`	`number`	`1.2`	Brightness of the landmass texture.
`mapBaseBrightness`	`number`	`0`	Brightness of the flat base layer beneath the landmass texture. Raise it to fill the ocean.
`baseColor`	`[number, number, number]`	`[1, 1, 1]`	Colour of the landmass, as `[r, g, b]` from `0` to `1`.
`markerColor`	`[number, number, number]`	`[0.984, 0.392, 0.082]`	Colour of the markers, as `[r, g, b]` from `0` to `1`.
`glowColor`	`[number, number, number]`	`[1, 1, 1]`	Colour of the atmosphere glow around the rim.
`markerElevation`	`number`	`0.05`	Height of every marker above the surface.
`arcs`	`GlobeArc[]`	`[]`	Great-circle arcs between two coordinates, each `{ from, to, color?, id? }`. `from` and `to` are either `[lat, lng]` or `{ lat, lng }`.
`arcColor`	`[number, number, number]`	`[0.3, 0.6, 1]`	Colour of the arcs, as `[r, g, b]` from `0` to `1`. An arc's own `color` wins over it.
`arcWidth`	`number`	`1`	Width of the arcs.
`arcHeight`	`number`	`0.2`	Thickness of the arcs above the surface.
`offset`	`[number, number]`	`[0, 0]`	Shift of the sphere inside the canvas, as a fraction of its size.
`devicePixelRatio`	`number`	`2`	Pixel ratio of the render target. Higher is sharper and slower.
`opacity`	`number`	`1`	Opacity of the whole globe.
`scale`	`number`	`1`	Scale of the sphere inside the canvas.
`ariaLabel`	`string`	`'Interactive globe'`	Accessible description of the canvas.
`class`	`string`	`''`	CSS classes to apply to the container. The container is square and caps at `600px`, so give the parent enough room.

Slots

Slot	Props	Description
`fallback`	-	Rendered instead of the canvas when `cobe` is missing. Defaults to an install hint.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.globe in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`relative mx-auto aspect-square w-full max-w-150 overflow-hidden`
`canvas`	-	`size-full cursor-grab touch-none transition-opacity duration-500 contain-[layout_paint_size] active:cursor-grabbing`
`fallback`	-	`flex h-full w-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted`

Edit this pageorReport an issue

Book

A 3D book cover built from CSS perspective transforms, with a spine, page block and a hover tilt.

Agent Avatar

A deterministic, animated pixel avatar generated from a string seed.