Globes and maps

Prototemplate draws the Earth three ways. The edge globe is an SVG drawing of the translation CDN. The globe field is a lit sphere thresholded by the CPU dither loop. The blog globe figures turn a globe to the city of each version of Euclid's Elements, and their four directions in three rounds are recorded on The blog globe figure.

The edge globeCopy Anchor Link

The plate mounts EdgeGlobe: five points of presence stand on a sparse graticule, and one route carries a request from the user to the closest edge and the payload back in 12 ms. Accent spends the accent on the route and the arrival flashes, Halo adds the dithered atmosphere, Stroke width sets the line weight in view box units, and Replay restarts the loop.

The halo is four rings outside the limb, each filled with one coverage tier of the 4 by 4 screen on one shared grid, so crossing a ring only ever turns cells off.

Import and propsCopy Anchor Link

import EdgeGlobe from '@/app/d/toolchain/diagrams/EdgeGlobe';

<EdgeGlobe accent title='One request served from the closest edge in 12 ms' />;

The drawing reads currentColor and the --iso-ink, --iso-accent and --iso-mono tokens, so one ancestor themes it. A fork with Heroicons glyphs lives at src/app/d/production/sections/EdgeGlobe.tsx for the production mirror.

When to use itCopy Anchor Link

Use the edge globe where a page explains delivery: a request, the closest edge, a latency. It tells one sentence with one route, so it stands alone in a cell or a band. Use the globe field instead for a globe that is texture with no labels.

Reduced motion and themesCopy Anchor Link

Under reduced motion the payload chip rests mid-route, the dot, the rings and the flashes are removed, and the still rests in the quiet ink. The drawing follows the docs theme through currentColor.

The globe fieldCopy Anchor Link

The plate runs globe() from src/lib/dither.ts: a lambert-shaded sphere with a graticule and a noise landmass, thresholded by the 8 by 8 screen. Each slider builds a new field and hands it to the running loop with setField, so the spin keeps its clock. The two looks load the field as the Dither field direction draws it and as the dashboard's sign-in plate draws it.

The Dither field look is globe() at a 3 pixel cell with a graticule of 0.3, twelve meridians, seven parallels and a spin of 0.18 radians a second. The sign-in look has no graticule, a landmass of 0.42 and a spin of 0.14 at a 2 pixel cell and 24 frames a second, in GT blue: #2f5ce0 on paper and #9db9ff on ink.

Import and propsCopy Anchor Link

import { createDitherLoop, globe } from '@/lib/dither';

const loop = createDitherLoop(canvas, globe({ graticule: 0.3, landmass: 0.22, spin: 0.18 }), { scale: 3, paper: 'transparent' });
loop.setField(globe({ graticule: 0, landmass: 0.42 }));

When to use itCopy Anchor Link

Use the globe field for a turning Earth as material, behind a sign-in form or in a band, where its texture matters and its geography does not: the landmass is noise and carries no real coastlines. Use a blog globe direction for a globe that has to show real places.

Reduced motion and themesCopy Anchor Link

Under reduced motion the loop draws one frame at its reducedMotionTime (8 seconds on the sign-in plate) and never starts. The host reads its ink token again on every theme change, as FieldStack.tsx does on the sign-in plate.

The blog globe figuresCopy Anchor Link

The plate shows one blog globe direction live in its round's own document. Round picks the build, Direction picks the drawing, and the figure keeps its own controls: the underlined language names, the clickable cities and the arrow keys. Open Stage opens the figure on its stage page.

The four directions draw the same five stops of Euclid's Elements from Alexandria in 300 BCE to Beijing in 1606. A is a dithered globe, B a line globe, C a glyph globe and D a dot globe, and the design review ranked D first. Round 1 has no clickable cities, round 2 adds them, and round 3 zooms each globe in and sets all eight definitions. The blog globe figure records the measurements and the ranking, and /d/blog-globe/all lays all twelve figures side by side.

Import and propsCopy Anchor Link

import GlobeFrame from '@/components/blog-globe/GlobeFrame';

<GlobeFrame round='r3' variant='d' title='The dot globe, round 3' layout='fit' />;

When to use itCopy Anchor Link

Use a frame wherever a page shows a round's figure as it was reviewed: each round keeps its own stylesheets, and the page loads none of the figures' code. The frame arms when it comes within 320 pixels of the viewport.

Reduced motion and themesCopy Anchor Link

Under reduced motion every direction jumps the camera to the stop, draws once and cuts the text. With no JavaScript the radios and CSS :has() still switch the passage and the label. The frame passes the docs theme to the figure, and directions A and C read their inks again when it changes.

Other globesCopy Anchor Link

The GT Atlas magazine at /press draws a dithered orthographic Earth with a 4 by 4 screen and a pin with its coordinates. The magazine session keeps it, and it is not part of this library yet.