Atmosphere: weather dashboard from export to GitHub
A weather dashboard featuring custom GLSL cloud shaders, a 3D design studio mode, and real-time Gemini integration rescued from an AI Studio export.
An AI Studio export that turned out to have real engineering under the scaffold — custom GLSL cloud shaders, a working Gemini integration, drag-to-reorder weather cards, and a full design studio mode. The recon pass mapped 1,910 lines of TypeScript and found 4 quick fixes to boot it. The launch session hit one critical blocker: a React Three Fiber version mismatch that produced a blank screen with no useful error. One line fix in package.json, and it was portfolio-ready. Shipped to GitHub with screenshots and a demo GIF, then turned the debugging patterns into a reusable skill for the 59 remaining AI Studio exports.
Timeline
Dropped into a dark room — an AI Studio export zip — and mapped the entire codebase in one pass. Import maps, CDN Tailwind, process.env API keys: the usual AI Studio DNA. But under the scaffold was something real. Custom GLSL fragment shaders with simplex noise FBM generating procedural clouds across 9 weather cards, each rendering its own Three.js scene with independently configurable density, coverage, sharpness, and scroll speed. Canvas-based precipitation with physics-influenced particles (wind drift, gravity, sway). A full Design Studio mode with sliders for every cloud parameter and live 3D preview. A Gemini integration that takes a prompt like "Cyberpunk Cities" and generates 9 themed locations with structured JSON — not a hollow scaffold, an actual generateContent call with response schema. Fixed 4 things to boot it: removed the CDN import map, unified env var naming, created the missing tsconfig.json and .env.local. Dev server ran clean. Verdict: cook it.
The app booted, then rendered nothing — blank screen, no errors, just Cannot read properties of undefined (reading 'S') buried in the Three.js internals. Classic version mismatch: @react-three/[email protected] was installed but @react-three/[email protected] expected fiber v8. The initial cleanup had migrated the env vars and Tailwind, but left the peer dep conflict untouched because npm install --legacy-peer-deps masks it. One line in package.json — downgrading fiber from ^9 to ^8.18.0 — and the 3D cloud shaders, precipitation particles, drag-to-reorder cards, and Studio mode all came alive at once. Zero console errors. The Gemini AI prompt bar, the exploded-layer inspector, the dark/light toggle — everything worked. 1,910 lines of TypeScript across 11 source files, 553 of them in WeatherCard.tsx alone, and the only thing standing between "broken export" and "portfolio piece" was a caret in a version range.
After shipping Atmosphere to GitHub, stopped and asked: what did we just learn that pays off 59 more times? The R3F version mismatch, the Tailwind v4 CDN-to-npm migration, the hollow AI integration check, the screenshot crop offsets that took 6 retries — none of those should be re-diagnosed from scratch on the next project. Built a new ai-studio-export-rescue skill with the diagnostic cheatsheet for every failure pattern that showed up: peer dep conflicts, blank-screen React version mismatches, Three.js ecosystem coupling, dead scaffold files. Updated the project-launch-workflow to auto-detect DNA_FIX_LOG.md and reach for the rescue skill. Persisted the screenshot crop offsets so captures are one-shot correct. Three learnings that turn a 289-step debugging session into a pattern the next 59 projects skip entirely.