Interactive jelly orange slice with knife and cookie cutters
Interactive jelly orange slice with knife and cookie cutters is a 18-second Claude Opus motion design reference by @vib3coded, built around Physics, WebGPU. [Note: the creator shared a partial prompt. Copy this 3D motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch film.
@vib3codedView post
Prompt
[Note: the creator shared a partial prompt. Wording below is theirs.]
GOAL:
Create "Citrus Jelly — Knife & Cookie Cutters": a single self-contained HTML file (citrus-jelly-cutter.html) with an interactive, physically simulated gummy orange slice that you can stretch like jelly, cut with a visible steel knife, and stamp with cookie cutters (star, heart, flower, round) to lift the shapes out.
MOTION:
── Platform ──
- WebGPU + WGSL only, all JS/CSS inline, no libraries, no external assets. One .
- No WebGPU / no adapter → an elegant editorial fallback card ("This slice needs WebGPU.") with a specific explanation; controls disabled. Recover from device loss (up to two rebuilds); surface WGSL compile errors.
- Fixed 60 Hz simulation step with an accumulator, ¼-speed toggle, pause. Keys: Space pause, N nudge, R reset, H hand, K knife, C cutter, 1–4 cutter shapes.
── Page design (warm editorial "material study") ──
- Cream studio backdrop (~#F2ECE2); the 3D floor sweep tone-maps to exactly the page colour.
- Top-left: small caps "MATERIAL STUDIES / NO. 010", huge italic serif "Citrus / Jelly." (second line indented), caption "Sunshine in segments. / Soft enough to slice. / Sweet enough to share."
- Top-right: status pill "WEBGPU · LIVE / PAUSED / UNAVAILABLE".
- Right panel "THE SPECIMEN · fig. 10": Tool (Hand | Knife | Cutter) + a row of four shape buttons with line icons (Star, Heart, Flower, Round); Variety swatches drawn as tiny citrus half-slices (Orange, Blood Orange, Lemon — they recolour flesh, zest, pith, membranes and shadow tint without resetting anything); sliders Firmness (trembling ↔ set) and Internal damping (lively ↔ syrupy); buttons "Give it a nudge", Reset, Pause; checkboxes ¼ speed, Show mesh.
- Bottom-left: tool hint in italic serif (changes per tool), live readouts (Mass ≈ g, Volume % of rest, Kinetic µJ, Pieces), illustrative-scale footnote.
- Bottom-right: collapsible "Inside the experiment" notes (physics, cutting, cookie cutters, rendering).
- Dashed SVG guide while drawing a knife stroke; small italic toasts for misses ("Place the cutter over the jelly.", "Lay that piece flat to stamp it.", "Too thin to cut there.", "That's plenty of pieces.").
- Camera frames the slice in the free area between text and panel (lens shift); drag on empty space orbits within limits, wheel zooms (limited), double-click resets, the camera eases after the slice if it is thrown. Responsive stacked layout under ~860 px with large touch targets; prefers-reduced-motion respected.
── The slice ──
- A thick half-moon orange slice (radius ≈1.58, thickness 0.56): flat cut edge, rounded in-plane corners, bevelled top/bottom edges.
- Zones computed from rest-space coordinates so they stay correct on every cut face: glossy zest with tiny oil-gland pores and mottling, a pale pith band, five segments separated by thin pale radial membranes (also real thin sheets inside the jelly), a pithy core, juice vesicles (teardrop sacs elongated along the radius) and a few tiny air bubbles.
- Translucent candy rendering: re
Author original
Create "Citrus Jelly — Knife & Cookie Cutters": a single self-contained HTML file (citrus-jelly-cutter.html) with an interactive, physically simulated gummy orange slice that you can stretch like jelly, cut with a visible steel knife, and stamp with cookie cutters (star, heart, flower, round) to lift the shapes out.
── Platform ──
- WebGPU + WGSL only, all JS/CSS inline, no libraries, no external assets. One .
- No WebGPU / no adapter → an elegant editorial fallback card ("This slice needs WebGPU.") with a specific explanation; controls disabled. Recover from device loss (up to two rebuilds); surface WGSL compile errors.
- Fixed 60 Hz simulation step with an accumulator, ¼-speed toggle, pause. Keys: Space pause, N nudge, R reset, H hand, K knife, C cutter, 1–4 cutter shapes.
── Page design (warm editorial "material study") ──
- Cream studio backdrop (~#F2ECE2); the 3D floor sweep tone-maps to exactly the page colour.
- Top-left: small caps "MATERIAL STUDIES / NO. 010", huge italic serif "Citrus / Jelly." (second line indented), caption "Sunshine in segments. / Soft enough to slice. / Sweet enough to share."
- Top-right: status pill "WEBGPU · LIVE / PAUSED / UNAVAILABLE".
- Right panel "THE SPECIMEN · fig. 10": Tool (Hand | Knife | Cutter) + a row of four shape buttons with line icons (Star, Heart, Flower, Round); Variety swatches drawn as tiny citrus half-slices (Orange, Blood Orange, Lemon — they recolour flesh, zest, pith, membranes and shadow tint without resetting anything); sliders Firmness (trembling ↔ set) and Internal damping (lively ↔ syrupy); buttons "Give it a nudge", Reset, Pause; checkboxes ¼ speed, Show mesh.
- Bottom-left: tool hint in italic serif (changes per tool), live readouts (Mass ≈ g, Volume % of rest, Kinetic µJ, Pieces), illustrative-scale footnote.
- Bottom-right: collapsible "Inside the experiment" notes (physics, cutting, cookie cutters, rendering).
- Dashed SVG guide while drawing a knife stroke; small italic toasts for misses ("Place the cutter over the jelly.", "Lay that piece flat to stamp it.", "Too thin to cut there.", "That's plenty of pieces.").
- Camera frames the slice in the free area between text and panel (lens shift); drag on empty space orbits within limits, wheel zooms (limited), double-click resets, the camera eases after the slice if it is thrown. Responsive stacked layout under ~860 px with large touch targets; prefers-reduced-motion respected.
── The slice ──
- A thick half-moon orange slice (radius ≈1.58, thickness 0.56): flat cut edge, rounded in-plane corners, bevelled top/bottom edges.
- Zones computed from rest-space coordinates so they stay correct on every cut face: glossy zest with tiny oil-gland pores and mottling, a pale pith band, five segments separated by thin pale radial membranes (also real thin sheets inside the jelly), a pithy core, juice vesicles (teardrop sacs elongated along the radius) and a few tiny air bubbles.
- Translucent candy rendering: re
Questions
What is this 3d scenes prompt for?
It is a Claude Opus motion design brief for “Interactive jelly orange slice with knife and cookie cutters”. Paste it into Claude and keep the timings already written in the prompt.
Where is the original film?
The creator is @vib3coded. Use View post to open the X video this prompt belongs to.