Market City
The stock market as a city you can read from across the room. Each tower is one of the 18 largest S&P 500 stocks in its sector. The lights, the weather, the traffic and the music all come from live market data, refreshed every 30 seconds while the market is open.
How to read it
Districts are sectors. Each tower is one of the 18 largest S&P 500 stocks in its GICS sector. Height follows the square root of market cap.
Lit windows show how the stock is doing today. A dark tower is down, a fully lit one is up.
Edges, beacons and signs take the up color or the down color. Brighter means a bigger move.
The tall tower in the open plaza is SPY, the whole market. Its crown glows with SPY's move, and the LED bands scroll up or down with it.
Weather follows SPY volatility over the last 20 minutes: clear, haze, rain, then lightning.
Sky drifts from dusk at the open to night at the close. It warms when SPY is up and goes cold when SPY is down.
Traffic follows SPY volume against its 20-day minute average.
Fireworks launch when a stock crosses another +5%, a sector another +2.5%, or SPY another +2%. SPY's are the big ones from the tall tower.
Sound follows the same data. Tempo is traffic, hi-hats and swing are volatility, the key is SPY direction, the bass filter opens with the size of SPY's move, and the arpeggio steps through the 11 sectors.
Hover a tower for the numbers. Drag to orbit, pinch or ⌘-scroll to zoom, and right-drag or Shift-drag to pan. In full screen any scroll zooms. WASD moves around the city like a game, Q and E turn, and Shift goes faster. Double-click resets the view.
Themes and music
Each theme has its own look and plays its own genre. The music is made live in your browser from the same data. A song picks a bright or dark key from SPY's direction when it starts, plays its form, and hands over to a new song.
| Theme | Genre | Tempo | What you hear |
|---|---|---|---|
| Cyberpunk | Techno | 124–134 | Four-on-the-floor kick, off-beat open hats, chord stabs, an FM arp |
| Dusk | Deep house | 118–124 | Swung hats, electric piano 7th chords, a warm rolling bass |
| Synthwave | Synthwave | 84–112 | A 16th-note arpeggiated bass with sidechain pumping, gated snare, tom fills, a slow lead |
| Noir | Trip-hop | 72–90 | A laid-back broken beat, electric piano chords, vinyl crackle |
| Matrix | Industrial techno | 130–145 | A distorted kick and a bit-crushed arp |
Live and replay
While the market is open, the city is live. The rest of the time it replays the most recent session. The day menu also has a few days worth watching: the April 2025 tariff crash, the rally five days later when the tariffs were paused, a quiet August day, and a day the sectors split apart. Play them at 1×, 5× or 20×, or drag the slider to any minute.
How it's built
The city is three.js with no drawn assets: every building, window and light comes from code. The music is Tone.js. The market data comes from the Massive API: minute bars for each stock, one bulk snapshot every 30 seconds while the market is open, and grouped daily bars for the previous close. A small Vercel function holds the API key and caches the day, so every viewer shares the same few calls.