Rainbow Jelly Pumpkin

Build **"Rainbow Jelly Pumpkin"**: a real-time, interactive 3D **hollow jelly jack-o'-lantern** with a candle inside that people **poke**, **squish** and **carve a face into with their finger**, as ONE self-contained HTML file with **synthesised sound**.

It should feel like a glossy candy commercial shot in macro on Halloween night: a pumpkin moulded from translucent jelly, heavy and wobbly, its wall made of rainbow layers you only fully see when you cut into it, and every cut lets warm candle light spill out onto the table in the shape of the face.

## Tech

- three.js r170 with `WebGPURenderer` (automatic WebGL2 fallback). Load it with an importmap from jsDelivr: map "three", "three/webgpu" and "three/tsl" to `https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.webgpu.min.js`, and "three/addons/" to `https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/`. These are the **only** network requests allowed: no other libraries, fonts, images, models, textures or audio files. Use TSL node materials. Physics and simulation are your own code (no physics libraries).
- Start with `<!doctype html>`, `<meta charset="utf-8">` and a viewport meta tag. System font stacks only.
- It must run inside `<iframe sandbox="allow-scripts allow-pointer-lock">` (no `allow-same-origin`): `localStorage` and cookies throw there, so wrap every storage access in `try/catch` and keep values in memory. No `alert`, pop-ups, microphone or top-level navigation.
- Fixed simulation timestep (120 Hz) with bounded substeps, decoupled from frame rate; on a slow frame, drop simulation time rather than exploding. Let the pumpkin and every cut-out piece sleep once fully at rest (skip the solver) and wake on any input or contact. The candle flicker keeps running while the physics sleeps.
- Preallocate every buffer, geometry and material at start-up, sized for the caps below (cuts, pieces, sparks); nothing is created during interaction, carving included: rebuilding the surface after a cut writes into preallocated buffers.
- A quality scaler that lowers pixel ratio, then shadows, then post effects, then particle counts when frames get slow, never the physics feel. Target 60 fps on a mid-range phone.
- Known three r170 pitfalls, avoid them:
  - the scene background is drawn after transparent objects: draw the backdrop as a mesh (or give transparent objects `depthWrite: true`);
  - never `.clone()` a `CanvasTexture` (the clone uploads black);
  - create every `InstancedMesh` at its full count and never draw one with fewer than 2 instances (wrong-size uniform buffer, black screen): park unused instances out of sight at scale 0 instead of lowering `count`;
  - never let a helper overwrite a shared temp vector its caller still uses;
  - on WebGL2 an `InstancedMesh` of roughly 250-1000 instances keeps its matrices in a 16 KB uniform block and fails to compile: keep instanced meshes under 250 (or above 1000).

## Priorities

Build it in this order, and finish each tier properly before starting the next. A polished tier 1 beats a broken everything.

1. **Must be excellent:** it reads as **jelly, not a real pumpkin** (see below); the wobble (heavy, slow, ribs lagging); carving with a finger (clean real holes, rainbow layers in every cut face, the piece pops out); the candle light spilling through the holes onto the table and backdrop; the demo mode.
2. **Must work:** the five face presets and Random, Heal, the candle (blow out and relight), Drop, grabbing the stem, the sliders and colour presets, sound, the interface.
3. **Polish:** face personalities, Rainbow flame, the Easter egg, cinema mode.

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

## It must read as jelly, not a real pumpkin

This is a pumpkin-shaped **jelly candy**, as if poured into a pumpkin mould. Models tend to build a realistic vegetable: don't.

- **Yes:** translucent all the way through (the candle reads as a soft warm blur through the wall even where nothing is cut); wet, glossy surface with sharp specular highlights on every rib; colour deepening where the jelly is thicker; suspended air bubbles inside the wall; a faint mould seam; soft, rounded everything; it wobbles and sags under its own weight.
- **No:** opaque skin, fibrous or bumpy vegetable texture, matte or waxy surface, brown dry stem, pulp or stringy insides, realistic seeds, anything that looks carved from a real squash.

## The pumpkin

- **Table:** a dark walnut table top in a mid tone (never black), with a soft satin finish that catches the candle light.
- **Shape:** a squat round pumpkin, width 1.25, height 0.95, with **10 rounded ribs** (lobes) that bulge out and meet in soft grooves, a gentle dip at the top around the stem and a slightly flattened base sitting on the table.
- **Hollow:** a wall about 0.11 thick all round (a little thicker at the base), so you can carve through it; the cavity is closed until you cut it.
- **Rainbow wall:** the wall is made of **six layers through its thickness**, like a layered party jelly bent into a shell, from the outside in: orange (the skin layer, the thickest), red, yellow, green, blue, purple (the inner surface). Soft, slightly wavy boundaries with a thin brighter line where two colours meet. From outside it reads as a juicy orange jelly pumpkin with hints of the other colours glowing through where it is thin and the candle shines behind; **every cut face shows all six bands** in clean stripes, like a slice of rainbow cake.
- **Inside the wall:** 40-80 tiny suspended air bubbles (instanced, they move with the jelly) and a faint internal grain, so depth reads.
- **Stem:** a short, thick, slightly curled stem in translucent green jelly, softer and more see-through than the body, with a tiny curly vine. It wobbles a beat after the body.
- **Candle:** a short white tea light in a little metal cup on the floor of the cavity, with a live flame: a soft teardrop of emissive colour (white-yellow core, orange edge, a faint blue base) that flickers procedurally and leans when the pumpkin moves. A small amount of melted wax glints in the cup.

## Physics

- **Shell:** a volumetric soft body: a tetrahedral mesh of the hollow shell (about 2,000-4,000 tets) solved with **XPBD**, elastic constraints plus volume preservation, the smooth high-resolution surface skinned to the tets (barycentric embedding). A soft cavity-volume constraint (like air inside) keeps it round even with holes in it, so it never collapses or folds inwards.
- **Jelly, not rubber:** after any input it wobbles 4-6 times with decreasing amplitude and comes to rest in 2-4 s. Low-frequency, heavy, a little shear, the ribs swaying a beat after the body; no instant snap-back, no endless buzzing, no high-frequency jitter. It sits on the table with friction and never rolls away.
- **Stability is not optional:** no inverted tets (detect and recover), no explosions, no permanent collapse, nothing through the table. The volume stays within a few percent of rest. A pumpkin with many holes is a bit softer but just as stable.
- **Cut-out pieces** are small soft bodies of their own (or rigid bodies with a jelly squash on impact): they pop out, drop onto the table, wobble and can be grabbed and thrown. Cap 24 pieces; past the cap the oldest one at rest shrinks away smoothly.
- **The face moves with the jelly:** holes are part of the body, so squeezing the cheeks squashes the eyes and the mouth opens and closes; when the pumpkin wobbles the face wobbles.
- **Firmness** changes stiffness smoothly without resetting the shape (soft = slow, deep sag; firm = quick, small wobble). **Wobble** changes damping.

## Carving

- **How to cut it properly:** keep the shell as a signed distance field in **rest space** (the shell minus every carved region). When a cut finishes, remove the tets inside it, re-extract the affected part of the render surface from the field (e.g. marching cubes) into preallocated buffers and embed the new vertices in the remaining tets. Cut faces must be smooth and clean, never stair-stepped, never see-through gaps between the outer and inner surface. Each vertex knows its depth in the wall, so the cut faces colour themselves with the six bands.
- **Carve tool:** press on the pumpkin and drag: a thin glowing score line follows your finger **on the surface**, wrapping over the ribs. On release:
  - a **closed** stroke (end within about 8% of the pumpkin's width of the start) cuts out the whole enclosed shape straight through the wall: the piece pushes out with a small pop and falls to the table;
  - an **open** stroke cuts a slit about 0.035 wide along the line (a smile line, a scar, a stitched mouth).
- Cuts through the stem cut the stem. Up to about 16 cuts; then a toast "It's more hole than pumpkin." and further cuts are ignored gracefully.
- **Heal:** `H` (or a button) closes every hole: the jelly flows back in from the edges in about 0.6 s with a wobble, the pieces on the table shrink away.

## Faces

Five preset faces plus **Random**. Each is drawn from simple 2D curves (no images), projected onto the front of the pumpkin from the camera-facing side, and carved by the same real cut as a finger. Choosing one heals the current face, then an invisible blade carves the new one stroke by stroke in about 0.8 s (eyes, nose, mouth), each piece popping out.

- **Jack** (`J`): triangle eyes, a triangle nose, a wide grin with two or three square teeth. Personality: squeeze its cheeks and the grin chews.
- **Grumpy** (`G`): eyes slanted down towards the nose like frowning brows, a jagged zigzag mouth. Personality: poke it and it growls: the wall shivers finely and the candle flares brighter for a moment.
- **Scared** (`S`): big round eyes and a round "O" mouth. Personality: poke it and it trembles for a second, the eyes stretching wider and slowly pulling back.
- **Vampire** (`V`): narrow sly eyes, a smile with two long fangs hanging down. Personality: poke it and the candle light turns blood red for a second, then back.
- **Winky** (`W`): one round eye, the other a curved arc, a lopsided smile. Personality: tap its round eye and a local squeeze pinches it shut in a wink, then it springs open.
- **Random** (`X`): any preset except the current one, with small random variation in size and tilt so it never repeats exactly.

## Candle

- The candle is a point light inside the cavity: it casts **shadows through the holes**, so the face is projected onto the table and the backdrop as warm, soft-edged light shapes that wobble when the pumpkin wobbles. The jelly wall also lets a dimmer, tinted glow through (orange outside, picking up the rainbow where thin), so a pumpkin with no holes still glows softly like a lantern.
- **Candle** (`L`, or a button): blows it out: the flame bends, shrinks and dies, a thin curl of smoke drifts out of the holes, the scene drops to its dim ambient look (still readable, never black). Press again to relight: a little spark, the flame grows back with a soft pop and the light pattern blooms back onto the table.
- Light from the holes falls **on the cut-out pieces** too, and they cast their own small shadows.

## Tools

A tool picker with **Hand** (`1`) and **Carve** (`2`), plus the face buttons. A press that ends within 6 px and 450 ms counts as a tap. One finger acts; two fingers or right-drag orbit. Nothing is hover-only.

- **Hand:** tap the pumpkin to poke a dimple that rebounds with a ripple. Press and drag grabs the surface point under the cursor and pulls it: the deformation is local and follows the finger, stretch is dramatic but capped (never tears); releasing during a fast drag keeps the momentum (flick). Grab the **stem** to lift the whole pumpkin: it hangs and bounces on it like a jelly on a spring, and drops with a heavy squash when you let go. Press on a cut-out piece to pick it up and throw it. Double-tap the pumpkin (or `D`) to lift it a little and drop it: it squashes, the top lands a beat later, the stem flops.
- **Carve:** see Carving.

## Easter egg

- **Lid off:** draw a closed stroke around the stem on top: the lid (with the stem) pops up into the air with a wobble and lands on the table beside it, and a burst of rainbow sparks shoots up out of the top like a chimney, the candle flaring tall for a second. Toast: "Lid off!" Heal puts the lid back.

## Sound

- Synthesize everything with WebAudio; create the `AudioContext` on the first gesture only; a mute button and `M`.
- Poke: a soft wet squelch whose pitch drops with firmness; wobble: a quiet low "wub" that fades with the motion; carving: a wet slicing hiss that follows the finger's speed; a piece popping out: a juicy "plop", landing: a soft "pap"; Heal: a slurpy rewind; candle out: a soft "fff" breath; relight: a match strike and a little whoomp; a faint candle crackle while it burns; each face's personality: a low growl (Grumpy), a nervous wobble trill (Scared), a deep "bwah" (Vampire), a "tick" (Winky); the Easter egg: a cork pop and sparkles. Nothing clips or piles up (voice limit).

## Look

Aim for a premium candy commercial on Halloween night, not a game asset.

- **Colour:** sRGB output, **AgX** tone mapping, exposure about 1.0, HDR internally: the jelly stays saturated and juicy, never washed out; the candle is warm but not blown out.
- **Lighting:** a procedural environment (`RoomEnvironment` through `PMREMGenerator`, no HDR files) at reduced intensity for the glossy reflections, a soft cool-violet key from the front-left (moonlight through a window), a soft fill, and a cool rim from behind that outlines the ribs and stem; plus the **candle**, the warmest and most important light, with soft shadows (PCF soft, 1024 cube faces, 512 on phones). Soft shadows from the key light and a contact shadow under the pumpkin and the pieces.
- **Materials:**
  - **Pumpkin jelly:** a physical material with transmission 1, thickness from the real geometry, IOR 1.4, attenuation colour from the layer and attenuation distance so the thick base is deep amber and thin ribs glow, roughness about 0.08 (wet), clearcoat 0.8, a strong Fresnel sheen at grazing angles, faint procedural roughness variation and tiny surface dimples so it never looks CG-perfect. The inside surface is lit by the candle so the cavity glows. Never glass-hard, never plastic, never opaque.
  - **Cut faces:** the six bands in clean stripes, slightly rougher and wetter than the skin, catching the candle light from inside.
  - **Stem:** green jelly, more transparent, a touch rougher.
  - **Candle:** waxy white with subsurface-like glow near the flame; the cup brushed metal.
- **Colour presets** (pills, smooth cross-fade): **Rainbow** (default, as above), **Rainbow ribs** (each of the 10 ribs a different colour of the rainbow around the pumpkin, the layers still in the wall), **Classic** (all layers orange to amber), **Ghost** (clear, faintly milky jelly with the layers in pastel).
- **Rainbow flame** (switch): the flame slowly cycles through the rainbow and the light pattern on the table changes colour with it.
- **Post:** one subtle bloom (strength about 0.35, threshold above 1) so only the flame, the light in the holes and the sparks glow; a light vignette. No heavy chromatic aberration or grain.
- **Backdrop:** a soft studio gradient from dusky violet to plum, in a **mid tone, never pure white or pure black**, close enough behind the pumpkin that the candle projects the face onto it.
- **Framing:** the default camera shows the pumpkin filling about 75% of a **square** frame, three-quarter view from slightly above, its face side turned towards the camera, with the table in front where the light falls.
- **Motion:** everything eases, overshoots a little and settles; nothing pops or teleports.

## Interface

- **Top left:** a big bold heading "Rainbow Jelly Pumpkin." with a small subtitle "Carve it with your finger."
- **Right:** a rounded control card "Pumpkin": the two tools as tiles with a small drawn icon and their key; a row of **face buttons** (Jack, Grumpy, Scared, Vampire, Winky, each a tiny drawn face icon) and a **Random** button; **Heal**, **Candle** (shows Blow out / Light) and **Drop** buttons; **Firmness** (soft to firm) and **Wobble** sliders with live values; **Colours** pills; switches for **Rainbow flame** and **Slow motion** (¼ speed); **Reset** (healed, lid on, candle lit, normal colours).
- **Bottom:** a one-line hint "Tap to poke. Drag to squish. Press 2 and draw a face." that changes with the tool (Carve: "Draw a closed shape to cut it out.") and fades after a few uses.
- A status pill `WEBGPU · LIVE` or `WEBGL2 · LIVE`; toasts for milestones (first cut, first full face, every preset tried, the Easter egg), each once. Collapses to a compact bottom sheet at phone width with the face buttons always reachable; the UI never covers the pumpkin.
- If neither WebGPU nor WebGL2 works, a clear, designed message.

## Camera and keys

- Orbit around the pumpkin within limits (never under the table), zoom within limits. `R` reset, `Space` pause, `C` cinema (hide UI, slow orbit), `M` mute, `1`-`2` tools, `J` `G` `S` `V` `W` faces, `X` random face, `H` heal, `L` candle, `D` drop.
- Respect `prefers-reduced-motion`: softer UI transitions, slower cinema orbit; the physics still responds fully.

## Test hook

If the URL has `?test=1`, expose `window.__toy` with no visible change: `poke(x, y)`, `carve(points, closed)` (points in screen pixels), `face(name)` (`jack`, `grumpy`, `scared`, `vampire`, `winky`, `random`), `heal()`, `candle(on)`, `drop()`, `reset()`, and `getState()` returning `{ renderer, fps, face, cuts, pieces, candle, lidOff, volumeRatio, kineticEnergy, asleep }`.

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

For this toy that means:
- Hide all UI and the cursor. Never create an `AudioContext`.
- One fixed quality preset, fixed seed, default camera, Rainbow colours, candle lit, Rainbow flame off.
- A deterministic loop restarting every 4.0 s of real time from the identical state (a whole, uncut pumpkin glowing softly from the candle inside):
  - **0.0 to 0.7 s:** the pumpkin drops onto the table from a small height: it squashes, the top lands a beat later, the stem flops.
  - **0.7 to 1.6 s:** the **Jack** face carves itself: two eyes, the nose, then the grin; each piece pops out showing the rainbow layers and drops to the table; the candle light bursts out of each new hole and the face appears on the table and the backdrop.
  - **1.6 to 3.0 s:** an invisible finger pokes the cheek: the pumpkin wobbles, the glowing face and its light pattern on the table wobble with it, then settle.
  - **3.0 to 4.0 s:** the holes heal shut (the jelly flows back in) and the pieces shrink away, back to the state at 0.0 s.
- Start moving within 1 s of load; the action must read clearly at 15 fps (the demo is recorded in a slow software renderer).
- Support `?demo=1&t=<seconds>` to freeze the demo at that time.

## Before you finish

Self-check against this list and fix anything that fails:
- Look at it next to the "jelly, not a real pumpkin" list: translucent, glossy, wobbly, no vegetable texture anywhere.
- Poke, squish, pull, flick, drop, lift by the stem at Firmness soft and firm, Wobble low and high: it always jiggles like jelly, ribs and stem lag the body, it always settles upright and round.
- Carve everywhere: big and tiny shapes, open slits, cuts across ribs, cuts that overlap earlier holes, cuts through the stem, 16 cuts; look into every hole from several angles: six clean bands in every cut face, no stair-steps, no see-through gaps, no inverted tets. Pieces pop out, wobble, can be thrown.
- Every face preset and Random, ten times in a row: heal and re-carve stay smooth and stable; each personality works.
- The candle: light through the holes on the table and backdrop follows the wobble; blow out and relight; Rainbow flame.
- Every tool, slider, switch, colour preset, button and key; pause and resume; Cinema; resizing to phone width with touch.
- Sound: every action has its effect, nothing plays before the first gesture, mute works.
- It works inside `<iframe sandbox="allow-scripts allow-pointer-lock">` with storage blocked.
- `?demo=1` matches the timeline, loops cleanly, shows no UI and plays no sound; `?test=1` exposes `window.__toy`.
- No console errors or WebGPU validation errors on WebGPU **and** on WebGL2 (force the fallback to check), and it stays smooth on a mid-range phone.

Put the jelly look and carving with your finger first. Drawing a face and watching the candle light spill out through it onto the table should be the best part.