Desert Oasis

The prompt

Build "Desert Oasis", a playable miniature-diorama world: a block of desert with dunes, a dry spring and a cross-section of sand layers, where the player digs channels and brings water to life, as ONE self-contained HTML file.

It must be **beautiful above everything**, like a premium animated film: a warm golden-hour desert with soft sculpted dunes, crisp shadows, sparkling water and lush green where it flows. Great animation on everything that moves: nothing pops, snaps or teleports; things grow, ease, overshoot a little and settle. Calm and satisfying to play, spectacular to watch.

## Tech

* three.js r170 with WebGPURenderer (automatic WebGL2 fallback). Load it with an importmap from jsDelivr: map "three", "three/webgpu" and "three/tsl" to `three@0.170.0/build/three.webgpu.min.js`, and "three/addons/" to `three@0.170.0/examples/jsm/`.
* Use TSL node materials, OrbitControls from the addons, and a subtle BloomNode pass (strength ~0.4, threshold ~1.5) so only emissive things glow (the low sun, the campfire, stars at night, the heat shimmer).
* No external assets. Every texture is drawn on a canvas or generated as pixel data at startup. Every sound is synthesized with WebAudio. The only network requests are three.js from jsDelivr and the Fredoka font from Google Fonts; if the font fails to load, fall back to a system rounded sans-serif without breaking anything.
* Start the HTML with `<!doctype html>` and `<meta charset="utf-8">`.
* It must run inside a sandboxed iframe (`sandbox="allow-scripts allow-pointer-lock"`, no `allow-same-origin`). There, `localStorage` and cookies throw a SecurityError: wrap every storage access in `try/catch` and keep values in memory instead. Do not use `alert`, pop-ups or top-level navigation.
* Neutral tone mapping, soft 2048 shadow map (1024 on phones).
* Known three r170 pitfalls, avoid them:
   * the scene background is drawn after transparent objects, so draw the sky/backdrop as a mesh (or give transparent sky objects `depthWrite: true`), or they disappear;
   * never `.clone()` a CanvasTexture (the clone uploads black); create separate textures or use DataTexture;
   * never let a helper overwrite a shared temp vector that its caller is still using.
* The simulation runs on a fixed 60 Hz timestep and is frame-rate independent. At low frame rates, drop simulation time instead of exploding.
* A quality scaler lowers the pixel ratio, then particle counts, when frames get slow.
* Respect prefers-reduced-motion: softer shake, slower camera moves.

## Priorities

Build in this order and finish each tier properly before the next. A polished tier 1 beats a broken everything.

1. **Must be excellent:** the sand heightfield you dig and pile with the finger (sliding at its angle of repose), water flowing from the spring through channels, soaking in and filling basins, palms and grass growing where it is wet, the demo mode.
2. **Must work:** camels and the caravan, fennec foxes, birds at the water, the oasis meter and milestones, day and night, sound, the card UI, camera.
3. **Polish:** the sandstorm, heat shimmer, the buried treasure, rock arches and the cross-section aquifer.

Never ship a feature half-working: if a tier-3 feature can't be done well, leave it out cleanly.

## The diorama

* A 10×10 block of desert on a dark wooden base, with glass edges and **cut sides showing layered sand** (tan, rust and cream strata with pebbles) and a deep **aquifer** layer that turns blue where water soaks down. A soft warm studio backdrop.
* **Terrain:** a high-resolution **sand heightfield** (about 160² on desktop) with sculpted **dunes** (wind ripples in the shading), a few **rock arches** and boulders, and a dry **spring** under a rock at one side.
* **Sand physics:** digging and piling move sand; slopes steeper than the **angle of repose** slide down in little avalanches (with sand trickle particles), so channels have natural slumped sides.

## Water

* A shallow-water simulation on the same grid: water flows downhill, follows **dug channels**, spreads into basins and pools, and **soaks into the sand** (darkening it and feeding the aquifer, visible on the cut sides). Evaporation is slow by day.
* Water looks great: transparent turquoise in pools, white ripples over shallow sand, reflections of the sky, sparkles in the sun.

## Life

* **Plants:** grass, reeds and **palms** grow where the sand stays wet (palms rise with a growth animation and their fronds sway); flowers bloom near pools.
* **Animals:** camels that walk over to drink (kneel down, drink, stand up), a **caravan** with a few riders arriving when the oasis is big enough, **fennec foxes** with big ears popping out of burrows, a lizard on a rock, birds landing to drink.
* **Tents:** the Tent tool sets up a small camp near water with a campfire.

## Tools (card, keys 1–5)

* **Dig:** drag to carve sand (channels, basins).
* **Pile:** drag to build up sand (dams, walls).
* **Water:** tap the spring to open it (water gushes out); tap elsewhere to pour a little.
* **Plant:** tap wet sand to plant a palm, grass or flowers.
* **Tent:** tap near water to set up a camp.

## Events

* **Sandstorm:** a wall of sand sweeps across from one side, blowing grains (particles), lowering visibility, **reshaping the dunes** and burying channels in its path; animals hide, palms bend. Afterwards you clear and rebuild.
* **Day / night:** golden hour by default; noon (bright, heat shimmer above the sand), sunset, night (deep blue, stars, the Milky Way, the campfire glowing, foxes come out).

## Goal and milestones

* **Oasis** meter: water area, green cover and visitors (camels, caravan, birds).
* At 100%: the caravan arrives with music, lanterns are lit around the pools, and the camels kneel together by the water.

Milestones (toasts, once each): "First channel", "The spring flows", "First palm", "Camel at the water", "Survived a sandstorm", "Caravan arrives", "Oasis".

## Easter egg

Digging deep at one secret spot reveals, in the cross-section, a buried **golden pharaoh's mask** that gleams; it rises to the surface with a shimmer. Toast: "You found the lost mask." Never hint at it in the UI (except the faint glint in the cut-side strata after 3 minutes).

## Interface

A light, playful UI that never covers the world. On phones the card becomes a compact bottom sheet.

* Top left:
   * small caps "POKEABLE · WORLD";
   * a big chunky rounded heading on two lines, "Desert" / "Oasis", in Fredoka from Google Fonts, dark ink by day and light at night, with a tiny palm tree growing on the "O";
   * caption "Dig a river. Grow an oasis.".
* Top right: a live status dot with "WEBGPU · LIVE" (or "WEBGL2 · LIVE"), a speaker pill button (ON / MUTED), and "PAUSED" when paused.
* Right card "Oasis": about 240 px wide, off-white, 20 px corners, soft shadow, no hairlines, turquoise (#21a8a0) accent, collapsible to a small pill. Contents:
   * a big animated "Oasis" % with a bar, and small counters for water, palms and visitors
   * tool picker: Dig, Pile, Water, Plant, Tent, each with a drawn icon and its key number
   * event buttons: Sandstorm, Open spring
   * sliders with monospace value chips: Time of day, Heat, Wind, Sound (master volume)
   * switches: Animals (on), Heat shimmer (on), Slow motion (¼ speed), Cinema
   * buttons Reset and New (random seed), a dark full-width Pause/Resume pill, and the world's number ("No. 0001").
* Bottom left: a one-line hint that changes with the tool:
   * Dig: "Drag to dig a channel."
   * Pile: "Drag to pile up sand."
   * Water: "Tap the spring to open it."
   * Plant: "Tap wet sand to plant a palm."
   * Tent: "Tap near water to make camp."
* Bottom right: a collapsible "How it works" panel, 5–6 plain lines on the sand heightfield and avalanches, shallow water flow and soaking, plants growing where it is wet, the sandstorm, the camera controls, and synthesized sound.
* Toasts at the top centre for milestones and events.
* Keys: 1–5 tools, G sandstorm, O open spring, Space pause, R reset, N new, M mute, S slow motion, C cinema, 0 reset view, Esc stop follow / exit cinema.

## Camera

* OrbitControls with damping and zoom to cursor, within sensible limits.
* Double-click a camel or a fox to follow it; Esc or 0 stops.
* Camera bar (floating pill, bottom right of the scene area): zoom −, a zoom % readout, zoom +, rotate left, rotate right, reset; button moves tween smoothly.
* The default framing fits the whole world into the free area, accounting for the card and title.
* **Cinema (`C`):** hides all UI and slowly orbits the camera.

## Sound

* WebAudio only. Create the AudioContext on the first gesture and never before.
* Master gain feeds a compressor, so rapid actions never clip. Limit voices (about 16) and wrap every call in try/catch so a failing audio call never breaks the world.
* Loops: warm desert wind (with whistles in the arches), gentle water flowing (louder with more water), birds near the pools, crickets and a crackling campfire at night.
* One-shots: a sandy scrape for digging, a soft sand-slide hiss for avalanches, a gush when the spring opens, a camel grunt, a fox yip, a whoosh for the sandstorm, a shimmering chime for the mask, chimes for milestones.

## Demo mode (required)

If the URL has `?demo=1` (or `#demo`), auto-play a deterministic 4.0 s loop:

* Rules:
   * Hide all UI and the cursor; never create an AudioContext.
   * Fixed quality, default seed, golden hour, the spring already flowing into one pool, default camera, no OrbitControls.
   * Drive the simulation from real elapsed time with the fixed timestep, and restart from the identical state every 4.0 s.
   * Start moving within 1 s of load, and stay readable at 15 fps.
* Timeline:
   * 0.0–1.5 s: an invisible finger carves a curving channel from the pool down the slope; sand slumps at its sides.
   * 1.5–2.8 s: water rushes along the channel, sparkling, and fills a basin.
   * 2.8–3.6 s: grass and a palm pop up along the wet banks.
   * 3.6–4.0 s: a camel walks to the water.

## Before you finish, check

* Digging and piling feel good; slopes slide naturally; water follows channels, fills basins and soaks in, and the cut sides show it.
* Plants grow only where wet and die back if it dries.
* Animals, the caravan, the tent camp; day and night.
* The sandstorm reshapes the dunes; the buried mask.
* Every tool, slider, switch, button and key; follow mode; Cinema; pause and resume; resizing to phone width.
* Sound behaviour.
* It works inside `<iframe sandbox="allow-scripts allow-pointer-lock">` with no errors (storage blocked).
* `?demo=1` matches the timeline.
* No console or WebGPU validation errors, and it stays smooth on a mid-range laptop.

Put carving a channel and watching water rush through the sand and turn it green first. It should feel like magic under your finger.