Building with AI - everything here is vibe-coded
France
Joined October 2023
- Tweets2.6K
- Following885
- Followers4.3K
- Likes642
One prompt - two passion fruits. And Opus takes the jelly crown again 👑
For $10.91, it delivered juicy colors, textured skin, and pulp you just want to poke. Everything stretches, jiggles, and looks delicious
Astra needed two rounds of fixes: the insides were separating and showing through the skin, and changing the color literally spawned a new fruit. After the fixes, the estimated API cost hit $27.45
2.5x the price, yet Opus still looks juicier
So what exactly are we paying extra for? 👀
PROMPT:
Build a real-time WebGPU soft-body "jelly" study of a halved passion fruit, same engine and editorial page style as my Melon / Avocado / Peach jelly slices. Geometry from SDFs: a slightly squashed sphere cut flat at the top, a thin wrinkled purple skin, a ~0.15 R white pith wall, and a hollow filled with lumpy translucent orange pulp sitting a little below the rim. Sim: CPU XPBD co-rotational shape matching + volume constraints on a 5-tet hex lattice, 10 substeps at 60 Hz, with per-tet regions — a firm, leathery rind cup and a very soft pulp whose volume constraints are compliant, so grabbing the pulp makes it neck and stretch like goo and slump back instead of lifting the whole fruit. Render a surface-nets mesh skinned to the lattice: refraction, Beer–Lambert absorption, subsurface scattering, Fresnel studio reflections, GGX, shadow map, contact AO, PBR Neutral tone mapping. Shader regions from rest-space SDFs: rounded wrinkle bump on the skin (faded at grazing angles and distance), pale pith, a thin yellow membrane lining the hollow, soft Voronoi juice-sac cells in the pulp; ~100 dark flat teardrop seeds and a few bubbles embedded in the pulp so they ride the wobble. Varieties: Purple, Golden, Granadilla. Controls: firmness, internal damping, nudge, reset, ¼ speed, show mesh, pause; mass/volume/kinetic readouts; "Inside the experiment" notes. English UI, mobile-friendly.
A basketball court built by Claude Opus 5.5 for $10.1 🏀
A tiny pixel-art diorama with a game in motion: players run across the court, take shots, and put points on the scoreboard
You can zoom in, change the time of day, and turn on the rain. As evening falls, the lights come on and reflections appear on the court - giving this little neighborhood scene a whole new atmosphere
The video captures 18 seconds of its little world
What do you think of the result for $10.1? 👀
PROMPT:
Build "Corner Court" — a single-file, real-time three.js (r160, ES module via import map from jsDelivr) page: an isometric diorama of an original street basketball half court on a floating city block, rendered as crisp pixel art. UI text in English.
RENDER PIPELINE
- Orthographic camera at ~31° elevation, azimuth 45° + 90° steps (animated; drag sideways or buttons), wheel/pinch zoom; fit the whole slab into the free screen area.
- Render into a small target (screen / pixel size) with no anti-aliasing; snap the camera to whole pixels.
- Post pass:
- depth outlines (darken a pixel >0.55 m in front of a neighbour);
- nearest colour of a fixed ~54-colour city palette in OKLab (concrete/asphalt greys, sky and night blues, court teal, terracotta/orange, reds, yellows, leaf greens, skin/wood, dusk purples, neon pink); optional 4×4 Bayer dither;
- whole-pixel upscale via texelFetch; the background (depth = 1) is the page colour.
- Hard shadows (BasicShadowMap); flat-shaded Lambert low-poly.
- Puddle reflections: render the scene mirrored about the ground (scene.scale.y = -1, ground meshes and rain hidden) into a second target, sampled at gl_FragCoord in the ground shader.
- "Raw 3D" mode: the same scene at full resolution with MSAA.
SCENE
- A ragged-edged slab: grass over soil over rock.
- An asphalt pad painted texel-by-texel at 10 px/m: teal inside the 6 m arc (straight corner lines), terracotta key, white lines, free-throw and restricted circles, cracks, worn paint, a stencilled "COURT 7".
- Hoop: padded navy pole, arm, backboard with its square, orange torus rim, and a line-segment net that sways when the ball goes through.
- Chain-link fence behind the hoop (alpha-tested diamond texture).
- A brick corner shop with an awning, lit windows, a pink "OPEN" neon sign and a vending machine.
- A long wall with an original sunset-city mural.
- A sidewalk with a bench and two seated spectators.
- Floodlights, a streetlight, low-poly trees, hedges, a dumpster, a fountain, a bike rack with two bikes, a hydrant.
- Pigeons that peck and fly off when players or the ball come near.
PLAYERS — procedural rigs of ~17 boxes
- Two-bone IK for legs (running stride, defensive slide, tucked jumps) and arms: dribble hand following the ball, jump-shot set point with release and gooseneck follow-through, layup reach, two-hand dunk, chest pass, rebound/contest reach, celebration.
- Spectators sit, cheer on makes and open umbrellas in the rain.
GAME — streetball 2v2 half court
- Make it take it; 1s inside the arc, 2s beyond; first to 11; win counter.
- Check ball at the top (pass to the defender and back). A change of possession must be cleared beyond the arc.
- Offence AI: dribble to spots, drive when the lane is open, pull-up jumpers when open, layups/dunks at the rim, passes when pressured; the off-ball player spots up or cuts. Man-to-man defence with stance, gap control, steals and contested jumps (blocks).
- Ball physics with substeps: bounces on asphalt, sphere vs torus rim and backboard box, net drag, pole, fences, wall, slab edge.
- Jumpers aimed on a ballistic arc (~50°) with speed/aim noise growing with distance and contest.
- Layups lofted to a peak above the rim so they drop in.
- Rebounds with jumps; out of bounds goes to the other team.
- Score, possession and status messages ("SWISH", "BLOCKED!", "TAKE IT BACK", …) on a lit scoreboard.
- Clicks: the ball handler shoots, his teammate gets a pass, the court sends the handler there. Shoot/Pass buttons.
WEATHER AND TIME
- Day / Dusk / Night lighting presets blended over ~1.6 s; floodlights, streetlight, neon and windows at night.
- Dry / Drizzle / Downpour: rain as short line streaks with splashes. A wetness value rises and slowly dries: the asphalt darkens, puddles spread from low spots in a precomputed depth map and mirror the scene, rain rings flicker in them; feet and the ball splash.
UI
- Pixel display font (Silkscreen) and a clean body font; light/dark themes via tokens.
- Controls: Time, Weather (with a court wetness bar), Shoot, Pass, New game, Pause, Turn left/right, Pixel art/Raw 3D, Pixel size, Palette/Dither/Outlines.
- A "How it's drawn" panel; a stacked mobile layout with no horizontal scroll.
Opus at $13.4 vs Astra at $23.51 - who made the better plush lobster? 🦞
Top - Claude Opus 5.5. Bottom - ChatGPT-6 Astra.
Opus nailed the physics and fur: the body has a soft, satisfying bounce, and the fur looks genuinely fluffy - you actually want to touch it
Astra has a funny face, mismatched eyes, and a personality of its own. Looks like it’s already been through a lot
But for physics and that plush-toy feel, my vote goes to Opus. At almost half the price, too
Which one’s your favorite - top or bottom? 👇
Check prompt:
Build a real-time WebGPU plush-toy study of a cute stuffed lobster, in the same engine and editorial "Material Studies" page style as my Plush Crab (shell-rendered minky fur, XPBD soft body, wired legs).
Body: one signed distance field — a long domed carapace with a rounder face and a small horn, two short eye stalks with big glossy safety eyes on white felt discs, an embroidered smile and rosy cheeks, then a tail of six smooth-unioned segments that get smaller toward the back, with a crease between each, ending in a flat five-paddle tail fan. Fill it with a hex lattice of cells and tetrahedra, solved with co-rotational cell shape matching plus volume constraints on a fixed 60 Hz step; Coulomb friction on the table. The shell breathes. Only the shell keeps its footing and posture, so the tail stays free.
Tail muscle: along the tail's centre line, lengthen the cells' rest shapes above the line and shorten them below, so the stuffing itself curls the tail. At rest the tail gently lifts and settles. "Tail flip": snap the tail under hard in about 0.1 s with extra cell stiffness, throw the body back and up, and straighten the tail again mid-air so it lands stretched out well behind where it started. A finger poke on the shell triggers the same flip.
Chains (XPBD rods with a plastic wire, posed in the body frame, blended poses lie/stand/tuck/wave/hang):
- eight thin walking legs with pale knitted joint bands;
- two arms ending in a big padded palm with two plush claw fingers (dark felt tips) that open and close by one angle;
- two long thin striped feelers that sweep up and back and always twitch slightly.
Behaviours:
- walking: head first, an alternating gait with footholds on the table;
- "Snip snip": both claws open and shut out of step;
- "Wave claws": claws raised and waving;
- Finger tool: the lobster walks to the finger, faces it and pinches it gently;
- held up, its legs dangle;
- pulling a limb past its reach tows the whole body.
Rendering: fur shells with Kajiya–Kay highlights, a velvet lie the Comb tool can brush, and pile that sways on springs. Draw the tail seams as stitched short-pile creases and give the fan pale edges. Soft shadows, contact AO, a studio backdrop, PBR Neutral tone mapping.
Varieties: Red, Blue, Golden. Tools: Hand, Finger, Comb. Sliders: stuffing, pile length, wire. Buttons: Walk, Snip snip, Tail flip, Wave claws, Straighten, Smooth fur, Reset, ¼ speed, Mesh, Pause. Readouts: mass, volume, steps, flips, snips. Add an "Inside the experiment" notes drawer. English UI, mobile-friendly.
Opus 5.5 claude.ai/artifact/DAtixcg94…
GPT-6 Astra plush-meme-lobster.vercel.ap…
The jelly king found a knife 🍉🔪
Claude Opus 5.5 turned my jelly watermelon into the most distracting thing in my browser. Slice it up, pull the pieces apart, throw them around. Every chunk keeps bouncing like nothing happened
The watermelon cost $4.46. Adding the knife and cutting physics took another $8. Total: $12.46
The knife cost more than the watermelon, but cutting it up is the best part
prompt:
Build a real-time WebGPU soft-body "jelly" study of a watermelon wedge that you can cut with a steel knife, in an editorial "Material Studies" page style (serif title "Melon Jelly.", muted paper backdrop, side panel, English UI, mobile-friendly). Geometry: a thick triangular watermelon wedge with a rounded green rind, a pale white layer, and translucent red flesh with dark seeds and a few air bubbles. Sim: CPU XPBD on a tetrahedral mesh, fixed 60 Hz step with 10 substeps. Each tet uses a co-rotational shape-matching constraint with finite compliance, which also flips inverted elements back out, plus a near-incompressible volume constraint so a stretched slice necks in. The rind is about 3× stiffer than the flesh. Damping acts only on relative velocity along edges. Floor contact uses Coulomb friction. Grabbing is a soft, reach-limited attachment to a patch of particles, and scroll or a second finger twists it.
Two tools, Hand and Knife:
- Knife: the user draws a stroke across the slice. Read on the surface, that stroke defines a vertical blade plane. Every piece is stored as a rounded convex outline in the slice's rest plane. For each piece the plane crosses, fit the piece's current pose with a best rotation, carry the plane back to rest space as a straight line, and split the outline along it.
- The cut: prebuild both halves as fresh tet meshes on release. An animated steel knife lines up over the stroke, comes down, and first presses a groove into the jelly. When it breaks through, swap in the new pieces, which inherit the position and velocity of the flesh they came from, and the blade wedges the faces apart on its way to the board. Draw the blade behind the jelly surface so the buried part is seen refracted.
- Pieces: every piece is its own soft body that can be grabbed, stretched and cut again, and pieces collide with each other instead of passing through.
Render: a smooth surface mesh plus the seeds and bubbles, each vertex embedded in a tet by barycentric weights so they ride the wobble. WGSL passes:
- floor, seeds and bubbles first;
- back faces, to get the thickness each view ray crosses;
- front faces with refraction by that thickness, Beer–Lambert absorption, milky scattering in the pale layer, a back-lit glow at thin edges, Fresnel reflections of a procedural studio, and GGX highlights;
- a soft key shadow on the floor tinted by the jelly, plus contact AO from a top-down height map.
Varieties: Crimson, Golden, Rosé. Controls: Hand/Knife tool toggle, firmness and internal damping sliders, "Give it a nudge", Reset, Pause, ¼ speed, Show mesh, plus mass/volume/kinetic readouts and an "Inside the experiment" notes drawer explaining the physics, cutting and rendering.
A volcanic island you want to keep shaking until something erupts 🌋
Claude Opus 5.5 vs. ChatGPT-6 Astra - who built the better jelly island?
Claude grabs your attention with the water physics, shoreline foam and richer textures. Astra added more detail to the island, but the cliffs and buildings look rough up close
API costs:
Claude Opus 5.5 - 24.34$
ChatGPT-6 Astra - 25.44$
Who won this round?
PROMPT:
Build "Geyser Jelly" — a single-file interactive WebGPU diorama for a "Material Studies" series: a volcanic Icelandic island set inside a translucent block of jelly sea, viewed as a tabletop object on a pale paper studio backdrop.
TECH
- One self-contained HTML file: plain JS + WGSL, no libraries, no network requests (Google Fonts optional). WebGPU only, with a clean fallback screen if WebGPU/adapter is missing or the device is lost.
- Block 5.2 × 5.2 units, sea level at y = 1.0. The block can be tipped by dragging its ground/sides; it springs back and quivers like jelly (shear + squash wobble applied to everything inside in the vertex shader).
- Sea = linear shallow-water sim on a ~168² grid (heights + face velocities, a little surface tension, damping), fed by the block's tilt. Render the water with refraction of the scene behind, colored absorption through the jelly, light shafts, caustics on the bed, foam/white water, a bright meniscus on the cut faces. Cut faces of the ground show candy-coloured strata, basalt, tephra bands and turf.
- Sun shadow map, MSAA, HDR with a soft shoulder tone map. Fixed-step simulation (240 Hz bodies, 120 Hz water). Expose a debug handle on window for tests.
THE ISLAND (procedural height field + ground cover: moss, grass, sinter, scoria)
- Back-left: a scoria cone volcano with a real crater bowl holding a lava lake (dark crust plates with glowing seams), patchy summit snow. A lava channel runs from a flank vent with a spatter cone down into the sea, glowing ribbon with drifting crust; it keeps glowing under the jelly water; constant steam where it meets the sea. Warm lava light on nearby ground.
- Back-right: a grassy plateau that ends in sheer columnar-basalt cliffs on its seaward side, three basalt sea stacks with grassy tops, puffins on the ledges, a small square orange lighthouse.
- Middle: a geothermal valley — a pale sinter mound with orange bacterial runoff streaks, the geyser pool (blue over a dark vent), two milky-turquoise hot springs and one clear deep-blue one, a grey bubbling mud pot with expanding rings, fumarole steam. A timber boardwalk arcs round the front of the geyser with tourists on it, with paths to the jetty, the church and the lagoon.
- Front-left: a milky blue lagoon in white silica banks, a timber deck with a ladder, a black-timber bathhouse with a turf roof, bathers drifting up to their shoulders.
- Front-right: a meadow with three turf houses (grass roofs; white, red and tarred gables), a little white church with a red roof and spire inside a turf wall, a flagpole with a fluttering Icelandic flag, a fenced paddock with five Icelandic horses (chestnut with flaxen mane, black, grey, palomino, bay).
- A jetty on piles out to a T-head where a whale-watching boat berths; a small ticket hut. Black-sand beaches, lava boulders, kelp, urchins and sea stars on the sea floor.
THE GEYSER (Strokkur)
Cycle every ~15–20 s on its own: refill → rest (simmering, occasional bulges) → surge (three growing heaves, gurgling, wisps of steam) → a turquoise dome swells and quivers → it bursts: a white churning water column (20–35 m in the UI; 1 unit = 20 m) shoots up ballistically, hundreds of streaked drops rain back down and drift with the wind, the column breaks apart from the bottom up, a big steam cloud rolls off downwind, the sinter goes dark and wet, then the pool drains with a gurgle. Tourists raise their arms and cheer; some hold up phones during the surge.
THE VOLCANO
Tremor: the block shakes, ash billows from the crater, lava bombs fly (thud and smoke on land, hiss, steam and a splash at sea, glowing then cooling), the lava lake rises and brightens, the flow speeds up, horses bolt round the paddock, puffins take off, and the geyser goes off.
LIFE
- Humpback whale (knobbly head, long white flippers, grooved pale throat, broad flukes): cruises offshore, surfaces and blows 2–3 times (spray plumes), arches and shows its flukes as it dives, stays deep, avoids the boat and shallow water. About once a minute (or on demand) it breaches: sounds deep, turns to an open spot, rushes up, leaps clear while twisting, crashes onto its back with a huge splash, foam and a ring wave across the bay that rocks the boat.
- The boat "Hafdís" (old oak fishing boat: dark blue hull, red bottom, white wheelhouse, passengers in bright jackets): lies at the jetty ~40 s, then casts off and does a loop round the bay on a smooth filleted route, slowing right down when the whale is near, rides the waves with heave/pitch/roll, makes a wake, puffs exhaust, comes back alongside.
- Atlantic puffins: stand on the cliff edge and stacks, stretch their wings, whirr out over the bay, land on the water, dive and chase fish underwater, fly home and land.
- People: 9 tourists on the boardwalk (sometimes shuffle to another spot), walkers on the paths and jetty, 6 bathers in the lagoon. Horses graze, wander, trot when startled. A school of fish in the bay flees threats.
- Steam, ash and spray are soft translucent puffs drawn after the water with premultiplied alpha, broken up with noise, rising, spreading and drifting downwind.
UI
- Left: eyebrow "MATERIAL STUDIES", big italic serif title "Geyser / Jelly.", subtitle "A volcanic island with a geyser, set in a block of jelly sea." Bottom-left: "How to play" with the line "Set off the geyser. Shake the volcano. Watch for the whale." and a small paragraph of hints. Top-right: status pill "WebGPU · Live".
- Right glass panel: buttons Erupt / Tremor / Breach / Cast off (→ Full ahead); disabled with labels like "Surging…", "Erupting…", "Draining…", "Refilling…" when not ready. A thin liveliness meter. Tallies: Eruptions, Tallest (m), Breaches. Status lines "Strokkur: Resting 5 s / Surging / Erupting · 24 m / Draining / Refilling 68%" and "Hafdís: Alongside 18 s / Casting off / Under way 40% / Whale ahead / Coming alongside".
- Flavours: Blue lagoon (milky aqua), Lingonberry (red), Licorice (smoky dark). Sliders: Firmness, Wave damping, Wind. Buttons: Reset, Pause, Sound on/off, View.
- Interaction: tap the geyser, the volcano, the whale or the boat to trigger them (hand cursor on hover); Space sounds the boat's horn and puts the puffins up; drag across the water to make waves; drag the ground or the block's side to tip it; drag empty space or right-drag to orbit; wheel/pinch to zoom. On phones the panel becomes a bottom sheet with a "Controls" bar; no page scroll at any size.
- Sound: synthesized with Web Audio, only for events — surge bubbling, dome thump, eruption roar and spray hiss, drain gurgle, tremor rumble with rattles, bomb thuds and hisses, whale blow, breach rush and splash, boat horn, puffin and mud plops. No background ambience.
QUALITY BAR
Charming, legible miniature scale; nothing sticks through the water surface by mistake; no NaNs under stress (repeated tremors, eruptions, breaches, shaking, stirring). Verify with headless screenshots and an end-to-end browser test of every control, the geyser cycle order, the boat round trip, the breach, taps, flavours, sliders, pause, camera, mobile sheet and fallbacks — with zero console errors.
PROMPT:
Build an interactive 3D plush whale playground in the browser. Make it round, fluffy, and hilariously goofy, with oversized googly eyes, a wide opening mouth, tiny fins, and a floppy tail. No thoughts, just krill.
Use soft-body physics so the whale squishes, stretches, wobbles, and springs back when dragged. Let me grab its fins and tail, poke its belly, comb its fur, feed it krill, trigger a tiny fountain, and make it do a ridiculous flip.
Render dense plush fur, visible stitching, soft shadows, and a fabric-lined mouth. Add blue, orca, and lavender color options, plus controls for stuffing firmness, fur length, and animation speed.
Present it as a playful material study on a warm cream background, with elegant serif typography and a compact control panel. Keep the whale as the main focus. All interactions should work, and the result should feel tactile, polished, and genuinely funny.
PROMPT:
Build a single-file WebGPU page "Peach Jelly" in the style of a "Material Studies" specimen sheet (light studio backdrop #E2DFDA, italic serif title, a specimen control panel on the right, live readouts bottom-left, collapsible "Inside the experiment" notes; responsive with a stacked phone layout and a no-WebGPU fallback card).
Subject: half a peach made of translucent jelly, cut along its suture, lying skin-down with the cut face up and its stone seated in the hollow.
Geometry: a signed distance field for the fruit — a sphere slightly longer from stem to blossom end, with a stem dimple, a faint point at the blossom tip and the suture crease along one side of the rim, belly gently flattened on the floor — cut at the equator, minus an almond-shaped hollow for the stone (flattened, broad faces parallel to the cut, blunt toward the stem). Simulation mesh: a snapped hex lattice, 5 tets per cell (~700 particles / ~2500 tets), node layers exactly on the floor and the cut face, nodes forced out of the stone. Render surface by surface nets, embedded in the tets by barycentric weights, with one normal-smoothing pass per frame so reflections don't pick out tet kinks. The stone gets its own high-resolution mesh: deep wormy furrows (mostly lengthwise) and little pits carved by displacement, a low keel round its edge, a small point at the blossom end; groove depth rides in the vertex material id for shading.
Physics (CPU, XPBD, 60 Hz, 10 substeps): per-tet co-rotational shape matching + volume constraints, stiffer skin, edge-relative damping, floor friction, pointer grab with twist. The stone is a rigid body (position, quaternion, ellipsoid inertia) with frictional contact against every particle and sampled floor contacts. Nodes lining the hollow are held by soft adhesion bonds that peel (floor of the hollow first, lip last) under a sustained net pull measured in the half's best-fit rigid frame — never from brief knocks; a loose stone resting in the hollow is drawn home and re-bonded with a soft grace period. Grabbing the stone moves it as a whole and it can be thrown. Buttons: nudge, reset, "Pop the stone" / "Put the stone back", pause, ¼ speed, show mesh; sliders for firmness and damping; readouts mass, volume %, grip %.
Rendering (WGSL): shadow map + top-down contact-AO map, scene pass (floor, stone, bubbles) with linear depth in alpha, back-face thickness pass, refracting jelly with Beer–Lambert absorption and scattering. Regions from rest-space SDFs: golden flesh; a ruby ring hugging the stone, broken up irregularly, with fine red fibres streaking out; the skin's blush bleeding a little way into the flesh. Skin: yellow with patchy red blush and pale flecks, a velvet sheen at grazing angles (nectarine: smooth and glossy). Stone: woody reddish-brown, dark furrows with shreds of red fibre, soft key shadows, low sheen. Varieties: Yellow, White, Nectarine. UI text in English.