Dot Matrix Globe
The ambient heartbeat of the homepage. A wireframe globe built from thousands of dots, each one a point on the Earth tested against land boundaries. Land glows brighter. Ocean fades. The globe breathes.
Points
~8,000
Float32Array
Projection
Orthographic
d3-geo
Framerate
60fps
rAF
Renderer
Canvas 2D
DPR-aware
How it works
The globe generates a uniform grid across the Earth's surface. Each point is projected through d3's orthographic projection, then tested against Natural Earth TopoJSON land boundaries with a custom pointInPolygon implementation. Land points render at full opacity; ocean points render dimmer.
The point grid is stored in a Float32Array to avoid garbage collection pressure during animation. The canvas is DPR-aware (retina screens get crisp dots) and renders via requestAnimationFrame.
At the center of the globe, a pulsing crimson star — rendered with layered radial gradients — marks the origin. It uses smoothstep easing for a natural, organic pulse.
Design decisions
Ambient, not interactive
Lives behind the hero text. It's a mood piece, not a tool. The offset-right positioning leaves room for the headline.
Theme-reactive live
Listens for a custom 'themechange' event dispatched by the site's ThemeProvider. Colors swap instantly — no re-mount.
No scroll-zoom
Deliberately omitted. The globe is embedded in the page flow — scroll-to-zoom would fight page scrolling.
Graticule + coastlines
Grid lines provide visual structure. Coastlines in crimson tie into the site's accent palette.