Globe → Map
The Earth unfurls. An orthographic sphere smoothly morphs into a flat equirectangular projection — and back. Every pixel follows real projection math, not tweening.
The trick
Two clean d3.geoProjection renderers — geoOrthographic and geoEquirectangular — crossfade through a superellipse clip mask that morphs from circle to rectangle. Every pixel transitions through real geographic projection math, with the container shape itself doing the visual unfurling.
Connection arcs
Great-circle paths between 6 cities with animated pulse particles that travel along each arc.
Drag momentum
Spin the globe and release — velocity decays naturally before auto-rotation resumes.
Projection math
City markers follow true geographic coordinates through the morph. No position tweening.
Atmospheric glow
Subtle radial gradient at the globe edge creates a sense of atmosphere and depth.
Theme reactive
Responds to the site's dark/light toggle instantly. Colors swap without unmounting canvas.
60fps canvas
requestAnimationFrame with DPR-aware rendering. No SVG, no DOM thrashing.