Egg Yolk

The prompt

Build **"Egg Yolk"**: a real-time, interactive 3D sunny-side-up egg on a plate that people can **poke**, **pierce** and **tilt**, with a yolk that wobbles under its skin and then **bursts in slow motion and runs** across the white and the plate, plus **synthesised sound effects**, 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, textures or audio files. Generate everything procedurally in code (sound included, see Sound). 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 perfect fried egg on a plain off-white ceramic plate, photographed like a food ad: glossy, warm, almost too good to poke.

- **Yolk:** a domed, glossy, deep orange-gold yolk sitting slightly off-centre, held by a thin, taut, slightly translucent **membrane**. It has a soft specular highlight, a faint darker rim where it meets the white, and a subtle colour gradient (paler at the top, richer at the base).
- **White:** an irregular, organic, procedurally shaped egg white with a thicker, softly set inner ring around the yolk, a thinner outer area, and **crispy golden-brown lacy edges** with tiny bubbles. Slightly translucent at the thin edges, opaque where it's thick.
- **Plate:** a wide, shallow, glossy ceramic plate with a rim, on a light linen or wood surface (procedural). The plate catches reflections and a soft shadow.
- Seasoning (optional): a few flecks of black pepper and flaky salt crystals sitting on the white, bound to its surface.
- Proportions: the egg reads instantly as a fried egg from the default view, with the yolk the clear focal point.

## Physics

### Yolk (intact)
- The intact yolk is a **pressurised soft shell**: a surface mesh (a subdivided hemisphere/sphere cap, about 1,500 to 4,000 vertices) with membrane tension, internal pressure / volume preservation and damping, solved with **XPBD** or similar. Its base is softly anchored to the white.
- It **wobbles** like a water balloon: pokes dent it and the dent rings out in several decreasing cycles. Pressing harder bulges the rest of the yolk outward (volume is conserved).
- **Membrane strain is tracked.** Gentle pokes are safe; a sharp, deep or fast press, or any Pierce, ruptures it.

### Burst
- On rupture, the membrane **tears open from the contact point** and the tear grows along the stressed direction, the dome **sags and deflates** as liquid escapes, and the torn membrane edges curl and collapse into a wrinkled skin that stays on the white.
- The escaping yolk is a **viscous liquid**: simulate it with **SPH or a similar particle fluid** (about 3,000 to 6,000 particles, preallocated) or an equivalent method, with high viscosity, surface tension and slight stickiness. It first **wells up and spills over** the tear, then **runs down the slope of the white**, pools in dips, flows off the edge of the white onto the plate and **slows to a thick, glossy puddle**.
- The liquid flows **over the white's actual deformed surface** and the plate's curve, follows gravity, and respects the plate rim (it can never pass through the white, the plate or the rim).
- **Volume is conserved:** the deflated yolk plus all the liquid stays the same amount.

### White
- The set white is a **firm, static surface** (it moves only with the plate when tilted): no soft body. The liquid flows over this fixed shape, which keeps the flow clean and leak-free. A poke on the white just leaves a brief, shallow visual dimple.

### Stability
- **Fixed simulation timestep** with bounded substeps, decoupled from frame rate. On a slow frame, drop simulation time rather than exploding.
- No explosions, no inverted triangles, no jitter at rest, no particles leaking through any surface, and no liquid creeping uphill. Everything comes to rest within a few seconds of the last input.

## Actions

A tool picker for **Poke**, **Pierce** and **Tilt**. Dragging the empty background orbits within limits. The default tool is Poke.

### Poke
- A tap dents the yolk (or the white), which rebounds with a wobble spreading outward. Press and hold to push deeper: the yolk bulges and the membrane visibly thins and shines. **Push too hard or too fast and it bursts.**

### Pierce
- A tap with the Pierce tool (drawn as a fork tine or knife tip at the cursor) **instantly pierces** the yolk at that point. A drag cuts a line across it, opening a longer tear so it spills faster. On the white, pierce leaves a small mark.

### Tilt
- Dragging tilts the **whole plate** (within about ±20°), with a soft spring back to level on release. The intact yolk and white slide and wobble a little; burst yolk **flows downhill** and sloshes, then settles.

### Burst slow-mo
- The moment the membrane gives, time **drops to about 0.25× for about 0.6 s** while the camera eases in slightly towards the tear, then both glide back to normal as the yolk spills. It's on by default, with a switch to turn it off. It triggers once per egg.

### Heat
- The egg is fresh off the pan: **fine sizzle bubbles** pop along the crispy edges and a few soft, faint **steam wisps** rise and fade (cheap billboards or a small particle set, preallocated). They calm down over about 20 s, and New egg brings them back.

### Reset / New egg
- **New egg** gently clears the plate (the liquid fades out) and **cracks a fresh egg** onto it: the white spreads and sets, then the yolk settles in with a wobble.

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

## Sound

Every action has a **synthesised sound effect**, generated live with the **Web Audio API** (oscillators, filtered noise, envelopes). **No audio files, no samples, no external requests.**

- **Poke:** a soft, wet "blup", pitched by how deep the poke is.
- **Membrane strain:** a faint rising creak as the yolk is pushed close to bursting.
- **Burst:** a satisfying soft "plip" (a short transient with a filtered pop) followed by a gentle wet glug as the yolk wells up.
- **Flowing liquid:** quiet, viscous gloop that follows flow speed and fades as it settles.
- **Pierce:** a tiny ceramic "tink" when a tine touches the plate, plus the burst.
- **Tilt:** a faint ceramic scrape plus liquid slosh.
- **Burst slow-mo:** the burst sound stretches and drops in pitch with the slow-down, then snaps back.
- **Heat:** a soft sizzle crackle that fades as the egg cools.
- **New egg:** an eggshell crack and a sizzle that fades as the white sets.
- Small random variations so repeated sounds never feel identical.

Rules:
- Create the `AudioContext` only after the first user gesture. Resume a `suspended` context on interaction, and wrap every audio call in `try/catch` so a failure can never break the toy.
- A **mute button** with a speaker icon, **sound on by default**, and the `M` key toggles it. Master gain plus a limiter / compressor, no clipping.
- Limit simultaneous voices (about 12).

## Camera and keys

- **Camera:** 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 about 40° above, with the yolk large and slightly forward of centre so the burst and the flow down the white are clearly visible.
- **Keyboard:** `1` Poke, `2` Pierce, `3` Tilt, `N` new egg, `M` mute, Space pauses or resumes, R resets.

## Rendering (WebGPU and WGSL)

Believable food materials. Avoid both "orange plastic ball" and "flat cartoon".

- **Intact yolk:** subsurface scattering (a warm glow where light passes through the dome's edges), a thin glossy membrane with a sharp clearcoat highlight, and Fresnel.
- **Liquid yolk:** rendered as a **smooth continuous surface** (for example screen-space fluid rendering: particle depth, bilateral smoothing, normals from depth, thickness-based absorption), never as visible dots. Glossy, rich, slightly translucent where thin, deeper orange where it pools, with crisp highlights that move as it flows.
- **White:** soft subsurface translucency at thin edges, opaque milky white where thick, with crispy edges that are darker, rougher and lacy (procedural noise).
- **Plate:** glossy ceramic with soft reflections; the liquid and egg cast soft contact shadows on it.
- A warm, bright food-photography studio: a big soft key light from the back-left, a subtle fill, tone mapping so highlights never blow out.
- Compute shaders are welcome (for the solver, SPH, neighbour grids, normals), but correctness and stability come first.
- Build pipelines once at start-up and preallocate buffers for every cap (particles, steam, sizzle). 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

An editorial page around the toy (generous whitespace, small caps labels, an italic serif display face for the heading) with a modern control card on the right, one restrained accent colour (the yolk's orange-gold), and no decorative gradients or glassmorphism. The egg 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 004`
- A large italic serif heading on two lines: *Egg* / *Yolk.*
- Caption lines: "Sunny side up." / "Perfectly runny." / "Go on, poke it."

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

**Right panel: control card "Breakfast"**

Style it as a **floating control card**, not an editorial sidebar: a rounded card (about 20px corners) in an off-white slightly lighter than the page, with a soft drop shadow and no hairline borders, about 240px wide, in the plain system sans-serif font (no serif, no small caps, no uppercase letter-spacing inside the card). A bold sentence-case card title, bold sentence-case section labels, presets and tools as rounded pills or tiles (the active preset filled dark with white text, the active tool tinted and ringed in the accent colour), chunky sliders (a 6px rounded track filled with the accent up to the value and a round white thumb ringed in the accent), live values in small rounded monospace chips, secondary buttons as rounded light-grey chips without borders, toggles as on/off switches (label on the left, switch on the right), and **Pause / Resume** as a solid dark full-width pill. On narrow screens the same card becomes the bottom sheet with rounded top corners.

- The tool picker: **Poke**, **Pierce**, **Tilt**, each with a small drawn icon and its key number.
- **Doneness:** three presets that change yolk viscosity, membrane strength and colour together:
  - **Runny:** thin, fast-flowing, bright yolk, fragile membrane
  - **Jammy:** thick, slow, deep orange, flows reluctantly
  - **Duck egg:** larger, richer, almost red-orange yolk, tough membrane
- **Runniness** slider with its live value (viscosity).
- **Membrane** slider with its live value (how easily it bursts).
- **Sound** slider (master volume) with its live value.
- Buttons: **New egg**, **Reset**, **Mute**.
- Switches: **Burst slow-mo** (on by default), **Slow motion** (the simulation at ¼ speed) and **X-ray** (yolk mesh wireframe and fluid particles as dots).
- A **Pause / Resume** button.

**Bottom left**
- A one-line hint that changes with the tool:
  - Poke: "Tap gently. Press too hard and it bursts."
  - Pierce: "Tap to pierce. Drag to slice it open."
  - Tilt: "Drag to tilt the plate."
- Live readouts computed from the simulation: **yolk intact** (% of volume still inside the membrane), **spread** (cm², illustrative area of liquid on the plate), **flow** (illustrative speed) and **eggs** (count). Values update smoothly, not every frame.

**Bottom right:** a collapsible **"How it runs"** section, 4 to 6 plain-English lines explaining the membrane and pressure, how bursting is decided, the particle fluid and viscosity, and how the liquid surface is rendered.

Respect `prefers-reduced-motion`: soften UI transitions and start the scene at rest. 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, tool cursors). Only the egg, plate and background are visible.
- **Sound is completely off in demo mode:** never create an `AudioContext`, play nothing.
- Keep the default camera fixed, with the plate filling about 70 to 80% of a square frame and the yolk clearly the focus.
- A deterministic loop that restarts every 4.0 s of real time from the identical state:
  - **0.0 to 0.6 s:** the yolk drops onto the set white with a soft plop and wobbles.
  - **0.6 to 1.3 s:** an invisible finger pokes it twice gently; it dents and wobbles but holds.
  - **1.3 to 2.0 s:** a third, deeper poke **bursts** it in **burst slow-mo**: the membrane tears open from the contact point and the first wave of yolk wells up, with the camera easing in slightly and back out.
  - **2.0 to 3.4 s:** at normal speed the yolk spills over the tear and **runs down the white** onto the plate, slowing to a glossy pool. Steam wisps rise throughout.
  - **3.4 to 4.0 s:** everything settles; the scene then cleanly restarts (a short soft fade is allowed in the last 0.2 s to hide the cut).
- 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.
- The demo is recorded in a slow software renderer: **the burst and the flow must still read clearly at 15 fps**. If needed, run the demo with fewer particles, but never skip the burst or the flow.
- Start moving within 1 second of the page loading.

## Before you finish

Self-check against this list and fix anything that fails:
- Poke gently, hard, fast and repeatedly in many spots; pierce at the top, the side and the base; slice long tears; tilt the plate in every direction before and after bursting; burst many eggs in a row with burst slow-mo on and off.
- Try every preset, slider and toggle at both extremes, plus New egg many times, Reset, pause and resume, Slow motion, X-ray, keys 1 to 3, N, M, and resizing to phone width.
- The liquid never leaks through the white, the plate or the rim, never flows uphill, never jitters at rest, and volume is conserved. The yolk never explodes or inverts.
- Sound: every action has its effect, nothing plays before the first gesture, mute and volume work, rapid actions never clip or pile up.
- `?demo=1` matches the timeline above, loops cleanly, shows no UI and plays no sound.
- No console or WebGPU validation errors.

Put the quality of the burst and the flow first: the moment the membrane gives and the yolk spills down the white. It should be something people can't stop poking.