Create “Squid Jelly” — a beautiful, interactive 3D gummy squid that users can grab, stretch, and squish directly in their browser. Deliver a complete standalone HTML file using genuine WebGPU.
ART DIRECTION
Make the squid look like a premium translucent gummy candy:
- An elongated, tapered mantle with a rounded tip.
- Two broad, thin, diamond-shaped side fins.
- Eight shorter curled arms and two longer feeding tentacles with rounded club-shaped tips.
- Small suction cups and a cute, understated face.
Use a warm off-white background, soft studio lighting, and a subtle ground shadow. Keep the squid large and centered, with an elegant, uncluttered composition.
GEOMETRY
Generate all geometry procedurally. No external models or image files.
Connect the arms, tentacles, and fins smoothly to the body. Their roots must remain embedded and attached during strong pulls, with no visible gaps or floating parts.
Suction cups and eyes must follow the deforming surface. Give the fins a thin, flexible profile and the longer tentacles slender shafts with thicker tips.
JELLY MATERIAL
Create convincing glossy, translucent jelly:
- Thickness-dependent color absorption.
- Refraction and soft internal light scattering.
- Smooth studio reflections and delicate rim highlights.
- A few tiny bubbles embedded inside the material.
- Richer color in thick areas and greater translucency along thin fins and tentacle tips.
Avoid opaque plastic, washed-out colors, blown-out highlights, visible mesh seams, and flickering transparency.
SOFT-BODY PHYSICS
Use a stable mass-spring or position-based dynamics simulation with approximate volume preservation.
The mantle should feel soft but substantial. Arms should bend independently, while long tentacles and fins should be more flexible.
Let users grab the body, fins, or tentacles at the clicked location. Pulling must deform the nearby geometry first, with the rest following elastically. Do not fake softness by scaling or rotating the entire model.
On release, the squid should wobble, recover its shape, and gradually settle. Include gravity, floor collisions, friction, and damping. Prevent appendages from passing through the floor.
Use fixed simulation steps, bounded stretching, and robust attachment constraints so repeated strong pulls cannot tear the model apart or destabilize the simulation.
INTERACTION
- Left-click or touch the squid to grab and stretch it.
- Right-drag or drag empty space to gently orbit the camera.
- Support limited zoom and mobile touch controls.
- Keep camera gestures separate from object dragging.
Add:
- Give it a nudge
- Reset
- Reset view
- Pause
- Firmness slider
- Internal damping slider
- ¼ speed toggle
- Show mesh toggle
Provide three material palettes: Coral, Lagoon, and Grape. Switching colors must not reset the simulation.
INTERFACE
Use a minimal editorial layout:
- Top left: small “MATERIAL STUDIES” label.
- Large italic serif heading: “Squid Jelly.”
- Caption: “A little ink. A little wiggle. A very sweet sea creature.”
- Top right: WebGPU status indicator.
- Right side: compact “THE SPECIMEN” control panel.
- Bottom left: a short interaction hint.
Use clean sans-serif controls, thin borders, and generous whitespace. Adapt the layout for mobile without covering the squid.
QUALITY AND PERFORMANCE
Use real 3D geometry and native WebGPU rendering with WGSL shaders, not a 2D imitation or prerecorded animation.
Reuse meshes and buffers. Do not reconstruct geometry during dragging. Prioritize stable interactions and smooth performance.
Test strong pulls, repeated releases, appendage attachments, floor collisions, palette changes, pause, reset, and camera controls.
Provide a clear fallback message if WebGPU is unavailable.
Deliver the full working HTML, not a mockup or code fragment. The result should feel like a little living gummy toy: glossy, weighty, flexible, and irresistibly satisfying to stretch.
한국어 번역
“Squid Jelly”를 제작하세요 — 사용자가 브라우저에서 직접 잡아당기고 늘리고 눌러 으깰 수 있는 아름답고 상호작용적인 3D 구미 오징어입니다. 실제 WebGPU를 사용한 완전한 독립형 HTML 파일로 제공하세요.
아트 디렉션
오징어가 고급스러운 반투명 구미 캔디처럼 보이게 하세요:
- 둥근 끝으로 가늘어지는 길쭉한 외투막.
- 넓고 얇은 다이아몬드 모양의 측면 지느러미 두 개.
- 짧게 말린 팔 여덟 개와 둥근 곤봉 모양 끝을 가진 더 긴 촉수 두 개.
- 작은 흡반과 귀엽고 절제된 얼굴.
따뜻한 오프화이트 배경, 부드러운 스튜디오 조명, 은은한 바닥 그림자를 사용하세요. 오징어를 크게 중앙에 배치하고 우아하고 군더더기 없는 구도로 유지하세요.
지오메트리
모든 지오메트리를 절차적으로 생성하세요. 외부 모델이나 이미지 파일은 사용하지 마세요.
팔, 촉수, 지느러미를 몸통에 매끄럽게 연결하세요. 강하게 당겨도 뿌리 부분이 몸속에 박힌 채 붙어 있어야 하며, 눈에 띄는 틈이나 떠 있는 부분이 없어야 합니다.
흡반과 눈은 변형되는 표면을 따라가야 합니다. 지느러미는 얇고 유연한 형태로, 긴 촉수는 가는 줄기와 더 두꺼운 끝으로 만들어 주세요.
젤리 재질
설득력 있는 광택 있고 반투명한 젤리를 만드세요:
- 두께에 따른 색 흡수.
- 굴절과 부드러운 내부 광산란.
- 매끄러운 스튜디오 반사와 섬세한 림 하이라이트.
- 재질 내부에 박힌 몇 개의 작은 기포.
- 두꺼운 부분은 더 진한 색, 얇은 지느러미와 촉수 끝은 더 높은 투명도.
불투명한 플라스틱, 바랜 색, 날아간 하이라이트, 눈에 보이는 메시 이음새, 깜빡이는 투명도는 피하세요.
소프트 바디 물리
부피 보존을 근사한 안정적인 질량-스프링 또는 위치 기반 동역학 시뮬레이션을 사용하세요.
외투막은 부드럽지만 묵직하게 느껴져야 합니다. 팔은 각각 독립적으로 휘어져야 하고, 긴 촉수와 지느러미는 더 유연해야 합니다.
사용자가 클릭한 위치에서 몸통, 지느러미, 촉수를 잡을 수 있게 하세요. 당기면 주변 지오메트리가 먼저 변형되고 나머지가 탄성적으로 따라와야 합니다. 전체 모델을 확대하거나 회전하는 식으로 부드러움을 흉내 내지 마세요.
놓으면 오징어가 흔들리며 형태를 회복하고 점차 안정되어야 합니다. 중력, 바닥 충돌, 마찰, 감쇠를 포함하세요. 부속이 바닥을 통과하지 않게 하세요.
고정 시뮬레이션 스텝, 제한된 늘어남, 견고한 부착 제약을 사용해 반복적인 강한 당김에도 모델이 찢어지거나 시뮬레이션이 불안정해지지 않게 하세요.
상호작용
- 오징어를 왼쪽 클릭하거나 터치해 잡고 늘리세요.
- 오른쪽 드래그 또는 빈 공간 드래그로 카메라를 부드럽게 회전하세요.
- 제한된 줌과 모바일 터치 조작을 지원하세요.
- 카메라 제스처와 오브젝트 드래그를 분리하세요.
추가:
- Give it a nudge
- Reset
- Reset view
- Pause
- Firmness slider
- Internal damping slider
- ¼ speed toggle
- Show mesh toggle
세 가지 소재 팔레트를 제공하세요: Coral, Lagoon, Grape. 색을 바꿔도 시뮬레이션이 리셋되어서는 안 됩니다.
인터페이스
미니멀한 편집 디자인 레이아웃을 사용하세요:
- 왼쪽 상단: 작은 “MATERIAL STUDIES” 라벨.
- 큰 이탤릭 세리프 제목: “Squid Jelly.”
- 캡션: “A little ink. A little wiggle. A very sweet sea creature.”
- 오른쪽 상단: WebGPU 상태 표시기.
- 오른쪽: 컴팩트한 “THE SPECIMEN” 컨트롤 패널.
- 왼쪽 하단: 짧은 조작 안내.
깔끔한 산세리프 컨트롤, 얇은 테두리, 넉넉한 여백을 사용하세요. 오징어를 가리지 않으면서 모바일용으로 레이아웃을 조정하세요.
품질과 성능
2D 모방이나 사전 녹화 애니메이션이 아닌, 실제 3D 지오메트리와 WGSL 셰이더를 사용한 네이티브 WebGPU 렌더링을 사용하세요.
메시와 버퍼를 재사용하세요. 드래그 중에 지오메트리를 다시 만들지 마세요. 안정적인 상호작용과 부드러운 성능을 우선하세요.
강한 당김, 반복 놓기, 부속 부착, 바닥 충돌, 팔레트 변경, 일시정지, 리셋, 카메라 조작을 테스트하세요.
WebGPU를 사용할 수 없을 때 명확한 대체 안내 메시지를 제공하세요.
목업이나 코드 조각이 아닌 완전히 동작하는 HTML을 제공하세요. 결과물은 작은 살아있는 구미 장난감처럼 느껴져야 합니다: 광택 있고, 묵직하고, 유연하고, 늘리는 맛이 참을 수 없이 좋은.
