The Concept
The Singing Erg is a fictional desert expedition bureau, but the page is built as an instrument rather than a poster. The first screen is a dune sea with one governing control: move the sun and the whole system changes. Noon pushes ochre heat, dusk lengthens shadows and warms the rose tones, and night reveals the cold indigo star dome. The bureau copy supports that premise with route permits, water-master arithmetic, acoustic basin rules, star bearings, cache notes, and named guides.
The tone is intentionally severe. This is not resort desert; it is a working office for crossing empty country. The design uses a dark field, pale sand text, hard survey lines, and small operational labels so the interface feels measured, a little dangerous, and quiet enough to hear the dunes.
Visual Techniques
main.js creates the WebGL2 program for #duneCanvas. The fragment shader uses fbm(), ridged(), and repeated duneLayer() calls to stack dune crests. Each layer has wind ripples, fine grain lines, phase-based sand color, and longer dusk shadows.
The same shader’s sky() function draws the sun, crescent moon, heat haze, and stars. For the audit and fallback path, styles.css supplies .shader-fallback, .star-dome, and .heat-veil, all driven by the same CSS variables.
The draggable instrument is .sky-arc. Pointer and keyboard events call setPhase(), which updates u_phase, --cycle, --cycle-deep, --sun-x, --sun-y, --star-opacity, readouts, and the browser theme color.
The rest of the page is code-drawn: SVG route contours, the acoustic dune waveform, a CSS sonogram, the circular star bearing map, grain texture, scanlines, and ledger strips. The load moment is staggered with .load-in; section reveals use the IntersectionObserver path in main.js without hiding content from full-page captures.
The acoustic figure is also a playable field instrument. Pointer or keyboard input on .resonance-scrub calls setResonance() across the measured 74–92 Hz band. startResonance() creates a gesture-gated Web Audio oscillator and quiet dune-body harmonic, while the same value moves the seam, energizes the SVG waves, updates the readout, and announces the safe or stop threshold. It never autoplays.
The render loop is intentionally disciplined. It caps device pixel ratio, draws a static frame for reduced motion, pauses when document.hidden, and stops when the hero leaves the viewport. The shader stays alive where it matters and quiet everywhere else.
Palette & Type Tokens
#e0a860
#c96a5a
#1b2140
#fff4dc
#111018
The palette is scrubbed by the sun slider: noon ochre #e0a860, dusk rose #c96a5a, and night indigo #1b2140. The dominant surface stays near ink so the active sky color can do the work. Spectral provides the light italic display voice, Manrope handles long operational prose, and Space Mono marks coordinates, ration rows, and bearing labels.
Reproduce This
Prompt an AI agent like this:
Build a pure HTML/CSS/JS site for a desert expedition bureau called The Singing Erg. Use self-hosted Spectral, Manrope, and Space Mono. Make the signature a WebGL2 fragment shader dune field with ridged-noise dunes, wind ripples, heat shimmer, dusk shadows, and a night star dome. Add a keyboard-accessible draggable sun/moon arc that drives the shader phase and CSS palette from noon ochre to dusk rose to night indigo. Include route permits, water discipline, a gesture-gated 74–92 Hz dune resonator, star navigation, and a styled guide page. Verify phone, tablet, and desktop screenshots.
The non-negotiable instruction is that the control must matter. Color, light angle, shimmer, stars, shadows, readouts, and atmosphere all need to move together, or the desert stops feeling alive.