- Terrain
- USGS 3DEP elevation at about 10 m resolution for a 12 km square around Derby, stored as a 192 × 192 height grid in a 25 KB WebP. The header reads out the real elevation under your pointer.
- Contours
- Calculated per pixel in a WebGL2 shader, never drawn as images, so they stay sharp at any size. A line every 10 ft, heavier every 50 ft. A water line climbs from the river to the hilltops every 70 seconds.
- Streets
- 1,292 OpenStreetMap road segments packed into 15 KB and drawn as WebGL vector lines in the same coordinates as the terrain.
- Distortion
- Pointer speed stirs a noise field into the elevation. Streets are pushed along the slope of the same field, so roads and contours bend together, then settle back to true.
- Theme
- Light and dark flood up the real terrain, river first. The map and the text switch on the same elevation line, with the text clipped by CSS vector paths.
- Stack
- One HTML file under 60 KB compressed. No frameworks: WebGL2, CSS, native dialog and popover, plain JavaScript. Type: Archivo Black, Inter and IBM Plex Mono.