# Gummy citrus slices on a cream stage

> A comparison of two browser-based citrus jelly scenes, featuring segmented orange, green, pink and yellow slices. The newer presentation combines sculptural deformations, glossy flesh and a minimal cream interface.

- Kind: Video
- Page: https://meetreference.com/v/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/
- Ready-to-use agent handoff: https://meetreference.com/v/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/prompt.txt
- Authorship: AI-made, per the source
- Made with: Not stated
- Model: Claude Opus 5.5
- Built with: not stated
- Style: Code & dev; minimal, editorial, soft-body, glossy, food-inspired, 3d
- Length and format: 20 sec, 4:5 (720x960 source)
- Playback: a muted visual reference. The original soundtrack is available only at the source.
- Shared by @vib3coded in X, Sep 26, 2026: https://x.com/vib3coded/status/2103822857155313953
- 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.

## Recreating this video

These are the creator's published instructions, unedited.

## Prompt

```text
Create Citrus Jelly — an interactive 3D scene featuring a gummy orange slice. Everything must run directly in the browser in a single HTML file using WebGPU and WGSL shaders. Build genuine volumetric 3D geometry, not an image or a prerecorded animation.
APPEARANCE
A thick semicircular orange slice with vibrant orange flesh, a pale pith layer, and a firmer outer rind.

Visible radial segments, thin internal membranes, and tiny bubbles.
A juicy, translucent gummy material with soft highlights, light refraction, and depth-dependent color.
Avoid making it look like rigid plastic or glass.
Use a light cream background, soft studio lighting, and a contact shadow. Avoid overexposure.
PHYSICS AND INTERACTION

Let users grab any visible point with a mouse or finger and pull it.

Deformation must originate at the grab point and propagate naturally through neighboring areas.
The flesh should stretch and narrow under tension, while the rind offers more resistance.
On release, the slice should spring back gently, with oscillations gradually settling.
Use a stable soft-body simulation: a spring mesh or volumetric elastic constraints with volume preservation.
Segments, membranes, and bubbles must deform with the flesh rather than separating or floating independently.
Include ground collisions: the slice should squash slightly on impact and wobble afterward.
Prevent instant snapping back, endless oscillation, and exploding geometry.
INTERFACE

A minimal editorial layout with generous whitespace.

A large italic serif heading, “Citrus Jelly.”, on the left.
A compact control panel on the right with Firmness and Internal damping sliders.
Give it a nudge, Reset, and Pause buttons.
Show mesh and ¼ speed toggles.
Three color presets: Orange, Blood Orange, and Lemon.
A small interaction hint: “Grab. Stretch. Let go.”
All labels in English, with comfortable desktop and mobile controls.
TECHNICAL REQUIREMENTS

Genuine WebGPU rendering, not a Canvas 2D substitute.

Generate geometry and materials in code without premade models.
Use a fixed simulation timestep and constraints that prevent excessive stretching.
Maintain smooth performance during grabbing, dragging, and release.
Display a clear fallback message when WebGPU is unavailable.
Test different grab locations, strong stretching, oscillation decay, collisions, and reset.
The main priority is a convincing gummy feel. The slice should look soft, juicy, and so satisfying in motion that people want to keep stretching it.
```

## What it looks like

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

Glossy, stylized citrus wedges rendered like soft jelly, shown in several fruit-inspired color variations.

- Color: Coral orange, pink-red, lime green, and pale yellow, with warm orange rind and a muted cream background.
- Type: Rounded, translucent 3D forms with smooth highlights, soft shadows, and fine radial segment lines.
- Framing: A single wedge is centered against a sparse background, with a small “Citrus Jelly” label near the upper left.
- Structure: Curved citrus-slice shapes with a thick rind, segmented pulp, and visible radial divisions.

Storyboard, nine frames spread across the video: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/storyboard.webp

- Frame 1 at 1.1s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f1.webp
- Frame 2 at 3.3s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f2.webp
- Frame 3 at 5.6s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f3.webp
- Frame 4 at 7.8s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f4.webp
- Frame 5 at 10.0s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f5.webp
- Frame 6 at 12.2s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f6.webp
- Frame 7 at 14.4s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f7.webp
- Frame 8 at 16.7s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f8.webp
- Frame 9 at 18.9s: https://meetreference.com/media/video-gummy-citrus-slices-on-a-cream-stage-a72d5d/f9.webp

## Links

- Watch: https://x.com/vib3coded/status/2103822857155313953
- Original post: https://x.com/vib3coded/status/2103822857155313953
- Discovery collection: https://data.openchamber.dev/opus-5-5-videos/v/vib3coded-2103822857155313953