Watermelon Jelly

The prompt

Build **"Watermelon Jelly"**: a real-time, interactive 3D watermelon-jelly slice that people can grab, stretch, poke and drop, 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 thick, rounded triangular watermelon wedge that looks like a luxury gummy photographed in a studio: juicy, soft, almost edible.

- **Flesh:** translucent ruby jelly with a subtle internal grain, a few tiny suspended air bubbles, and colour that deepens where it is thicker.
- **White layer:** a thin pale band between flesh and rind, softly translucent.
- **Rind:** glossy green skin with irregular, organic dark-green stripes (procedural, not tiled).
- **Seeds:** individually modelled glossy dark teardrop seeds (roughly 10 to 16) set into both cut faces in a natural arc. They are part of the flesh: bound to the deforming volume so they move, tilt and rotate with it. They must never float, drift or stay fixed in space.
- Softly bevelled edges and corners, a generous thickness, and proportions that read clearly as a watermelon slice from the default view.

## Soft-body physics

- A volumetric soft body: a tetrahedral mesh (about 1,500 to 4,000 tets) solved with **XPBD**, using deviatoric/elastic constraints plus volume preservation. Render the smooth, high-resolution surface skinned to the tets (barycentric embedding). Do not render the tet mesh except in "Show mesh" mode.
- Material zones: the rind is noticeably firmer than the flesh, and the white layer sits in between. The whole slice stays flexible.
- **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.
- The slice always returns to its rest shape. Stretching is elastic, never plastic.

## Interaction

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).

- **Grab and stretch:** press on any part of the slice (tip, corners, flesh, rind or seeds) 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 whole slice rigidly. Pull strength is capped so the slice stretches dramatically but never tears or explodes.
- **Poke:** a quick tap without dragging presses a dimple into the surface at that point, which rebounds with a jiggle that spreads outward.
- **Flick:** releasing during a fast drag keeps that momentum, so the slice can be tossed a little and bounces.
- **Drop:** double-tap or double-click the slice to lift it and drop it from a small height.
- **Camera:** dragging the empty background orbits the camera within limits, the wheel or a pinch zooms within limits, and double-clicking the background resets the view. The default is a three-quarter view from slightly above, showing a cut face, the seeds, the thickness and the rind at once, with the slice large and centred.
- **Keyboard:** Space pauses or resumes, N nudges, R resets.

## Rendering (WebGPU and WGSL)

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

- **Flesh:** thickness-dependent absorption (Beer-Lambert style) and screen-space refraction of the floor and background, with a soft internal glow where light passes through thin edges.
- **Rind:** glossy clearcoat over a waxy, slightly subsurface green.
- **White layer:** soft and milky, catching light at the edges.
- **Seeds:** hard and glossy, with a small specular glint.
- 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 a soft contact shadow or ambient occlusion under the slice. The shadow must stay attached to the slice as it deforms and bounces.
- Compute shaders are welcome (for the solver, normals or skinning), but correctness and stability come first.
- Build pipelines and buffers once at start-up and update them in place. Never create shaders, pipelines or geometry 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 slice 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 001`
- A large italic serif heading on two lines: *Watermelon* / *Jelly.*
- Caption lines: "Cut this morning." / "Still trembling." / "Handle gently."

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

**Right panel: "Handling"**
- Three presets, each changing flesh, white layer, rind and seed colours together:
  - **Ruby:** classic red flesh, deep green rind
  - **Honey:** yellow-fleshed watermelon, olive rind
  - **Sorbet:** pastel pink flesh, mint rind, pale seeds
- **Firmness** slider with its live value (changes stiffness smoothly without resetting the shape).
- **Wobble damping** slider with its live value.
- Buttons: **Nudge** (a random but safe impulse), **Drop** and **Reset**.
- Toggles: **¼ speed** and **Show mesh** (tet wireframe over the surface).
- A **Pause / Resume** button.

**Bottom left**
- A one-line hint: "Grab anywhere and pull. Tap to poke. Double-tap to drop."
- Live readouts computed from the simulation: **mass** (illustrative grams from rest volume × jelly density), **volume** (% of rest), **stretch** (maximum edge strain, %), and **kinetic energy** (illustrative units, labelled as such). Values update smoothly, not every frame.

**Bottom right:** a collapsible **"How it wobbles"** section, 4 to 6 plain-English lines explaining the tet mesh, XPBD, volume preservation, absorption and refraction.

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). Only the slice, floor and background are visible.
- Keep the default three-quarter camera fixed, with the slice 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.8 s:** the slice drops in from above and lands with a soft bounce.
  - **0.8 to 1.6 s:** it wobbles.
  - **1.6 to 2.6 s:** an invisible hand grabs the tip, stretches it up and outward by about 40%, and releases.
  - **2.6 to 4.0 s:** it 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:
- Grab from the tip, each corner, mid-flesh, the rind and a seed. Make strong stretches, fast flicks and repeated drops.
- Try every preset and slider at both extremes, plus Nudge, Drop, Reset, pause and resume, ¼ speed, Show mesh, and resizing to phone width.
- The slice always settles to its rest shape. Seeds stay embedded, the mesh never inverts or tears, it never 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 lighting first. It should be something people can't stop grabbing.