Jelly Bat

Build **"Jelly Bat"**: a real-time, interactive 3D **cute little bat made of glowing grape-violet jelly with thin wings that light up like stained glass against the moon**, sitting on a cozy Halloween table at night under a candy branch. People **poke** it, **stretch** it, **pick it up**, **flip it upside down** to **hang** from the branch and **swing** like a jelly pendulum, tap its wings to make it **flap** and **fly a loop** across the moon, let it hunt a glowing **moth**, **ping** the dark room with **sonar rings**, **feed it grapes** that swirl through its see-through body and change its colour, **tickle** it and rock it to sleep, 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. This monster lives **upside down**, and that is the gift: every time it flips, gravity pulls its jelly the other way, so the body droops, the cheeks and ears sag, and the juice swirling inside it pours slowly to the new bottom like sand in an hourglass. Hanging, it swings like a heavy jelly pendulum; pulled down, it bungees back. In the air, its wings ripple like wet silk and blaze violet whenever the moon is behind them. It should be **hypnotic**: something you keep flipping, swinging and pinging just to watch the jelly droop, the juice pour and the swing die down, the way people watch slow-motion videos of jelly dropped on a plate.

## 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, a bat from its silhouette alone with wings folded or open), the violet jelly material, the wings glowing backlit like stained glass, the juice swirling inside, the jelly feel (the wobble, the ring-down after every move, the droop when it hangs), hanging and swinging from the branch, the night table scene and its lighting, the base interactions (Poke, Stretch, Grab, idle life), the demo mode.
2. **Must work:** the special trick (flap, the loop across the moon, the bungee, the moth hunt with Auto moth, the sonar ping), the collection, colour flavours, Shake, Pose, Reset, sound, both renderers, the control card, the secret.
3. **Gags and polish:** feeding grapes (the juice ribbon and the colour change), Night with sonar only, the wing stretch that glows brighter as it thins, the cocoon sleep, the musical echoes, Tickle, the collection's reactions, soft fog near the table, candle flicker reflected in the jelly and the eyes, 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 bat) from its silhouette alone.
- **Every part is attached to the body.** Nothing hovers or floats detached around the character (the ears, wings and feet all grow out of the body).

**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 bat in jelly**: a chubby gummy bat **sitting upright** on the table like a plush toy, facing the camera: one **round gumdrop shape** that is both head and body (a little wider at the bottom), two **big rounded ears** on top (tall soft leaf shapes, about a third of the body's height, slightly apart), a tiny **upturned snout**, two short stubby feet with three round little toes each, and two **wings**. Short, round, soft: nothing thin or spiky except the wing membranes, and even those have soft rounded edges.
- **The wings (the signature of this monster):** each wing is **three chubby rounded candy "fingers"** (like glossy grape-liquorice sticks, fat at the body, rounded at the tip) with a **thin jelly membrane** between them, its trailing edge in **soft scallops** between the finger tips, never pointed. **Folded** (the default when sitting), the wings wrap along the body's sides like a little cape, so the silhouette reads as a round gumdrop with ears. **Spread**, each wing is about as wide as the body, so the open bat is about three body widths across. The membrane is the thinnest jelly in the series: wherever the moon or a candle is behind it, it **blazes with violet light like stained glass**, the fingers showing as darker ribs inside it and faint veins of lighter jelly branching through it. When the membrane is between the camera and the moon, the moon shows through it as a soft violet disc. Make the wings cloth-like: a small grid of particles per wing (about 12 x 8) pinned to the finger rods, solved with the same fixed timestep, so they ripple, billow on the downstroke and sag a little when still; the fingers fold and spread by animated joints.
- **The jelly:** **grape-violet**: deep plum where it is thick (the body), bright amethyst at the thin parts (**ears, wing membranes, snout, toes, the edge of the silhouette**). The moon behind it turns the outline into a glowing violet rim and the ears into two little lanterns. A lighter, almost lavender **face area** around the eyes and snout.
- **The juice inside (the wow factor):** suspended inside the body are slow **ribbons of lighter glowing grape juice**, like ink swirling in water, plus the series' tiny air bubbles. The juice has weight: it **sinks to whatever is down**. When the bat sits, it rests in soft swirls in the lower body; when it flips to hang, the juice **pours slowly to its head** over about 1.5 s like an hourglass, and back when it flips up; every hop, flap and swing sloshes it, overshoots and settles. During the loop it streams around the body with the turn. Do it cheaply: a procedural 3D noise density in the body's rest-space coordinates, offset and stretched by a damped "slosh" vector that follows gravity and the body's acceleration (a spring with lag and overshoot), rendered inside the thickness pass as extra absorption and a soft emission. It must never look like a texture stuck on the surface.
- **Eyes (this monster):** the series eyes, big glossy near-black candy domes with the big white highlight and the small second one. A tiny cute **fang** pokes out on one side of the smile.
- **Face:** the upturned snout is a small rounded heart shape with two nostril dots, rosy-pink inner ears (the thinnest jelly, they glow brightest), and two soft pink cheek spots.
- **The jelly feel (the most important part):** dense, heavy, slow jelly, like a big panna cotta, never rubber. Every move has **follow-through**: the ears lag behind the body and catch up with a wobble, the belly keeps jiggling after the body stops, the wings settle in two or three slow ripples. Every landing ends in a **ring-down** you want to watch: a deep squash, a slow bulge back, two or three shrinking wobbles with the surface highlights sliding over the jelly, then perfectly still.
- **The branch:** a gnarled, glossy **black-liquorice branch** with two or three candy-floss cobweb wisps comes in from the top right of the frame (behind the collection step, never covering it), its tip reaching just above the bat's spot, low enough that the bat hanging from it stays in the same framing as the sitting bat (hanging, its head ends a little above the table). The branch bends a little and springs back when the bat lands on it or swings.
- **Moving around:** on the table it moves only with **little squishy hops**, wings half open for balance, never a walk cycle. Off the table it flies with flaps (see Special trick). It always comes back to its spot.
- **Idle life (this monster):** besides the base idle life, it twitches its ears one at a time, stretches one wing out and folds it back, scratches behind an ear with a foot, yawns (the fang shows), and every so often looks up at the branch longingly. Hanging, it sways gently and turns its head to follow the pointer upside down. After about 20 seconds without input it flies up to the branch, hangs and **wraps itself in its wings like a little burrito** (a cocoon of glowing violet membrane with one eye peeking out, then closed), breathing slowly, swaying a tiny bit. Any touch wakes it: the wings pop open with a stretch and a squeak.
- **Mood in the ears:** happy = ears up and perky; curious = ears turning separately; grumpy = ears flat back, wings wrapped tight with arms crossed; scared (after a drop) = wings wrapped over its face for a second, peeking out.
- **The collection** (4 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.
  - **Skeleton** (#3): an almost water-clear jelly figure sitting with its legs out, white candy bones visible inside (a round skull with the eyes in its sockets, a ribcage). Its trick: its bones rattle loose inside the jelly and click back into place one by one, skull last.
  - **Black cat** (#4): a glossy near-black cherry jelly kitten sitting upright, tail curled round its paws, glowing green eyes, its outline and ears glowing ruby, a few tiny star sparkles drifting inside it. Its trick: it crouches, wiggles its butt and does a tiny pounce on the spot, landing with a squash and a "mew".
- **Flavours** (round swatches): **Grape** (default: plum body, amethyst glow, lavender face), **Blackcurrant** (near-black purple jelly, magenta glow), **Blueberry** (deep indigo jelly, cornflower glow), **Green Grape** (clear lime-green jelly, bright chartreuse glow), **Moonlight** (milky pearl-white jelly, pale lilac glow). Every flavour keeps the pink inner ears, snout and cheeks, and the juice inside is always a lighter tone of the body colour.

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

- **Hang upside down:** carry it up to the branch with Grab (or tap the branch, press **Hang** or `H`): its feet catch the branch tip, it **flips upside down** with a little somersault and hangs. Now gravity works the other way: the soft body really sags under its own weight (blend the rest shape toward a drooped hanging shape and let gravity do the rest), so it **droops into a fat jelly drop**, the head round and heavy at the bottom, the ears hanging down, the cheeks sagging, the wings folding around it upside down, and the **juice inside pours slowly down into its head** (see The monster). It smiles: this is where it is happiest. Tap the branch, press Hang again or pull it off with Grab to let go: it drops, flips upright in the air and lands on its feet with a ring-down, the juice pouring back down.
- **Swing:** hanging, poke it from the side, or flick it with Grab: it **swings** from the branch like a heavy jelly pendulum, the body lagging behind the feet and stretching at the bottom of each swing, the head and ears trailing, a tiny happy "wheee" at the high points, the branch bobbing. The swing dies down slowly over 6 to 8 seconds, each pass a little smaller, the jelly wobbling at each turnaround, until it hangs still. Pokes in time with the swing push it higher (never over the branch, never out of the frame).
- **Bungee:** hanging, pull it down with Stretch (by the head or the body): it stretches long like a **drip of honey**, thinning near the feet and bulging at the bottom, the juice pooling in the stretched drop. Let go: it **bungees back up**, overshoots past the branch in a squashed blob, falls back, and bounces three or four times with shrinking stretches before swinging out. Pulled sideways, it bungees into a swing. This must be the most satisfying thing in the toy.
- **Flap:** tapping a wing (any tool but Grab) makes it **flap** once: the wing unfolds, the membrane ripples like wet silk, the body squashes on the downstroke and stretches on the upstroke, a puff of air stirs the candle flames and the fog, and it hops a little way up and settles. Three quick wing taps, the **Loop** button or `L`: it takes off.
- **The loop (the big moment):** it flaps off its spot (or drops off the branch), climbs up and out towards the window and flies **one big vertical loop that crosses right in front of the moon** as seen from the default camera: wings spread wide, the membranes blazing violet with the moon behind them, the body stretching along the path at the bottom of the loop and squashing round at the top, the juice streaming around inside it with the turn, ears trailing, a faint sparkle of violet dust left behind it that fades in a second. At the top it is upside down and grins. It ends by grabbing the branch and swinging, or, if Hang is off, by landing on its spot with a deep squash and a ring-down. The loop always stays inside the frame and never touches the collection. The collection cheers. Works with Slow motion: in slow motion the wing glow and the juice must look like a film.
- **The moth** (tool `4`): a small glowing **moth** made of soft warm light (a fuzzy pale-gold body, two pairs of round wings that flutter, its own little point light) flies where the pointer is, in the air in front of the window and around the bat, with a little lag and a fluttery wobble, always inside the frame. The bat **hunts** it:
  - its ears swivel to track it separately, its head follows, it **pings** it with sonar (see Echo) every second or so, ears twitching as each echo comes back;
  - when the moth stays still for about 0.5 s within reach, it launches and **swoops**: wings wide, a quick curve through the air;
  - it **catches** the moth by wrapping it in both wings in a hug: the moth's light is now **inside its jelly**, shining through the body and the membranes, so the whole bat **lights up from within like a paper lantern**, the juice glowing gold where the light passes. It flutters back to its spot (or the branch) holding it, looks down at its glowing belly happily for two seconds, then opens its wings and **lets the moth go**, and the moth flutters back to the pointer. Never eats it;
  - a moth moved fast makes it chase in a flurry of flaps; a moth over the collection or out of reach makes it hang or sit and stare, ears drooping, with a sad little "eep";
  - switching to another tool: the moth flutters off out of the window and the bat waves.
- **Auto moth** (switch, `A`): the moth flies by itself in an endless, varied, calm pattern (drifting circles, pauses near the candles, a dash past the moon, a rest on the branch now and then), so you can just watch it hunt, swoop, glow and let go forever, hanging and swinging in between. Works with Slow motion. This is the screensaver of the toy.
- **Echo** (button, `E`, or tap its snout): it opens its mouth and squeaks, and a **sonar ring** goes out from its mouth: a thin glowing violet shell expanding through the room at about one body length per 0.3 s, **tracing the edges** of everything it passes (the table, the candles, the branch, the collection, the candy, the window frame) with a soft violet rim that fades behind it, and the bat's ears twitch as each **echo** comes back. Do it in the scene shading: the world-space distance from the emitter compared with the ring radius gives a thin band, multiplied by an edge term (Fresnel or a depth/normal edge), so it costs one uniform per active ring (up to four rings at once). Each figurine the ring touches blinks and gives a tiny squeak.
- **Night** (switch, `N`): the candles blow out one by one with little smoke curls; the room goes dark blue, lit only by the moon from behind (so the bat becomes a glowing violet silhouette) and by the sonar: in the dark, each Echo is the only way to see the room, the rings drawing it in violet light for a moment. The moth, when out, glows brighter in the dark. Turning Night off relights the candles one by one.
- **Fruit bat:** a small bunch of **jelly grapes** (five glossy grapes, one per flavour colour) hangs on a little stem on the table front right. Tap a grape (or drag one with Grab onto the bat): it hops over, hugs the grape in its wings, nibbles with little munches, and the grape's juice flows into it as a **new coloured ribbon swirling through its body**, mixing with the old juice, while the whole jelly blends to that grape's flavour over about 3 seconds. A new grape grows back on the stem a moment later. Feeding it two flavours quickly leaves a two-tone marbled swirl for a while before it mixes.
- **Stretch a wing:** with Stretch, pull a wing tip: the wing unfolds and the membrane stretches wide and thin, and as it thins it **glows brighter** (less jelly, more light through it). Let go: it snaps back and folds with a soft wet "fwap" and a ripple running through the membrane.
- **Shake:** the base Shake, plus while hanging the branch shakes too: it swings wildly, holds on with both feet, wings flapping for balance, the juice sloshing from end to end, then hangs still with dizzy eyes for a second.
- **Test hook:** `flap(side)` (`'left'` or `'right'`), `loop()`, `hang(on)`, `swing(strength)`, `bungee(pull)` (pull 0 to 1, then release), `moth(x, y)` (put the moth at canvas pixel `x, y`; `moth(null)` sends it away), `autoMoth(on)`, `catchMoth()`, `echo()`, `night(on)`, `feed(i)` (grape `i`, 0 to 4), `wingStretch(side, amount)`, `cocoon()`, `figurine(i)` (tap collection figurine `i`, 0 = oldest), `pose()`, `tickle()`; `state()` adds `hanging`, `swing` (current swing angle in degrees), `airborne`, `looping`, `wings` (0 = folded, 1 = fully spread), `juice` (0 = settled, 1 = sloshing hard), `moth` (moth out), `autoMoth`, `holdingMoth`, `rings` (active sonar rings), `night`, `cocoon`, `posing`, `dreaming` and `mood`.

## Secret (this monster)

- **Sweet dreams:** when it is asleep in its wing cocoon on the branch, rock it gently: three soft pokes in time with its swing (small swings, not big ones). It smiles in its sleep and a little **dream bubble** floats up from it: inside, a tiny jelly version of itself wearing a black cape with a high collar, flapping proudly and going "Bleh!" with its one fang, the bubble wobbling like a soap bubble. After about 3 seconds the bubble pops into violet sparkles and it snuggles deeper into its wings. A small badge: "It dreams of fangs." 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: soft wet **wing flaps** (a short filtered-noise "fwump" with a little sub thump on the downstroke), a whoosh rising and falling through the loop (the most important sound with the echo: airy, smooth, a little woosh at the top), the **sonar ping** (a pure, short sine chirp sweeping up, on a pentatonic scale: higher the higher the bat is in the room) with its **echoes**: softer, filtered copies coming back from the things the ring touches, delayed by their distance, so a few pings in a row make a little chime melody; a gentle creak of the branch, a stretchy wet groan and a deep wet twang for the bungee (never a cartoon boing), tiny "wheee" squeaks at the top of a swing, a happy chirp when it hangs, a sad "eep" for an unreachable moth, the moth's soft fluttery hum, a warm hum while it holds the glowing moth, little munches and a syrupy gurgle as grape juice swirls in, small "pff" puffs as the candles blow out, a giggle-squeak for Tickle, a tiny snore (little squeaky breaths) in the cocoon, a dreamy music-box arpeggio and a tiny "bleh!" for the dream bubble, a yawn, 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 5 / 15`, a large italic serif heading on two lines: *Jelly* / *Bat.*, and caption lines "Flip it." / "Swing it." / "Watch it fly."

**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 "Bat"**, 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, `4` Moth), the special-trick controls as a big accent button (**Loop**) and a switch (**Auto moth**), **Hang**, **Echo**, **Shake**, **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 **Night**, **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 wing to flap. Tap its nose to ping.", "Grab and pull. Pull it down when it hangs.", "Pick it up. Lift it to the branch.", "Move the moth. Hold still and watch.").

**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 `4` tools, `L` Loop, `H` Hang, `E` Echo, `A` Auto moth, `N` Night, `S` Shake, `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, the fixed default camera.
- **Never create an `AudioContext`**, play nothing.
- Deterministic, no randomness; 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.6 s:** the bat drops onto its spot, wings folded, lands with a deep squash and rings out, the juice sloshing inside.
  - **0.7 to 0.9 s:** an invisible finger pokes its cheek: it flinches, eyes squeezed shut, and shakes it off.
  - **1.0 to 1.3 s:** it unfolds its wings and flaps twice, the membranes rippling, and lifts off.
  - **1.3 to 2.5 s:** **the loop**: up and out, one big loop right across the moon, wings spread wide and blazing violet against it, the juice streaming around inside, upside down and grinning at the top (around 1.9 s). The most striking moment.
  - **2.5 to 3.0 s:** it catches the branch, hangs upside down, droops into a fat jelly drop and swings once, the juice pouring into its head.
  - **3.0 to 3.5 s:** it lets go, flips upright in the air and lands on its spot with a squash and a ring-down.
  - **3.5 to 4.0 s:** it folds its wings like a cape and settles, ready for the loop to start again.
- Start moving within 1 s. It is recorded in a slow software renderer: **the violet jelly, the glowing wing membranes against the moon, the juice inside and the loop 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, wings spread in front of the moon, at the top of the loop, hanging as a jelly drop, mid-bungee, holding the glowing moth, in Night with a sonar ring, in the cocoon and in every flavour. Each must look like a premium photo of a glowing gummy candy character: cute, glossy, translucent, backlit, with readable eyes, the collection reading as small background figurines that never steal the eye. The wings must read as **glowing stained-glass jelly**, never as grey paper, plastic or a flat cutout, and the juice inside as liquid moving inside the body, never a pattern on the surface. 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 chubby little bat with big shiny eyes and big ears; nothing sharp or scary, no claws, no teeth but the one tiny fang, no pointy wing tips.
- Poke every part 50 times fast, stretch from every side as far as possible (both wings and the bungee too), grab and toss it, shake it ten times in a row on the table and on the branch, swing it as high as it goes, spam Loop and flaps, move the moth wildly for a minute, feed every grape in a row, switch flavours mid-loop, toggle Night and Hang mid-swing, leave Auto moth on for five minutes: never an inverted or exploded body, jitter at rest, tangled or torn wings, juice leaking outside the body, the bat stuck on the branch or off its spot, the bat leaving the frame or landing on the collection, a part through the table or the branch, or a crash. After every test it ends up back in its spot (or hanging from the branch), bat-shaped and settled.
- Every tool, button, switch, slider and key; hanging and letting go; the swing dying down; the bungee; the loop from the table and from the branch; the moth hunt, catch, lantern glow and release; Echo with several rings at once; Night; feeding grapes; the wing stretch; the cocoon and waking it; tapping each figurine; Pose several times in a row; Tickle; pause and resume; Slow motion; Cinema; resizing to phone width with touch.
- **The fun test:** flip, swing, bungee, flap, ping and feed it for a minute. Every action gets its own visible reaction and sound, every swing and wobble is worth watching to the end, and it never feels like a static model being deformed. **The hypnosis test:** watch Auto moth for a minute and flip it up and down ten times watching the juice pour: you should not want to stop.
- 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=1.9` freezes at the top of the loop, wings spread and glowing in front of the moon.
- 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. The jelly feel comes first: it should be the bat people keep flipping upside down just to watch the juice pour, and the loop across the moon they replay in slow motion.