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.
한국어 번역
Citrus Jelly를 만드세요 — 젤리 오렌지 슬라이스를 소재로 한 인터랙티브 3D 장면입니다. 모든 것은 WebGPU와 WGSL 셰이더를 사용하는 단일 HTML 파일 안에서 브라우저에서 직접 실행되어야 합니다. 이미지나 미리 녹화된 애니메이션이 아닌, 진짜 볼류메트릭 3D 지오메트리를 구축하세요.
외형
선명한 오렌지색 과육, 옅은 흰 속껍질층, 그리고 더 단단한 외피를 가진 두툼한 반원형 오렌지 슬라이스.
방사형 세그먼트, 얇은 내부 막, 작은 기포가 보여야 합니다.
부드러운 하이라이트, 빛의 굴절, 깊이에 따라 달라지는 색을 지닌 촉촉하고 반투명한 젤리 재질.
딱딱한 플라스틱이나 유리처럼 보이지 않게 하세요.
밝은 크림색 배경, 부드러운 스튜디오 조명, 접촉 그림자를 사용하세요. 과다 노출은 피하세요.
물리 및 상호작용
사용자가 마우스나 손가락으로 보이는 임의의 지점을 잡고 당길 수 있게 하세요.
변형은 잡은 지점에서 시작되어 주변 영역으로 자연스럽게 전파되어야 합니다.
과육은 장력 아래에서 늘어나고 가늘어져야 하며, 외피는 더 큰 저항을 제공합니다.
놓으면 슬라이스는 부드럽게 되돌아오고, 진동은 점차 잦아들어야 합니다.
안정적인 소프트 바디 시뮬레이션을 사용하세요: 스프링 메시 또는 부피 보존이 적용된 볼류메트릭 탄성 제약.
세그먼트, 막, 기포는 분리되거나 따로 떠다니지 않고 과육과 함께 변형되어야 합니다.
지면 충돌을 포함하세요: 슬라이스는 충돌 시 약간 찌그러지고 그 뒤 흔들려야 합니다.
즉각적으로 튕겨 되돌아오는 것, 끝없는 진동, 지오메트리 폭발을 방지하세요.
인터페이스
넉넉한 여백을 둔 미니멀한 에디토리얼 레이아웃.
왼쪽에는 큰 이탤릭 세리프 제목 “Citrus Jelly.”를 둡니다.
오른쪽에는 Firmness와 Internal damping 슬라이더가 있는 간결한 컨트롤 패널을 둡니다.
Give it a nudge, Reset, Pause 버튼을 둡니다.
mesh와 ¼ speed 토글을 표시합니다.
세 가지 색상 프리셋: Orange, Blood Orange, Lemon.
작은 상호작용 힌트: “Grab. Stretch. Let go.”
모든 레이블은 영어로, 데스크톱과 모바일 모두 편안하게 조작할 수 있어야 합니다.
기술 요구사항
Canvas 2D 대체물이 아닌 진짜 WebGPU 렌더링.
미리 만들어진 모델 없이 코드로 지오메트리와 재질을 생성하세요.
고정된 시뮬레이션 타임스텝과 과도한 늘어남을 방지하는 제약을 사용하세요.
잡기, 드래그, 놓기 동안 부드러운 성능을 유지하세요.
WebGPU를 사용할 수 없을 때 명확한 대체 안내 메시지를 표시하세요.
다양한 잡기 위치, 강한 늘리기, 진동 감쇠, 충돌, 리셋을 테스트하세요.
가장 중요한 것은 설득력 있는 젤리 촉감입니다. 슬라이스는 부드럽고 촉촉해 보여야 하며, 움직임이 너무 만족스러워서 사람들이 계속 늘리고 싶어져야 합니다.
