Jelly Skeleton

Build **"Jelly Skeleton"**: a real-time, interactive 3D **cute little skeleton made of crystal-clear jelly with candy bones inside**, sitting on a cozy Halloween table at night. People **poke** it, **stretch** it, **pick it up**, **shake** it so its bones **rattle loose inside the jelly** and float back into place, play its **ribs like a xylophone**, **feed it candy corn** and watch it sink through its see-through body, **tickle** it and switch on **X-ray** so the bones glow, with **synthesised sound**, as ONE self-contained HTML file rendered with **WebGPU (WGSL)** and an automatic **WebGL2** fallback.

**This is part of a series called Jelly Monsters, and the most important thing is that it looks stunning.** Every frame should look like a high-end product photo of a gummy candy character: glowing, glossy, wobbly, adorable. Someone scrolling past a still frame should stop and want to touch it. Spend your effort on the look and the jelly feel first, features second.

**It must also be fun.** Every touch gets a reaction with personality: it flinches, giggles, gets grumpy, looks puzzled, shows off. The joke of this monster is that you can see everything going on inside it, so every bone, candy and wobble inside the jelly should be worth watching.

## 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 stunning:** the character (cute, readable, plush-toy proportions), the glowing jelly material, the candy bones inside it and the way the jelly jiggles around them, the night table scene and its lighting, the wobble, the base interactions (Poke, Stretch, Grab, idle life), the demo mode.
2. **Must work:** the special trick (loose bones on Shake, rib xylophone, X-ray, feeding), the collection, colour flavours, Shake, Pose, Reset, sound, both renderers, the control card, the secret.
3. **Gags and polish:** hiccups, the bone mix-up, Tickle, the collection's reactions, grabbing by the head, soft fog near the table, candle flicker reflected in the jelly, slow motion, Cinema mode extras.

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

## Deliverable

- One self-contained `.html` file with all JavaScript, WGSL, GLSL and CSS inline. Start it with `<!doctype html>`, `<meta charset="utf-8">` and a viewport meta.
- **No external requests of any kind**: no libraries, CDNs, web fonts, images, textures or audio files. Generate everything procedurally in code (sound included). 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 or a 2D fake.
- **Test hook:** if the URL has `?test=1`, expose `window.__toy` (no visible change) with `setTool(name)`, `poke(x, y, strength)`, `drag(x0, y0, x1, y1, ms)` (through the same code path as a real pointer drag with the current tool, in canvas pixels), `shake()`, `reset()`, `set(name, value)` for every slider, switch and flavour, the special-trick calls listed below, and `state()` returning `{ backend, tool, mode, volume, kinetic, busy, fps }` plus the special-trick fields listed below.

## The series look (same for every Jelly Monster)

**Character style**
- **A plush toy made of gummy candy.** Chunky, round, soft proportions: a big body, a big head (or one shape that is both), short stubby limbs if any. Nothing thin, spiky, sharp or realistic. No teeth beyond one tiny cute fang if the monster needs it.
- **Big glossy eyes** (each about a quarter of the face's width), glossy near-black candy with **one big soft white highlight** high up and a small second one, always visible whatever the lighting. Eyes **blink** now and then and **follow the pointer**. A **tiny smile**.
- **One or two strong colours** per flavour, plus a lighter face area. It must read at a glance as what it is (here: a skeleton) from its silhouette alone.
- **Every part is attached to the body.** Nothing hovers or floats detached around the character (the bones move around when shaken loose, but always stay inside the jelly).

**The jelly**
- **Translucent all the way through**, never plastic: colour comes from absorption through the volume (Beer-Lambert), deep where it is thick and pale and bright at thin edges; the background is visible through it, bent by refraction (IOR about 1.35, like water). Small sharp wet highlights with a strong Fresnel sheen at grazing angles; no broad plastic clearcoat; tiny suspended air bubbles at different depths; faint internal grain.
- **It glows when backlit.** The moonlight from behind makes its edges and thin parts glow in its own colour. This is the signature look of the series.
- **It moves like jelly:** slow heavy jiggle (2 to 4 Hz), the top lags behind the base, it keeps its volume (squashed it bulges, pulled it thins), squashy dead bounces, never a rubbery boing.

**The scene**
- **A cozy Halloween tabletop at night**: a dark warm wooden table, three church candles of different heights on the left and back (real flickering flames, warm light that moves), a large window behind with a big pale moon and a deep blue-violet night sky, a little soft fog near the table surface. Two or three tiny props at the edges (a small pumpkin, scattered candy corn) that never compete with the character.
- **The collection:** the monsters from earlier days of the series sit in a row on a low wooden step at the back right of the table, as **tiny jelly figurines** about a fifth of the character's height, in the same jelly material (simpler shading is fine), softly out of focus, never in front of or overlapping the character. Each has its own big glossy eyes, blinks now and then and glances at the main monster when it does something big. They **react**: when the main monster does its big trick they hop and cheer, when it is shaken or dropped the table jolts and they wobble along, and when it poses they pose too. Tapping one with any tool makes it wobble, squeak and do a **tiny version of its own trick** (listed under The monster). They wobble on a cheap spring, no soft body of their own, and they never cost the main monster frame rate. In demo mode they sit still and only blink.
- **Lighting:** warm flickering candle key from the front-left, cool strong moon rim light from behind so the jelly glows at its edges, soft coloured shadows and a coloured light patch on the table where light passes through the jelly. Filmic tone mapping, gentle bloom on the candle flames and the jelly's highlights, a soft vignette.
- **Camera:** a slightly low three-quarter front view, close, like a food photo: the character fills about 55% of a square frame and looks into the camera. Orbit and zoom within limits; **no automatic follow cam that drifts**. The UI never covers the character on desktop.

## The monster (this monster)

- **A little skeleton in a jelly body**: a chubby gummy figure sitting on the table with its legs out in front, like a plush toy: a **big round head** (about as wide as the body), a soft pear-shaped body, **two stubby arms** and **two stubby legs** with round mitten hands and feet. The jelly is **almost water-clear**, so the first thing you see is the candy skeleton inside it, like an x-ray.
- **The candy bones** (inside the jelly, never poking out): smooth glossy **white sugar candy** with rounded knob ends like cartoon dog bones, slightly translucent at the thin parts. About 15 pieces: a **round cute skull** filling most of the head, a **spine** of 5 round candy beads, a **ribcage of 4 curved ribs** (shortest at the bottom), a round pelvis, and one short knobbed bone per arm and leg with a little round candy ball for each hand and foot. Chunky and toy-like, nothing thin, sharp or anatomical.
- **Face:** the series eyes sit in the skull's round eye sockets, just under the jelly surface, so they read crisply through it from every angle; a small curved candy smile drawn on the skull (no teeth); a tiny rounded nose hole. Faint rosy cheeks on the jelly in front of the cheekbones.
- **The jelly feel (the most important part):** the bones are the firm core and the jelly is the wobbly flesh around them. Bones hang in the jelly on soft springs, not welded in, so even at home they drift and lag a little behind every wobble, and the thick jelly (belly, cheeks, the back of the head) keeps jiggling after the bones have stopped. A poke on the chest visibly pushes the ribs in and they bob back; a stretched arm pulls its bone along, which slides back in with the snap; a drop squashes the body flat around the bones and they bounce inside it. Hands and feet are soft round jelly mittens that flop.
- **Grab by the head:** picking it up by the head stretches the head jelly the most and the spine beads hang down one under the other like pearls on a string, the body dangling and swaying below, legs flopping. Set down, the beads stack back up with a little click each.
- **Bones are seen through the jelly:** draw them into the scene behind the jelly's front surface, so they are refracted, slightly magnified and tinted by the depth of jelly in front of them (crisp near the surface, softer and more tinted deeper in).
- **The collection** (2 figurines, oldest on the left):
  - **Spider** (#1): a round teal gumdrop dome with a lighter mint face patch, two big eyes, eight short chubby aqua legs. Its trick: a rainbow fan on its back rises like a peacock spider's and it does a little side-to-side dance.
  - **Ghost** (#2): a milky white-blue glowing ghost with a scalloped skirt, hovering just above the step. Its trick: it puffs up and goes "boo" with a tiny O mouth, and the nearest candle flame flickers.
- **Flavours** (round swatches): **Crystal** (default: water-clear jelly with a faint cool-blue tint, white bones), **Lime** (pale glow-stick green), **Grape** (soft violet), **Cherry** (light cherry red, bones stay white), **Midnight** (deep indigo jelly with glow-in-the-dark pale-green bones).

## Base interactions (same for every Jelly Monster)

A tool picker with **Poke**, **Stretch** and **Grab**. The default tool is Poke. A press that ends within 6 px and 450 ms counts as a tap. Right-drag or two fingers orbit the camera with any tool. Pointer events with **pointer capture**, mouse, pen and touch.

- **Poke:** a tap presses a deep rounded dent that springs back with a wobble rippling over the whole body; it **flinches** (eyes squeeze shut, body ducks), then shakes it off. Holding presses deeper and the jelly bulges around the finger. Poked many times in a row, it gets a little grumpy (frowns, turns away), then forgives you.
- **Stretch:** grab any point and pull: the jelly stretches out locally like taffy, thinning near the finger and bulging back at the body, and on release **snaps back** with a big satisfying wobble. Never tears, never moves the whole body rigidly. The further you pull, the bigger the snap.
- **Grab:** pick the whole monster up by the point you grabbed; it dangles and sways with weight, its eyes go wide; release to drop it (a squashy splat and wobble), or release during a fast drag to toss it a little way. It always ends up back in its spot, happy.
- **Tickle:** with Poke, small fast circles on the body (about three loops) start a giggle fit: it squirms, ripples run all over the jelly, its eyes squeeze into happy arcs and it wriggles away from the finger, then catches its breath.
- **Shake** (button and `S`): the whole monster jiggles hard for a second like a plate of jelly being shaken, then settles.
- **Pose** (button and `F`): the monster strikes a cute pose, a different one each time in turn (a wave, a wink, a little "ta-da" with its arms up, adapted to its shape), the figurines in the collection pose too, and a soft white camera flash fires: the frame then holds still for 1 second with all UI and the cursor hidden (a clean screenshot), and the UI fades back. Never during demo mode.
- **Idle life:** it breathes, blinks, follows the pointer with its eyes and body, and every few seconds does a small cute idle animation of its own. Never perfectly frozen.
- **Reset** (`R`): back to its spot, settled.
- **Physics:** a volumetric soft body (a lattice of about 500 to 1,500 cells, XPBD or shape matching with volume preservation) skinned to a smooth high-resolution surface, with a fixed timestep (about 1/120 s) and bounded substeps. Deformation clamped so it always reads as itself; back to exact rest within 2 to 3 seconds; no jitter at rest, no explosions, no creep, nothing passing through the table.

## Special trick (this monster)

- **Loose bones:** **Shake** (and a hard drop or toss with Grab) **rattles the bones loose inside the jelly**. Each bone becomes its own small rigid body: it tumbles slowly through the jelly as if through thick syrup (heavy drag, slow spin), clinks against the other bones and bounces softly off the inside of the jelly surface, which bulges a little where a bone hits it. **Bones never leave the jelly**, never pass through each other and never get stuck. Each loose bone slowly settles towards the bottom of the body.
- **Back into place:** about a second after the jelly calms down, the bones **float back home one by one** (about 0.12 s apart, from the feet up), each easing along a soft curved path and **snapping in with a little click and a ripple**; the skull comes home last and the eyes give a happy blink. If you shake again before they are all home, the ones already back come loose again.
- **The mix-up:** about one time in four after a big shake, two bones come home to the wrong spots (two ribs swapped, or a hand ball where a foot ball should be). It looks down at itself, puzzled (one eye squinting), wiggles, and the two bones swap back with a pop. With swapped ribs, the xylophone plays the wrong notes until they are fixed.
- **Hiccups:** shake it three times within 10 seconds and it gets the hiccups: about five hiccups 1.2 s apart, each a little jump of the whole body with a "hic", popping one bone loose that finds its way home (and bouncing any candy inside). Tapping its belly cures them early with a surprised blink.
- **Rib xylophone:** with Poke, tapping a rib (through the jelly) rings it like a candy xylophone bar: each of the 4 ribs plays its own note of a major pentatonic scale (highest at the top), the rib glows briefly and vibrates, and the skeleton giggles instead of flinching. Tapping the skull makes a hollow "tok".
- **Feed it candy:** press on a candy corn on the table with any tool and drag it onto the skeleton: it opens its mouth, the candy goes in with a little gulp and you can **watch it sink through the clear jelly**, tumble between the ribs, bump off the spine and land in its belly, where it slowly dissolves into a soft orange glow that fades out over about 3 seconds. It does a happy wiggle and licks its lips. Each eaten candy corn pops back onto the table a moment later. At most 3 inside at once (it shakes its head at a fourth); shaking with candy inside rattles it around with the loose bones. In X-ray the candy glows too.
- **X-ray** (switch, `X`): the candles dim and the room goes dark blue, the jelly becomes a faint glassy blue film with glowing edges, and the **bones glow** pale cyan from inside (Midnight: pale green), lighting the jelly around them, like a candy x-ray. Everything else (poke, stretch, loose bones, xylophone) keeps working in X-ray. Turning it off relights the candles.
- **Test hook:** `xray(on)`, `rib(i)` (ring rib `i`, 0 = top), `loosen()` (rattle every bone loose, as a Shake does), `figurine(i)` (tap collection figurine `i`, 0 = oldest), `feed()` (feed it one candy corn, as a drag would), `pose()`, `tickle()`, `hiccup()` (start the hiccups); `state()` adds `eaten` (candies inside now), `posing`, `hiccups` (left to come), `mixedUp` (true while two bones are swapped), `mood`, `xray`, `loose` (number of bones currently out of place) and `home` (true when every bone is back in place).

## Secret (this monster)

- Tap all four ribs **from the top down within 2 seconds** (a little scale): the skeleton plays the scale back to you and breaks into a short happy **bone dance**, its bones bopping inside the jelly a beat ahead of the jelly body (the jelly follows, wobbling), to a little xylophone jingle of about 4 seconds, then it takes a bow. A small badge: "Funny bone found." Never hint at it in the UI.

## Sound

Every action has a **synthesised sound**, generated live with the **Web Audio API** (oscillators, filtered noise, envelopes). **No audio files, no samples.** Soft, cute, wet: squishes, bloops and creaks for the jelly; a short squeak for the flinch; a rising wet stretch and a satisfying snap-back bloop for Stretch; a splat for a drop; a jiggly rattle for Shake; a camera shutter click for Pose; and for this monster: a gulp and a happy "mm" when it eats, the candy's soft tick against the ribs, a giggle fit for Tickle, a cute "hic" with a tiny rattle for each hiccup, a puzzled "hm?" and a pop for the mix-up, little pearl clicks as the spine beads stack back, soft muffled candy clacks when loose bones knock together (muffled by the jelly), a small bright click as each bone snaps home, warm xylophone notes for the ribs (a sine with a short bright attack and a quick decay), a hollow "tok" for the skull, a soft electric hum when X-ray turns on, the jingle for the secret, and a tiny high squeak plus a mini version of its own sound for each collection figurine.

Rules: create the `AudioContext` only on the first user gesture and never before; resume a `suspended` context on interaction; master gain into a compressor, no clipping; cap at about 16 voices; wrap every audio call in `try/catch`. Sound on by default; a **speaker button** and `M` mute it.

## Rendering (WebGPU with a WebGL2 fallback)

**WebGPU (WGSL) when available, with an automatic WebGL2 fallback that looks the same.** Detect at start; if WebGPU is missing, or adapter or device creation fails, use WebGL2. **If the WebGPU device is lost at any time (`device.lost`), switch to WebGL2 on the spot and keep rendering**: the toy must never end up on a blank screen. No libraries: write both paths yourself, sharing the scene data and the simulation. Show which one runs in the status pill.

- **Jelly:** back faces into a thickness buffer, then front faces, absorption from the distance light travels through the jelly, screen-space refraction of the scene behind (IOR about 1.35, offset scaled by thickness), a wrap-around subsurface term for the backlit glow, wet specular with Schlick Fresnel and a tight highlight, internal grain and bubbles. Opaque shading with an alpha value is not acceptable.
- **Eyes:** glossy dark candy domes with the white highlight painted in plus a real specular glint, so they always read as big cute eyes.
- **Scene:** candle flames as flickering additive sprites with a warm point light each; the moon as a soft disc with a rim light; soft shadows; table wood grain procedural; fog as a few soft sprites near the table.
- Preallocate all buffers and build every pipeline at start; never create shaders, pipelines or geometry during interaction. DPR capped at 2. An automatic **quality scaler** lowers resolution and bloom before it ever touches the jelly feel. It must stay smooth on a mid-range phone.
- Only if neither WebGPU nor WebGL2 exists, show a clear, well-designed message.

## Interface

A dark, cozy interface that stays out of the way; the monster is the hero and UI never covers it.

**Top left:** small caps `POKEABLE · JELLY MONSTERS 3 / 15`, a large italic serif heading on two lines: *Jelly* / *Skeleton.*, and caption lines "Poke it." / "Shake it." / "Watch the bones."

**Top right:** a live status dot with `WEBGPU · LIVE` or `WEBGL2 · LIVE`, a **speaker icon button** (`ON` / `MUTED`), and `PAUSED` when paused.

**Right panel: control card "Skeleton"**, a floating card about 240px wide with 20px corners, dark charcoal with a hint of violet, soft shadow, no hairlines, plain system sans, bold sentence-case labels, and an accent colour taken from the active flavour's glow. Tools as rounded tiles with small drawn icons and key numbers (`1` Poke, `2` Stretch, `3` Grab), the special-trick controls as big accent buttons (**Shake**) and a switch (**X-ray**), **Pose** and **Reset** as chips, flavours as round swatches, sliders for **Softness**, **Wobble** and **Sound** (6px rounded track, round white thumb, monospace value chips), switches for **Slow motion** and **Cinema**, and **Pause / Resume** as a full-width pill. Collapsible to a small button; a bottom sheet on narrow screens.

**Bottom left:** a one-line hint per tool ("Tap to poke. Tap a rib to play it. Drag candy to feed it. Circle to tickle.", "Grab and pull. Let go to snap it back.", "Pick it up. Let go to drop it.").

**Cinema** (`C`) hides all UI and the cursor; a tap without drag, `C` or Esc brings it back. Respect `prefers-reduced-motion` for UI transitions and camera moves; the jelly still responds fully. Keys: `1` to `3` tools, `S` Shake, `X` X-ray, `F` Pose, `P` next flavour, `C` Cinema, `M` mute, Space pause, `R` reset, `0` reset view.

## 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. One fixed quality preset (no quality scaler), the default flavour, X-ray **on** from 1.9 s to 3.4 s, the fixed default camera.
- **Never create an `AudioContext`**, play nothing.
- Deterministic, no randomness (loose bones included); restart every 4.0 s of real time from the identical state; drive the simulation from real elapsed time with the fixed timestep so the loop lasts 4 s at any frame rate.
- Timeline:
  - **0.0 to 0.7 s:** the skeleton drops onto the table, lands with a squashy splat and wobbles, its bones lagging a little behind the jelly.
  - **0.9 to 1.1 s:** an invisible finger runs down its four ribs: each glows in turn and pushes in and bobs back, it giggles and the body ripples.
  - **1.2 to 1.8 s:** an invisible hand stretches one arm out to the side (the arm bone slides along inside) and lets go: it snaps back with a big wobble.
  - **1.9 s:** X-ray on: the candles dim, the jelly turns to a faint blue film and the bones glow.
  - **2.0 to 2.8 s:** Shake: the bones rattle loose and tumble around inside the glowing jelly, skull turned sideways, eyes still on the camera. The most striking moment.
  - **2.8 to 3.6 s:** the bones float back home one by one and click into place, skull last with a blink; X-ray off at 3.4 s.
  - **3.6 to 4.0 s:** it settles into its resting pose, ready for the loop to start again.
- Start moving within 1 s. It is recorded in a slow software renderer: **the clear jelly, the bones inside it and the loose bones must read clearly at 15 fps**.
- Support `?demo=1&t=<seconds>` to freeze the demo at that time (for screenshots).

## Before you finish

Self-check against this list and fix anything that fails:
- **The scroll-stop test:** take still frames at rest, mid-stretch, with the bones loose, X-ray on and off, in every flavour. Each must look like a premium photo of a glowing gummy candy character: cute, glossy, translucent, backlit, with readable eyes and candy bones clearly visible inside, and the collection reading as small background figurines that never steal the eye. If any frame looks like plastic, glass, a flat cartoon or something creepy, fix the look before anything else.
- **The cute test:** from the default view it reads instantly as a friendly little skeleton with big shiny eyes; nothing sharp, anatomical or scary, no teeth, no bone ever outside the jelly.
- Poke every part 50 times fast, stretch from every side as far as possible, grab and toss it, shake it ten times in a row, feed it with the bones loose and while stretching, tickle it mid-hiccup, hang it by the head and shake it, shake while stretching, switch flavours mid-wobble: never an inverted or exploded body, jitter at rest, a bone outside the jelly or stuck out of place, a part through the table or a crash. After every test all bones end up home.
- Every tool, button, switch, slider and key; each rib's note; tapping each figurine; Pose several times in a row; Tickle; the hiccups and their cure; the mix-up and the wrong notes it causes; pause and resume; Slow motion; Cinema; resizing to phone width with touch.
- **The fun test:** poke, stretch, feed, tickle and shake it for a minute. Every action gets its own visible reaction and sound, the inside of the body is always worth watching, and it never feels like a static model being deformed.
- The secret by hand.
- Sound: every action has its effect, nothing before the first gesture, mute works, no clipping.
- `?demo=1` matches the timeline, loops cleanly, shows no UI and plays no sound; `?demo=1&t=2.4` freezes with the bones loose in X-ray.
- No console errors or WebGPU validation errors on WebGPU AND on the WebGL2 path, the device-lost fallback works (simulate it with `device.destroy()`), and it stays smooth on a mid-range phone.

Make it the most beautiful jelly toy you can. It should be the skeleton people screenshot before they even poke it.