Polar Block
Built in one 22-minute session: penguin conga lines, cracks that become floes, an orca under the ice and the northern lights. Estimated cost from tokens.
The prompt
Build "Polar Block", a playable miniature-diorama world of the polar seas (yes: penguins and polar bears together, it's a toy), 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, MeshPhysicalNodeMaterial for ice, MeshBasicNodeMaterial, SpriteNodeMaterial), OrbitControls from the addons, and a subtle BloomNode pass (strength ~0.35, threshold ~1.6) so only the aurora, stars, glowing windows and jellyfish 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.
* 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.
* 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 look of the diorama (ice, snow, sea, cross-section, light), the penguins (waddle, belly-slide, conga line, diving), cracking the ice into floes that carry animals, snow that piles up, the northern lights, demo mode.
2. **Must work:** the polar bear and cub, seals, the orca pass, happiness hearts and the rescue mission, tools, day/night, sound, the card UI, camera.
3. **Polish:** arctic fox, fish schools, jellyfish, snowball fight, the clumsy penguin's variations, the narwhal Easter egg, milestones.
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 glass-sided block of frozen sea standing on a dark wooden base, the same scale and framing as a desk diorama.
* **Top:** an uneven ice shelf covered in soft snow: a raised snowy ridge with a gentle slope down to the water (the penguins' slide), a small glacier wall at the back with blue-white cliffs, a few pressure ridges and snow drifts, and open water leads between the ice.
* **Cut sides (cross-section):** above the waterline, layered ice in white and pale blue with trapped air bubbles; below, the sea in a smooth vertical column from bright cyan near the ice to deep navy at the bottom, mostly opaque, with soft light shafts coming down through thin ice. The seabed shows grey pebbles, a few starfish and kelp.
* Thin white glass edges around the block.
* Backdrop: a soft gradient (#cfdbe6 at the top to #8a9bb0 at the bottom by day; deep navy to black at night), a pale floor with a soft drop shadow, and a low cool sun with long blue shadows.
* Ice and snow are a heightfield grid: 124² on desktop, 88² on phones, 72² in demo mode, storing ice thickness, snow depth and a floe id per cell.
* A small igloo with a warm glowing doorway and a wisp of smoke sits on the ridge.
* Seeds: a default world (No. 0412) plus "New world" for random seeds.
### Materials
* **Snow:** soft, slightly sparkly (tiny glints that twinkle as the camera moves), bluish in shadow, with procedural wind ripples and footprints.
* **Ice:** translucent with subsurface blue, sharp specular, fine cracks and trapped bubbles; thin ice is clearer and darker, thick ice whiter.
* **Water:** dark teal, Fresnel and environment reflection, small animated ripple normals, a little slush and foam at floe edges; reflects the aurora at night.
* **Under the ice:** animated caustics and light shafts, slight blue fog with depth.
## Animals
All animals are stylised and cute: rounded shapes, big readable silhouettes, simple eyes, never realistic. Every move is animated with squash and stretch, anticipation and follow-through. Animals never get hurt.
* **Penguins (8–10):**
* Waddle with a side-to-side rock and flapping flippers; idle, preen, look around, chirp at each other.
* **Belly-slide** down slopes (flop forward, slide, little spray of snow).
* **Dive** into water with an arc and splash, swim fast underwater (visible in the cross-section, trailing bubbles), and **leap back out** onto the ice.
* **Conga line:** tap a penguin and it waddles off; the others fall in behind it in a line, follow its exact path, then all belly-slide down the slope and dive into the sea one after another (splash, splash, splash), then pop back out.
* **The clumsy one:** one penguin (slightly smaller, with a tuft on its head) sometimes trips and faceplants into the snow, gets up, shakes off and looks around embarrassed.
* **Huddle:** in a blizzard they pack into a tight group that slowly rotates.
* **Polar bear and cub:**
* The mother walks heavily, sniffs, waits by breathing holes, sleeps curled up.
* The cub follows, copies her, rolls in the snow and sometimes slides down a bank on its back.
* They avoid the penguins (no hunting in this world).
* **Seals (3):** nap on floes, roll over when tapped, slip into the water and pop up through holes.
* **Orca:** every 40–60 s (or with the "Orca" button) an orca glides past under the ice in the cross-section. Penguins in the water rocket out onto the ice in panic; seals pop up onto floes. It surfaces briefly in open water with a spout, then leaves.
* **Arctic fox (tier 3):** trots, stops, tilts its head to listen, then pounces head-first into the snow and pops out with its tail wagging.
* **Fish schools and jellyfish (tier 3):** small fish swirl away from the cursor under the ice; a few jellyfish drift in the deep and glow softly at night.
* Animals respond to the world: they walk only on ice thick enough, step around cracks, ride drifting floes (looking left and right), and shake snow off like dogs when it piles on them.
## Simulation
* **Sea:** a wave-equation heightfield in open water only (ice cells are rigid). The cursor makes a gentle wake in open water, splashes make rings, waves rock floes. No jitter at rest.
* **Ice cracking:**
* Dragging with the Crack tool draws a crack line across the ice: it propagates along the drag with branching hairline cracks and a crunch sound.
* When a crack line closes a region (connects edge to edge, or to open water), that region becomes a **floe**: a separate rigid piece (its own mesh, built from the grid cells it covers) that drops slightly, bobs, tilts with the weight of animals on it and drifts with wind and waves.
* Floes collide with each other and the walls, and can be pushed with the Hand tool to build bridges.
* Animals standing on a floe ride it.
* **Freeze / thaw** (slider): freezing grows new ice into open water in spreading crystal (dendritic) patterns and slowly welds floes back; thawing thins ice, opens leads and breaks large floes into smaller ones.
* **Snow:** snow depth per cell. Falling snow particles add depth where they land (also on igloo and animals, which shake it off). The Snow tool brushes or digs; footprints and slide tracks press it down. Wind slowly drifts snow.
* **Happiness:** each animal has a happiness value shown as a small floating heart when it changes. Fed, played with, given a breathing hole, rescued or a good slide: up. Stranded, cold in a blizzard without a huddle: slowly down. "Happy Arctic" (0–100%) is the average.
* **Rescue mission:** after ~60 s (and then occasionally) a floe breaks off with the bear cub on it and drifts away. The mother paces and calls at the edge. Push floes together into a bridge or freeze the gap, and the cub runs back: a reunion with a hug, hearts and a cheer. Counts as "Rescue!".
## Tools (card, keys 1–5)
* **Hand:**
* Moving over open water draws a wake (no button needed).
* Tap an animal: penguins hop and chirp (the first tap on a penguin starts the conga line), seals roll over, the cub tumbles.
* Drag a floe to push it.
* Grab and throw a fish or snowball.
* **Crack:** drag across the ice to crack it (see Simulation). Tap thin ice to make a small breathing hole.
* **Snow:** hold to make it snow over the cursor (piles up); drag on snow to draw grooves; three taps on the same spot build a snowman (base, middle, head with a carrot nose). Penguins come to look at it.
* **Fish:** tap water or ice to drop a fish; the nearest hungry animal comes for it (penguins race for it, the bear sniffs over, a seal pops up). Hearts.
* **Drill:** tap thick ice to drill a round fishing hole (spinning auger, ice chips). Something may pop up: a seal, a penguin, a jumping fish, or rarely the narwhal (see Easter egg).
## Weather, light and sky
* **Time of day** slider with a full cycle: morning, a low golden midday sun, blue evening, night.
* **Night:** stars, a moon, the igloo glows warm, and the **northern lights**: green and purple curtains rippling slowly across the sky (layered, animated noise ribbons with soft vertical rays), reflected in the open water and on the ice. Animals look up when they appear. Shooting stars now and then; tapping one makes a small sparkle.
* **Snowfall** slider: from clear to heavy snow; at maximum a **blizzard** with wind gusts, swirling snow, lower visibility, and the penguins huddle.
* **Wind** slider (km/h with an arrow): pushes floes, snowfall and drifting snow.
* A small icebreaker ship passes far behind the block on the backdrop now and then (tier 3).
## Props and extras
* **Snowballs:** grab snow with the Hand to make one and throw it. A penguin that gets hit falls over, gets up and throws one back; a few penguins join a short snowball fight.
* **Floes, fish, snowman, holes** as above.
* **Iceberg calving (button "Calve"):** a chunk breaks off the glacier wall, falls into the sea with a big splash and a wave that rocks every floe; it becomes a new iceberg that floats and drifts.
## Easter egg
* **Narwhal:** if you drill a hole at one secret spot (seeded, roughly over the deepest water) a narwhal pokes its spiral tusk up through the hole, looks around, sneezes a little spray and sinks back. Toast: "You found the narwhal." Never hint at it in the UI, except: if not found after ~90 s, one bubble trail rises under that spot in the cross-section now and then.
* Second, tiny secret: one iceberg has a small glowing lava rock frozen inside (a nod to Volcano Island). No toast.
## Camera
Same as the Volcano Island world:
* 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 block.
* Left button: press and drag orbits the camera everywhere, with any tool, except when the press starts on an animal, a floe, a fish or snowball, or anywhere while the Crack or Snow tool is active. A press that ends within 6 px and 450 ms counts as a tap.
* 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, so the cross-section and the penguin slide are both visible.
* **Follow:** double-click an animal to follow it with a smooth camera; Esc or 0 stops.
* Cinema mode hides all UI and slowly auto-rotates the camera.
## Interface
A light, playful UI 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, "Polar" / "Block", in Fredoka from Google Fonts, dark ink by day and light at night, with a tiny snowflake that drifts down from the "o";
* caption "Crack the ice. Keep everyone happy."
* Top right: a live status dot with "WEBGPU · LIVE" (or "WEBGL2 · LIVE"), a speaker pill button (ON / MUTED), and "PAUSED" when paused.
* Right card "Arctic": about 240 px wide, off-white, 20 px corners, soft shadow, no hairlines, ice-blue accent (#3aa7d8), collapsible to a small pill. Contents:
* a big animated "Happy Arctic" % with a bar, and a row of small animal icons that each show a heart when that animal is happy;
* tool picker: Hand, Crack, Snow, Fish, Drill, each with a drawn icon and its key number;
* buttons: Orca, Calve, Conga;
* sliders with monospace value chips: Time of day, Snowfall, Wind (km/h with arrow), Freeze ↔ Thaw, Sound (master volume);
* switches: Animals (on), Northern lights (auto / always), Slow motion (¼ speed), Cinema;
* buttons Reset world and New world, a dark full-width Pause/Resume pill.
* Bottom left: a one-line hint that changes with the tool:
* Hand: "Tap a penguin. Push a floe. Drag to turn the view."
* Crack: "Drag across the ice to crack it."
* Snow: "Hold to snow. Tap three times for a snowman."
* Fish: "Drop a fish. Someone's hungry."
* Drill: "Drill a hole. See who pops up."
* Bottom right: a collapsible "How it works" panel, 5–6 plain lines covering the ice and snow grid, how cracks become floes, freezing, the animals' simple brains, the camera controls, and synthesized sound.
* Toasts at the top centre for events: conga line, rescue needed, rescued, orca!, snowman built, narwhal found, milestones ("First slide", "Conga line", "Northern lights", "Snowball fight", "Rescue!", "Happy Arctic 100%").
* At 100% Happy Arctic: a celebration: all penguins do a little dance, the bears wave, the northern lights burst brighter (even by day, faintly) and confetti snowflakes fall.
* Other keys: Space pause, R reset, N new world, M mute, S slow motion, C cinema, O orca, K calve, L conga line, F follow the nearest animal, B blizzard toggle.
## 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 polar wind (rising with the Wind and Snowfall sliders), gentle water lapping, distant ice creaks; at night a faint shimmering pad when the aurora is up.
* One-shots:
* ice: deep crunch and crackle for cracks (pitch follows crack length), a groan when a floe breaks free, chip-chip for the drill, a thunderous crack and splash for calving;
* water: splashes sized by what fell in, bubbles, the orca's spout and low call;
* snow: soft crunches for footsteps and snowball hits, a whump when a snowman ball lands;
* penguins: squeaky chirps (each penguin a slightly different pitch), a happy trill on the slide, a "boop" when the clumsy one faceplants;
* bears: low huffs, the cub's small squeal; seals: grunts and a flop; fox: a little yip;
* extras: hearts make a soft sparkle, rescue reunion and 100% celebration play a short happy arpeggio, the narwhal makes a whistle and sneeze.
## 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, golden low sun (no night), 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: light snow falling; three penguins waddle in a line along the ridge, the cub rolls in the snow next to its mother.
* 0.8–2.0 s: the penguins belly-slide down the slope one after another and dive into the sea, splash, splash, splash; in the cross-section they shoot through the water trailing bubbles.
* 2.0–2.8 s: an invisible hand cracks a line across the ice with a visible branching crack; a small floe with a seal on it breaks free and bobs.
* 2.8–3.6 s: the penguins leap back out onto the ice; one (the clumsy one) faceplants in the snow and gets up.
* 3.6–4.0 s: everything settles; the floe drifts gently.
## Before you finish, check
* Penguins: waddle, slide, dive, swim, leap out, conga line from a tap, the clumsy faceplant, huddle in a blizzard.
* Bears, seals, orca pass (penguins escape), fox, fish schools, jellyfish at night.
* Cracking: lines, branching, closed regions become floes, floes bob, tilt under weight, carry animals, collide, can be pushed into bridges; freeze welds them; thaw breaks them.
* Snow piles up on everything; animals shake it off; snowman; snowball fight.
* The rescue mission start to finish; Happy Arctic reaching 100% and the celebration.
* Drill outcomes and the narwhal.
* Northern lights at night, reflections, shooting stars; blizzard; every slider, switch, button and key.
* Camera: left-drag orbit with each tool; taps on animals still work; follow mode; scroll zoom to cursor; pan; the camera bar; phone two-finger gestures; 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.
Put the penguins and the cracking ice first: it should be impossible to watch the conga line slide into the sea without smiling.