Globe
A desk globe on a meridian. A satin-metal ball with the land etched into it, held in a machined half-meridian on a turned stand. It spins with inertia, and markers are small domed lamps that glow, light the metal around them and go behind the limb.
What it is for
Places and their state, where the picture should be a thing you can hold: an infrastructure map of regions and their health, a fleet or an edge network, a status board of sites, energy and IoT assets by country, an incident view that turns to the region that went red.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Analytic sphere shader, Land mask mip sampling, Engraved coast bevel, Bead lattice, Axle friction inertia, Resisted axle give, Short way seek, Domed lamp markers, Ray cast stand, Unrolled meridian scale, Sleeping loop
- Stack
- Vanilla ES modules, WebGL2, CSS
- Needs
- Nothing, no dependencies
- States
- 17 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restNothing moves and no frame is requested; the terminator, the highlight and every lamp are still.
- DraggingThe surface under the pointer follows it along its parallel. A vertical drag does not turn it: the ball gives a few degrees on its axle.
- CoastingAfter a flick it keeps turning against viscous and dry friction, slows and stops; the loop then sleeps.
- Meridian resistsVertical drag tips the ball at most 4.5 degrees, following the hand, and it springs back with a small ring.
- Turning to a placefocus() and focusMarker() turn it the short way round with a spring that starts quickly and arrives slowly.
- KeyboardArrows turn 15 degrees, Page keys 45, Home returns to the prime meridian, Escape clears the selection; Tab moves through the markers that are on the near side.
- SelectedA small engraved plate with the label and state sits beside the lamp (on the left if it would run out of the box) and select fires.
- LampsGreen, amber, red or white domes set into the surface; each lights the metal around it, dims and foreshortens toward the limb and is gone behind it, its button hidden.
- State changeA lamp fades to its new colour; setState turns one red.
- EngravedThe land is a shallow frosted recess with a bevelled coast.
- DottedThe land is raised beads on rows of equal spacing, fewer toward the poles.
- AluminiumA bead-blasted aluminium ring and stand and a light satin ball.
- GraphiteA graphite ring and stand and a dark satin ball with the land frosted lighter.
- DriftOptional: a slow idle turn that pauses on hover, on focus and while a marker is selected.
- SoundOptional: a soft bearing hum while it turns and a knock when a lamp is selected. Off by default and only after the page has been touched.
- Off screen or hiddenThe loop pauses and nothing runs.
- Reduced motionNo inertia and no springs; focus() jumps; no drift; no sound.
Notes
Every marker is a real button (Tab walks the ones on the near side, Enter selects), the ball is a slider for longitude with its value spoken as "30 degrees east, facing Frankfurt", and select, turn and settle events report what the visitor did.
Original. One fragment shader draws the ball, the stand and the desk; the land is a mask rasterised once from baked Natural Earth polygons; the markers are DOM buttons positioned from the same rotation the shader uses.
Anatomy
Analytic sphere shader, Land mask mip sampling, Engraved coast bevel, Bead lattice, Axle friction inertia, Resisted axle give, Short way seek, Domed lamp markers, Ray cast stand, Unrolled meridian scale, Sleeping loop
Usage notes
Places and their state, where the picture should be a thing you can hold: an infrastructure map of regions and their health, a fleet or an edge network, a status board of sites, energy and IoT assets by country, an incident view that turns to the region that went red.
Options
| Option | Type | Description |
|---|---|---|
| markers | text | One lamp each, separated by |. A label, latitude, longitude, then ok, degraded, down, neutral or off, and a note after a colon. |
| lon | number | The meridian that faces you at the start. Drag the ball in the preview to turn it. |
| land | enum | Dotted: raised beads set in rows, fewer toward the poles, like a lamp array. Engraved: etched into the metal with a bevelled coast. |
| finish | enum | Auto follows the page: aluminium on Aluminium, Porcelain and Daylight, graphite on AMOLED, and on Graphite, Black, Phosphor, Night, Paper and E-paper a globe drawn from that finish’s own tokens (its land lit on Phosphor and Night). The sea is satin and the land frosted in all. |
| tilt | number | |
| graticule | boolean | |
| drift | boolean | A slow idle turn that pauses on hover, on focus and while a marker is selected. Off by default; never under reduced motion. |
| light | number | 0 is from above, clockwise. The terminator, the highlight, the desk shadow and every lamp’s glow follow it. |
| size | number | 0 fills its frame; any other value is the ball’s diameter, shrunk only to fit. |
| sound | boolean | A soft bearing hum while it turns and a knock when a lamp is selected. Synthesised, off by default, and only once you have touched the page; never under reduced motion. |
| label | text | Accessible name |
Methods
- lon
- centre
- state
- renderer
- markers
- selectedId
- focus
- focusMarker
- spin
- select
- deselect
- setState
- update
- toDataURL
- destroy
How it works
Original. One fragment shader draws the ball, the stand and the desk; the land is a mask rasterised once from baked Natural Earth polygons; the markers are DOM buttons positioned from the same rotation the shader uses.