The geometry of a network, on a sphere
An orthographic globe drawn in SVG: a graticule for the shape, markers at latitude and longitude, great-circle arcs between them. No map library, no tile server, no land data. Drag it, steer it with the arrow keys, or let it turn slowly on its own.
A map surface
The full pattern: Globe in the middle, MapLegend in a corner, MapCallout beside the active point, Kbd hinting at the keys. Hover a marker to raise its callout.
Where the signal was last seen.
- Listening point
- Fixed witness
- Signal route
Arcs
Arcs lift off the surface by their altitude and draw with a cobalt-to-violet gradient from the chart series. A per-arc color swaps the gradient for a flat stroke, for routes that belong to one series.
Markers
Two kinds, one difference: point is a cross, for something that listens or moves; anchor is a square, for something fixed. Each can carry its own color (a chart series or status token), the same per-point channel WorldMap uses, so one dataset keys identically on both projections. Points on the far side dim rather than disappear, so the network keeps its size while it turns.
// From the npm package
import { Globe } from 'rift-ds/components/Globe/Globe';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/globe.json