Create “Melon Jelly” - a polished, interactive 3D watermelon jelly slice that runs directly in the browser using genuine WebGPU and WGSL sha…
Cette vidéo n’est plus disponible ici. Voir le post original ↗
Gummy octopus physics comparison
@vib3coded ↗Le prompt du créateur
Un prompt, c’est le texte qui décrit à l’IA ce que vous voulez obtenir. Copiez celui-ci, puis collez-le dans votre projet Claude Code en précisant ce que vous souhaitez changer : le sujet, les textes, les couleurs ou la durée.
Le texte original est conservé pour respecter le travail du créateur. Vous pouvez ajouter vos propres consignes en français, même si le prompt est en anglais.
Create “Octo Jelly” - a beautiful, interactive 3D gummy octopus that users can grab, stretch, and squish directly in their browser. Deliver a complete single-file HTML experience using genuine WebGPU. ART DIRECTION Make the octopus look like a premium translucent gummy candy: a rounded head, eight curled tentacles, small suction cups, and a cute, understated face. Use a warm off-white background, soft studio lighting, and a subtle ground shadow. Keep the scene elegant and uncluttered, with the octopus large and centered. GEOMETRY AND MATERIAL * Generate all geometry procedurally. No external models or image files. * Connect all eight tentacles smoothly to the body, without visible gaps or floating parts. * Add rounded suction cups that stay attached as the tentacles deform. * Use glossy, translucent jelly with thickness-dependent color absorption, refraction, soft internal light scattering, and delicate rim highlights. * Thick areas should have richer color; thin tentacle tips should transmit more light. * Avoid opaque plastic, blown-out highlights, and visible mesh seams. SOFT-BODY PHYSICS Use a stable mass-spring or position-based dynamics system with elastic constraints and approximate volume preservation. * The head should feel soft but substantial. * Tentacles should be more flexible than the head, especially near their tips. * Allow users to grab the head or any tentacle at the clicked location. * Pulling should deform the nearby geometry first, then elastically pull the rest of the body. * On release, the octopus should wobble and gradually settle into its original shape. * Tentacles should react independently, with slightly delayed motion. * Include gravity, floor collisions, friction, and damping. * Prevent tentacles from passing through the floor. * Clamp extreme stretching and use fixed simulation steps so strong pulls do not break the model. * Do not fake softness by scaling or rotating the entire octopus. INTERACTION * Left-click or touch the octopus to grab and stretch it. * Right-drag or drag empty space to gently orbit the camera. * Support a limited zoom range. * Keep camera gestures separate from object dragging. * Add “Give it a nudge,” “Reset,” “Pause,” and “Reset view” buttons. * Include Firmness and Internal damping sliders. * Add “¼ speed” and “Show mesh” toggles. * Provide three color presets: Coral, Lagoon, and Grape. Change the material colors without resetting the simulation. INTERFACE Use a minimal editorial layout: * Top left: small “MATERIAL STUDIES” label. * Large italic serif heading: “Octo Jelly.” * Caption: “Eight arms. A little wobble. A very soft creature.” * Top right: a WebGPU status indicator. * Right side: a compact “THE SPECIMEN” control panel. * Bottom left: “Grab a tentacle. Pull gently. Let go.” Use clean sans-serif text for controls, thin borders, and generous whitespace. Avoid heavy panels or decorative UI effects. PERFORMANCE AND QUALITY * Use real WebGPU rendering, not a 2D canvas imitation or prerecorded animation. * Reuse geometry and buffers; do not rebuild meshes during dragging. * Keep suction cups, eyes, and other details attached to the deforming body. * Handle transparency without flickering, disappearing surfaces, or harsh black edges. * Support desktop and mobile layouts. * Show a clear fallback message if WebGPU is unavailable. * Test repeated grabs, strong pulls, releases, floor collisions, palette changes, pause, and reset. The result should feel like a little living gummy toy - glossy, squishy, expressive, and satisfying to stretch. Deliver the full working HTML, not a mockup or a code fragment.
D’autres vidéos pour vous inspirer
Du même créateur ↗Create a beautiful, highly detailed, fully interactive 3D prehistoric island using Three.js and WebGL. Deliver everything in a single standa…
Create Citrus Jelly — an interactive 3D scene featuring a gummy orange slice. Everything must run directly in the browser in a single HTML f…
Create an interactive 3D scene called “Pineapple Jelly” - a thick, translucent gummy pineapple ring that users can grab, stretch, bend, and …
Create from scratch a fully interactive 3D scene of a pirate ship sailing across a dynamic ocean at sunset. The visual style should be cinem…
Create “Jellyfish Jelly” — a beautiful, interactive 3D gummy jellyfish that users can grab, stretch, and squish directly in their browser. D…