Loading…

Globe

experimental

A dotted globe with places and the routes between them, drawn in raw WebGL — turning slowly, draggable, listed for screen readers.

Data
2 files
No extra npm packages
Accessibility notes
Renders with WebGL

Playground

Installation

The CLI installs use-in-view and use-reduced-motion as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add globe

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Still
Land Test

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Globe>

Prop	Type	Default
`label` (required) Names the globe.	`string`	—
`arcColor`	`string`	`"primary"`
`arcs`	`GlobeArc[]`	`[]`
`center` The place facing the viewer at first. Default 20°N 0°E.	`GlobePoint`	`{ lat: 20, lng: 0 }`
`dotColor`	`string`	`"muted-foreground"`
`dots` Dots in the lattice before the land test. Default 5000.	`number`	`5000`
`land` Keep a dot only where this returns true — pass a land mask for continents.	`(point: GlobePoint) => boolean`	—
`markerColor`	`string`	`"primary"`
`markers`	`GlobeMarker[]`	`[]`
`speed` Turn speed in degrees per second; 0 holds it. Default 6.	`number`	`6`

Plus every attribute of <div>.

Accessibility

The picture is aria-hidden; the information is not — every place and route is listed for screen readers inside the named region. Focus it and the arrow keys turn it; a drag does too. It spins and pulses only while on screen, not hovered, and never under reduced motion. Without WebGL, or if the context is lost, an SVG of the same view stands in. Colours are theme tokens and follow theme changes.

Quality

Measured from the source and its tests at build time.

All scores

7/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — fails
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

label

Names the globe.

string

—

arcColor

string

"primary"

arcs

GlobeArc[]

[]

center

The place facing the viewer at first. Default 20°N 0°E.

GlobePoint

{ lat: 20, lng: 0 }

dotColor

string

"muted-foreground"

dots

Dots in the lattice before the land test. Default 5000.

number

5000

land

Keep a dot only where this returns true — pass a land mask for continents.

(point: GlobePoint) => boolean

—

markerColor

string

"primary"

markers

GlobeMarker[]

[]

speed

Turn speed in degrees per second; 0 holds it. Default 6.

number

6