Building with AI - everything here is vibe-coded
France
- Tweets 1,466
- Following 764
- Followers 2,087
- Likes 500
Pinned Tweet
I think I want to eat Sonnet’s tree 🍊😂
Claude Sonnet 5.5 vs GPT-6.1 Sol
I’m going with Sonnet this time. The mandarins look juicier, the greens feel more natural, and the colors are more realistic overall. And that soft, bouncy wobble when you shake the tree makes me want to poke it
Sol did a pretty good job too, especially for the price. But next to Sonnet, its tree looks more like shiny plastic than jelly
Estimated API cost:
Sonnet - $10.74
Sol - $4.01
Almost 2.7x the price. Would you pay extra for this look? 👀
21
21
291
35,868
My jelly world now has its own island 😂🌴
Claude Opus 5.5 vs ChatGPT-6 Astra
I prefer Opus’s water: the transparency, reflections, and a whole storm from moving the mouse. But Astra feels more like jelly - the edges bend and the whole island wobbles
Estimated API cost:
Opus - $15.54
Astra - $10.51
Would you pay extra for Opus or pick Astra? 👀
12
11
86
3,885
PROMPT:
Build "Island Jelly", an interactive material study: one self-contained HTML file, native WebGPU + WGSL, no libraries, no external requests (no fonts, CDNs or images). It belongs to an editorial series called "MATERIAL STUDIES": quiet paper backdrop, serif italic headline, small uppercase sans labels, a glassy control panel. The subject is a square slice of jelly-sea cut out like a dessert: a small sandy island with three gummy palms in a block of tinted, wobbly "sea jelly". You can stir it with a finger, tip the whole block, and throw coconuts and pebbles into it.
━━━ 1. DELIVERABLE & CONSTRAINTS ━━━
- One HTML file (~120 KB). CSS, JS and WGSL all inline. Plain JS, no build-time dependencies in the output.
- WebGPU only. If navigator.gpu, the adapter or the device is missing, or init throws, show the fallback overlay (copy in §12). Handle device.lost the same way.
- Fixed-step simulation: water at 1/120 s, bodies at 1/240 s, with an accumulator and a max catch-up per frame. Render once per rAF.
- Cap the backbuffer at ~2.4 megapixels (scale DPR down if needed).
- Expose window.__ij, a debug hook with state, counts, water energy and a way to step/drop/reset, for automated tests.
━━━ 2. WORLD & TERRAIN (block-local coordinates, y up, block base at y=0) ━━━
- Square footprint: side 5.2 (HALF = 2.6). Rest water level WL0 = 1.3. Block height 2.0.
- Water grid GN = 168 cells per side (GDX = 5.2/168). Real gravity 9.8 is used for bodies; the water uses a softer effective g (see §3).
- terrainH(x,z), a smooth analytic function:
· Seabed that slopes gently along the diagonal: 0.88 − 0.34·smoothstep(−3.8, 4.2, x+z), plus low-amplitude value noise and fine sand ripples.
· Island centred at (−0.3, −0.5), elliptical radii 1.75 × 1.48 (ix=(x+0.3)/1.75, iz=(z+0.5)/1.48, r=length). Two-tier mound: +0.3·(1−smoothstep(0.1,0.9,r)) + 0.45·(1−smoothstep(0.6,1.2,r)). Result: the island covers ~12% of the square, its top sits ~0.2 above the water, and its beaches are gentle (pebbles must be able to rest on them).
· A submerged sandbar at (1.35, 1.05) where waves visibly slow and steepen.
· Two small reef rocks at (−1.7, 1.35) and (1.75, −1.2).
· Water depth along the four cut walls should be roughly 0.4–0.76, so the sea reads as a thick slab in section.
- Provide terrainNormal (finite differences) and terrainGrid (heights sampled at water-cell centres).
━━━ 3. THE SEA — CPU SHALLOW-WATER JELLY ━━━
Linear shallow-water equations on a staggered grid: heights h at cell centres, u on x-faces, w on z-faces.
- Depth D = level − terrain at each cell; cells with D < 0.012 are dry, and those faces are closed walls. Face depth = min of the two neighbours. Wave speed is √(g·D), so waves slow down over the bar and around the island.
- Effective gravity: g = 3.4·(0.75 + 0.5·firm). This makes the sea slower and springier than water.
- Surface tension: a σ·∂(∇²h) term in the momentum update, with σ = 0.00012·(0.5 + firm). It gives short ripples a jelly snap. Keep σ small; larger values blow up.
- Damping: velocities are multiplied by exp(−(0.18 + 1.6·damp)·dt).
- Tilt forcing: the in-plane component of gravity in the block frame is added as a body force at 60% strength. "Jelly water half-holds its shape": it sloshes to the low side and settles level again.
- Continuity: h −= dt·div(D_face·vel)/dx. Clamp h to [−0.9·D, 0.45].
- Mean-level relaxation: subtract mean·min(1, 1.5·dt) each step. This undoes drift from clamps and finger strokes.
- addVolume(x, z, vol, radius): a Gaussian bump normalised to the exact volume, wet cells only. Use it for splashes, finger dents, floating bodies' displacement and bubble pops.
- stir(x, z, speed): addVolume(x, z, −0.0016·(0.35 + clamp(speed,0,3)), 0.085). A moving dent whose wake makes the waves.
- Tide: setLevel(WL0 + tide), tide in ±0.1. Recompute D and the face depths; the shoreline moves.
- Idle shimmer: occasional tiny ripples so the sea is never dead flat.
- Each frame, pack an rgba32float texture of (h, dh/dx, dh/dz, terrainH) and upload it. In WGSL, sample it bilinearly by hand with textureLoad, because rgba32float is not filterable.
- energy = Σh². It drives the "sea liveliness" meter in the panel.
━━━ 4. THE BLOCK — TILT & JELLY WOBBLE ━━━
- The whole block (sea, sand, palms and bodies inside it) can be tipped about x and z by dragging its side. TILT_MAX = 0.17 rad (~10°).
- While held, a stiff spring follows the pointer target. On release, a spring (K = 70, C = 7.5) returns it to level, with a soft "thunk": squash velocity −= |tilt velocity|·0.5.
- Lift the block so its lowest bottom corner always touches the studio floor.
- Keep a transform M / Minv plus helpers toWorld, toLocal and dirToLocal. Local gravity g_local feeds the water and the bodies.
- Jelly wobble: two damped oscillators.
· Shear: ω = 2π(2 + 2.2·firm), driven by −(block angular acceleration)·0.9.
· Squash: ω = 2π(2.6 + 2.4·firm).
· kick(dir, squash) adds shear velocity d·0.25 and squash velocity squash·0.3. Splashes and heavy landings call it.
· Apply the wobble in the vertex shader (a wob() function) to everything inside the block: shear grows with height above the base, and squash is volume-preserving. The block visibly quivers after a release or a big splash.
━━━ 5. PALMS (procedural gummy palms) ━━━
- Three palms in block-local coords:
· (−0.8, −0.54), height 1.2, 9 fronds
· (0.06, −0.28), height 1.05, 9 fronds
· (−0.32, −1.04), height 0.88, 8 fronds
- Trunks: curved, slightly leaning, with ringed segments (gummy candy look). Fronds: arched pinnate leaves with leaflets on both sides, drooping at the tips.
- Vertex layout, 12 floats: pos3, nrm3, uv2, extra4 = (palm index, bend weight 0 at the base → 1 at the crown, flutter weight, phase).
- Each crown is a 2D bend spring, K = (2π·1.05)², damped. It is driven by:
· tilt gravity (it leans downhill when the block tips)
· block angular acceleration (whips on release)
· a gentle breeze (off under prefers-reduced-motion)
· the user's push (drag a palm; it springs back when released)
- Deform on the GPU from a small per-palm uniform: bend × weight², plus a leaf flutter.
- coconutSpots(): 3 per palm under the crown, which move with the bend.
━━━ 6. BODIES — PEBBLES & COCONUTS (spheres) ━━━
- Kinds:
· pebble: radius ~0.075–0.1, density 2.4, pastel candy colours, sinks
· coconut: radius ~0.11, density 0.62, floats and bobs
- Cap 40 bodies.
- Reset puts 9 coconuts hanging in the crowns. They stay attached and follow the crown bend until picked or knocked off.
- Reset also places 7 pebbles on the beach automatically. Search outward from the island centre along golden-angle rays for a spot just above the waterline (WL0 + 0.05…0.09) with normal.y > 0.93.
- "Drop a pebble" / "Drop a coconut" spawn over random deep water at y = 2.7 (local). Space drops a random one.
- Per-step physics, in the block frame with local gravity:
· Buoyancy = submerged volume (spherical cap vs the sampled surface height) × ρ_water × g, directed along the local water-surface normal, not straight up. Floaters slide downhill on a tilted sea correctly.
· Linear and quadratic drag relative to the local surface flow (u, w); vertical drag damps the bob.
· Displaced volume: each step, push Δ(submerged volume) into the water with addVolume. Bobbing makes rings, and a coconut sitting in a wave rides it.
· Water entry: crater (negative volume) + a ring of bubbles + block.kick() scaled by impact speed and mass.
· Sand contact against terrainH/terrainNormal: restitution, plus Coulomb-like rolling resistance (μ 0.62 pebble, 0.42 coconut). Pebbles on the beach must stay put at rest and only roll on a real tilt.
· Collisions with the four inner walls of the block, the palm trunks (capsules) and each other (sphere pairs).
· Sleep when slow for a while; wake on contact, on waves or on tilt.
· A visual squash spring per body on impacts.
- Picking: grab a body, carry it on a plane under the pointer, throw it with the release velocity (from a smoothed pointer history).
- Tally: Afloat (touching the water, not resting on sand), Sunk (fully underwater on the bottom), Ashore (on dry sand or in a crown).
━━━ 7. BUBBLES ━━━
- Up to 260 rising bubbles (instanced, small refractive spheres). They come from splashes, from sinking pebbles and occasionally from the seabed. They rise with a wobble and pop into a small ripple (addVolume ±) at the surface.
- 80 decor bubbles held still inside the jelly, which give it a "set dessert" look. They move only with the block wobble.
━━━ 8. RENDERING PIPELINE (WebGPU) ━━━
Targets:
- MSAA 4× HDR rgba16float colour
- a second MSAA colour target holding linear view distance (resolved to an r32float or rgba16float)
- depth24plus
Passes, in order:
1. Shadow pass: sun-space orthographic depth map, 2048², extent ±4.1. Contains terrain, soil, palms and bodies. Sample it with 3×3 PCF and a comparison sampler.
2. Caustics pass: a grid with one vertex per water cell. Refract the sun direction through the heightfield normal, intersect with the seabed (terrainH), and splat additively into an rgba16float 768² texture over the footprint. Intensity = area ratio (undisturbed / refracted), computed with dpdx/dpdy of the refracted position in the fragment shader; clamp it.
3. Opaque pass: studio backdrop (paper sweep with a soft vignette), studio floor, terrain, soil cut walls, palms, bodies and the instanced decor bubbles. Write colour and linear distance.
4. Water back pass: back faces only (cull front) of the water surface + water cut walls into an r32float distance target.
5. Water front pass. Copy the opaque scene to a sampled texture first (fsCopy), then draw the surface and walls (front faces):
· Screen-space refraction: offset the scene lookup by the surface normal.
· Beer–Lambert absorption: exp(−σ·path), with path = min(opaque distance, back-face distance) − front distance. When the exit is a far cut wall, add +0.3 to the path so the slab reads deep.
· An in-scatter tint toward the flavour tint.
· Fresnel reflection of a soft studio environment, plus a sun specular.
· Light shafts: 6 caustic samples along the view ray inside the water.
· Thin bright rim lines where the surface meets the cut walls, a meniscus darkening/brightening along that line, and faint vertical corner lines.
6. Composite: a tone shoulder above 0.8, linear→sRGB, and a small blue-noise/hash dither.
Shading notes:
- Terrain (sand): warm sand with fine grain and sand ripples. Wet-sand darkening just below and above the waterline. Caustics on the submerged sand (attenuated by depth). Sun shadow.
- Soil cut walls: candy strata in section (bottom to top): chocolate, caramel, a thin pink shell band, vanilla, then a wet-sand band up to the terrain line. Slightly wavy layer boundaries, and small pebbles pressed into the section.
- Palms: gummy, glossy, a little translucent. Leaf and trunk colours from the flavour palette.
- Bodies: coconuts with a fibrous darker shell and a hint of a lighter cap; pebbles as smooth pastel candy stones.
- Floor shadow of the whole block: for floor points, cast a ray toward the sun and do a ray/AABB test against the block. Tint by the absorption along the path through the water, fleck with caustics, and cap ≤ 1 (the shadow must never be brighter than the lit floor).
- The vertex shaders of everything inside the block apply wob() before the block transform.
━━━ 9. FLAVOURS (palettes) ━━━
Each flavour sets the water absorption σ (rgb), the in-scatter tint, plus sand, strata s0–s4, leaf, trunk, coconut and pebble colours.
- Lagoon (default): σ = [2.3, 0.52, 0.42], tint = [0.03, 0.34, 0.37]. Turquoise sea.
- Raspberry: σ = [0.34, 2.2, 1.25], tint = [0.44, 0.05, 0.17]. Pink-red sea.
- Lime: σ = [1.45, 0.5, 2.6], tint = [0.12, 0.25, 0.035]. Yellow-green sea.
Switching is instant. The swatch buttons show radial-gradient candy dots:
- Lagoon: #b8f4ee → #2bb5b0 → #0d6f73
- Raspberry: #ffc6d6 → #e2477a → #93184a
- Lime: #efffb0 → #a6d33a → #5b8a12
━━━ 10. CAMERA & INTERACTION ━━━
- Orbit camera: start az 0.62, el 0.42, target (0, 0.85, 0), FOV 34°.
- The distance is fitted to the viewport: about 11.2 on desktop; portrait phones fit wider, up to 28. Zoom range 3.5–28.
- On desktop, shift the projection so the block sits in the free space between the masthead (left) and the panel (right).
- Pointer Events with pointer capture. Pinch to zoom, wheel to zoom, right-drag always orbits. "Reset view" eases back.
- Pick priority on pointerdown:
1. a body (beats a palm if within ~0.4 of the hit)
2. a palm (push its crown)
3. water, only if the ray enters through the top surface (stir)
4. the block's side or edge (tilt)
5. empty space (orbit)
- Tilt mapping: screen dx tips the top toward camera-right; dragging down tips the top toward the viewer.
- Stirring: sample the stroke along the pointer path and call stir() at each point with the stroke speed.
- Hover cursors: is-pick (body/palm), is-water (crosshair), is-tilt (move), else grab/grabbing.
- Keyboard: Space drops a random item.
- prefers-reduced-motion: no breeze, no idle shimmer, gentler wobble.
━━━ 11. CONTROLS → SIM ━━━
- Firmness 0–100 (default 50) → firm 0..1. Affects the water g and σ, and the wobble frequencies.
- Wave damping 0–100 (default 30) → damp 0..1.
- Tide −100..100 (default 0) → ±0.1 level. Its output shows centimetres (e.g. "+4 cm").
- Reset: water flat, block level, bodies back to 9 coconuts in the crowns and 7 beach pebbles.
- Pause: freezes the sim and dims the status dot.
- The meter bar width follows the smoothed sea energy.
━━━ 12. PAGE & COPY (use exactly) ━━━
Palette:
- --paper #ece9e3, --ink #241f1d, --ink-2 #5b544e, --ink-3 #958c84, --rule #d5d0c8
- --glass rgba(247,245,241,.86), --accent #178a8a, --button #352b29 (hover #4a3c39)
- Serif stack: Iowan Old Style / Palatino / Georgia. Sans: the system stack. Mono: ui-monospace.
Layout:
- Full-screen canvas (touch-action:none). Overlay layers with pointer-events:none, except the panel and status (pointer-events:auto). Without this the panel won't be clickable.
- Masthead, top-left:
· eyebrow "Material Studies"
· H1 in serif italic, huge (clamp(56px, 8.4vw, 116px)): "Island<br>Jelly."
· a short rule
· caption "A sandbar, three palms and a sea that wobbles back."
- Status pill, top-right: dot + "WebGPU · Live" / "WebGPU · Paused" / "WebGPU · Unavailable" (green / amber / red dot).
- Panel, right, 268px wide, glass with a backdrop blur. Sections:
· "The sea": two dark buttons "Drop a pebble" | "Drop a coconut"; a 2px accent meter; a tally row "Afloat 0 · Sunk 0 · Ashore 0" (numbers in mono).
· "Flavour": three square swatches "Lagoon", "Raspberry", "Lime" (aria-pressed).
· Sliders "Firmness" (50), "Wave damping" (30), "Tide" (0), each with a mono output; thin 1px track, round paper thumb.
· Three outline buttons "Reset" | "Pause" | "Reset view".
- Footer, bottom-left:
· eyebrow "How to play"
· serif italic "Stir the sea. Tip the block. Throw a coconut."
· small line: "Drag across the water to make waves · drag the side of the block to tip it and watch the sea slosh · pick up a coconut or a pebble and throw it · drag empty space or right-drag to orbit · scroll or pinch to zoom"
- Fallback overlay: eyebrow "Material Studies", H2 "Island Jelly.", and the text "This study needs WebGPU, which this browser doesn't seem to offer. Try a recent desktop Chrome or Edge, or Safari 18 or later, with hardware acceleration switched on."
- Canvas aria-label: "A jelly island in a block of sea you can stir, tip and throw things into".
━━━ 13. RESPONSIVE ━━━
- ≤900px: the panel becomes a bottom sheet with a 54px sticky handle bar ("Controls" + grip). It is collapsed by default and opens to ≤62vh. While it is open, hide the caption and the footer.
- Smaller masthead (H1 clamp(40px, 13vw, 58px)); the footer sits above the sheet bar and respects safe-area insets.
- Short landscape phones: hide the caption and the footer, H1 34px.
- Desktop with short height: the panel scrolls; hide the small how-to line.
- The block must be fully framed on every aspect ratio, including tall portrait (use the wider fit distance).
━━━ 14. QUALITY BAR ━━━
- 60 fps on a mid laptop GPU. No NaNs: if the water goes bad, reset it silently.
- Waves must look like jelly: slower than water, with a springy rebound, visibly refracting at the bar and the island, reflecting off the cut walls, and caustics dancing on the sand.
- Tip and release: the sea sloshes to the low side and back, the palms lean and whip, floating coconuts slide downhill, and the whole block quivers and settles. Beach pebbles stay put unless the tilt is real.
- Cut walls read as a dessert cross-section, with a clean bright rim line where the sea meets the glassy wall.
- Coconuts float and bob, pebbles sink with bubbles, and every entry makes a ring of waves.
- Verify with headful Playwright Chromium (xvfb-run, --enable-unsafe-webgpu, SwiftShader is fine):
· it loads with no console errors
· __ij is ready
· stir, tilt, drop and throw all work
· the tally updates
· the flavours switch
· the sliders apply
· pause and reset work
· the mobile sheet opens and closes
· the panel is clickable
· the fallback appears when navigator.gpu is removed
1
2
260
The internet gave this kitten a sword. I gave him jelly physics
Turned the Knight Kitten meme into an interactive jelly toy with ChatGPT-6 Astra
Pull his ears and paws, bend the sword, lift him off the ground, or leave him standing in a storm
One HTML file, native WebGPU, no imported 3D models or external assets
Estimated API cost, including all revisions: $16.26
Still brave. Just a little less structurally sound
12
5
26
1,789
Prompt:
Recreate the “Knight Kitten” meme as an interactive 3D jelly toy in a single self-contained HTML file using native WebGPU.
Use the reference image to capture the kitten’s recognizable appearance: a tiny brown kitten with large, solemn eyes, a pink bow, silver medieval armor, both paws holding an oversized upright sword, and a pale cape blowing in the wind. Place it in a misty grassy field.
Make the kitten look like translucent, glossy jelly, with convincing thickness, refraction, soft shadows, and gentle wobbling.
Interactions:
- Drag and stretch the head, ears, paws, and feet independently.
- Keep every part smoothly connected to the body, even during strong stretching. No gaps or detached joints.
- Let the sword bend elastically when dragged and wobble back when released.
- Give the cape cloth physics so it responds to wind and dragging.
- Add a “Free lift” toggle to pick up the entire kitten and drop it, with gravity, squashing, and bouncing.
- Add Mist, Wind, Rain, and Storm weather modes, including strong gusts and visible rain.
- Include honey, rose, and icy-blue jelly colors, softness and wind controls, pause, and reset.
Support mouse and touch interactions, camera rotation, and zoom. Keep the interface minimal, responsive, and unobtrusive.
Generate all geometry and materials procedurally. No external libraries, imported 3D models, textures, or other assets. Prioritize expressive movement, stable physics, and a polished visual result.
4
322
Vib3Coded retweeted
Decided to take a little break from jelly and ended up brushing a frog 😂🐸
Made this plush toy with Claude Opus 5.5. You can squeeze it, toss it and comb its fur right in the browser on WebGPU
Brush against the grain and the fur darkens like velvet. That detail alone had me hooked
No scan or imported 3D model. A distance-field body, around 250k strands across 40 shells, and real-time soft-body physics
Cost: $11.80. What should I turn into a plush toy next? 👀
14
9
86
3,698
My jelly orchard keeps growing 😂🌳
Claude Sonnet 5.5 vs GPT-6.1 Sol - this time, pomegranates
I’m going with Sonnet again. The tree is fuller, the branches look more natural, and watching those pomegranates burst into little jelly seeds is way too satisfying
Sol made a much simpler tree, and this is already after one revision. The first version barely had any leaves 😂 I’ll drop that version in the comments
Estimated API cost:
Sonnet - $10.82
Sol - $4.73
More than twice the price. Would you pay extra for Sonnet’s version? 👀
I think I want to eat Sonnet’s tree 🍊😂
Claude Sonnet 5.5 vs GPT-6.1 Sol
I’m going with Sonnet this time. The mandarins look juicier, the greens feel more natural, and the colors are more realistic overall. And that soft, bouncy wobble when you shake the tree makes me want to poke it
Sol did a pretty good job too, especially for the price. But next to Sonnet, its tree looks more like shiny plastic than jelly
Estimated API cost:
Sonnet - $10.74
Sol - $4.01
Almost 2.7x the price. Would you pay extra for this look? 👀
17
9
78
5,682
PROMPT:
Build a single self-contained HTML file: an interactive, physically simulated "Pomegranate Jelly" study in genuine WebGPU + WGSL. Vanilla JS only. No libraries, no external requests, no images or fonts fetched. Everything inline.
CONCEPT
A small, low, curved pomegranate tree made entirely of translucent jelly, standing on a glossy pale-amber jelly plinth in a soft studio. 10–14 ruby-jelly pomegranates hang from it. The user shakes, bends and pulls the tree; fruit fall, and only a hard impact splits one open. A split fruit spills about 30 glossy ruby seeds that behave like a real granular material: they bounce, form little piles, and can be raked around with the cursor. Tone: editorial, quiet, tactile. Think "material study", not a game.
RENDERING (real WebGPU, no WebGL fallback)
- Full-viewport canvas, devicePixelRatio capped at 2. Opaque scene pass into rgba16float with 4x MSAA, depth32.
- Translucent leaves use weighted-blended order-independent transparency (accum + revealage targets). Final composite pass does tonemapping (filmic) plus a little dither noise.
- Soft ground shadow: render coloured transmittance of the tree, fruit and leaves projected along the key light into a small texture, blur it with two separable passes, and sample it on the plinth and backdrop. Shadows are tinted, not grey.
- Backdrop is a warm grey-beige vertical gradient. The studio environment is analytic (a softbox, a warm bounce and a cool fill) and used for reflections and refraction.
- All "jelly" materials share one model: Beer–Lambert absorption by thickness with per-channel sigma, a wrapped diffuse subsurface term, a refracted environment lookup, Fresnel reflection of the studio, and a tight specular glint.
- Plinth: soft rounded slab of pale-amber jelly with a glossy rim.
- Wood: trunk and branches are tapered tubes of warm brown jelly, darker towards the base.
- Leaves: narrow lanceolate, translucent green (OIT), slightly darker midrib, they flutter with the branches. A few can detach when the tree is shaken hard and drift down.
- Pomegranate (ruby jelly): slightly squat round body with a dimpled shoulder and a sunk socket, fine leathery grain, a warm blush toward the shoulder, and seed sacs and membranes faintly glowing through the translucent rind (shader-side 3D cellular noise marched through the body). The 6-sepal crown (calyx) sits at the bottom pole, a short green-brown stem at the top. Each fruit has its own tone and size variation.
PHYSICS (all in JS, fixed timestep, no per-frame allocations)
- The tree is a position-based-dynamics chain/tree with a fixed step of 1/240 s, distance constraints, bend stiffness and damping, anchored at the root. Fruit hang from short stems; the stem tension grows with fruit weight and swing. When the stress exceeds a limit the fruit detaches.
- Detached fruit are free bodies: gravity, the plinth surface, trunk and limb collisions, collisions with each other and with hanging fruit. They roll and rest.
- CRACKING ONLY FROM IMPACT: a free fruit splits when the normal impact speed is above roughly (4.8 − 1.8·ripeness) units/s (floor, trunk and limbs, other fruit). Low drops and gentle rolls never split it. Riper = more fragile.
- When a fruit splits, it becomes two shell halves along a vertical plane through the polar axis. They fly apart sideways, bounce once or twice, rock like a bowl and settle open-side-up. Cap the halves (about 24); the oldest sleeping ones fade out.
- SEEDS: elongated ruby-jelly arils, a few mm across relative to the fruit, with a pale pip glint. Position-based granular simulation, substep 1/120 s, a hashed spatial grid, Coulomb friction (static about 0.7, kinetic about 0.5), small bounce, sleeping and waking so piles stay still and cost nothing. Total soft cap about 400 live seeds (oldest sleepers fade). Seeds also collide with the trunk, the plinth and the shells, and are kept inside a radius around the tree. Soft contact shadows under each seed.
- RAKE: pressing on empty ground near seeds and dragging pushes them with a kinematic cylinder (radius about 0.17, speed-capped) so they pile and spread believably. A thin ring shows the rake under the cursor on hover.
THE CRACKED INTERIOR (must look beautiful, not grey)
The open face of each half is a cut cross-section: a thin red skin edge, then a pale cream pith ring, then dense polished ruby arils (a cellular pattern, 2D Voronoi cells with tiny jitter), each a glossy dome with its own subtle brightness, a dark crease between neighbours, and a faint pale pip. Between the chambers run thin cream membranes (hairlines, not thick walls) radiating from a small pale spongy core. The inside of the shell bowl continues with the same dense ruby beads, with the membrane pattern seen as thin creases. No flat grey or beige anywhere, mostly ruby with a few paler and deeper sacs.
INTERACTION
- Drag a branch or leaf to bend it (the twig follows the pointer with a soft spring).
- Grab a hanging fruit and pull hard: it tears off into your hand. Move and release to throw it. Dropping or flinging it hard enough splits it.
- Pick up a loose fruit again at any time.
- Drag empty space (or right-drag) to orbit; wheel or pinch to zoom, with limits. Touch must work for everything (pointer events, touch-action none).
- Cursor changes: grab / grabbing / pointer over fruit / crosshair over rakeable seeds.
UI: "MATERIAL STUDIES" editorial style
- Warm paper background #ece9e3, ink #241f1d, accent ruby #b3202e. Serif display (Iowan Old Style / Palatino / Georgia stack) for headlines, system sans for controls, mono for numbers.
- Top left: small-caps eyebrow "Material Studies", large italic serif H1 "Pomegranate / Jelly." (two lines), a short rule, caption "A little crack. A little sparkle. A lot of rubies."
- Top right: pill showing a status dot and "WebGPU · Live" (also Paused / Unavailable).
- Right panel (frosted, hairline borders, 268px): section "The tree" with a dark "Shake the tree" button, a thin shake meter, and counters Hanging / Cracked / Seeds. Section "Palette" with three chips: Ruby, Rosé, Amber (each recolours the jelly, tree tint, plinth and shadow tint). Sections with sliders: Firmness, Internal damping, Ripeness (each shows its value). Buttons: Reset, Pause, Reset view.
- Bottom left hint: eyebrow "How to hold it", italic line "Shake it down. Break it open. Rake the rubies.", and small grey text: drag a branch to bend it · pull a fruit and fling it, a hard landing splits it · drag across the seeds to push them · drag empty space or right-drag to orbit · scroll or pinch to zoom.
- Mobile (≤760px): smaller title; the panel becomes a bottom sheet with a "Controls" bar that toggles it; the camera reframes so the tree stays visible above the sheet; the hint and caption fade while it is open; portrait framing pulls the camera back so the whole tree fits.
- If WebGPU is unavailable or the adapter fails: a calm full-screen message in the same typography, and the pill shows "WebGPU · Unavailable". No crashes, no console errors.
QUALITY BAR
- 60 fps on a typical laptop GPU; CPU physics under about 3 ms per frame. Avoid allocations in hot loops. Pause the loop when the tab is hidden.
- No NaNs under any interaction: heavy shaking, many fruit cracking together, resetting mid-drag, resize.
- Reset restores the tree, all fruit, clears halves and seeds.
- Camera defaults: slight three-quarter view, eye height just below the canopy, target on the trunk, the whole tree and the plinth framed with margin.
- Expose a small debug hook (window.__pg) for automated tests.
- Verify in a real browser: tree sways when shaken, fruit detach and crack only on a hard landing, seeds form piles and the rake moves them, all three palettes look right, mobile layout works, no console warnings.
7
393
OMG. Sonnet 5.5 just mogged Opus 🍉
I finally got the jelly watermelon I wanted. I like this version way more than the Opus one above - and it cost $6.06 instead of $30.07
Better jelly, almost 5x cheaper
Did Anthropic buff Sonnet or nerf Opus? 👀
Remember the jelly watermelon slice? Now there’s a whole watermelon 🍉
Using Claude Opus 5.5, I made a full jelly watermelon you can cut into pieces with a knife right in your browser
First, squish and stretch the whole thing, then grab the knife and slice it however you like. The pieces stay jiggly too - you can grab and squish them individually
This one cost $30.07. My jelly experiments seem to be getting more expensive
If Opus 5.5 can already do this, imagine what Claude Fable 5.5 will be able to create 👀
26
10
69
3,876
Same prompt:
Build "Whole Melon": a single self-contained HTML file (all JS/CSS inline, no build step, no libraries) with a big whole watermelon made of glossy jelly that you can grab, wobble and cut into pieces with a knife. Render with raw WebGPU (WGSL); if WebGPU is missing, show a clean fallback card.
SHAPE AND MATERIAL
- The melon is a signed distance field: an ellipsoid (~32 cm long) lying on its side with a softly flattened belly.
- Layers by depth under the skin: dark-green skin with irregular darker stripes running pole to pole (seamless all the way around), a pale pith band, then translucent red flesh that brightens toward the rind. Add a pale yellow field spot on the belly, a stem scar at one end and a blossom end at the other.
- About 700 seeds in a three-lobed ring at roughly two thirds of the radius (teardrops, wide end pointing outward), plus tiny air bubbles. Mesh seeds only near cut faces; a seed the knife goes through is kept by one side and eased just under the new face, so it shows through a thin film of jelly.
- Three varieties: Crimson, Golden, Rosé.
PIECES AND CUTTING
- Every piece is the melon SDF clipped by the half-spaces of the cuts that made it, with the fresh edges rounded (smooth max). All pieces share the melon's original rest frame, so rind, pith, stripes and seeds stay exactly where they grew.
- Knife tool: the user draws a line across the melon. Read the stroke on top of what it crosses to get a vertical blade plane. For each piece the plane passes through, fit the piece's best rotation, carry the plane into rest space, and split the piece in two.
- Build the new pieces cooperatively (generators with a per-frame time budget) while a steel knife (brushed blade, wooden handle with rivets) lines up over the stroke and presses a groove into the jelly. Swap the new pieces in the moment the edge breaks through, carrying over the position and velocity of the flesh they came from, and let the blade wedge them apart as it sinks. Allow up to about 24 pieces and reject slivers.
- For each piece: a surface-nets render skin (evaluate only the blocks near the surface, one Newton step onto it), a hex lattice in the piece's principal frame with boundary nodes snapped onto the surface, and a fast barycentric embedding.
PHYSICS (XPBD on the CPU, fixed 60 Hz, 6 substeps)
- Cell-wise co-rotational shape matching (8-node cells, warm-started rotation, strain stiffening), tet volume constraints for near-incompressibility, rind firmer than flesh.
- Edge damping, plus damping of each piece's deformation relative to its rigid motion (never its fall or tumble), rolling resistance on the table, and sleep when calm.
- Piece-to-piece contact against each other's exact SDF in a best-fit frame; sleeping pieces act as walls. Floor contact with Coulomb friction.
- Hand tool: grab any piece and pull (soft patch attachment, with enough reach to drag pieces across a wide table). Scroll or a second finger twists while holding. Pinch or scroll zooms; dragging the empty table orbits the camera.
RENDERING (a photographic product shot)
- Procedural studio: pale paper sweep, overhead softbox, back-left strip light, cool fill card.
- Jelly: front faces refract the scene behind by the view-ray thickness (nearest-back-face pass), with Beer–Lambert absorption per material, milky scattering in the pith, a back-lit glow at thin edges, sugar glints, Fresnel studio reflections and GGX highlights.
- Seeds, bubbles and the knife are drawn before the jelly, so they are seen refracted through it.
- Normals follow the jelly's local deformation (cofactor of the node-averaged deformation gradient).
- A soft key shadow coloured by what the light crossed first (rosy through flesh, dark through rind), plus contact occlusion from a top-down height map. MSAA, Khronos PBR Neutral tone mapping.
UI (editorial, like a material study)
- Kicker "Material Studies / No. 010" and a big italic serif title "Whole / Melon."
- A panel with Tool (Hand / Knife), Variety, Firmness and Internal damping sliders, Nudge, Reset, ¼ speed, Show mesh and Pause.
- Live readouts: mass, volume %, kinetic energy, piece count. A collapsible "Inside the experiment" note.
- Responsive down to phones.
Quality bar: it should look and move like a real glossy jelly watermelon, and every cut face should look like a sliced jelly melon with seeds just under the surface. Test headlessly with screenshots: the whole melon, mid-cut, many pieces, a close-up of a cut face, and mobile.
8
631
I think I want to eat Sonnet’s tree 🍊😂
Claude Sonnet 5.5 vs GPT-6.1 Sol
I’m going with Sonnet this time. The mandarins look juicier, the greens feel more natural, and the colors are more realistic overall. And that soft, bouncy wobble when you shake the tree makes me want to poke it
Sol did a pretty good job too, especially for the price. But next to Sonnet, its tree looks more like shiny plastic than jelly
Estimated API cost:
Sonnet - $10.74
Sol - $4.01
Almost 2.7x the price. Would you pay extra for this look? 👀
21
21
291
35,868
Prompt:
Create "Citrus Jelly" — a beautiful, interactive 3D mandarin tree made entirely of
translucent gummy candy. Deliver one complete standalone HTML file using genuine WebGPU
and WGSL shaders. No external models, textures, images or network requests.
ART DIRECTION
A miniature potted-style citrus tree for a premium candy exhibition. A short, sturdy,
slightly twisting trunk set into a soft jelly plinth; limbs that rise and arch outward
into a rounded dome; secondary branches and fine twigs. A dense but airy canopy of
individually modelled glossy citrus leaves (pointed ovals, folded along the midrib,
visible raised veins). About 25–30 jelly mandarins hanging on short stems around the
outer canopy, each with a small green star-shaped calyx on top.
Translucent caramel-amber trunk, rich jewel-green leaves, saturated orange fruit.
Warm off-white background, soft studio lighting, a subtle tinted ground shadow.
Keep the tree large and centred. Avoid washed-out colours, blown-out highlights,
opaque plastic shading, and fruit that looks like flat spheres.
JELLY MATERIAL
- Thickness-dependent colour absorption, refraction of the background, soft inner
scattering, smooth glossy highlights, delicate rim light.
- Fruit: analytic thickness through the body, so it is deep orange at the core and
glowing at the rim; a finely dimpled peel; faint segment membranes and a pale core
visible inside the jelly.
- Leaves: thin and translucent, deeper green along the midrib and at the base,
glowing when backlit. Stems and calyxes in fresh green jelly.
- Handle overlapping translucent leaves without flicker, sorting artefacts or dark
edges (e.g. weighted-blended order-independent transparency).
TREE PHYSICS
- A position-based tree skeleton with fixed simulation steps, anchored base,
per-branch bending stiffness (thin twigs softer), bounded stretching, and internal
damping. Grab the trunk or any branch and pull: it bends locally and elastically,
smaller branches follow with a slight delay, and on release it springs back and
settles with visible secondary motion. Never simulate softness by rotating or
scaling the whole tree.
FRUIT PHYSICS (the main interaction)
- Each hanging fruit is a pendulum on its stem, two-way coupled to its twig, so
swinging fruit makes branches bob and branches carry the fruit.
- Shaking the tree makes fruit tear off. Detect it from the stem tension caused by
changes in motion, not from simply holding the mouse. Stronger shaking drops more
fruit; a "Ripeness" slider sets how easily fruit lets go. A gentle sway at medium
ripeness should keep most fruit on; a hard shake should bring most of it down.
- When a fruit tears off, its twig springs upward slightly.
- Falling fruit is heavy jelly: it drops, squashes on impact (volume-preserving),
bounces softly, wobbles, rolls a little and stops. Fruit collides with the floor,
the plinth, the trunk and main limbs, other fallen fruit, and can knock into fruit
still hanging on the tree. Settled fruit goes to sleep.
- Strong shakes also release a few leaves that flutter, glide and land softly.
- Pick fruit by hand: grab a hanging fruit and pull; the branch bends until the fruit
snaps off, then stays in your hand. Release with a flick to throw it. Fallen fruit
can be picked up and thrown again.
- Empty stems regrow a new fruit after a while (swelling from small, no popping in).
Pool loose fruit and falling leaves, cap active objects, and fade out the oldest
settled fruit when the pool is full, so repeated shaking never slows the scene.
- Keep everything stable: no exploding values, branches stay connected, fruit never
sinks through the floor, and the tree always settles.
CAMERA AND CONTROLS
- Left-click or touch the tree to grab and shake it; click a fruit to pick it.
- Drag empty space or right-drag to gently orbit; limited zoom (wheel / pinch);
limited elevation. Keep camera gestures separate from grabbing. Mouse and touch.
- Controls: Shake the tree, Firmness, Internal damping, Ripeness, Reset, Pause,
Reset view. A small shake meter and live counts: Hanging / Falling / Fallen.
- Palettes: Mandarin, Yuzu, Blood orange — change colours without resetting.
INTERFACE
Minimal editorial light layout with generous whitespace and thin borders:
- Small "MATERIAL STUDIES" label.
- Large italic serif heading: "Citrus Jelly."
- Caption: "A little zest. A little bounce. A very juicy tree."
- Compact control panel on the right; a small "WEBGPU · LIVE" status pill.
- Bottom hint: "Take hold. Give it a shake. Catch what falls."
On mobile, dock the panel as a collapsible bottom sheet (collapsed by default) so it
never covers the tree.
PERFORMANCE AND QUALITY
Native WebGPU with WGSL and real 3D geometry; GPU-skinned branches; instanced leaves,
fruit, stems and calyxes; buffers reused every frame; MSAA. Show a clear fallback
message if WebGPU is unavailable.
Test repeated shaking, strong pulls, picking and throwing fruit, fruit collisions,
palette changes, pause, reset and mobile interaction.
Deliver the full working HTML, not a mockup. It should feel like a tiny living
citrus tree made of gummy candy — glossy, juicy, bouncy and satisfying to shake.
1
14
805
Remember the jelly watermelon slice? Now there’s a whole watermelon 🍉
Using Claude Opus 5.5, I made a full jelly watermelon you can cut into pieces with a knife right in your browser
First, squish and stretch the whole thing, then grab the knife and slice it however you like. The pieces stay jiggly too - you can grab and squish them individually
This one cost $30.07. My jelly experiments seem to be getting more expensive
If Opus 5.5 can already do this, imagine what Claude Fable 5.5 will be able to create 👀
Finally, Opus made me the perfect jelly - even better than Astra’s 🍉🤯
Claude Opus 5.5 vs ChatGPT-6 Astra
This time, I prefer Opus: the juicy color, glossy flesh, and especially how the slice stretches, folds, and jiggles when you let go. It genuinely looks like gummy candy I want to touch
Astra’s version is nice too, but Opus gets my vote here
Estimated API cost:
Opus - $4.50
Astra - $2.05
More than twice the price. Do you think it’s worth it? 👀
21
11
149
36,392
PROMPT:
Build "Whole Melon": a single self-contained HTML file (all JS/CSS inline, no build step, no libraries) with a big whole watermelon made of glossy jelly that you can grab, wobble and cut into pieces with a knife. Render with raw WebGPU (WGSL); if WebGPU is missing, show a clean fallback card.
SHAPE AND MATERIAL
- The melon is a signed distance field: an ellipsoid (~32 cm long) lying on its side with a softly flattened belly.
- Layers by depth under the skin: dark-green skin with irregular darker stripes running pole to pole (seamless all the way around), a pale pith band, then translucent red flesh that brightens toward the rind. Add a pale yellow field spot on the belly, a stem scar at one end and a blossom end at the other.
- About 700 seeds in a three-lobed ring at roughly two thirds of the radius (teardrops, wide end pointing outward), plus tiny air bubbles. Mesh seeds only near cut faces; a seed the knife goes through is kept by one side and eased just under the new face, so it shows through a thin film of jelly.
- Three varieties: Crimson, Golden, Rosé.
PIECES AND CUTTING
- Every piece is the melon SDF clipped by the half-spaces of the cuts that made it, with the fresh edges rounded (smooth max). All pieces share the melon's original rest frame, so rind, pith, stripes and seeds stay exactly where they grew.
- Knife tool: the user draws a line across the melon. Read the stroke on top of what it crosses to get a vertical blade plane. For each piece the plane passes through, fit the piece's best rotation, carry the plane into rest space, and split the piece in two.
- Build the new pieces cooperatively (generators with a per-frame time budget) while a steel knife (brushed blade, wooden handle with rivets) lines up over the stroke and presses a groove into the jelly. Swap the new pieces in the moment the edge breaks through, carrying over the position and velocity of the flesh they came from, and let the blade wedge them apart as it sinks. Allow up to about 24 pieces and reject slivers.
- For each piece: a surface-nets render skin (evaluate only the blocks near the surface, one Newton step onto it), a hex lattice in the piece's principal frame with boundary nodes snapped onto the surface, and a fast barycentric embedding.
PHYSICS (XPBD on the CPU, fixed 60 Hz, 6 substeps)
- Cell-wise co-rotational shape matching (8-node cells, warm-started rotation, strain stiffening), tet volume constraints for near-incompressibility, rind firmer than flesh.
- Edge damping, plus damping of each piece's deformation relative to its rigid motion (never its fall or tumble), rolling resistance on the table, and sleep when calm.
- Piece-to-piece contact against each other's exact SDF in a best-fit frame; sleeping pieces act as walls. Floor contact with Coulomb friction.
- Hand tool: grab any piece and pull (soft patch attachment, with enough reach to drag pieces across a wide table). Scroll or a second finger twists while holding. Pinch or scroll zooms; dragging the empty table orbits the camera.
RENDERING (a photographic product shot)
- Procedural studio: pale paper sweep, overhead softbox, back-left strip light, cool fill card.
- Jelly: front faces refract the scene behind by the view-ray thickness (nearest-back-face pass), with Beer–Lambert absorption per material, milky scattering in the pith, a back-lit glow at thin edges, sugar glints, Fresnel studio reflections and GGX highlights.
- Seeds, bubbles and the knife are drawn before the jelly, so they are seen refracted through it.
- Normals follow the jelly's local deformation (cofactor of the node-averaged deformation gradient).
- A soft key shadow coloured by what the light crossed first (rosy through flesh, dark through rind), plus contact occlusion from a top-down height map. MSAA, Khronos PBR Neutral tone mapping.
UI (editorial, like a material study)
- Kicker "Material Studies / No. 010" and a big italic serif title "Whole / Melon."
- A panel with Tool (Hand / Knife), Variety, Firmness and Internal damping sliders, Nudge, Reset, ¼ speed, Show mesh and Pause.
- Live readouts: mass, volume %, kinetic energy, piece count. A collapsible "Inside the experiment" note.
- Responsive down to phones.
Quality bar: it should look and move like a real glossy jelly watermelon, and every cut face should look like a sliced jelly melon with seeds just under the surface. Test headlessly with screenshots: the whole melon, mid-cut, many pieces, a close-up of a cut face, and mobile.
3
8
735
Sonnet, why so expensive when Opus is right there? 🐡
Claude Opus 5.5 vs Claude Sonnet 5.5. Same task - make a jelly fugu you can squish and puff up right in your browser
Claude Opus 5.5 - 7.45$
Claude Sonnet 5.5 - 6.20$
Just $1.25 apart, but I like the Opus result much more: more detail on the body, better-defined spikes and fins, and the fish itself looks more like jelly. It’s more fun to look at and squish
Sonnet made something cute too, but at almost the same cost, I’d pick Opus
Honestly, I don’t get why Sonnet ended up costing so much. It’s supposed to be the cheaper option, but the savings here are tiny
Would you pay the extra 1.25$ for the Opus result? 👀
22
15
157
10,952
Opus 5.5 Fugu - claude.ai/artifact/TZFQ1uWUU…
Sonnet 5.5 Fugu - claude.ai/artifact/46P8esDVp…
1
1
5
271