PromptFull
Create "Melon Jelly Knife" — a single self-contained HTML file (melon-jelly-knife.html) with an interactive, physically simulated gummy watermelon slice that you can pull like jelly AND cut into pieces with a visible steel knife that animates every cut.

── Platform ──
- WebGPU + WGSL only, all JS/CSS inline, no external libraries. ES module in one <script type="module">.
- If navigator.gpu / adapter is missing, show an elegant editorial fallback card ("This specimen needs WebGPU.") with a specific explanation — never fake it with a lesser renderer. Disable the controls in that state.
- Recover from device loss (rebuild the renderer up to twice), surface WGSL compile errors via getCompilationInfo.
- Fixed 60 Hz simulation step with an accumulator (max 3 steps/frame), ¼-speed toggle, pause (Space), keyboard: N nudge, R reset, K toggle knife, H hand.

── Page design (editorial "material study") ──
- Warm paper studio backdrop #E2DFDA; the 3D floor is an infinite studio sweep that tones to exactly this colour.
- Top-left masthead: small caps label "MATERIAL STUDIES / NO. 009", huge italic serif title "Melon / Jelly." (second line indented), and a 3-line serif tagline.
- Top-right status pill "WEBGPU · LIVE / PAUSED / UNAVAILABLE".
- Right panel (thin 1px borders, translucent paper): Tool (Hand | Knife segmented buttons with small line icons), Variety swatches (Crimson, Golden, Rosé — each recolours flesh, rind, seeds, shadow tint and the UI accent), sliders Firmness (trembling ↔ set) and Internal damping (lively ↔ syrupy), buttons "Give it a nudge", Reset, Pause, checkboxes ¼ speed and Show mesh.
- Bottom-left: tool hint in italic serif, live readouts row (Mass ≈ g, Volume % of rest, Kinetic µJ, Pieces) with an "illustrative scale" footnote (1 sim unit ≈ 3.5 cm, gummy 1.3 g/cm³).
- Bottom-right collapsible "Inside the experiment" notes explaining the physics, rendering and the cutting method in plain prose.
- A dashed SVG guide line while drawing a knife stroke; small toast messages ("Missed — draw the blade across the slice.", "Too thin to cut there.", "That's plenty of pieces.").
- The camera frames the slice inside the free area between masthead, panel and readouts (lens shift), orbits on empty-space drag, zooms on wheel, double-click resets view, gently follows the slice if it is thrown far.
- Responsive: under ~860px the layout stacks (masthead, canvas ~58vh, hint, panel) with 44px+ touch targets; prefers-reduced-motion softens the intro and damping.

── The slice ──
- A thick (T ≈ 0.58) wedge of watermelon: sector with ~32° half-angle, inner radius ~1.62, all corners rounded in plane (ρ = 0.17) and top/bottom edges bevelled (~0.13).
- Layers by depth from the rind: dark green skin with irregular darker stripes, a pale cream-green band, then translucent red flesh; black teardrop seeds arranged in arcs and a few tiny air bubbles suspended inside.
- Rendered as translucent candy: screen-space refraction of the scene behind, per-pixel thickness from a back-face depth pass, Beer–Lambert absorption per refracted tap (capped by back thickness so seeds don't halo), jittered blur, subsurface-like scatter and glow toward the key light, Fresnel + GGX highlights, soft studio environment (procedural softboxes).
- Floor: PCSS-lite soft shadow from a key light behind-left-above (shadow tinted by the flesh colour), contact AO from a top-down height map. MSAA ×4, HDR, PBR-Neutral tone mapping, sRGB, dither.

── Physics (feels like real gummy candy) ──
- Tetrahedral soft body (Delaunay of a jittered lattice inside the shape), XPBD with small steps (~10 substeps, 1 iteration each):
  • co-rotational per-tet shape matching (mass-weighted covariance, Müller quaternion rotation extraction, uniform stiffness fraction) — no inversions, no ghost torque;
  • per-tet volume constraints (near-incompressible);
  • edge relative-velocity damping controlled by the damping slider; firmness maps to shape compliance on a log scale;
  • floor contact with static/kinetic friction, light air drag, settle-damping when nearly at rest, speed cap, NaN guard with gentle reset.
- Hand tool: grab anywhere (ray pick on the skinned surface, forgiving screen-space fallback), soft patch attachment (radius ~0.4) that follows the pointer on a camera-facing plane, reach limit, never pushed into the floor; wheel or a second finger twists the held patch. Nudge = a playful impulse. Reset drops the whole slice again.
- Render mesh is skinned to the tets by barycentric embedding; normals recomputed each frame.

── Cutting into pieces ──
- The world is a list of pieces. Each piece is a convex polygon I in the slice's rest plane; its outline is I dilated by a disk of radius ρ (rounded corners), extruded to the slice thickness with the same bevels, rind layers, seeds and bubbles (seeds/bubbles kept only where they fit inside).
- A cut maps a world plane into each crossed piece's rest frame (best-fit rigid frame of the deformed piece), intersects it with the mid-plane → a straight line; clip I into two halves offset by ±ρ so both rebuilt outlines meet exactly at the cut; reject slivers ("too thin").
- All pieces are concatenated into ONE simulation (component id per particle) and ONE render mesh; each piece is its own soft body you can grab, stretch and cut again; pieces collide with each other (AABB-pruned particle–particle pushes, a few mm per pass so fresh faces ease apart instead of popping). Max 14 pieces. Built meshes are cached per piece so Reset is instant.
- State transfer on every rebuild: new rest particles are embedded in the old tets and take over interpolated positions and velocities.

── The visible knife (the star of this version) ──
- A small nakiri-style vegetable knife modelled procedurally: rectangular blade (length ~1.72, height ~0.63 — taller than the slice), straight edge with a slight lift and rounded nose at the front, thin ground bevel along the edge, flat grind to a ~0.03 spine, sharp creases (duplicated vertices), polished steel bolster, oval walnut handle that swells slightly with three steel rivets and flat end caps. Local frame: +x toward the tip, edge on y=0.
- Materials in the scene shader: brushed steel with a product-shot gradient (dark board reflected low, bright sweep high), softbox streaks, satin lighter bevel, mirror bolster; walnut with straight grain, satin oil sheen, rivets. Posed rigidly on the CPU each frame.
- The knife is drawn in the scene pass (behind the jelly surface), so the part buried in the jelly is seen refracted through it; it casts a shadow but stays out of the AO height map.
- Behaviour:
  • Hover (knife tool): the knife floats ~0.42 above the slice with its edge exactly under the cursor, blade side-on to the camera, slightly rolled toward the viewer; it drops in from above when the tool is selected; hidden in hand mode.
  • While drawing: it lines up along the stroke, edge just above the jelly, handle always on the left (canonical direction relative to camera right).
  • On release: the stroke read on the surface it was drawn over defines a VERTICAL blade plane; the split is planned and the new pieces + new soft body are pre-built immediately (so the swap later costs only ~10 ms and there is no hitch mid-animation).
  • Choreography (~1.1 s, respects ¼ speed and pause): align (0.16 s) → press: the edge sinks ~0.13 below the top and a physical collider pushes the jelly into a rounded groove under it — it squashes before it gives (to 0.42 s) → break-through: the new world is swapped in, the blade continues to the board while a wedge collider eases the two new faces apart (limited to a few mm per substep, gap growing with depth) and holds the cut lips down at the break-through depth → short hold → lift back to hover, releasing the lips so they spring back with a jiggle.
  • Misses show a toast and the knife stays put; new strokes are ignored while a cut is animating; Reset cancels it.

── Quality bar ──
- Smooth 60 fps on a mid-range laptop GPU; no allocations in the frame loop except on cuts.
- Deterministic test hook on window (e.g. __melon with sim, camera, pick, planCut, startCut, advance(seconds), per-piece stats) so the animation can be stepped and screenshotted.
- Polished, calm, museum-like typography; everything readable on phone and desktop.

Make it yours. Swap the subject ("gummy watermelon slice" and the Crimson, Golden, and Rosé varieties) for another jelly food, and rewrite the page labels ("MATERIAL STUDIES / NO. 009", "Melon / Jelly.") to match. Keep the Platform section, which holds it to WebGPU and a fixed 60 Hz simulation step.

Make it hereFree runs soon

Jelly watermelon slice you can cut

Melon Jelly Knife: a gummy watermelon wedge simulated as a soft body that stretches and wobbles when pulled, and a steel knife that cuts it into pieces that keep jiggling, on a page styled as a material study. WebGPU only, about $12.48 in API costs.

“Now I can cut it into pieces, and each one keeps wobbling, stretching, and bouncing right in the browser”

You'll need

  • A browser with WebGPU (the prompt refuses to fall back to another renderer)
How it was made

A follow-up to the creator's earlier jelly watermelon, which he made with Opus 5.5 and GPT-6 Astra side by side; this time he asked Opus 5.5 to add a knife. The published prompt is a complete standalone spec for the knife version. Effort was high, per a reply.

Estimated API cost: $4.50 for the watermelon and $7.98 for the knife and slicing, $12.48 in all.

Claude Opus 5.5 · WebGPU · WGSL

Source and credit

X · Sep 27, 2026 · 650 likes · 629k views · 42 comments

Authorship not stated by the source

Published instructions: Reply on X

Reply with the prompt

The earlier jelly watermelon, Opus 5.5 against GPT-6 Astra

Look notesby Reference

A glossy gummy watermelon wedge on a plain studio backdrop, cut by a large steel cleaver into jiggling cubes that are then switched to a golden variety.

Color
Warm grey paper backdrop, translucent watermelon red with cream rind and dark green skin, a steel-grey blade with a black handle, and an orange-and-green variant at the end.
Type
A large italic serif title ("Melon Jelly.") in the top left with small serif text below; the creator's overlay at top center reads "Claude Opus 5.5" over a green "4.5$+7.98$=12.48$" bar.
Framing
16:9 with the slice centered in open space, a slim control panel on the right, and readouts along the bottom left.
Structure
The whole wedge with the knife hovering, the first cut, more cuts into cubes, the knife lifting away, the pieces tossed and scattered, then every piece recolored golden.

Remakes

Nobody has shared a remake of this one yet. Made your own version? Send it for review and credit.

More like this

Game

Gummy octopus you can grab and stretch

Opus 5.5 · WebGPU

Game

Rubber bands bursting a 3D watermelon

Sonnet 5.5 · Three.js

Game

Fireflies in a luminous field

Nicky Case

Game

Gummy Grove

Scrolltide

Game

Pixel ecosystem in a glass orb

Max Bittker

Game

Real-time coastal shallows in Three.js

Claude Code · Three.js

Game

Ink-like particle flow field

amandaghassaei

Game

Striped vortex flow

amandaghassaei

Game

Modular cliff landscape builder

Oskar Stålberg

Game

A computer built from 277k NAND gates

Opus 5.5

Game

Real-time ocean at sunset and in a storm

Opus 5.5

Game

Game Boy Advance you can play in 3D

Codex · Three.js

Game

Snowbound pixel platformer

Maddy Thorson / Noel Berry

Game

Dragonsweeper’s monster-filled grid

Daniel Benmergui

Game

Lantern-lit floating fantasy village

Mike Fernandez

Game

Low-poly elevated track racing

Kodub

Game

Short trip

Alexander Perrin

Game

Astra's garden

NomnomNami

Game

Pixel dungeon dice encounter

Alarts

Game

First kiss at a spooky soiree

NomnomNami

Game

Sunflower-lined garden defense

Studio11508

Game

Syrup and the ultimate sweet

NomnomNami

Game

A storybook artificer workshop

Pure Jam Games

Game

Isometric brick building sandbox

Oskar Stålberg

Game

Deepest sword cavern scene

Cosmic Adventure Squad

Game

Interstellar connection

Celia

Game

A firelit cabin cooking scene

pomepomelo

Game

Postcard spy fiction

Tributary Games

Game

A playful pastel mountain climb

Cookiecrayon

Game

A ghost in a cat-filled apartment

Team Bean Loop