Inside Room 35 of 175: The Making of "The Singing Erg — Desert Expedition Bureau"

AIThis post was created with the assistance of artificial intelligence (AI).

The Singing Erg — Desert Expedition Bureau — Shader-Driven Environment — Room 35 of 175: “The Singing Erg — Desert Expedition Bureau” — visit the live site.

AUDIBLE

Listen free for 30 days with Audible

Thousands of audiobooks and originals — cancel anytime.

As an affiliate, we earn on qualifying purchases.

Discover the Virtual Desert: The Singing Erg

In the digital realm of this AI-crafted exhibition, The Singing Erg stands out as an immersive web experience that simulates a desert expedition bureau. Its defining feature is a dynamic, interactive dune landscape rendered through advanced WebGL2 shaders, where users can manipulate the environment by moving a virtual sun and moon along a circular arc. This single control transforms the entire scene—changing the time of day, lighting, shadows, and star visibility—making the desert come alive with movement and atmosphere.

Design Harmony: Palette, Typography, and Interactivity

The site employs a carefully curated color palette inspired by desert hues: warm ochres for noon, soft rose for dusk, and deep indigo for night, all adjustable via the sun/moon control. The typographic choice combines spectral light italics for atmospheric labels, Manrope for operational text, and Space Mono for navigation and coordinates—creating a disciplined visual hierarchy. The core signature lies in the shader-driven dune field, which layers ridged-noise dunes, wind ripples, and heat shimmer effects to simulate a living desert. These visual elements are complemented by SVG overlays and CSS textures that add detail and depth. The interface is designed to be precise and measured, with small labels and hard survey lines that evoke the seriousness of a working expedition bureau, rather than a leisure resort.

Live view of The Singing Erg — Desert Expedition Bureau — The room as it renders live — open it in your browser.

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 35 of 175, “erg”):
THE SINGING ERG — a desert expedition bureau for a sea of dunes. Aesthetic: vast emptiness, heat, star-cold nights. Palette scrubbed by a SUN SLIDER: noon ochre #e0a860 → dusk rose #c96a5a → night indigo #1b2140. Fonts: spectral (light italic display), manrope (body), space-mono (coordinates). SIGNATURE: GPU dune-field fragment shader — ridged-noise dunes with wind ripples slowly advecting, heat shimmer at noon, long shadows at dusk, star dome at night; the draggable sun/moon arc drives everything (light angle, palette, shimmer, stars). Sections: expedition routes, water discipline table, the “singing dunes” acoustics note, night navigation by star bearings. Unforgettable: dragging the sun across the sky.

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/erg/

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 Completion: The Three-Stage Pipeline

This project was developed through a three-pass process: initial implementation involved building the WebGL shader with layered noise functions to create the dunes and sky; the second critique focused on refining the visual fidelity and interaction responsiveness, ensuring the environment responded smoothly to user input; and finally, the art director certified the scene’s atmospheric authenticity and technical performance. Throughout, the AI guide provided feedback on design coherence, ensuring the environment’s mood matched the bureau’s serious tone and that the interface remained both functional and immersive.

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

Experience the Desert Expedition

Visit the live rendition of The Singing Erg to explore its shifting sands and celestial navigation in real time. Curious to see the full collection? Browse all 175 sites in this AI-curated exhibition hub and immerse yourself in the meticulous craftsmanship that brings these digital expeditions to life.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

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.