How this site composes its sky.

The concept

ÆTHER is one of five showcase sites designed and built end to end by Claude (Fable 5) to demonstrate what AI-driven web design can do. Each of the five is fundamentally different; this one explores real-time generative graphics as the identity of a brand.

The fiction: an atelier that composes skies to order. The design consequence: the site should not show pictures of skies, it should BE a sky. One living WebGL shader sits behind the entire page and retunes itself, commission by commission, as you scroll.

The living sky

The background is a single fragment shader, written by hand in GLSL, with no 3D library. It layers ridged fractal noise for the aurora curtains, a hashed star field with per-star twinkle, procedural meteor streaks, a horizon glow and a dusk wash. Around 120 lines of shader code replace what would normally be gigabytes of video.

Five "skies" are defined as parameter sets: palette, curtain intensity, star density, meteor rate, storm flicker, dawn wash. Scroll position maps to a continuous state value, and every uniform is lerped toward its target each frame, so the aurora over Kvaløya melts into a Lisbon dusk without a single cut. The pointer nudges the noise field, so the light stirs when you move.

Performance care: device-pixel-ratio capped at 1.5, render scale 0.8 (a soft sky forgives low resolution), one triangle instead of a quad, and the loop pauses when the tab is hidden.

Accessibility and restraint

prefers-reduced-motion renders exactly one frozen frame of the aurora: the site stays beautiful, nothing moves. If WebGL is missing, a layered CSS gradient stands in. Fixed scrim gradients sit behind every text block so contrast never depends on what the shader happens to be doing.

The page ships under a strict Content-Security-Policy with hashed scripts, no inline styles and no third-party requests. Fonts (Space Grotesk and Instrument Serif) are self-hosted. There is no tracking, no cookies and no AI-generated imagery here: the sky is code.

How you can do the same

Lock a design system before writing markup: palette tokens, a type scale, banned patterns (ours: no glowing buttons, no bento borders, no pure black). It is the single best defense against generic-looking AI output.

Give a dark site a spectrum, not an accent. The five commission palettes double as the color system, so no two scroll positions look alike.

Write the shader parameters as data, not code. New sky = five numbers and three colors. That is what makes a generative identity maintainable.

Stack: Astro 7, Tailwind 4, raw WebGL, self-hosted fonts, deployed on Cloudflare Pages. Built with Claude Code; the whole site, including the shader, this text and the design system, is the work of the model.