Skip to content

No.259 · Maps & Globes

Route Globe

A dotted globe with flight arcs from one hub: comets run each great circle and the destinations pulse as they land. Drag to spin it.

The prompt

The design brief behind this component — reuse it to regenerate, remix, or explain it.

Build a dotted globe in Canvas 2D (no map libraries) with flight routes from one hub. Land comes from a 1° land mask of Natural Earth 1:110m countries (public domain), stored run-length encoded in a small module; sample about 30,000 points on a Fibonacci sphere (18,000 on phones) so dots are evenly spaced everywhere, and keep the ones on land (Antarctica left out). Each frame rotate the points by yaw (around the vertical axis) then tilt, and draw them in orthographic projection: dots on the far side tiny at 9% opacity, dots on the near side in four depth bands brightening toward the middle and slightly larger, plus a soft atmosphere ring outside the limb. Routes go from the hub (Muscat) to ten cities: each is a great circle (slerp) lifted off the surface by sin(πu) × (0.06 + 0.12 × angular distance), drawn as a faint 1px line (almost invisible where it passes behind the globe). A comet — a bright head with a ten-segment fading tail — runs along each route in 70% of a 3.6s cycle, each route with its own offset, and the destination dot sends out a pulse ring as it lands. The hub is a pulsing dot. Drag spins the globe (yaw and tilt, tilt clamped) with inertia that decays; after 2.5s idle it turns slowly on its own and the tilt eases back. Hovering near a destination shows a small frosted tooltip with the city and flight time. The route list is also in the DOM for screen readers. Selected variant — Night: Night: blue-grey land dots (#9fb4d6) on #06080d with a blue atmosphere glow, amber routes and comets (#ffb547), white hub.

Notes

Interaction
Drag to spin the globe with inertia; hover a destination for its flight time.
Motion
Comets loop every 3.6s with staggered offsets; arrival pulses; idle spin 0.08 rad/s after 2.5s; drag inertia decays to 5% per second.
Accessibility
The canvas is role="img" with a summary, and every route (with its flight time) is in a visually hidden list. Reduced motion draws one still frame with comets at their destinations; drag still turns it.
Responsive
The globe is 80% of the smaller side and recentres on resize; fewer land dots on phones.
On touch
Drag to spin on touch (vertical swipes still scroll the page); tooltips are mouse-only, the list covers the rest.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
81Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.93Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.94Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
95Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.106IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
151Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.157Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
205Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
212Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.222Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
275Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
279Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
301 components