How STRATUS — Kestrel Ridge Atmospheric Observatory Renders a Living Sky Using WebGL Shader Techniques Without Image Assets

Immersive Skyscapes Unveiled Through Shader-Driven Web Experience

In this AI-generated exhibit, the fictional STRATUS observatory site demonstrates a groundbreaking web visualization that transforms scrolling into a dynamic atmospheric simulation. Its signature lies in a full-screen WebGL fragment shader that constructs a living, breathing sky—complete with clouds, celestial bodies, and lightning—entirely without relying on static images. Instead, it employs procedural noise, atmospheric scattering, and phase-driven animations to create an immersive, responsive environment that reacts seamlessly to user interaction and scrolling, offering an operational glimpse into the observatory’s logbook of weather phenomena.

The Visual and Interaction Framework

The core visual engine is a fragment shader layered over a single full-screen triangle, harnessing techniques like layered atmospheric scattering, starfield hashing, and domain-warped clouds built from procedural noise functions. The palette is meticulously phase-dependent, shifting hues from dawn amber to starry night, with CSS variables dynamically adjusting contrast and luminance based on the current weather phase. User interaction is captured via a custom scroll-to-time mapping, with a simulated glass lens tracking pointer movement, giving users the sensation of aiming an observatory instrument at the simulated sky. Lightning flashes, raindrops, and wind streaks are triggered by event-driven functions that schedule visual effects based on the current phase, integrating real-world weather log-like data points into the experience. The entire system is designed to feel alive, with animated telemetry, drifting noise, and phase-sensitive instrument readouts that reinforce the site’s operational narrative.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 17 of 175, “stratus”):
STRATUS — atmospheric observatory. Fiction: a mountaintop station that reads the sky. Aesthetic: glass instruments floating over a LIVING SKY. Fonts: outfit (display/UI light weights), newsreader italic (poetic captions). SIGNATURE: full-page WebGL fragment-shader sky (fbm clouds, sun disc, atmospheric scattering gradient) whose uniforms are SCRUBBED BY SCROLL through five states: dawn -> clear noon -> gathering storm (darker, faster clouds, distant lightning flickers) -> rain dusk -> starry night (clouds thin, stars fade in). Section content floats in frosted-glass instrument cards (backdrop-filter) with live readouts (pressure, humidity — drifting values). Palette derives from the sky at each stop; text switches light/dark for contrast. Wind-streak particles overlay during the storm. Unforgettable: one continuous day passing as you read.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/stratus/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

From Concept to Certification: The Three-Pass Engineering Journey

The development of STRATUS followed a rigorous three-stage pipeline. Initially, a foundational build set up the core WebGL shaders and basic scroll-driven uniform states, aiming for a convincing atmospheric rendering. The critique phase focused on refining visual fidelity, optimizing performance, and ensuring seamless phase transitions, guided by the site’s operational narrative and technical constraints. Finally, after thorough review and art-direction certification, the project was polished to balance aesthetic clarity with technical robustness, culminating in a site that stands as a testament to procedural graphics and interactive storytelling—built entirely by an AI, guided by the Fable manual.

The full build notes live in the room’s design guide.

Experience the Sky — Explore the Live Exhibit

Step into the simulated observatory environment by visiting the live site and see how an AI orchestrates a living sky without a single static asset. Dive deeper into the full suite of 175 imaginative sites at the exhibit hub and witness the power of procedural rendering and phase-driven interaction brought to life through cutting-edge shader techniques.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 6: Abyssal Station — a 3,800 m descent
• Room 15: Apothecarium — Bitters & Botanical Remedies, est. 1783
• Room 16: BRUTA — Raw Concrete Architecture Collective

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI

WebGPU Development Pixels: Shader Programming

View Latest Price

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.