AtmoStudio: weather cards from shader planes and plain English
A 3D weather card built from composited GLSL planes driven by a natural language Gemini configuration engine.
An AI Studio export that turned out to have real architecture underneath. AtmoStudio composites five GLSL shader planes into a 3D weather card — gradient sky, sun, FBM-noise clouds, four-system precipitation (mist, dust, rain, snow), and text overlays — each animated independently and separable via an exploded-view toggle. The surprise was the Gemini integration: structured output maps a natural-language weather description directly to 15 typed parameters, turning "cyberpunk acid rain in Tokyo" into specific slider values for every visual control. From recon to shipped repo in one afternoon, because the hard part — the shader architecture and the AI-as-configuration-engine pattern — was already done.
Timeline
Dropped into an AI Studio export expecting the usual hollow shell — found a real shader stack instead. AtmoStudio builds a 3D weather card from five composited GLSL planes: a vertical gradient sky, a movable sun/moon, FBM-noise procedural clouds with density/speed/opacity uniforms, a precipitation layer with four sub-systems (mist via FBM, twinkling dust particles, grid-based rain streaks, soft snowflakes), and 3D text overlays. Each plane is a separate ShaderMaterial on a planeGeometry, animated via useFrame in React Three Fiber. Toggle "Exploded View" and the layers separate in 3D space with lerp-animated z-offsets — you can orbit around and inspect exactly how the composition stacks. TypeScript compiled clean on the first try, Vite built a 1.5MB bundle (Three.js tax), and the only thing missing was an empty index.css stub. 11 source files, 916 lines of code, zero errors. Went from "another AIS zip" to "this is a keeper" in one read-through.
The Gemini integration isn't scaffolded — it's the whole point. You type a weather description, hit Generate, and a responseMimeType: "application/json" call to Gemini 2.5 Flash returns a typed WeatherConfig object: 15 fields covering gradient colors, cloud density and speed, rain/snow intensity, wind angle, sun position and scale, condition label, and temperature. Every slider and color picker in the sidebar snaps to the new values. The schema uses @google/genai's Type enum to constrain each field (numbers get ranges, colors get hex descriptions), and the result merges with DEFAULT_CONFIG so missing fields don't break anything. Rate-limit handling is real too — exponential backoff with 3 retries on 429s. The interesting pattern here is using Gemini's structured output as a configuration engine rather than a chat interface: natural language in, typed parameters out, no parsing step. "Cyberpunk acid rain in Tokyo" becomes a specific gradient, a specific cloud density, a specific rain intensity — all in one API call.