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.
한국어 번역
“Octo Jelly”를 만들어 주세요 - 사용자가 브라우저에서 직접 잡고, 늘리고, 눌러볼 수 있는 아름답고 인터랙티브한 3D 구미 문어입니다. 진짜 WebGPU를 사용해 완전한 단일 파일 HTML 경험으로 제공해 주세요.
아트 디렉션
문어가 고급스러운 반투명 구미 캔디처럼 보이게 하세요: 둥근 머리, 여덟 개의 말린 촉수, 작은 흡반, 귀엽고 절제된 얼굴.
따뜻한 오프화이트 배경, 부드러운 스튜디오 조명, 은은한 바닥 그림자를 사용하세요. 장면은 우아하고 깔끔하게 유지하고, 문어는 크게 중앙에 배치하세요.
지오메트리와 머티리얼
* 모든 지오메트리를 절차적으로 생성하세요. 외부 모델이나 이미지 파일은 사용하지 마세요.
* 여덟 개의 촉수를 모두 몸통에 매끄럽게 연결하고, 눈에 띄는 틈이나 떠 있는 부분이 없도록 하세요.
* 촉수가 변형될 때도 붙어 있는 둥근 흡반을 추가하세요.
* 광택이 나는 반투명 젤리를 사용하고, 두께에 따른 색 흡수, 굴절, 부드러운 내부 광산란, 섬세한 림 하이라이트를 넣으세요.
* 두꺼운 영역은 색이 더 풍부해야 하고, 얇은 촉수 끝은 빛을 더 많이 투과해야 합니다.
* 불투명한 플라스틱, 날아간 하이라이트, 눈에 보이는 메시 이음새를 피하세요.
소프트 바디 물리
탄성 제약과 근사적인 부피 보존을 갖춘 안정적인 질량-스프링 또는 위치 기반 동역학 시스템을 사용하세요.
* 머리는 부드럽지만 묵직하게 느껴져야 합니다.
* 촉수는 머리보다 더 유연해야 하며, 특히 끝부분에서 그러해야 합니다.
* 사용자가 클릭한 위치에서 머리나 임의의 촉수를 잡을 수 있게 하세요.
* 당기면 먼저 주변 지오메트리가 변형되고, 그다음 나머지 몸통이 탄성적으로 끌려와야 합니다.
* 놓으면 문어가 흔들리며 점차 원래 형태로 돌아와야 합니다.
* 촉수는 서로 독립적으로 반응해야 하며, 움직임이 약간 지연되어야 합니다.
* 중력, 바닥 충돌, 마찰, 감쇠를 포함하세요.
* 촉수가 바닥을 통과하지 못하게 하세요.
* 과도한 늘어남을 제한하고 고정 시뮬레이션 스텝을 사용해, 강하게 당겨도 모델이 깨지지 않게 하세요.
* 문어 전체를 스케일링하거나 회전시켜 부드러움을 흉내 내지 마세요.
인터랙션
* 문어를 왼쪽 클릭하거나 터치해 잡고 늘리세요.
* 오른쪽 드래그 또는 빈 공간 드래그로 카메라를 부드럽게 회전하세요.
* 제한된 줌 범위를 지원하세요.
* 카메라 제스처와 오브젝트 드래그를 분리하세요.
* “Give it a nudge,” “Reset,” “Pause,” “Reset view” 버튼을 추가하세요.
* Firmness와 Internal damping 슬라이더를 포함하세요.
* “¼ speed”와 “Show mesh” 토글을 추가하세요.
* 세 가지 색상 프리셋을 제공하세요: Coral, Lagoon, Grape. 시뮬레이션을 리셋하지 않고 머티리얼 색상을 변경하세요.
인터페이스
최소한의 에디토리얼 레이아웃을 사용하세요:
* 왼쪽 상단: 작은 “MATERIAL STUDIES” 라벨.
* 큰 이탤릭 세리프 제목: “Octo Jelly.”
* 캡션: “Eight arms. A little wobble. A very soft creature.”
* 오른쪽 상단: WebGPU 상태 표시기.
* 오른쪽: 컴팩트한 “THE SPECIMEN” 컨트롤 패널.
* 왼쪽 하단: “Grab a tentacle. Pull gently. Let go.”
컨트롤에는 깔끔한 산세리프 텍스트를, 얇은 테두리와 넉넉한 여백을 사용하세요. 무거운 패널이나 장식적인 UI 효과는 피하세요.
성능과 품질
* 실제 WebGPU 렌더링을 사용하고, 2D 캔버스 모방이나 미리 녹화된 애니메이션은 사용하지 마세요.
* 지오메트리와 버퍼를 재사용하고, 드래그 중에 메시를 다시 만들지 마세요.
* 흡반, 눈 및 기타 디테일이 변형되는 몸통에 붙어 있게 하세요.
* 깜빡임, 사라지는 표면, 거친 검은 가장자리 없이 투명도를 처리하세요.
* 데스크톱 및 모바일 레이아웃을 지원하세요.
* WebGPU를 사용할 수 없을 때 명확한 폴백 메시지를 표시하세요.
* 반복적인 잡기, 강한 당김, 놓기, 바닥 충돌, 팔레트 변경, 일시정지, 리셋을 테스트하세요.
결과물은 작은 살아 있는 구미 장난감처럼 느껴져야 합니다 - 광택 있고, 말랑하고, 표정이 살아 있고, 늘리는 즐거움이 있어야 합니다. 목업이나 코드 조각이 아닌 완전히 작동하는 HTML을 제공하세요.
