Atmosphere: weather cards with real shaders
A shared-Canvas React Three Fiber weather gallery featuring volumetric cloud shaders and interactive CSS 3D space layers.
Started with a zip file from AI Studio. Ended with a shipped GitHub repo featuring custom GLSL volumetric clouds, a shared-Canvas React Three Fiber architecture, and a layer inspector that explodes weather cards into CSS 3D space.
The build moved through three sessions in a single day. First pass was pure recon — reading every file in the dark, chasing imports, discovering that the cloud shader wasn't just a Three.js primitive but a hand-written fragment shader with 2D simplex noise, turbulence uniforms, and coverage/density controls. Second pass got it booting: fixed a missing CSS file, migrated Tailwind off the CDN, and confirmed the whole app rendered with zero console errors and a clean production build. Third pass was the launch — stripping AI Studio scaffolding, capturing screenshots and a demo GIF via Chrome DevTools, writing a README, and pushing to GitHub.
The surprise was the architecture. Instead of mounting a separate Canvas per weather card (a pattern that would choke at 9 simultaneous WebGL contexts), the app uses a single global Canvas with drei's View.Port to route each card's 3D cloud scene into its own DOM container. Each card also composites a 2D HTML canvas for precipitation effects — rain streaks and snowflakes drawn with requestAnimationFrame — layered over the 3D clouds via CSS z-index. The Design Studio mode exposes every shader uniform as a slider, so you can tweak cloud coverage, density, fog color, and scroll speed in real time.
The Gemini API integration is real but optional — you can type "Cyberpunk Cities" or "Mars Colonies" into the header prompt and get 9 themed weather locations via structured output from Gemini 2.5 Flash. Without an API key, the app falls back to built-in sample data and works perfectly.
Timeline
Dropped into another AI Studio export expecting the usual hollow scaffold. Found a 442-line custom GLSL cloud shader instead. The app — a 3D weather dashboard called "Atmosphere" — renders 9 weather cards in a masonry grid, each with its own volumetric cloud layer running through a shared React Three Fiber Canvas via View.Port. Not separate Canvases per card (which would tank performance) — one global Canvas with drei's View component routing each card's 3D scene into its own DOM container. The cloud shader uses 2D simplex noise with turbulence, scrolling UV offsets, and coverage/density/sharpness uniforms. There's a full Design Studio mode with real-time parameter editing, 2D canvas precipitation effects (rain, snow), lunar phase calculations from actual synodic month math, and a Gemini API integration for AI-generated themed locations. 2,358 lines of TypeScript across 10 source files. Built it to boot, fixed the missing index.css and a Tailwind CDN reference, and the whole thing rendered first try. No console errors. Production build passed clean.
Ran the full project-launch-workflow on Atmosphere and it shipped in a single conversation — recon, cleanup, screenshots, README, git push. The app had already survived two prior passes: a recon session that mapped every file and confirmed the architecture was solid, then a boot-and-evaluate session that got it running and confirmed zero console errors. The launch pass stripped the AI Studio scaffolding (DNA_FIX_LOG.md, metadata.json, audit_report.md), renamed the package from ai-studio-applet, fixed the index.html title, created an SVG favicon, and wrote a README with tech stack table, architecture diagram, and quick start. Captured three screenshots (feed view, design studio, scrolled feed) plus a demo GIF via Chrome DevTools MCP. The honest assessment: this is one of the strongest AI Studio exports in the gallery. A shared-Canvas R3F architecture, custom shaders, a layer inspector that explodes cards into CSS 3D space, and an AI feature that's functional but gracefully optional. One commit, one push, done.