# Gummy octopus you can grab and stretch

> Octo Jelly: a translucent gummy octopus in the browser that squashes, stretches and jiggles when pulled, on an editorial off-white page. The video sets Claude Opus 5.5's version ($14.01) beside ChatGPT-6 Astra's ($20.74) from the same WebGPU prompt.

- Kind: Game
- Live game: https://claude.ai/artifact/Nuac1NWN6Afrk2d4Zr7xk9
- Page: https://meetreference.com/v/gummy-octopus-webgpu-demo-opus-vs-astra/
- Ready-to-use agent handoff: https://meetreference.com/v/gummy-octopus-webgpu-demo-opus-vs-astra/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/gummy-octopus-webgpu-demo-opus-vs-astra/prompt.txt
- Authorship: AI-made, per the source
- Made with: Not stated
- Model: Claude Opus 5.5, ChatGPT-6 Astra
- Built with: WebGPU
- Style: Simulations; soft body, jelly, webgpu, toy, editorial, comparison, translucent
- Shared by @vib3coded in X, Sep 28, 2026: https://x.com/vib3coded/status/2104466170275324190
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: A browser with WebGPU.

## Recreating this game

These are the creator's published instructions, unedited.

To adapt it: Replace "Octo Jelly" and the gummy octopus with another candy creature, and keep the ART DIRECTION section for the look.

## Prompt

```text
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.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

Two stacked browser pages of the same toy, each with a glossy translucent gummy octopus floating over an off-white page with an italic serif title.

- Color: Warm off-white and pale grey backgrounds, with candy-colored octopuses in violet, coral orange and teal (top) and rose, mauve, slate blue and purple (bottom).
- Type: Large italic serif "Octo Jelly." at the top left of each page, tiny interface text in a right-hand control panel, and the creator's labels "Claude Opus 5.5 / 14.01$" and "ChatGPT-6 Astra / 20.74$" with prices in green.
- Framing: A tall frame split into two horizontal pages, Opus on top and Astra below, each with the octopus near the center, a soft shadow beneath it, and a small control panel at the right.
- Structure: Both octopuses are pulled, stretched and flipped across the page in turn, changing colour between takes.

Storyboard, nine frames spread across the video: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/storyboard.webp

- Frame 1 at 1.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f1.webp
- Frame 2 at 3.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f2.webp
- Frame 3 at 5.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f3.webp
- Frame 4 at 7.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f4.webp
- Frame 5 at 9.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f5.webp
- Frame 6 at 11.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f6.webp
- Frame 7 at 13.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f7.webp
- Frame 8 at 15.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f8.webp
- Frame 9 at 17.0s: https://meetreference.com/media/gummy-octopus-webgpu-demo-opus-vs-astra/f9.webp

## How it was made, per the creator

- Reported spend: About $14.01 API for Opus and $20.74 for Astra (estimated by the creator)
- Notes: Both models got the same prompt. The live link is the Opus version, shared as a Claude artifact.

## Links

- Play game: https://claude.ai/artifact/Nuac1NWN6Afrk2d4Zr7xk9
- Watch: https://x.com/vib3coded/status/2104466170275324190
- Original post: https://x.com/vib3coded/status/2104466170275324190
- Melon jelly by the same creator: https://x.com/vib3coded/status/2104285370951012504