Coral Reef

The prompt

Build "Coral Reef", a playable miniature-diorama world: a glass aquarium block of tropical sea where the player brings a bleached coral reef back to life, as ONE self-contained HTML file.

It must be **beautiful above everything**, like a premium animated film: a jewel-like aquarium with crystal-clear water, dancing light, saturated coral colours and lively, characterful fish. 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 (fluorescent coral at night, glowing plankton, sun glints, the octopus' startled flash).
* 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 aquarium block (water volume, caustics, light shafts, surface), the fish school that follows the finger, coral regrowing colour, feeding, the demo mode.
2. **Must work:** the octopus, turtle, shark pass, clownfish and anemone, coral planting, day/night with fluorescence, the reef-alive meter and milestones, sound, the card UI, camera.
3. **Polish:** storm and murky water, the shipwreck and treasure, crabs and seahorse, bubbles tool, glowing plankton trails.

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

## The diorama

* A 10×7×10 glass aquarium block on a dark wooden stand, with thin white glass edges, soft studio backdrop (deep teal gradient), soft contact shadow.
* **Water:** the whole block is water. The surface is a live wave heightfield (ripples from the finger and from feeding), seen from above and from below (total internal reflection: a silvery mirror from underneath). Volumetric look: blue-green depth fog, **animated caustics** on the sand and on every creature, and **god rays** from the surface that sway.
* **Sea floor:** white sand with ripples, rocks, a sloping reef shelf, seagrass meadow that sways, a sunken shipwreck half-buried at the back.
* **Coral:** procedurally generated branching coral (L-system or recursive cones), table coral, fan coral (sheets that sway), brain coral (sphere with a groove pattern), soft coral that pulses, anemones with swaying tentacles. Each coral has a **health** value: **bleached** corals are white-grey and still; healthy corals are saturated (orange, pink, purple, yellow, teal) and gently move. Health changes animate slowly, colour flowing from the base to the tips.

## Life

* **Fish school (boids):** 150–300 small fish (instanced) with separation, alignment, cohesion and obstacle avoidance (coral, glass, floor). **They follow the pointer** gently when it moves slowly through the water, **scatter** from fast swipes and from the shark, and form a tight **bait ball** when the shark passes. Iridescent silver-blue with a tail wiggle.
* **Reef fish:** a few species with personalities (yellow tangs, striped damselfish, a parrotfish that nibbles coral and leaves tiny sand puffs), each with its own home coral.
* **Clownfish pair** living in an anemone: they dart out to the finger and back, nuzzle into the tentacles.
* **Octopus:** crawls over rocks with curling arms, **changes colour and texture to match what it sits on** (sand, coral, rock), flashes white when poked and **squirts a cloud of ink** then jets away.
* **Sea turtle:** glides through slowly on a loop, sometimes rests on the sand.
* **Reef shark:** passes every ~45 s (or with the Shark button), unhurried; the school balls up and small fish hide in coral.
* **Crabs** scuttle on the sand; a **seahorse** hides in the seagrass (tail curled around a blade).

## Tools (card, keys 1–5)

* **Hand:** move slowly through the water and the school follows; swipe fast to scatter; tap the surface for a ripple; tap a creature to poke it.
* **Feed:** tap to sprinkle food flakes at the surface; they drift down with wobble; fish dart to them (a feeding frenzy with little bites); fed fish make the corals near them healthier.
* **Coral:** tap the reef to plant a new coral fragment (cycle type with repeated taps); it grows over ~10 s with a growth animation.
* **Clean:** brush over bleached coral to remove algae and kick-start recovery (sparkle particles).
* **Bubbles:** place an air stone; a column of bubbles rises and wobbles to the surface (the turtle likes to swim through it).

## Simulation

* Coral health rises with nearby fish activity, feeding and cleaning, and falls slowly in a storm or if the water is murky. Recovery spreads to neighbouring corals.
* **Day / night slider:** at night the light dims to deep blue, corals **fluoresce** (green, pink, orange emissive), plankton glows when disturbed (the finger leaves a sparkling trail), the octopus hunts, the fish sleep in the coral.
* **Storm slider:** surface waves grow, light flickers, sand gets stirred up (murky water) and settles again over time.

## Goal and milestones

* **Reef alive** meter (0–100%): average coral health plus how many species are present. The reef starts **bleached and grey** with few fish; it ends vivid, crowded and moving.
* At 100%: a celebration: every coral blooms bright, a manta ray glides overhead, and the treasure chest in the shipwreck creaks open with a golden glow.

Milestones (toasts, once each): "First feeding", "School follows you", "First coral bloom", "Octopus ink!", "Shark pass", "Night glow", "Turtle visit", "Reef alive".

## Easter egg

When the reef reaches 100% at night, a **whale's eye** slowly slides past the back glass, blinks once, and is gone. Toast: "Something big was watching." Never hint at it in the UI.

## 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, "Coral" / "Reef", in Fredoka from Google Fonts, dark ink by day and light at night, with a tiny bubble rising from the "o";
   * caption "Bring the reef back to life.".
* Top right: a live status dot with "WEBGPU · LIVE" (or "WEBGL2 · LIVE"), a speaker pill button (ON / MUTED), and "PAUSED" when paused.
* Right card "Reef": about 240 px wide, off-white, 20 px corners, soft shadow, no hairlines, coral-pink (#f2667a) accent, collapsible to a small pill. Contents:
   * a big animated "Reef alive" % with a bar, and species icons (fish, clownfish, octopus, turtle, seahorse) that light up when seen
   * tool picker: Hand, Feed, Coral, Clean, Bubbles, each with a drawn icon and its key number
   * event buttons: Shark, Feeding time
   * sliders with monospace value chips: Time of day, Storm, School size, Sound (master volume)
   * switches: Fish (on), Caustics (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:
   * Hand: "Move slowly. The fish will follow you."
   * Feed: "Tap the surface to feed."
   * Coral: "Tap the reef to plant coral."
   * Clean: "Brush the white coral back to life."
   * Bubbles: "Place an air stone."
* Bottom right: a collapsible "How it works" panel, 5–6 plain lines on the boids school, coral health and recovery, caustics and light, day and night fluorescence, the camera controls, and synthesized sound.
* Toasts at the top centre for milestones and events.
* Keys: 1–5 tools, K shark, F feeding time, 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 the turtle, the octopus or the shark 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: soft underwater ambience (low filtered noise with slow swells), gentle bubbling, storm rumble with the Storm slider, a dreamy pad at night.
* One-shots: swishes for the school turning, nibble ticks when fish eat, plop for food flakes, a bubbly burst for ink, a deep slow whoosh for the shark, crackle of a coral blooming, a soft chime for each milestone, a deep whale call for the Easter egg.

## 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, the reef already half alive (some bleached corals, a healthy school), 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.2 s: the school sweeps through the frame in an S-curve following an invisible finger; light rays sway.
   * 1.2–2.2 s: food flakes drift down; the school bursts into a feeding frenzy.
   * 2.2–3.2 s: a bleached coral in front recovers: colour flows from the base to the tips; the octopus flashes colour on a rock.
   * 3.2–4.0 s: the turtle glides through; the school regroups.

## Before you finish, check

* The school follows the slow finger, scatters from fast swipes and balls up for the shark, never passing through coral, floor or glass.
* Feeding, planting, cleaning and coral recovery all work and spread.
* Octopus colour matching and ink; turtle, shark, clownfish, crabs, seahorse.
* Day/night fluorescence and plankton trails; storm and murky water settling.
* Reaching 100%: the celebration and the Easter egg at night.
* 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 the school that follows your finger and the reef regaining colour first. It should be the calmest, most alive thing on the screen.