Rainbow Jelly

The prompt

Build **"Rainbow Jelly"**: a real-time, interactive 3D layered jelly cube that people can grab and wobble, then **slice with a knife**, **rain nails onto**, and **melt with a blowtorch**, rendered with native **WebGPU** and **WGSL**.

## Deliverable

- One self-contained `.html` file with all JavaScript, WGSL and CSS inline.
- **No external requests of any kind**: no libraries, CDNs, web fonts, images or textures from the network. Generate everything procedurally in code. Use system font stacks.
- It must run inside a sandboxed iframe (`sandbox="allow-scripts allow-pointer-lock"`). Do not use `localStorage`, cookies, `alert`, pop-ups or top-level navigation, and wrap any storage access in `try/catch`.
- This must be a live simulation, not a video, a pre-baked animation, a static render or a 2D fake.

## The specimen

A generous, softly bevelled jelly cube made of **six horizontal layers**, like a layered party jello photographed in a studio: glossy, translucent, almost edible.

- **Layers:** six stacked translucent colours (for the default preset: cherry red, orange, lemon, lime, blue raspberry, grape), each slightly different in thickness, with soft, slightly wavy boundaries between them. Colour deepens where the jelly is thicker.
- **Inside:** a few tiny suspended air bubbles and a faint internal grain, so the depth reads.
- **Surface:** glossy, with softly rounded edges and corners, sitting on a plate-free studio floor.
- Proportions that read clearly as a jelly cube from the default view, large and centred.

## Soft-body physics

- A volumetric soft body: a tetrahedral mesh (about 2,000 to 5,000 tets) solved with **XPBD**, using deviatoric/elastic constraints plus volume preservation. Render a smooth, high-resolution surface skinned to the tets (barycentric embedding). Do not render the tet mesh except in "Show mesh" mode.
- **Fixed simulation timestep** with bounded substeps, decoupled from frame rate. On a slow frame, drop simulation time rather than exploding.
- **Stability is not optional:** no inverted tets (detect and recover), no explosions, no permanent collapse, and no tunnelling through the floor. Volume stays within a few percent of rest under normal handling.
- Floor contact with gentle friction and a soft, damped bounce. Nothing may visibly sink below the floor.
- Damping that feels like jelly: after release it wobbles several times with decreasing amplitude and comes to rest within a few seconds. No instant snap-back and no endless buzzing.
- Every piece always returns to its own rest shape. Stretching is elastic, never plastic, except where the torch has melted it (below).

## The tools

A tool picker with four tools: **Hand**, **Knife**, **Nails**, **Torch**. One tool is active at a time; the cursor shows which. Priorities, in order: the knife must be the most convincing, then the nails, then the torch.

### Hand (default)
- **Grab and stretch:** press on any part of any piece to grab the surface point under the cursor. Drag to pull, lift, bend and gently twist it. The deformation must be local and follow the grabbed point, not move or scale the piece rigidly. Pull strength is capped so it stretches dramatically but never tears or explodes.
- **Poke:** a quick tap without dragging presses a dimple that rebounds with a jiggle spreading outward.
- **Flick:** releasing during a fast drag keeps that momentum.
- **Drop:** double-tap or double-click a piece to lift it and drop it from a small height.

### Knife
- Drag a straight line across the jelly to cut along the vertical plane under that line. A thin, clean blade follows the stroke.
- The cut is **real**: split the tet mesh along the plane (split or duplicate the crossing tets and vertices) so the jelly becomes **separate soft bodies** that wobble, slide and can be grabbed on their own. No fake overlays or masks.
- The **cut faces show the six layers** in cross-section, glossy and slightly wet-looking, with the bubbles visible inside.
- Pieces slide apart a little from the cut and settle. Cuts can be repeated on any piece, up to a cap of about **12 pieces**; beyond that, extra cuts are ignored gracefully.
- Very thin slivers must stay stable (clamp or merge anything too small to simulate).

### Nails
- Click or tap to drop a shiny steel nail from above at that point (hold to drop one every ~150 ms). Nails fall with gravity, slightly randomised in tilt.
- A nail that hits the jelly **dents the surface, pierces in** to a depth based on its speed, and the jelly jiggles from the impact. The nail then stays **embedded**: bind it to the deforming volume so it moves, tilts and wobbles with the jelly. It must never float, drift or stay fixed in space.
- Because the jelly is translucent, **embedded nails are visible inside it**, softened and tinted by the layers they pass through.
- Nails that miss land on the floor and roll a little. A knife cut through a nail's position sends the nail with whichever piece holds its head. Cap at about **30 nails**; the oldest fade out first.

### Torch
- Press and hold to aim a small blowtorch flame at the surface under the cursor, with a blue-cored flame, heat shimmer and a flickering warm light on the jelly.
- Heat builds up in a local **temperature field** on the volume (diffusing slowly, cooling over time).
- Hot regions **glow warm and turn more transparent**, become **softer** (lower stiffness), **sag** under gravity and slowly **drip**: a few droplets detach as small blobs that fall, splat and set on the floor.
- When the flame moves away, the area **cools and sets again** in its new sagged shape (the one plastic effect in the toy). Reset restores everything.
- Melting has limits: the jelly can never fully disappear, explode or dissolve into noise. Cap total drips.

## Camera and keys

- **Camera:** in the Hand tool, dragging the empty background orbits within limits; the wheel or a pinch zooms within limits; double-clicking the background resets the view. The default is a three-quarter view from slightly above, showing the top, two sides and the layers at once, with the cube large and centred.
- **Keyboard:** `1` Hand, `2` Knife, `3` Nails, `4` Torch, Space pauses or resumes, R resets.

Use pointer events with **pointer capture** so drags never drop, and support mouse, pen and touch (including a second finger on mobile without breaking the first drag).

## Rendering (WebGPU and WGSL)

Distinct, believable materials. Avoid both "clear glass" and "opaque plastic".

- **Jelly:** thickness-dependent absorption per layer (Beer-Lambert style) and screen-space refraction of the floor, the background and the nails inside, with a soft internal glow where light passes through thin edges.
- **Cut faces:** slightly rougher and wetter than the outer surface, so fresh cuts read at a glance.
- **Nails:** brushed steel with a sharp specular glint, darkened and tinted when seen through the jelly.
- **Torch:** additive flame, a warm point light that follows it, and a hot glow in the heated jelly.
- Fresnel reflections, crisp but controlled highlights, and tone mapping so highlights never blow out.
- A light, neutral studio: a seamless off-white cyclorama with a large soft key light, a subtle rim light and soft contact shadows under every piece and nail. Shadows stay attached as things deform and bounce.
- Compute shaders are welcome (for the solver, normals, skinning or the temperature field), but correctness and stability come first.
- Build pipelines once at start-up and update buffers in place. Preallocate for the caps above (pieces, nails, drips) so cutting and dropping never create shaders or pipelines during interaction. Handle resize and device-pixel ratio (cap at 2).
- If WebGPU is not available, show a clear, well-designed message explaining that the piece needs a WebGPU browser (for example recent Chrome, Edge or Safari) and why. Do not fall back to WebGL or fake it.

## Interface

A quiet editorial layout: generous whitespace, hairline borders, small caps labels, an italic serif display face, one restrained accent colour taken from the active preset, and no decorative gradients or glassmorphism. The jelly is the hero, and UI must never cover it on desktop or mobile (on narrow screens, controls collapse into a compact bottom sheet).

**Top left**
- Small caps: `POKEABLE · SPECIMEN 002`
- A large italic serif heading on two lines: *Rainbow* / *Jelly.*
- Caption lines: "Six layers." / "Set overnight." / "Bring your own tools."

**Top right:** a small live status dot with `WEBGPU · LIVE`. It shows `PAUSED` when paused and `WEBGPU UNAVAILABLE` on fallback.

**Right panel: "Tools"**
- The tool picker: **Hand**, **Knife**, **Nails**, **Torch**, each with a small drawn icon and its key number. The active tool is clearly marked.
- Three presets, each changing all six layer colours together:
  - **Rainbow:** the classic six colours above
  - **Pastel:** soft pastel versions of the same
  - **Citrus:** lemon, lime, orange, grapefruit, blood orange, yuzu
- **Firmness** slider with its live value (changes stiffness smoothly without resetting the shape).
- **Wobble damping** slider with its live value.
- Buttons: **Clear nails**, **Reset** (restores one whole cube, no nails, no heat).
- Toggles: **¼ speed** and **Show mesh** (tet wireframe over the surface).
- A **Pause / Resume** button.

**Bottom left**
- A one-line hint that changes with the tool:
  - Hand: "Grab anywhere and pull. Tap to poke. Double-tap to drop."
  - Knife: "Drag across the jelly to slice."
  - Nails: "Tap to drop a nail. Hold to rain."
  - Torch: "Hold to melt. Let go to set."
- Live readouts computed from the simulation: **pieces**, **nails in**, **peak temperature** (°C, illustrative), **volume** (% of rest, all pieces together) and **kinetic energy** (illustrative units, labelled as such). Values update smoothly, not every frame.

**Bottom right:** a collapsible **"How it works"** section, 4 to 6 plain-English lines explaining the tet mesh, XPBD, how cutting splits the mesh, how nails stay embedded, and the temperature field.

Respect `prefers-reduced-motion`: soften UI transitions and start the scene at rest with no automatic motion. The physics still responds fully to the user.

## Demo mode (required)

If the URL has `?demo=1`, auto-play a 4-second loop with no user input: the object drops in, wobbles, gets poked or sliced once, then settles.

Exactly:
- **Hide all UI** (text, panel, badges, hint, readouts, cursor). Only the jelly, tools, floor and background are visible.
- Keep the default three-quarter camera fixed, with the cube filling about 55 to 65% of a square frame.
- A deterministic loop that restarts every 4.0 s of real time from the identical state:
  - **0.0 to 0.7 s:** the cube drops in from above and lands with a soft bounce.
  - **0.7 to 1.5 s:** four nails rain down, pierce the top and stay embedded, visible inside; the cube jiggles from each hit.
  - **1.5 to 2.4 s:** a knife slices diagonally through one corner; the corner piece, showing its layers, slides off and wobbles.
  - **2.4 to 3.3 s:** a torch flame sweeps across one top edge, which glows, softens, sags and releases one drip.
  - **3.3 to 4.0 s:** everything wobbles down to rest.
- Use no randomness in demo mode. Drive the simulation from real elapsed time with the fixed timestep, so the loop lasts 4 s even at low frame rates.
- Start moving within 1 second of the page loading.

## Before you finish

Self-check against this list and fix anything that fails:
- Slice the cube many ways: straight through, corners, thin slivers, repeated cuts on pieces, cuts through embedded nails, and cuts on melted areas. Grab and throw each piece.
- Rain 30 nails, including onto moving pieces and the floor. Nails stay embedded and move with the jelly.
- Torch every face for a long time. It melts, drips and sets again, and never explodes or disappears.
- Try every tool, preset and slider at both extremes, plus Clear nails, Reset, pause and resume, ¼ speed, Show mesh, keys 1 to 4, and resizing to phone width.
- Every piece always settles, the mesh never inverts, nothing goes through the floor, and there are no console or WebGPU validation errors.
- `?demo=1` matches the timeline above, loops cleanly and shows no UI.

Put the quality of the jelly response and the knife cut first. It should be something people can't stop slicing.