The prompt
Build "Volcano Island", a playable miniature-diorama world, as ONE self-contained HTML file.
## 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 (MeshStandardNodeMaterial, MeshBasicNodeMaterial, SpriteNodeMaterial), OrbitControls from the addons, and a subtle BloomNode pass (strength ~0.4, threshold ~1.7) so only lava and fire glow.
* No external assets. Every texture is drawn on a canvas 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.
* 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 the value in memory instead. Do not use `alert`, pop-ups or top-level navigation.
* Neutral tone mapping, soft 2048 shadow map.
* 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 when frames get slow.
* Respect prefers-reduced-motion: softer shake, slower camera moves.
## The diorama
* A 10×10 glass box of water with an island and volcano in it, standing on a dark wooden base.
* Cut sides show earthy strata: sand on top, then orange-brown layers mottled with dark specks and embedded pebbles.
* Thin white glass edges around the box.
* Dark grey studio backdrop (gradient #5b5e66 to #1d1e23), a dark floor with a soft drop shadow, and a warm low sun with long shadows.
* Terrain is a heightfield grid: 124² on desktop, 88² on phones, 72² in demo mode.
* The island is a sand beach ring, then olive grass (#7f9a3c / #aaa94e), then a steep volcanic cone. Ridges and gullies run down the cone, with grey ash patches and rusty oxidised rock near the crater.
* The crater holds a glowing magma pool.
* One gully runs from the crater down to the sea, pointing away from the village.
* Terrain shader adds:
* small sand ripples, grass tufts and rock ledges through a procedural normal perturbation;
* noise variation and rock strata bands;
* soft animated caustics on the shallow seabed;
* seabed colour absorbed with depth.
* Water is a transparent surface:
* colour by depth: turquoise shallows (0.42, 0.86, 0.84) to deep blue (0.03, 0.26, 0.42);
* Fresnel and environment reflection;
* small animated ripple normals;
* an animated surf band of foam bands rolling in around every shoreline;
* foam where waves are churned.
* The water's side walls are a smooth vertical column, light cyan at the surface to deep navy at the bottom, mostly opaque, no patterns.
* A magma chamber glows on the front and right cut faces, with a dyke rising toward the volcano and bubbles that speed up with volcanic activity.
* Seeds: a default island (No. 1207) plus "New island" for random seeds. A brass-style plaque texture with the island number is optional.
## Simulation
* Sea: a wave-equation heightfield. A wake follows the cursor. Taps make splashes. Waves reflect off the glass walls and the shore, and are damped in shallow water. No jitter at rest.
* Lava: a second grid storing depth and heat.
* It flows to lower neighbours (8-way); mobility depends on temperature, and a yield depth makes it stop.
* It cools over time. Thin lava cools faster. Water and rain cool it much faster and turn that heat into steam.
* Below a heat threshold it freezes into black basalt and raises the terrain.
* In the sea it piles up faster (×1.45) until it breaks the surface as new land.
* Land grown: each former sea cell that becomes land counts toward a target of about 0.5 world units². At 100%, show a fireworks celebration and the village cheers.
* Eruption: hold the crater (or E, or the Erupt button). A pressure ring fills while the island trembles, smoke darkens, the chamber brightens and villagers look up. Release to erupt; size scales with how long you held. Each eruption has:
* a lava fountain of glowing particles;
* lava bombs arcing out: they splash and steam in the sea, and start fires on land;
* an ash plume lit orange from below;
* an orange screen flash and a camera shake;
* lava pouring out of the crater for a duration that scales with pressure.
* Steam: a big billow the moment lava first touches water, then continuous steam where it keeps meeting the sea. It drifts with the wind and thins out.
* Smoke and steam rendering: camera-facing sprite puffs from a canvas atlas of 4 soft cauliflower shapes. They rotate, grow as they rise (s0 to s1 with a time constant), fade in and out, and bend with the wind more the higher they get.
## Tools (card, keys 1–4)
* Hand:
* Moving over the sea draws a wake (no button needed).
* A quick tap splashes the water or pokes a villager, who hops.
* Press and hold on the crater to build pressure.
* Grab a pebble or coconut and throw it.
* Dig: carve channels in the terrain (not through hot lava). Lava follows them. Dig below sea level and the sea floods in.
* Rain: hold to drag a raincloud. It cools lava, and puts out a hut that is burning if it's still early enough. Rain makes small ripples on the sea.
* Plant: tap sand or rock to grow a palm, bush or fern (ferns grow on new basalt), with a grow animation. Tapping a burned hut rebuilds it once the ground has cooled.
## Props
* Pebbles: lie on a beach. Throw one fast and low over the water and it skips, with a ×N popup and a "best skip" kept for the session (also saved to localStorage when available, inside `try/catch`). ×7–8 is possible.
* Coconuts: float and drift with the waves and wind, and burn in lava.
* Boulders: cannot be lifted. Dropping one makes a big splash, a thud and a small shake.
* The Drop buttons spawn each prop above the cursor, or at a sensible spot if the cursor isn't over the water.
## Life
* Village: 4 huts and 6 villagers on the side opposite the gully.
* Villagers wander around their huts, look up when pressure builds, flee from hot lava and fire, and jump and cheer when new land forms.
* Huts catch fire from lava or bombs, burn for about 3 s, then become ruins. "Huts standing" shows the count with small hut icons.
* Palms: about 15 on the island, with curved banded trunks, 7–9 drooping fronds (canvas texture with alpha cutout) and coconuts. They cast shadows and burn in lava.
* Critters (switch): crabs scuttle sideways on the beach; 3 gulls circle the island.
* Baby dragon (easter egg): asleep in a cave on the front cut face, low on the left, below the water.
* Make it easy to spot: about 2× scale, a dark cave rim, a warm orange glow inside, "z"s floating up, and a little snore puff of smoke every few seconds.
* If it hasn't been found after about 40 s, show the toast "Something is snoring in the cliff below the water…".
* Tapping it shows "You found the baby dragon". It flies out, circles the volcano, lands near the crater, breathes a puff of fire, then flies back to sleep.
## Camera
* Use OrbitControls with damping, zoom to cursor, and pan on the ground plane.
* Limits: distance 0.14×–2.4× the fit distance; the camera can't go below a polar angle of 1.32 rad; the target stays inside the box.
* Left button: press and drag orbits the camera everywhere, with any tool, except when the press starts on:
* the crater (hold to erupt);
* a pebble or coconut (grab and throw);
* the sleeping dragon (tap to wake);
* anywhere while the Dig or Rain tool is active. A press that ends within 6 px and 450 ms counts as a tap (splash, poke or plant).
* Other inputs: right-drag orbits; Shift-drag and middle-drag pan; scroll zooms; two fingers pan and pinch-zoom.
* Keys: arrows pan, Shift+arrows orbit, + and − zoom, 0 resets the view.
* Camera bar (floating pill, bottom right of the scene area): zoom −, a zoom % readout, zoom +, rotate 45° left, rotate 45° right, reset. Button moves tween smoothly.
* The default framing fits the whole diorama into the free area, accounting for the card and title, at roughly a 30° view from the front right.
* Cinema mode hides all UI and slowly auto-rotates the camera.
## Interface
A light, playful UI over the dark scene that never covers the diorama. On phones the card becomes a compact bottom sheet.
* Top left:
* small caps "POKEABLE · WORLD";
* a big chunky rounded heading on two lines, "Volcano" / "Island", in Fredoka from Google Fonts, light-coloured, with a tiny animated lava drip falling from the "o";
* caption "Make land. Mind the village."
* Top right: a live status dot with "WEBGPU · LIVE" (or "WEBGL2 · LIVE"), a speaker pill button (ON / MUTED), and "PAUSED" when paused.
* Right card "Island": about 240 px wide, off-white, 20 px corners, soft shadow, no hairlines, lava-orange accent, collapsible to a small pill. Contents:
* a big animated "Land grown" % with a bar, and "Huts standing" with hut icons;
* tool picker: Hand, Dig, Rain, Plant, each with a drawn icon and its key number;
* an Erupt hold button with the pressure ring mirrored on it;
* Drop buttons: Pebble, Coconut, Boulder;
* sliders with monospace value chips: Time of day (full day/night cycle with stars at night and glowing eruptions), Wind (km/h with arrow, bends smoke and steam and pushes coconuts), Sound (master volume);
* switches: Critters (on), Cross-section glow (on), Slow motion (¼ speed), Cinema;
* buttons Reset island and New island, a dark full-width Pause/Resume pill, and "Best skip ×N" in small text.
* Bottom left: a one-line hint that changes with the tool:
* Hand: "Brush the sea. Skip a pebble. Hold the crater. Drag to turn the view."
* Dig: "Carve a channel. Lava will follow it."
* Rain: "Hold to rain. Cools the lava."
* Plant: "Tap rock or sand to grow something. Drag to turn the view."
* Bottom right: a collapsible "How it works" panel, 5–6 plain lines covering the wave heightfield, lava flow and cooling, how new land forms, steam, the camera controls, and synthesized sound.
* Toasts at the top centre for events: hut on fire, hut saved, new best skip, dragon found, island complete.
* Other keys: E (hold) erupt, P/O/B drop a pebble/coconut/boulder, Space pause, R reset, N new island, M mute, S slow motion, C cinema, X glow, K critters.
## 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 and wrap every call in try/catch so a failing audio call never breaks the world.
* Loops: sea, rumble plus sub-bass tied to pressure and eruptions, sizzle tied to steam, rain, lava flow.
* One-shots:
* water: swish when brushing the sea, splashes, plop;
* pebbles: skip ticks that rise in pitch, tick on pickup, tock off the glass;
* impacts: thuds, a big eruption boom;
* tools: dig crunch, plant pluck;
* village: hut fire whoosh and crackle, rebuild hammering plus chime, villager cheer and chirp;
* extras: celebration arpeggio, dragon call and puff, occasional gull calls.
## 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, daylight, default seed, 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–0.8 s: an invisible hand draws a curved wake across the sea in front of the island.
* 0.8–1.5 s: rumble; the diorama trembles, smoke darkens, the chamber brightens.
* 1.5 s: a medium eruption with fountain, bombs into the sea and an orange flash.
* 1.6–3.2 s: a lava tongue runs down the gully away from the village into the sea; a big steam burst; a small patch of new black land; villagers cheer.
* 3.2–4.0 s: steam thins, lava darkens, the sea calms.
## Before you finish, check
* Wakes, waves and reflections; skipping to ×7; coconuts and boulders.
* Small and big eruptions; lava crusting; new land; steering lava with a dug channel; rain cooling lava; a hut burning and being rebuilt.
* Reaching 100% land; New island and Reset island.
* Every slider, switch and key.
* Camera: left-drag orbit with each tool; crater hold still erupts; scroll zoom to cursor; pan; the camera bar; phone two-finger gestures.
* Night eruption; resizing to phone width.
* Finding the baby dragon.
* 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.
Put the beauty of the diorama and the moment lava meets the sea first.