IsoGlobe Weather
A 3D snow globe that builds a unique procedural city for any location on Earth, powered by a two-step Gemini pipeline — Google Search grounding for live weather, structured JSON generation for the isometric scene.
Started as a raw AI Studio export — a React/Three.js snow globe that visualizes weather. The interesting part wasn't the 3D rendering (standard R3F + Drei setup), it was the Gemini integration: a two-step pipeline where Google Search grounding fetches real weather data with source citations, then a second structured JSON call generates an entire 12×12 isometric city with location-appropriate architecture, color palette, and glass dome tint. Tokyo gets dense grey buildings with blue glass. LA gets sandy ground and tan low-rises. Reykjavik gets squat colorful buildings. No prompt engineering — the structured schema forces well-formed output and Gemini makes creative decisions about what each city looks like.
The cleanup revealed bugs that npm run build can't catch: Math.random() in useMemo hooks causing buildings to flicker colors on every re-render, no error handling around JSON parsing of LLM output. Fixed with deterministic hashing and defensive parsing. The GitHub ship session turned into a meta-moment — a /learn retrospective that produced four permanent rules about the AIS-to-GitHub pipeline, making this the project that taught the pipeline how to run itself.
Timeline
Opened an AI Studio export expecting a broken toy and found a working weather engine hiding behind scaffold cruft. IsoGlobe Weather runs a two-step Gemini 2.5 Flash pipeline — Google Search grounding to fetch live conditions, then a second structured JSON call that generates a 12×12 isometric city grid with location-appropriate architecture, color palette, and glass dome tint. The Three.js scene renders procedural buildings with window textures, parks with deterministic trees, water features, roads, and a full particle system for snow/rain with accumulation on rooftops. All inside a physically-based glass sphere with clearcoat, transmission, and tinted refraction. Deleted the import map, cleaned up Tailwind CDN references, and had it rendering in the browser within minutes.
Plugged in a real API key and took the globe on a five-city tour — Tokyo, New York, Reykjavik, São Paulo, LA — and every city looked completely different. Tokyo at night: dense grey cityscape, blue glass tint, snow swirling inside the dome. NYC in cloudy daylight: brownstone-height buildings with warm tones. Reykjavik at 9°C with overcast: squat colorful buildings reflecting actual Icelandic architecture. São Paulo during a thunderstorm: rain particles, dark moody sky, green parks breaking up a high-rise grid. LA at 25° and partly cloudy: sandy ground, blue and tan buildings, daytime sky. Gemini picked location-appropriate colors and building heights every time without any prompt engineering — the structured JSON schema forced well-formed output and the grounding step pulled real weather data with source citations.
Caught a subtle rendering bug that AI Studio's scaffold would have shipped: buildings changing colors on every re-render. The original code picked building colors with Math.random() inside a useMemo hook — so each state update reshuffled the entire cityscape. Replaced it with a seeded deterministic hash (Math.abs(Math.sin(i * 12.9898 + 78.233) * 43758.5453) % 1) indexed into the theme's color array. Same fix for window light placement and tree positioning. The city now looks stable across re-renders while still appearing randomly distributed. Also added try/catch around JSON.parse() in the Gemini service — without it, a malformed response crashes the app silently. These are the bugs that pass npm run build but break the experience.
Shipped IsoGlobe Weather to GitHub and then immediately did a retrospective that became a permanent rule update. The cleanup pass deleted scaffold files, stripped 8 unused imports, replaced Math.random() with deterministic hashing, swapped screenshots for dramatic injected state captures (rich Tokyo snow scene at night vs. the sparse 6-cell fallback), and wrote a README with a two-screenshot hero table. But the real outcome was the /learn session afterward: documented four new rules — ais- prefix on repos, mandatory demo GIF for animated apps, run dead dep audits yourself instead of delegating to subagents, and always skim the ai-studio-export-rescue skill even if the app already boots. The project that taught the pipeline how to run.