GeoGenesis: from AI Studio zip to spinning globe
Blind recon on an AI Studio globe export — 1,053 lines of canvas, a custom projection mutator, and Tailwind v4 ghosts in a v3 project.
Started with a zip file and ended with a globe that unfolds into a flat map mid-rotation.
GeoGenesis arrived as a raw AI Studio export — the kind where you don't know if you're getting a weekend demo or an actual application until you open every file. The recon came back positive: a single-file 1,053-line canvas render loop that hand-rolls D3 projection interpolation between a 3D orthographic sphere and a 2D equirectangular map. No Three.js. No WebGL. Just Canvas 2D drawing 300 parallax stars, procedural flight paths along great-circle arcs, CRT scanlines, and an off-screen color-picking canvas for country hit detection — all at 60fps.
The rescue was surgical. Four CSS bugs from Tailwind version confusion — the DNA fix pass correctly migrated from CDN to npm and pinned v3, but AI Studio had generated v4-only utilities (bg-radial-gradient, animate-in fade-in). The vignette and background gradient were silently missing. Forty minutes of targeted fixes and the atmosphere snapped into place: deep-space starfield, scan lines, corner-bracket HUD, the works.
The Gemini integration is the cherry — ask "show me the 3 highest peaks in the Andes" and the AI responds with grounded coordinates, the globe flies to them, and markers drop with descriptions. Google Maps and Google Search grounding tools feed real data. But the globe works beautifully without an API key. That's what made this a ship-it-today call — the visualization stands alone.
Timeline
Dropped into a codebase I'd never seen and mapped every wire in under an hour. Traced every import, every config file, every render path — and hit an export called GeoGenesis: a React+Vite app with D3-powered globe rendering, custom projection interpolation between orthographic and equirectangular, a 1,053-line canvas render loop, off-screen color-picking for country hit detection, and a Gemini chat integration with Google Maps grounding. The initial cleanup had already migrated Tailwind from CDN to npm, but left behind Tailwind v4 classes (bg-radial-gradient) in a v3 project — silent CSS failures nobody would notice unless they read every utility class. Found it, flagged it, confirmed both npm run dev and vite build succeed clean. Verdict after recon: this is a keeper — no surgery needed, just a polish pass.
Four CSS bugs hiding in plain sight — all from AI Studio mixing Tailwind versions. The initial cleanup migrated from CDN to npm correctly and pinned Tailwind 3.4.17, but the AI Studio canvas had generated Tailwind v4-only utilities: two bg-radial-gradient calls (main area background and vignette overlay weren't rendering), animate-in fade-in animation classes that don't exist in v3, and a hidden class on the marker tooltip div that would permanently override the JavaScript opacity toggles. Replaced the radial gradients with inline CSS style attributes, swapped the animations for standard Tailwind transitions, removed the stray hidden. The globe went from "nice, but something's off with the depth" to the full CRT-scanline-starfield-vignette atmosphere AI Studio originally intended. Forty minutes from "just get it running" to "it's stunning."
The entire globe lives in a single 1,053-line React component running a requestAnimationFrame canvas loop — no Three.js, no WebGL. GlobeViz.tsx hand-rolls a D3 geoProjection that interpolates between orthographic (sphere) and equirectangular (flat map) using a parameter t from 0 to 1. The projection factory computes per-vertex: x = (1-t) * cosPhi * sinLambda + t * lambda, y = (1-t) * sinPhi + t * phi — a linear blend between Cartesian sphere coordinates and raw lat/lon. Clip angle widens from 90° to 180° as the globe unfolds. Country hit-testing uses a hidden off-screen canvas where each country renders in a unique RGB color from its ISO 3166-1 numeric code — pixel read at mouse position maps directly to country. On top of that: 300 twinkling parallax stars, procedural flight/shipping/data connections animated along great-circle arcs via D3's geoInterpolate, click ripples expanding from coordinates, oscillator-based Web Audio SFX, CRT scanline overlay, corner-bracket HUD, and live telemetry readout. All Canvas 2D.