Cloud 9: building a sky the agent couldn't see

Exported an I/O countdown from AI Studio and the first thing that hit me was the scroll. Not the code quality (standard AI Studio scaffold — importmap block, CDN Tailwind, wrong API key wiring). The scroll. You start at 9 and descend through parallax cloud layers toward a reveal. The bones were there, but the flesh was clip art. Generic cloud PNGs. No volumetric feel. No light diffusion. No sense that you're actually in the sky.

The vision was specific: you're on Cloud 9 — as in, on cloud 9 with excitement for I/O — and as you scroll, the numeral 9 dissipates into the cloud layers while the camera tracks down through them. AI-generated cloud textures with luminance-based alpha so white areas become transparent. Three layers — back, mid, front — each drifting at different speeds via UV displacement in a custom GLSL shader. The agent generated the cloud PNGs directly through the image model after the regular image generation endpoint kept throwing 400 errors on oversized base64 payloads. Four AI cloud assets, a Shoreline Amphitheatre background, and a procedural starfield later, the sky existed. React Three Fiber, drei's useTexture, custom shaderMaterial for each cloud plane, smoothstep edge feathering to kill the hard borders. 492 lines in page.tsx for the first commit. Getting the raw materials was the easy part — making them feel like atmosphere was going to be the war.

Implemented a complex scroll-driven 3D animation using React Three Fiber for the Cloud 9 countdown project. Tying the camera and scene states directly to the scroll progress provided a seamless transition through the experience.

Resolved tricky layout bugs where the canvas dimensions and image textures were incorrectly scaling across different device viewports, which previously caused the 3D scene to appear distorted.

I kept describing a cinematic dive through clouds and the agent kept building a vertical slideshow with fog. The disconnect was frustrating because I could see it — the 9 dissipates into cloud layers as the camera tracks down, the background image starts to shine through, the light diffusion through the volumetric clouds picks up the colors from the sky. Golden hour warmth leaking through particle haze. But what rendered was a countdown number pasted on top of fading layers. Not in the clouds. On the clouds.

Two sessions crashed out from network errors, each time losing context about the artistic direction. By session four, I/O had already happened, so the framing shifted — this wasn't a hype countdown anymore, it was a retrospective celebration. "Register Now" got cut. "I was on Cloud Nine" became the tagline. That reframe actually made it better: there's something more honest about building something for an event that already happened. You're not selling tickets. You're preserving a feeling.

The technical gap persisted though. The agent understood the code — it was generating valid Three.js, correct shader uniforms, working scroll interpolation. What it couldn't bridge was the difference between layers changing opacity and a camera moving through a space. That's a perception problem, not a code problem. And it's the one that would take three more sessions to even name properly.

Invented a new way to give design feedback to an AI: walk through every 10% of the scroll, screenshot it, describe what's broken. The problem was communication. I could see the issues — the numbers floating on top of everything, the amber haze with no motivated light source, the clouds that didn't part to reveal anything — but saying "it doesn't feel right" gets you generic fixes. So I asked the agent to scroll to each position, take a screenshot, and wait for my response.

At 50% scroll, the "5" was just sitting on top of everything instead of integrated into the scene. At 40%, the issue crystallized: "we're scrolling vertically, not what I'd describe as forward then taking a dive down through the clouds as the clouds then start to part." I reached for a metaphor — "imagine a dive bomber cruising through clouds, as they approach the target the dive happens, the pilot pushes forward on the yoke, and they begin to nose-dive towards the target." That landed. The agent drafted a visual audit document tracking issues per scroll segment and an implementation plan: foreground cloud wisps layered between the camera and numerals for depth occlusion, scroll-driven god rays with asymmetric falloff, and a cloud-parting sequence where the layers spread apart to reveal Shoreline below. Sixteen user turns in a single session — the most interactive conversation across the whole project.

The page.tsx grew to 1,058 lines — two custom GLSL shaders, a procedural starfield, foreground cloud wisps, atmosphere gradients, and a Shoreline reveal — and the starfield was still pixelated at certain scroll positions. Chose procedural starfield over PNG (Option A — guaranteed crisp at any viewport size). The cloud breathing drift turned out nice — each PNG layer drifts laterally at a different speed via UV displacement, so if you linger at any numeral, the clouds slowly shift past each other. "Kind of cool" was the exact reaction, and that's honest: it's one of those effects you only notice if you stop scrolling.

The shader stack by the end: CloudMaterial handles luminance-based alpha with UV drift and scroll-driven warm tint. AtmosphereMaterial transitions from #0a0612 night through deep purple to warm gold across three scroll phases — cruise, dive, reveal. Bloom at luminance threshold 0.15 with 1.2 intensity for the god-ray glow. Camera controller interpolates position, rotation, and FOV based on scroll phase, with the tilt steepening after 45% to sell the nose-dive. The Shoreline reveal drops a camera-tracked Y-positioned image that fades through cloud parting.

Three commits. Ten days. Seven conversations that kept crashing from image-dimension 400 errors. Pushed the last commit at 11:48 PM. The gap between the vision in my head and what renders in the browser never fully closed — but the gap got smaller with every scroll audit session, and the shader architecture for chasing it is all there in those 1,058 lines.