Namma Grid

What it is

Five centuries of Bengaluru, read from the street grids each era left behind. Four eras sit on one hand‑drawn map: the Pete, the Cantonment, Electronic City and Koramangala. Pick a region and the map opens into its chapter.

How it was made

Astro, with one small Three.js island: a hundred and forty Tabebuia petals falling over an illustrated hero.

The map is hand‑drawn SVG from real geography: the Outer Ring Road, the railway, the lakes, Cubbon Park, the HAL runway. Each region is a real link, so it works with a keyboard and with JavaScript switched off. Chapters open through view transitions, and the region you click becomes the page.

What I learned

The first build followed the spec to the letter: particles assembling into the grid of the Pete, a 3D relief map, glowing beacons, a camera that flew to each era. It worked. I replaced all of it in one commit with a map you can actually read.

The WebGL now does exactly one job, and it is petals.

Credits

• Photos: John Hoey (CC BY 2.0), Vipul ji (CC BY-SA 3.0), Ashwin Kumar (CC BY-SA 2.0), Veera.sj (CC0), Coworker2016 (CC BY-SA 4.0).
• Engraving: Cassell & Co. Postcard: India Post reprint. Photograph: Curzon Collection. All public domain.