Guide — How NIMBUS Was Made

The concept

NIMBUS treats the browser like a bound folio of sky plates. Six full-viewport scenes, each a different weather system generated live, each paired with an original haiku and one line of real meteorology. The design problem was holding six unrelated palettes together, which the type system solves: Newsreader italic for every verse, Instrument Sans light for every label, loaded from fonts.bunny.net. Nothing here is a photograph or an AI-generated image; every pixel is drawn by code.

How the skies are drawn

Each plate owns one 2D <canvas> and a small particle system, written in plain JavaScript with no libraries:

I · Golden hourCloud sprites baked from rows of elliptical radial gradients, drifting on three parallax layers over a low sun.
II · SquallSlanted rain streaks plus a lightning scheduler: a random 3.5 to 8.5 second timer builds a jittered, branching polyline and fires a double-pulse flash envelope.
III · SnowfallWind-drifted flakes that deposit into a heightfield when they land; a diffusion pass each frame relaxes the snowpack so drifts form.
IV · FogNoise banks of soft blobs, edge-feathered with destination-in masks, sliding at different speeds over fading ridgelines.
V · AuroraCurtains drawn column by column: base height from layered sines, color from a pre-baked gradient strip, composited with lighter.
VI · MeteorsA 340-star twinkle field, a rotated milky-way dust band, and gradient-tailed streaks on a random spawn timer.

One shared requestAnimationFrame loop drives everything, but an IntersectionObserver gates it so only the visible plate animates. Scroll-snap turns each viewport into a page. As you scroll, the header and nav ink interpolate between per-plate palettes, so the chrome always sits legibly on the sky beneath it. Under prefers-reduced-motion, every scene renders once as a still painting, mid-lightning-strike included.

The three passes

Pass 1 · The cover held up on first render

The build ran a strict loop: serve locally, screenshot six viewports with Playwright, read every image, then fix what the pictures proved. Pass one caught canvases rendering blank before their first scroll (fixed with a primer frame at resize), fog banks showing rectangular seams (fixed by feathering the sprite edges), and haiku lines wrapping mid-phrase. Pass two and three were pure art direction: cloud shapes, snow contrast, spacing rhythm, mobile type.

Pass one screenshot of Plate IV, Fog, with visible rectangular seams in the fog banks — Pass 1 · Plate IV, seams still visible in the fog banks

Prompt it yourself

"Build a one-page atlas of six full-viewport generative skies on 2D canvas: dusk clouds, rain with timed lightning, accumulating snow, drifting fog, sine-ribbon aurora, meteor starfield. Pair each with an original haiku in Newsreader italic and one real meteorological note. Use scroll-snap, per-plate palette interpolation for the chrome, static painted fallbacks for reduced motion, and screenshot every plate at desktop and 390 px before calling anything done."

The last clause is the one that matters.