Building with AI - everything here is vibe-coded
France
Joined October 2023
- Tweets3.8K
- Following930
- Followers6.3K
- Likes774
A mesmerizing volume slider by Gemini 4 Hydrogen
Move it and a tiny Japanese world comes to life inside. Just wanted to change the volume, ended up playing with it
All for $0.19
PROMPT
Build a single-file web page called "Hanabi Switch" (Material Studies No. 065, WebGL + Web Audio): a big horizontal pill-shaped toggle switch whose inside is a 176×50 pixel-art scene of a Japanese house on a summer evening, and whose knob is a capsule of pale aqua glass, like a ramune bottle. No libraries; everything original; English UI.
SCENE (CPU-drawn pixel buffers: albedo + emission, sprites with automatic dark outline, lighter top row / darker bottom row; nearest-neighbour upscaled):
Left third: a tatami room — cream plaster, dark wooden posts and beam, a tokonoma alcove with a hanging scroll (an ensō circle and a red seal) and a small ikebana vase, tatami with dark green borders, a kotatsu with an indigo quilt with orange squares and an iron tetsubin kettle that steams, a paper andon lamp, a plum zabuton cushion.
Right two thirds: the engawa veranda (wooden planks, a step stone) under the eaves; a row of seven red and white chōchin paper lanterns and a glass furin wind bell with a yellow paper strip hang from the eaves.
Four shoji panels (wooden frame, lattice, paper) cover the garden at first, glowing pink-orange with the sunset behind them and, later, faint moon-blue, with soft maple-leaf shadows on the paper. Their leading edge follows the knob, so they slide away to the right past the end of the switch as the knob moves.
Behind them, the garden: a sky that goes from violet/peach dusk to deep night with twinkling stars and a full moon; a bamboo fence; a maple with green and red leaves stirring; a stone tōrō lantern that lights as the night deepens; a small pond with three koi circling and the moon reflected; a shishi-odoshi (bamboo tube on a post) that tips every six seconds; a hydrangea bush in blues and violets; fireflies blinking.
Anything painted over something else must hide its glow (painting a pixel clears its emission), so the fence, the maple and the doors occlude the sky and the fireworks.
Pets: a shiba (tan, white cheeks, chest and paws, curled tail; poses sleep / walk / sit / bark) asleep on the cushion, and a calico cat (white with orange and black patches, green eyes; poses curl / walk / jump / sit / paw) curled on the kotatsu. As the doors open, the dog wakes, walks out onto the veranda and sits facing the garden; once the doors are wide open the cat meows, jumps down in an arc and follows, sitting beside the dog and now and then pawing at a firefly. If the doors close again, the cat goes back in. Small "z" glyphs drift from the sleeping dog.
LIGHT:
Indoors: dim violet dusk ahead of the knob, warm lamplight behind it, with a 4×4 Bayer-dithered edge that trails the knob and a bright dithered rim just behind it; the andon casts a warm dithered pool once the knob passes it.
Outdoors: dusk light fading to cool moonlight; each chōchin lights up as the knob reaches it and pools warm (red or cream) dithered light beneath it; the tōrō pools light too (but not onto the doors).
Fireworks briefly tint everything in their colour.
FIREWORKS (start at about 86% of travel): rockets climb with a flickering golden trail and burst into four styles:
botan (peony: a ring of sparks plus a smaller inner ring in a second colour);
kiku (chrysanthemum with short twinkling tails);
golden willow (long drooping trails);
senrin (a thousand rings: the sparks dim, then crackle into many small white pops).
Sparks bloom fast, then drift and fall under gravity and fade, with a white flash at the centre and a faint reflection in the pond. The dog barks at the big ones.
GLASS (one WebGL2 fragment shader):
A moulded bezel around the pill with a soft shadow.
The room sampled with nearest filtering.
A capsule knob that magnifies what is beneath it (scale 0.78) from a second, fully-lit render, with RGB-split refraction near its rim, a darker band then a bright Fresnel edge, light focused toward its foot, a long soft highlight and a small specular dot, and a faint aqua tint.
The bezel is cream at dusk and slate at night.
INTERACTION:
The knob follows the finger on a spring, stretches with speed and wobbles like jelly when it stops; tap the switch to toggle to the far end; arrow keys, Home and End; role="slider" with aria-valuetext.
The page background and text colour follow the evening from warm washi paper to deep indigo night.
Readouts: Clock (18:00 → 21:00), Sky (Dusk / Twilight / Moonrise / Night / Hanabi), Music (Cicadas / Koto / Taiko / Shakuhachi / Matsuri).
A Sound on/off button; sound starts on the first touch.
AUDIO (Web Audio, all synthesised, a lookahead scheduler at 92 BPM; music kept quiet, about 5 dB under the sound effects, through a compressor and a 2.4 s convolution reverb):
Garden: higurashi cicadas calling "kana-kana-kana" (fast high pulses that descend and slow) at dusk, two bell crickets answering each other at night, a soft breeze, water trickling into the shishi-odoshi.
Koto: Karplus–Strong plucks rendered once per pitch, in the in-scale on D (D E♭ G A B♭) over roots D · B♭ · G · A, with occasional bends from pressing the string, and a quick sweep up the strings at the end of the phrase.
Then soft taiko, a tight shime drum and a bass koto.
Then a shakuhachi: breathy, scooping up into each note, vibrato arriving late.
Finale under the fireworks — a matsuri: a big odaiko, the atarigane's chan-chiki, a high shinobue flute, and everything shifts to the brighter yo-scale (D E G A B).
Sound effects:
- the ramune marble clinking when the knob is grabbed;
- the furin ringing when the knob is dragged fast;
- a wooden-runner hiss as the shoji slide, and a knock when they reach the end;
- each lantern lit with a koto pluck rising up the scale;
- the shishi-odoshi's hollow "kon" and its water pouring out;
- a koi splash;
- the dog's "wan" and the cat's "nya";
- each rocket's whistle, the boom with its echo off the hills (the music ducks under it), and the senrin crackle.
6
35
PROMPT
Build "Jelly Dice": real-time soft-body jelly dice on a frosted glass plate, as ONE
self-contained HTML page. three.js r128 from cdnjs, no other external assets except
Google Fonts, no localStorage, no network calls, no eval/alert. Publish it as an
artifact and also give me a standalone offline HTML file with three.js inlined.
DICE (real soft bodies, not rigid bodies with a wobble shader)
- Each die is a 4x4x4 lattice of touching spheres (radius 0.125, die edge 1) held
together by shape matching (position-based dynamics), fixed step 1/360 s, gravity ~30.
- Goal shape blends the best-fit rotation with a volume-preserving linear fit, so a
squash bulges sideways. Damp only the stretch rate along lattice edges (axis
neighbours + face diagonals), never the rigid motion.
- Target feel: ~30% squash on a hard landing, a small rebound, a slow 2-3 Hz sway
that dies out in about 1.5 s; a roll settles in ~4 s.
- Contacts on positions with Coulomb friction: plate, an invisible round wall near
the plate edge, and die against die (surface spheres push each other apart).
- Dice fall asleep when still; a die left leaning on a neighbour gets a small shove
until it lies on a face. Opposite faces add to seven. Read the result only when
every die is asleep.
- Skin: a welded rounded cube driven by the lattice (trilinear free-form
deformation), normals recomputed every frame. Pips are white lenses sunk just
under the surface and deformed by the same lattice.
LOOK
- Warm off-white paper studio (#efe9df): paper table, a flat frosted glass plate with
a rounded clear bevel, satin grain, the plate's own faint shadow on the table.
- Translucent candy shading from real thickness: a depth pre-pass of back faces plus
everything opaque gives the jelly depth behind each pixel; thin parts pale and
see-through, the core deep and saturated; pips on the far faces show through.
Back-lit key light (high, behind-left), soft-box reflections, tight highlights,
premultiplied alpha, far dice drawn first.
- Soft shadows in the candy's own colour with a brighter core, falling towards the
viewer; they soften and fade as a die rises.
- Fixed camera from the front at ~47 degrees, fitted so the whole plate sits in the
space the page chrome leaves free at any window size.
PAGE (English UI)
- Title top-left ("Jelly Dice", second word italic in the current candy colour),
sound toggle top-right.
- Bottom bar: left "Colour · <name>" with six round swatches as a radio group
(Emerald, Amethyst, Amber, Sapphire, Raspberry, Lime; all dice share one colour);
centre a pill of buttons 1-5 for the number of dice and a dark "Roll the dice"
button; right "Total" with a big italic sum and a row of small value chips
(dashed and empty while rolling).
- Tap a die to poke it, drag to stretch it and carry it around, Space rolls
(tosses the dice up from where they lie), S toggles sound, keys 1-5 set the count.
Changing the count drops fresh dice from above; changing colour makes them shiver.
- Phone layout: colour and total on one row, count + roll below, no horizontal
scroll down to 320 px. Respect prefers-reduced-motion (dice start at rest).
Show a plain message if WebGL is unavailable.
SOUND (synthesized WebAudio, unlocked by the first gesture, on by default)
- One short plastic clack per impact: a band-passed white-noise tick (centre roughly
0.8-2 kHz, rising with strength, 35-80 ms) over a triangle thump falling from
about 160-250 Hz to 70 Hz in ~60 ms.
- Strength follows impact speed; play it when a die lands on the plate, hits the
wall or another die, and softly on a poke. A throw starts with a quick rattle of
four clacks. Pan by screen position, rate-limit quiet repeats, soft ceiling on the
master bus.
ENGINEERING
- Keep the physics free of any rendering code so it runs headless in Node; test
there first: settle time, squash depth, face statistics over many rolls, impacts
per roll, no NaNs.
- Then check in a browser: roll, change count and colour, poke, drag, mute, phone
and small-phone sizes, reduced motion, and the offline file with the network
blocked. Fix what you find before delivering.
Reply to me in short Russian, don't paste the artifact URL unless asked.
4
229
check it out:
GPT-6 Astra hollybrook-tennis.vercel.app
GPT-6.1 Sol hollybrook-open-3d.vercel.ap…
1
1
143
PROMPT
Build a real-time 3D pixel-art diorama of a singles tennis final ("big tennis"), "Hollbrook Open", as ONE self-contained HTML page: three.js r128 from cdnjs (no other external assets, no localStorage/eval/alert). Publish it as an artifact and also give me a standalone offline HTML file.
LOOK (same style as my earlier dioramas): a match in a club stadium on a floating island; orthographic isometric camera at 31 degrees, quarter turns (Q/E), wheel zoom, drag to orbit/pan, follow camera; render to a low-res target with a "Pixel size" slider 1-6 (default 2), depth outlines, a fixed 90-colour palette (OKLab snap) and Bayer dither; the stands/walls facing the camera lift away (doll's-house cutaway); a clubhouse with a clock, flags and an LED video board; practice court, garden, marquee, entrance plaza. Original/fictional names and sponsors only. English UI.
MATCH: two fictional pros (4 in the roster, men and women), a full match from walk-on to trophy: toss, warm-up, serves (ball bounce ritual, toss), rallies with real ball physics (drag, Magnus spin, surface bounce, net and cord), line judges' calls, umpire's announcements, commentary, scoring with games/sets/tie-breaks, changeovers, challenges with an Eagle Eye review, handshake, trophy ceremony with confetti. Formats: short set, one set, best of 3. Four court surfaces (Grass, Clay, Hard, Carpet) that change the court texture AND the ball's bounce. Day / Dusk / Night with four floodlight masts. Realistic numbers: first serve ~60-65%, aces 4-8%, double faults 2-4%, mean rally ~4-7 shots (shorter on grass/carpet, longer on clay).
PAGE: side control panel (stacked below on phones): match format, player pickers, New match, Skip ceremony, Auto-next, pause, speed; surface; time of day; Coach (tactics: go for it / play safe / rush the net / drop shot / lob, serve direction, "aim next shot" by clicking the court, Challenge button); camera modes (TV follow / whole club / close-up) and view controls; Match centre (stats, fastest serve, player cards); commentary feed; a TV-style scoreboard on the stage. Synthesized WebAudio sound (racket hits, bounces by surface, crowd, calls, ambience), off until the user enables it.
ENGINEERING: write the core (render pipeline, layout/plan, NAV grid, lighting) and a detailed CONTRACT.md (world conventions, module files, global names, BUS events, data model), then build the modules in parallel with separate agents in their own workspaces: court+net+boards, gear+grounds, clubhouse+stands+screen, people rig and actors, tennis kinematics, ball physics+mesh, rally AI, match flow (generator-coroutine scheduler with watchdogs), crowd+fx, audio, UI. Enforce unique global names (dupcheck), then integrate, play full matches on every surface and format, check four views, night, phone layout, performance. Reply to me in short Russian, don't paste the artifact URL unless asked.
7
295
PROMPT
Build a single-file web page called "Great White Jelly" (Material Studies No. 060, three.js r170 via an import map from jsdelivr; everything else hand-written). A big, stout great white shark cast in clear jelly lies on its belly on a pale table, with a milky belly showing through, jaws slightly open on rows of sugar teeth. It is a real-time soft body you can poke, drag, twist and feed. Calm editorial page: a big italic serif title top left with a short caption, a control panel on the right, and readouts and a "handle" note bottom left. The shark is framed large, in a three-quarter view from the front, kept clear of the panel.
GEOMETRY
Build the shark from one signed distance field, in a rest frame with y up and the body lying on the table at y = 0, then build a simulation lattice and render surfaces from it.
Body:
- A superellipse section swept along a gentle Catmull–Rom spine on the table, from the tail stock to the snout, with a straight head at the front.
- Proportions like a real great white: a stout torpedo, deepest under the first dorsal fin, tapering to a slim tail stock and lifted at the tail so the crescent tail stands on its lower lobe.
- A long wedge forward from the dorsal fin to the snout. The top line descends smoothly in an almost straight line with no step or hump behind the head. The belly is pressed slightly flat into the table.
Head:
- A bluntly conical snout with a rounded tip.
- Toward the snout the section's widest line sinks, giving a domed top over a flatter underside.
- The snout overhangs a short lower jaw. The lower jaw ends in a U seen from above and has a rounded chin seen from the side.
- The mouth line runs from the corner of the mouth (the hinge, a little behind the eye) forward under the snout.
- Small round black eyes sit high on the sides, ahead of the mouth corner.
- Five long gill slits sit behind the head.
The open mouth:
- Built open about 20°: the snout and upper jaw are lifted only slightly (about 6°), staying in line with the back, and the lower jaw is dropped onto the table. The head is raised just enough that the dropped jaw rests on the table instead of hanging.
- Map points between the open and closed head by rotating each half about the hinge, with the swing spread smoothly across the corner of the mouth.
- Hollow the mouth: a dished floor inside the lower jaw's rim and a palate above, so the teeth stand on the rims.
Fins:
- Median fins as Catmull–Rom outlines extruded across the body: a tall first dorsal with a concave trailing edge, a small second dorsal, an anal fin, and a crescent tail.
- Paired fins in planes of their own: long falcate pectorals splayed down onto the table, and pelvics.
Inside:
- A milky layer just under the skin fills the belly up to a ragged countershading line high on the flank.
- On the head, the white runs from the corner of the mouth, under the eye, to the tip of the snout, so the snout's underside and the whole lower jaw are white and the top of the head is dark.
- Trapped bubbles, and room in the stomach for what it swallows.
Teeth: rows of broad triangular sugar blades along the upper jaw and narrower ones along the lower, each with a smaller folded-back row behind it, kept back from the very front of the chin.
SIMULATION (CPU XPBD)
- A snapped hex lattice, five tetrahedra per cell, with a layer of nodes exactly on the floor.
- A fixed 60 Hz step in 10 substeps; edge and volume constraints plus anti-inversion.
- Per-region stiffness: fins and the snout firmer (so the overhang holds its shape and never sags), the milky layer and the skin in between, the clear jelly softest.
- Floor contact with friction.
- Muscles by rewriting rest shapes:
- a jaw muscle that turns the lower jaw about the hinge: half-closed at rest with a slow breath, opening wide when food is coming, and a sharp bite;
- a swim muscle that sends a gentle wave down the body;
- a turn that swings the head toward the pointer.
- Render meshes from surface nets (the clear jelly and the milky layer), embedded barycentrically into the tetrahedra. Anchor points ride the jelly: the hinge, the jaw tips, the mouth, a row down the spine (to measure the live length), the stomach slots and both eyes.
RENDERING (three.js, custom shaders)
- Clear jelly with Beer–Lambert absorption by thickness, refraction of a back-face pass, a Fresnel sheen and sharp studio highlights.
- The milky layer glowing through.
- A soft key-light shadow and coloured transmitted light on the table.
- Faint pores on the snout, dark gill slits, glossy black eyes with a dark ring.
- Hide the eye on the far side of the head each frame (whichever eye anchor is farther from the camera), so it never shows through the clear jelly like a second eye on the snout.
- Optional wireframe overlay of the tetrahedral mesh.
INTERACTION
- The head follows the pointer.
- Drag anywhere to pull the jelly; pull a fin or the tail; lift the snout.
- Scroll to zoom; with a second finger or the wheel while holding, twist the held patch.
- Feed: tosses gummy fish (small rigid bodies that tumble, land on the jelly and trade momentum with it, and topple on the table). The jaws open for incoming food; a fish that comes to rest in the mouth triggers a bite and is swallowed, then rides in the stomach, visible through the jelly.
- Bite and Thrash buttons; Reset; ¼ speed; Show mesh; Pause.
- Firmness slider (trembling ↔ set) and internal damping slider (lively ↔ syrupy).
- Colour swatches, each with its own gummy-fish colour:
- Slate (slate-blue jelly, orange fish);
- Blueberry (blue, red fish);
- Cherry (red, yellow fish);
- Lime (green, pink fish);
- Grape (purple, yellow fish).
READOUTS
- Mass in kg, from the volume enclosed by the surface: gummy at 1.3 g/cm³, illustrative scale 1 sim unit ≈ 40 cm, so a big shark of roughly 1.1 m and about 26 kg.
- Length in cm, live along the spine.
- Gape in degrees, at the corner of the mouth.
- Swallowed fish.
- An "Inside the experiment" expandable note giving the particle, tetrahedron, bubble and tooth counts and how it all works.
4
314
PROMPT
Build an interactive piece called "Neon Heat" as one self-contained HTML file (inline CSS and JS, no libraries, no image or audio files). All UI text in English.
CONCEPT
One oversized horizontal slider is the whole page. Its value is a police "heat" level from 0 to 5. The track is a pill-shaped window onto a side-scrolling neon boulevard in an invented 1980s-style beach city; the thumb is a thick glass lens. The lens always sits over the getaway car, so dragging right both raises the heat and makes room behind the car for more pursuers. The mood is neon noir: hot pink, cyan, purple, sodium amber. Everything must be original: no logos, names, characters, fonts or HUD elements from any existing game.
RENDERING
- Draw the scene procedurally on an offscreen Canvas 2D (virtual size 1600x440) every frame, upload it as a texture, and render the instrument in one WebGL fragment shader: dark glossy pill bezel, a thin neon rim line running pink to cyan, a soft neon underglow instead of a drop shadow, inner shadow on the window, light bloom, faint scanlines and grain.
- The lens is a superellipse taller than the track. Inside it: magnified centre, compressed rim, slight chromatic aberration, a crisp highlight line (pink top-left, cyan bottom-right), a soft specular smear, and a shadow under it. It squashes slightly when moved fast and swells when pressed.
- If WebGL is unavailable, show the 2D scene in a rounded pill with a simple CSS thumb.
THE WORLD (one smoothed "heat" value drives everything)
- Sky goes from sunset (indigo, magenta, pink, orange) at 0 to deep night at 5; a striped synthwave sun sinks below the bay and stars come out.
- Layers with parallax: far skyline across the water, art-deco hotels in three silhouettes with lit windows, neon roofline trim and glowing signs with invented names (Flamingo, CLUB NOVA, Coral Bay, MOTEL, Tiki Bar, ARCADE, Lola's, OPEN 24H, Pink Palm), palm trees, lamp posts alternating pink and cyan, wet asphalt with soft colour reflections, lane dashes that stretch with speed.
- Scroll speed by heat: 0, 23, 52, 84, 113, 142 mph.
THE STORY
0 Parked: a pink convertible with a driver and a passenger, a duffel bag on the back deck, music notes drifting up from the radio, two flamingos on the sidewalk.
1 Noticed: one black-and-white patrol car pulls in behind with red and blue lights; the flamingos fly off.
2 Pursued: two cars; banknotes start fluttering out of the bag.
3 Shots fired: three cars and a helicopter whose searchlight stays on the convertible; tracers, muzzle flashes, sparks, bullet holes; the passenger shoots back.
4 All units: a tactical van and a second helicopter; hit cars drop back trailing smoke; the convertible's hood smokes.
5 Citywide: an armoured truck with a turret; every few seconds a pursuing car explodes (fireball, shockwave ring, debris, burning wreck left behind) and a replacement arrives.
Lowering the heat reverses it: units fall away, and when everything is calm the flamingos walk back.
The bezel glow and a faint wash over the scene pulse red and blue with the sirens (under 3 flashes per second); explosions shake the view. Respect prefers-reduced-motion.
SOUND (WebAudio, all synthesized, starts on first interaction)
A synthwave loop in A minor (Am, F, C, G): pad and arpeggio from the start, sounding like a car radio at heat 0 and opening up as heat rises; drums from about 1.5, hats from 2.5, a lead line from 3.4; tempo rises from 96 to about 130 BPM. Add surf at low heat, an engine tone tied to speed, up to three sirens that switch from wail to yelp at high heat, helicopter chop, gunshots, explosion booms, a siren whoop when the first car appears and a tyre screech on hard launches. Run everything through a compressor. A "Sound: on/off" button remembers its state.
PAGE
- One dark look: background #0B0716, text #F3EBFF, muted #9C91B8, pink #FF3EA5, cyan #36E7FF, amber #FFD166.
- Fonts from Google Fonts: Mr Dafoe (neon script title and script signs), Monoton (big numeral and tube signs), Barlow Condensed (labels), Barlow (body).
- Top: small label "Coral Drive · Heat 0–5", the glowing script title, and two buttons: "Play the chase" and "Sound: on".
- Middle: the instrument, full width. Under it, six tick buttons 0–5 aligned with the lens travel.
- Below: a large neon numeral with five heat bars, the level name, a one-line dry caption per level, and on the right the speed in mph and "N units in pursuit".
- Level names: Parked, Noticed, Pursued, Shots fired, All units, Citywide. Captions in a deadpan tone, for example level 1: "One patrol car, one long look. It is probably the tail light." and level 5: "Everything with a siren is here. Something explodes roughly on schedule."
INTERACTION
Drag the lens, click anywhere on the strip to jump, click a tick, or use arrow keys, Home and End. The strip has role="slider" with proper aria values. "Play the chase" runs a 28-second scripted demo from 0 up to 5 and back. Works with mouse and touch, down to phone width, with no horizontal scrolling.
QUALITY BAR
Smooth at 60 fps, deterministic simulation from a seeded random generator, no console errors, and every level must read clearly in a single still frame.
1
7
717
PROMPT
Create “Melon Jelly” - a polished, interactive 3D watermelon jelly slice that runs directly in the browser using genuine WebGPU and WGSL shaders.
Deliver a single, self-contained HTML file with embedded JavaScript and CSS. This must be an actual interactive 3D simulation, not a static render, video, or 2D imitation.
THE WATERMELON
Create a thick, rounded triangular watermelon wedge with:
Translucent ruby-red jelly flesh.
A pale, slightly translucent layer between the flesh and rind.
A glossy green outer rind with irregular dark-green stripes.
Individually modeled dark seeds embedded in both exposed sides.
Softly rounded corners and an appealing, substantial thickness.
Make it look like an expensive gummy candy photographed in a studio. It should feel juicy, soft, and almost edible. Keep the colors rich without overexposing the highlights.
SOFT-BODY PHYSICS
Use a volumetric soft-body simulation, such as a tetrahedral mesh with XPBD elastic and volume-preservation constraints.
The user must be able to:
Grab the tip, a corner, the flesh, or the rind.
Stretch, bend, lift, and gently twist the slice.
Release it and watch it wobble before gradually settling.
The slice must visibly deform locally, not simply move or scale as one rigid object. Make the rind slightly firmer than the flesh while keeping the whole slice flexible.
Preserve volume reasonably during stretching. Prevent inverted elements, explosive motion, and permanent collapse. Use a fixed simulation timestep and bounded substeps for stability.
After release, the motion should decay naturally - no instant snapping back and no endless oscillation.
Keep seeds attached to the deforming flesh. They must move and rotate with the surface rather than float independently or remain fixed in space.
Include ground contact, gentle friction, and soft bouncing. Avoid visible floor penetration.
RENDERING
Use native WebGPU with WGSL shaders.
Include:
Thickness-dependent light absorption.
Refraction through the jelly.
Fresnel reflections and glossy highlights.
Soft transmitted light through thin edges.
Subtle internal details and a few tiny air bubbles.
Soft contact shadows beneath the slice.
A light, neutral studio background.
The flesh, pale rind, and green skin should have distinct material responses. Avoid making everything look like clear glass or opaque plastic.
Keep the slice large and easy to inspect, with a three-quarter camera angle that reveals the flesh, seeds, and thickness.
INTERFACE
Use a minimal editorial layout with generous whitespace, thin borders, restrained controls, and no decorative UI gradients.
Top left:
“MATERIAL STUDIES / NO. 009”
A large italic serif heading split across two lines: “Melon” and “Jelly.”
Small caption:
“A slice of summer.”
“A little wobble.”
“Too soft to share.”
Top right:
A small status indicator showing “WEBGPU · LIVE” when the renderer is running.
Right-side panel:
“THE SPECIMEN”
Three coordinated watermelon-inspired color presets.
Firmness slider with its current value.
Internal damping slider with its current value.
“Give it a nudge” and “Reset” buttons.
“¼ speed” and “Show mesh” checkboxes.
Pause / Resume button.
Bottom left:
A short hint explaining that the slice can be grabbed and stretched.
Live mass, relative volume, and kinetic-energy readouts derived from the simulation. Clearly describe illustrative units or approximate values where appropriate.
Bottom right:
A collapsible “Inside the experiment” section briefly explaining the physics and rendering.
BEHAVIOR AND PERFORMANCE
Support both mouse and touch input. Use pointer capture so dragging remains reliable when the pointer leaves the object.
Make the layout work on desktop and mobile without controls covering the slice.
Reuse buffers and avoid rebuilding geometry or compiling shaders during dragging. Keep interaction smooth and responsive.
Respect reduced-motion preferences. If WebGPU is unavailable, display a clear explanation instead of silently substituting a fake renderer.
VALIDATION
Test dragging from several locations, strong stretches, repeated releases, ground collisions, all sliders, presets, pause, reset, and slow motion.
Check that the model returns to a stable resting shape, seeds stay attached, the mesh remains intact, and there are no rendering errors.
Prioritize the quality of the jelly response and lighting. The result should be something people want to keep grabbing and playing with.
Vib3Coded retweeted
“Show me one good AI-made game”
There you go
THIS IS AAA LEVEL 🤯
Fable 5.2. What’s the excuse now?
I’m blown away. Gemini 4 Carbon, what are you cooking? 🤯
It built this GTA 6-style volume slider in 12 minutes for $1.22
PROMPT
Build a single-file web page called "Neon Coast Switch" (Material Studies No. 066, WebGL + Web Audio). It is a big horizontal pill-shaped toggle switch. Inside it is a 176×50 pixel-art scene of a sun-soaked beach town on a coast road, in a crime-thriller mood: golden hour, pastel art deco, neon, palms, fast cars, police. The knob is a capsule of amber-gradient glass, like an aviator lens. No libraries. Everything original: invented names, no real brands. English UI.
SCENE
Rendering: CPU pixel buffers for albedo and emission. Sprites get an automatic dark outline, a lighter top row and a darker bottom row. Painting a pixel clears its glow, so things hide the light behind them.
Left, the beach:
- the sun, banded at the bottom, sinking into the sea, with glitter on the water and surf on the sand;
- a teal lifeguard tower with a pink roof and a red flag;
- a striped umbrella, a surfboard, a palm, a low sea wall.
Then a boulevard, in front of far blue towers with rows of windows and blinking antenna lights:
- a pink hotel "CORAL" with teal ledges, rows of windows and a roof sign;
- an all-night store with a "MART" fascia, a "24H" sign on a post, and a glass front with shelves;
- a mint-and-chrome diner with "OPEN" and a neon palm on its roof;
- a lavender deco club with a "SUNSET" roof sign and a neon flamingo on its wall;
- palms with swaying fronds, and four street lamps;
- a pavement, a kerb, and a two-lane road with yellow dashes.
Sky: golden-hour blue and peach, then magenta dusk, then night with a moon and stars. Gulls fly over the beach while it is light.
Neon: tubes are drawn from a tiny 3×5 pixel font and simple line shapes. Off, they are dark glass. On, they glow with a halo. Each sign flickers as it catches. Late at night the SUNSET letters chase on the beat.
LIGHT
- Ambient light moves from golden hour to dusk to night.
- Behind the knob the street comes on, all with 4×4 Bayer-dithered edges:
- windows light up: warm, pink, cool, fluorescent in the store, some left dark;
- street lamps pool orange sodium light;
- each neon sign spills its colour.
- A bright dithered rim trails the knob.
- Also lit: headlight beams on the road, red and blue police-light pools, a helicopter searchlight cone and its pool, and muzzle flashes lighting their surroundings.
THE CONVERTIBLE
- A coral convertible with a white stripe and chrome follows the knob on a spring in the near lane. Its wheels turn.
- A dog in sunglasses drives; his ears flap back and his tongue hangs out at speed. A white cat in sunglasses rides in the back, and her lenses glint.
- Effects: exhaust puffs when accelerating, speed lines when fast, brake lights, tyre smoke and a squeal on hard reversals.
- The glass lens magnifies the car. Sample slightly low so the whole car shows.
STREET LIFE
- Traffic drives left in the far lane: sedans, coupes, vans, a yellow taxi. Lights come on at night.
- After dark, driving fast brings a black-and-white police car onto your tail with flashing lights. Slow down and it gives up, swings out, overtakes and leaves; the dog barks.
- A helicopter arrives at night, with a blinking beacon and a flickering rotor. It sweeps a searchlight and follows the chase.
THE HOLD-UP
It happens late at night once the far lane is clear, or earlier if the store is tapped three times after dark. It plays out to the left of the knob.
1. The store window shatters and an alarm flashes. Two masked figures in teal jackets, one carrying a sack, run out and crouch behind a yellow muscle car.
2. A police car slides to a stop, and two officers in blue crouch behind it.
3. For about five seconds both sides fire from cover: muzzle flashes, sparks and glass off the car bodies, ricochets, the scene flashing with each shot.
4. The two dive into their car and peel off left in tyre smoke. The police jump in and give chase.
5. The dog and the cat duck down in the convertible during the shooting.
Keep it stylised and bloodless; nobody is hit. The helicopter's light follows the action.
TAPPING THE SCENE
Each tap has its own synthesised sound. Hovering highlights what can be tapped. Touches on the knob always mean the car.
- The knob: the convertible hops on its hydraulics (air hiss, clunk, springs squeaking as it bounces) and honks. The H key does the same.
- The road: the car drives to that spot.
- Palms: the fronds shake and rustle and a coconut falls, knocking hollowly on the pavement. If the car is underneath, it bonks the dog on the head: a cartoon bonk and boing, a yelp, stars circling his head.
- Hotel windows: three knocks on the glass. The room lights up, a silhouette crosses it, a muffled "hey!" sounds and a "!" pops up above the window.
- The store: the door chime, the door slides open, the clerk waves. Three taps after dark start the hold-up.
- The diner: the order bell rings, and a carhop on roller skates (wheel rumble, clicks on the paving seams) rolls a milkshake out to the car. The dog drinks it with straw slurps and floating hearts, and she skates back.
- Neon signs: they short out with sparks, crackles and a stuttering buzz.
- The sea: a dolphin leaps with a splash, clicks and a whistle.
- The lifeguard tower: a trilled whistle, and the flag flaps.
- Traffic cars: they honk back, each at its own pitch, and flash their lights.
- The police car: a bullhorn yelp and radio chatter.
- The helicopter: a radio squelch, and its searchlight swings onto you.
- The sky: at night a shooting star with a chime; by day a gull flies in, crying.
IDLE
- Stop for a few seconds and the dog drums on the door in time with the music: soft knocks, the backbeat harder. The cat bobs her head.
- After a while he leans on the horn and barks.
GLASS (one WebGL2 fragment shader)
- A moulded bezel with a soft shadow; the scene sampled with nearest filtering.
- A capsule knob that magnifies (0.78) a fully lit render, with:
- RGB-split refraction near the rim;
- a Fresnel edge;
- light focused at its foot;
- highlights;
- an amber aviator-gradient tint, darker at the top.
- The bezel is cream by day and dark plum at night.
INTERACTION
- The knob follows on a spring, stretches with speed and wobbles when it stops.
- Arrow keys, Home and End move it; Enter or Space sends it to the far end with a double honk; role="slider".
- The page colours follow the evening from peach to a deep night purple.
- Readouts:
- Clock: 18:30 → 23:30.
- Speed: in mph.
- Status: Cruising / Speeding / Pursuit / Lost them / Alarm / Shots fired / Getaway.
- A Sound on/off button; the sound starts with the first touch.
AUDIO
All synthesised with Web Audio at 100 BPM: an original four-bar eighties synth-pop song in A minor over Am · F · C · G. Keep the music quiet, about 5 dB under the effects. Use a compressor, a reverb, and a dotted-eighth echo.
Layers, by knob position:
1. The coast: surf swells, gulls by day, a city hum at night.
2. A pumping detuned-saw pad and a filtered square arpeggio.
3. A gated snare, a short kick, hats, and an octave saw bass.
4. A detuned lead with glide and late vibrato.
5. Late at night: FM bells, toms and a crash.
During a chase or the hold-up, the bass doubles to sixteenths and chord stabs push the song along.
Sound effects:
- the engine climbing through its gears with speed, a tyre squeal, a two-tone horn;
- neon crackling and buzzing on, lamps ticking on;
- passing cars panned with a doppler drop;
- a wail/yelp siren panned to the police car; the helicopter's blade slap;
- the store alarm bell and breaking glass;
- gunshots with a crack, a thump and echoes off the buildings (the music ducks under them); ricochets; the getaway engine roar;
- the dog's yips and the cat's indignant meow;
- aviator-hinge clicks when the knob is grabbed;
- plus every tap and idle sound listed above.