Vib3Coded

PROMPT Create a single self-contained HTML file using Three.js that renders a beautiful animated voxel-art 3D scene. A floating volcanic island hangs in a dusk-to-night sky with stars and a moon. In the center is a volcano with bubbling lava in its crater. A lava river runs down the slope and pours off the edge of the island as a fiery lavafall. On the slope stands an ancient pale-stone shrine with pillars and fire braziers, and a stone stairway leads up to an arch on the crater rim. Glowing cracks run through the dark basalt; add obsidian crystals, charred trees, red maples and pines, and rocky stalactites under the island. A fiery phoenix is reborn from the lava in the crater: it rises in a spiral and circles the volcano, flapping its wings, with a long flowing tail and a trail of sparks, lighting up the island as it passes. Smoke and embers rise from the crater. Add soft shadows, voxel ambient occlusion, drifting voxel clouds, flickering lava and a slow cinematic camera orbit. Make it as detailed and polished as possible.

Prompt Build a single-file interactive WebGL diorama called "Mangrove Lights" (Three.js r160 via import map, OrbitControls, no external models or textures, English UI). A mangrove island sits inside a rounded rectangular block of water, about 10×10 units and 1.7 deep, on a cream plinth, over a transparent canvas with a soft contact shadow. Island: a procedural heightfield with a dry forest floor at the back, shallow mud flats, creeks, and an open inlet at the front corner. Mangrove fringes stand in about 0.5 of water along both glass walls that face the camera, so the stilt roots show above the water and through the glass. The terrain's side walls are a layered mud cross-section with root fibres. Mud below the high-tide line stays dark, wet and glossy. Trees (about 140): each has a short trunk; 8–11 arching prop roots built as CatmullRom tube geometry that reach into the mud; hanging aerial roots; and a dense crown of displaced icosphere blobs with per-instance AO and dark glossy greens. Bark is algae- and barnacle-stained below the high-tide line. Add pencil-root pneumatophores on the flats, a fisherman's hut on stilts with a lit window and lamp plus a boardwalk, a canoe that bobs on the waves, wading egrets, an egret flying by day, and schools of silver fish that swim between the roots and flee the cursor. Water: refraction, Beer–Lambert absorption from real thickness, Fresnel sky, screen-space reflections, sun glints, and almost no shore foam. A 256² GPU wave-equation ripple sim responds to the cursor and clicks. Low mist layers part around the cursor. Fireflies: about 1600 Kuramoto oscillators around the crowns, coupled to a local spatial-hash mean field plus the global field, with a position-dependent phase offset so the synchronized flash sweeps across the forest as a wave. Use an asymmetric flash curve and additive point sprites drawn after the water, with a manual depth test. Mirrored copies show reflections on the water. Two point lights pulse with the average glow. The cursor randomizes the phase of nearby fireflies and pushes them away; a click scatters a wider area; they drift home and resync. Lighting: day/night palettes with moonlight, a warm hut lamp, ACES tone mapping and tilt-shift. UI: brand "bakau°"; headline "A forest that blinks in time."; dock buttons Reset, Night/Day, High/Low tide, Tune and Fullscreen; a settings panel (time, fireflies, pull to sync, mist, water color, tide, waves, ripples, clarity, light azimuth, tilt-shift); a live sync % and clock; a "How it's made" note. The page theme turns dark at night. Include adaptive DPR, a low-detail mode for touch devices, reduced-motion support and a WebGL2 fallback.

PROMPT: Build "Jelly Pool": a single self-contained HTML file. It shows a sunlit outdoor swimming pool in real-time 3D, and the user drops soft-body jelly sea animals into it: a marlin, a humpback whale, an orca and a hammerhead shark. Each animal is made of clear, wobbly jelly that refracts the pool behind it and has a milky core and dark glossy eyes. It splashes in, dives and swims with a travelling body wave, and wobbles as it turns. The whales surface to breathe and blow spray. Everything is procedural: no image, model or sound files. English UI. TECH - three.js r128 from cdnjs (UMD build, global THREE), WebGL 2 required. If WebGL 2 is missing, show a friendly fallback message. - Soft-body physics runs in Web Workers created from a blob URL. Put the worker source in a <script type="text/plain"> tag in the page and use navigator.hardwareConcurrency − 1 workers, clamped to 1–3. Spread the animals across the workers and give each new animal to the least busy one. - Each step, the main thread sends the swim frames to the workers. The workers reply with packed Float32Arrays as transferables. - Use adaptive quality: lower the internal render scale when frames run slow. On coarse-pointer or low-core devices, use coarser jelly meshes and cap the pool at 6 animals instead of 8. THE POOL - A rounded-rectangle pool under a pitched perspective camera, fitted to the screen in any aspect ratio. The floor slopes from a shallow end on the left (≈0.55 m) to a deep end on the right (≈1.85 m). - Pale stone deck. Coping blocks with a rounded bullnose edge overhanging the waterline, standing a little proud of the deck, with a soft shadow along their outer edge and darker splash-wet stone near the water. - Shell: procedural mosaic tiles in a shader (field, border and a darker waterline band), each tile with bevel normals and a glassy glaze highlight. - Dappled shadow from a palm crown leaning over one corner, moving gently in the breeze. - Water simulation: a GPU heightfield wave equation on ping-pong float render targets, damped, with walls as boundaries. Touching or dragging across the water makes ripples. Add a slow circulation from return jets and gentle lapping swells. - Water surface: computed normals, refraction of the shell and the animals beneath (with the deep end bluer and darker), Fresnel reflection of the sky, and a reflection of the coping and the tiled wall band. Add a sharp sun glint, a meniscus and coping shadow along the walls, and foam patches from splashes. - Caustics: refract a grid of sun rays through the surface heightfield onto the floor into a caustic texture (area-change brightness). Use it to light the shell and anything under water. - Tools on the water: - Breeze: wind ripples from scrolling noise gradients. - Rain: random drop impulses plus ring ripples, and rain sound. - Whirlpool: a vortex that swirls the surface and the animals, a darkened funnel and spiral foam arms. THE ANIMALS (soft bodies) - Define each species as a signed-distance body: smooth unions of ellipsoids and capsules, with fins as flattened shapes. - Marlin: long bill, tall sail fin, forked tail. - Humpback: long pectoral fins, throat pleats, knobby head. - Orca: tall dorsal fin, rounded head. - Hammerhead: wide cephalofoil, tall dorsal. - From the SDF, build: 1. A tetrahedral simulation lattice: a voxel grid, keeping cells that intersect the body, each split into tets. 2. A smooth render surface via surface nets, plus an inner milky core from an offset SDF and two eyes. 3. An embedding: each render vertex is stored as the tet that contains it plus barycentric weights. - Physics in the worker, XPBD: - co-rotational shape matching per tet (warm-start rotations) plus edge-based internal viscosity, firmer in the core than the skin; - in the water (y < 0) the body is weightless with quadratic drag; above the water, gravity, so it falls back with a splash; - steering through a soft "hold" constraint that pulls the chest and head nodes (never fins or tail) toward a swim frame (position + rotation) moved by the main thread; - swimming by strain: a travelling wave of target lengthening and shortening along the spine toward the tail. It is side to side for fish (marlin, hammerhead) and up and down for whales (humpback, orca, using each tet's offset above or below the spine), with a bend toward the direction of a turn. - Output per step: node positions plus a per-node cofactor matrix of the deformation gradient F = Ds·Dm⁻¹ (columns f1×f2, f2×f0, f0×f1), averaged over the surrounding tets. Pack them as four rows of RGBA texels per node (position, then three cofactor columns) so the GPU can transform rest normals to deformed normals. JELLY RENDERING (GPU skinning + passes) - Upload the node texture as a float DataTexture each frame. In the vertex shader, use texelFetch to read the 4 nodes of the embedding tet, blend the positions with the barycentrics, and transform the rest normal with the blended cofactor. - Pass order: 1. Opaque under-water scene into an RGBA half-float target: the shell, bubbles, and each animal's milky core and eyes, lit by caustic sunlight through the surface. Store the view depth in alpha. 2. Jelly back faces into a float target: the linear view depth of the far side. 3. Jelly front faces: - thickness = back depth − front depth; - Beer–Lambert absorption with a per-species tint; - refraction: bend the view ray and sample the opaque target behind; - Fresnel sky reflection and sun specular; - a soft glow where the sun passes through thin parts (fins, tail). 4. A pale, soft floor shadow per animal, with the core a little denser. 5. The water surface composited over everything, so animals under water are seen through the refracting, caustic-lit water, and parts above the water are seen directly. - Pigment patterns live in rest-space coordinates, so they ride the wobble. Each is a filtering film on the back, not paint: - marlin: cobalt back with a wavering edge and a silver belly, vertical bars on the flank that glow brighter when it is excited (soften them at a distance to avoid moiré), dark fins, the bill dark above; - humpback: no pigment, only throat pleats and a mouth line as shadowed grooves; - orca: black above the white line and on every fin, the white eye patch, a grey saddle; - hammerhead: a steel-grey cape over the back and the top of the hammer, dusky fin tips, five gill slits. - Eyes: glossy dark beads with a pale ring and a wide pupil. BEHAVIOUR - Steering field: an SDF of where an animal may swim and still be seen. Keep it inside the walls, away from the band hidden under the near coping (the band gets wider the deeper the animal swims) and out from under the dock of cards, leaning back toward the open middle. - Keep the centre, snout and tail inside. - Wander in depth. - Animals separate from each other (steering plus a direct positional push, so two bodies never share the water). - Whales: humpback and orca surface every so often. The back breaks the surface, then they blow: a puff of spray from the blowhole and a ring of ripples. - Close under the surface an animal leaves wakes, and the swish of a turn makes ripples. Crossing the surface makes splashes, droplets and foam. - States: in the air (held or thrown), diving in, swimming, leaving. - "Clear pool": the animals rise out of the water and melt away back into their cards. - Start state: a humpback and a marlin already swimming, and an orca thrown in a moment later. INTERFACE (glass dock at the bottom, light and clean) - Four cards, each with: - a live thumbnail of the jelly animal in its rest pose, rendered with the same shaders; - name and short description: Marlin "Cobalt, silver belly", Humpback "Ocean blue", Orca "Black & white", Hammerhead "Steel grey". - Card interaction: - tap a card: the animal is tossed into the pool; - drag a card: the animal hangs over the water under the pointer, dangling and wobbling, and drops in where it is released. - Tool buttons with SVG icons: Breeze (B), Rain (R), Whirlpool (W), Clear pool, Sound (M), Hide interface (H), plus a "Show interface" restore button. - Also: - a brand label "Jelly Pool" with a live count ("Empty pool", "3 jellies"); - a hint: "Tap a jelly to release it, or drag one onto the water"; - a toast when the pool is full: "The pool is full. Clear it to add more jellies". - Accessibility: aria-labels on the canvas and the cards, keyboard shortcuts, respect for prefers-reduced-motion, and a responsive layout down to phone width. SOUND (Web Audio, synthesized, off by default) - Gentle water lapping. - Splashes and plops scaled by impact. - Rain hiss. - Whale blows as a breathy whoosh. - Breeze.

PROMPT Make a 3D pixel-art ice hockey game: an old timber indoor arena on a floating slab of frozen ground, rendered as a real-time three.js scene through a low-res orthographic isometric camera with depth outlines and a 64-colour OKLab palette; quarter-turn rotation where the two walls/stands nearest the camera lift away like a doll's house. Five skaters and a goalie a side (home Otters in green, visiting Foxes in orange), box-rig players with IK, numbers on their backs, helmets with visors, sticks laid from blade to top hand. Real rules: three 20-minute periods on a four-sided scoreboard hung over centre ice (clock runs only in play), faceoffs at the correct dots with a striped referee dropping the puck, goalie freezes for whistles, two-minute penalties in a glassed penalty box with power plays, body checks into the boards that rattle the glass, pucks over the glass into the crowd, sudden-death overtime, goal horn and red light, fist bumps along the bench, a handshake line at the end. Momentum skating with hockey stops, five-role team shape, passes solved from ice friction, shots aimed at the open corner. The ice is a canvas the skates scratch; between periods a resurfacer drives laps from its corridor and wipes it clean. Instanced crowd of ~900 fans who stand for goals, groan at posts and do the wave; lights Game / Dim / Show (spotlights and phone lights). Side panel with live score, clock, rosters, press-box commentary and controls. Original fictional teams, sponsors and town; English UI.

try it here claude.ai/artifact/4z8xyB3PH…

Prompt: Build "Deep End": an open-air lido on a floating island of earth and rock, rendered as a real-time 3D scene in pixel art (three.js, orthographic isometric camera rendering into a small low-res target, no anti-aliasing, depth-buffer outlines, every pixel snapped to a fixed 64-colour palette matched in OKLab; quarter-turn rotation, zoom, pixel-size slider, Raw 3D toggle). Scene: a 25 m lap pool and a 5 m deep diving pool cut into a concrete deck; 1 m and 3 m springboards that visibly bend; a 1930s concrete diving tower with platforms at 5, 7.5 and 10 m and an open stair; striped changing cabins with a clock, a kiosk, loungers and parasols; a judges' table. Diving meet with real physics: each dive is flown, not animated — takeoff speed and angular momentum are solved to land the somersaults, angular momentum is conserved so tucking spins the diver faster and kicking out slows them to line up the entry. Divers kick out slightly early or late (more on harder dives), the entry angle sets the splash, five judges hold up score cards, highest and lowest are dropped, the rest are multiplied by the degree of difficulty. Events: 10 m, 3 m, free swim. Water: each pool surface is a wave-equation height field (~20 cm cells) — entries, strokes, rain and clicks make rings that bounce off the walls; shaded from its normals with sun glints and a mirrored reflection of the lido; caustics on the tiled floor. People: box-rig figures with two-bone IK — swimmers doing freestyle, breaststroke and backstroke with flip turns; divers swim to the ladder, shower, sit in the warm tub and climb again; children who run and get whistled at by the lifeguard; wet footprints on the deck that dry in the sun. Light and weather: day / dusk / night (pool lights glow underwater, tower floodlights at night), dry / rain (rain rings the water and darkens the deck). Click the water to make a splash. Side panel with the meet scoreboard, controls and a short "How it's drawn" note. Original fictional content only, English UI.