Interactive 3D gummy squid with squishable physics

Prompt

The author shared part of the prompt.

Create “Squid Jelly” — a beautiful, interactive 3D gummy squid that users can grab, stretch, and squish directly in their browser. Deliver a complete standalone HTML file using genuine WebGPU.

ART DIRECTION

Make the squid look like a premium translucent gummy candy:
- An elongated, tapered mantle with a rounded tip.
- Two broad, thin, diamond-shaped side fins.
- Eight shorter curled arms and two longer feeding tentacles with rounded club-shaped tips.
- Small suction cups and a cute, understated face.

Use a warm off-white background, soft studio lighting, and a subtle ground shadow. Keep the squid large and centered, with an elegant, uncluttered composition.

GEOMETRY

Generate all geometry procedurally. No external models or image files.

Connect the arms, tentacles, and fins smoothly to the body. Their roots must remain embedded and attached during strong pulls, with no visible gaps or floating parts.

Suction cups and eyes must follow the deforming surface. Give the fins a thin, flexible profile and the longer tentacles slender shafts with thicker tips.

JELLY MATERIAL

Create convincing glossy, translucent jelly:
- Thickness-dependent color absorption.
- Refraction and soft internal light scattering.
- Smooth studio reflections and delicate rim highlights.
- A few tiny bubbles embedded inside the material.
- Richer color in thick areas and greater translucency along thin fins and tentacle tips.

Avoid opaque plastic, washed-out colors, blown-out highlights, visible mesh seams, and flickering transparency.

SOFT-BODY PHYSICS

Use a stable mass-spring or position-based dynamics simulation with approximate volume preservation.

The mantle should feel soft but substantial. Arms should bend independently, while long tentacles and fins should be more flexible.

Let users grab the body, fins, or tentacles at the clicked location. Pulling must deform the nearby geometry first, with the rest following elastically. Do not fake softness by scaling or rotating the entire model.

On release, the squid should wobble, recover its shape, and gradually settle. Include gravity, floor collisions, friction, and damping. Prevent appendages from passing through the floor.

Use fixed simulation steps, bounded stretching, and robust attachment constraints so repeated strong pulls cannot tear the model apart or destabilize the simulation.

INTERACTION

- Left-click or touch the squid to grab and stretch it.
- Right-drag or drag empty space to gently orbit the camera.
- Support limited zoom and mobile touch controls.
- Keep camera gestures separate from object dragging.

Add:
- Give it a nudge
- Reset
- Reset view
- Pause
- Firmness slider
- Internal damping slider
- ¼ speed toggle
- Show mesh toggle

Provide three material palettes: Coral, Lagoon, and Grape. Switching colors must not reset the simulation.

INTERFACE

Use a minimal editorial layout:
- Top left: small “MATERIAL STUDIES” label.
- Large italic serif heading: “Squid Jelly.”
- Caption: “A

Category

Apps & UI

Stack

Physics, WebGPU

From the author

prompt is truncated in the thread

On X

349 likes · 35K views · 112 saves