Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Tuesday, July 28, 2026atmostudio-weather-shader

Five shader layers and an AI that paints weather

ReactShaders

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.

← Previous

When the AI Studio zip actually has good code inside

Next →

117 subagents, 5 waves, zero hand-holding


Andrew Voirol

Builder, hacker, shipper. Currently leaving localhost.

Navigate

WorkBuilder’s LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

© 2026 Andrew Voirol·Back to top ↑
✦Just one prompt away from figuring it all out.