Globe
A dotted Earth that turns on its own, spins under a finger, pulses where things happen and flies arcs between places. Pass events in and pick colours; the projection, the land, the frame loop and the dragging are done.
The globe above is one <Remold.Globe>. The arcs are a list of journeys passed as arcs, and each look is a different colors prop. Nothing else changes.
Installation
npm install @remold-ui/reactImport the globe from @remold-ui/react/canvas so canvas rendering stays opt-in.
Using plain JavaScript? Install @remold-ui/canvas instead, and use globe().
Usage
Give every event an id. Each id it hasn't seen sends out one pulse or flies one arc, so pass your recent events as they are.
import { Remold } from '@remold-ui/react/canvas';
<Remold.Globe
colors={{ sphere: "#0c1633", glow: "#3d6bff", land: "#7d9be0", arc: ["#ff7ac6", "#5ab0ff"] }}
pulses={signups.map((s) => ({ id: s.id, lat: s.lat, lon: s.lon }))}
arcs={merges.map((m) => ({ id: m.id, from: m.author, to: m.repo }))}
markers={offices}
focus={city && { lat: city.lat, lon: city.lon, label: city.name }}
scale={0.8}
className="aspect-square w-full"
/>What you don't write:
- The Earth. Continent outlines ship with it and are filled with evenly spread dots. The side facing you is bright and the far side is faint, so it reads as round.
- Turning. It spins slowly and leans towards you. A drag spins it, a flick coasts and settles back into the slow turn, and
focusturns to a place and holds there. - Arcs. Each one rises off the surface along the shortest route, a bright head draws it out, and its tail follows it home. It goes behind the globe when the route does, and pulses where it lands.
- Pulses and markers. A pulse rings out, then stays lit for a few seconds. Markers stay lit. Both wait on the far side until they come round.
- The plumbing. It stays sharp at every size, sleeps while off screen, and holds still for reduced motion: no spin, arcs drawn whole, and pulses as dots without rings.
Colours
Pass colors, or leave any of them out and set them in CSS. Changing them recolours everything already on the globe, arcs in flight included.
| Colour | CSS fallback | Paints |
|---|---|---|
land | color | The land dots. |
sphere | --globe-sphere | The ocean, as a solid ball. It also hides the far side. |
glow | --globe-glow | A halo around the edge. Use scale to leave room for it. |
accent | accent-color | Pulses, markers and the focus tag. The tag's text turns dark or light to stay readable. |
arc | --globe-arc | Arcs. Pass a list and they take turns, like GitHub's pink and blue. |
A single arc, pulse or marker can also take its own color.
Options
| Prop | Default | |
|---|---|---|
pulses | Recent events, each { id, lat, lon, color? }. | |
arcs | Recent journeys, each { id, from, to, color?, pulse? }. Set pulse: false to land quietly. | |
markers | Places that stay lit, each { lat, lon, color?, size? }. | |
focus | null | { lat, lon, label? } to turn to and hold. |
colors | See above. | |
spin | 7 | Degrees per second. 0 holds it still. |
tilt | 18 | Degrees it leans towards you. |
scale | 1 | How much of the canvas the globe fills. |
dotSize | 1 | Scales every land dot. |
start | 0 | The longitude facing you at first. |
draggable | true | Let a drag spin it. |
dots | 14000 | Dots over the whole sphere; land keeps about a third. |
label | The canvas's accessible name. |
globe() takes the same options apart from pulses, arcs and focus, and returns pulse, arc, focus, set (for colours, markers, spin, tilt, scale and dot size), redraw (after a CSS change) and destroy.
Canvas
Paint your own canvas and leave the plumbing to Remold: sharp at every size, a frame loop that runs only while something moves and only on screen, numbers that spring to new targets, and reduced motion.
Dot grid
A dotted background that wakes up under the cursor. Dots swell and lean away from the pointer, a click sends a ripple, and your wordmark or logo can light up in the dots.