Music Atlas
A Pong-minimal globe of music history — birthplaces, scenes, labels, studios, plotted in time and space.
The problem
Music history is geographic — Memphis built soul, Manchester built post-punk, Lagos built afrobeat — but no app I’d seen showed you the geography. Lists and timelines flatten the spatial story. I wanted a Google-Earth-style globe where every pin was a moment in music history, and where I could walk through eras by sliding a year handle.
The approach
A wireframe globe — no satellite texture, no gloss, just lines and pins. Phase 0 plotted a handful of birthplaces. By Phase 2 it had grown into a chronological tour engine: pins cluster into vertical columns when they share a coordinate, a time-slider plays history forward at four seconds per pin, the camera tracks adventure-aware zoom paths, and clustered pins reveal their stack on click. Aesthetic is “Pong-minimal” — wireframe globe, monospace labels, expandable text cards, small play buttons.
How it works
React 19 + Vite 7 on top of react-globe.gl (Three.js wrapper). A Hono-powered Cloudflare Worker proxies Apple Music (MusicKit) and resolves track URIs via a strategy ladder — direct ID lookup, then Apple Music search fallback. Artist origin coordinates come from MusicBrainz with a Wikidata fallback, backfilled by a worker job. Pin data is curated in Google Sheets, round-tripped through a CSV importer/exporter so editing is fast. Saved pins and adventures share storage with The Interlude — your saved feed posts plot on the globe alongside curated history.
Results
- Merged into The Interlude as
/atlas— same codebase, shared auth, saved-pins inherited from the feed - Time-slider chronology — play history forward, watch eras emerge geographically
- Adventure mode — curated guided tours (e.g. classical era 1685–1904) with camera zoom-aware flight paths
- Pin clustering — co-located pins stack as chronological columns instead of overlapping
- Apple Music playback from every pin via a worker-side strategy-ladder resolver