Build "Gummy Bears" - a single self-contained HTML file (three.js from a CDN is the only dependency): a handful of translucent gummy bears on a white table that you can grab, stretch, squash, throw and pour.
The bears
- Classic gummy bear silhouette: round head with two ears, short snout, plump body, stubby arms and legs, tiny molded eyes and nose
- Every part melts smoothly into the next - build the body as an implicit surface (metaballs / marching cubes), not separate spheres
- Material: real gummy candy. Translucent with transmission and refraction, colored light absorption that gets deeper in thick parts, glossy clearcoat with sharp highlights
- Colors: cherry red, orange, lemon yellow, apple green, clear pineapple
- Soft colored shadow under each bear, tinted by the bear's own color
Physics (this is the whole point - it must feel like jelly, not plastic)
- Each bear is a soft body: mass points for head, ears, snout, body, belly, hands and feet, held together by volume-preserving shape matching
- Limbs and neck are rendered as stretchy strands between points, getting thinner as they stretch
- Grab any part and pull: it stretches like rubber, the rest of the bear leans after it, on release it snaps back with a damped wobble
- Pull the head up: the neck stretches, the body follows, on release the bear squashes and hops
- Press down on the head: the bear pancakes, bulges sideways, then launches itself back up
- Throw a bear: it flies, squashes on landing, bounces and pushes other bears out of the way
- Bears collide with each other and never pass through one another
- Idle bears do small random hops with squash and stretch
- "Pour more bears" drops a handful from above into a wobbling, jiggling pile
UI
- Editorial product-page style on a white background. Large italic serif title "Gummy / Bears.", a short subtitle, a minimal card on the right with flavor swatches, a wobble slider, live "Stretch" and "Bounces" readouts and a "Pour more bears" button
- A subtle circular cursor that grows while grabbing
- ACES tone mapping, environment reflections, soft key and back light. Smooth 60fps
한국어 번역
"Gummy Bears"를 만드세요 - 단일 자체 완결형 HTML 파일(CDN의 three.js만이 유일한 의존성): 흰 테이블 위의 반투명 구미 베어 몇 마리를 잡고, 늘리고, 찌그러뜨리고, 던지고, 쏟아부을 수 있습니다.
곰들
- 클래식 구미 베어 실루엣: 두 귀가 달린 둥근 머리, 짧은 주둥이, 통통한 몸, 짤막한 팔과 다리, 작게 성형된 눈과 코
- 모든 부위가 다음 부위로 매끄럽게 녹아들어야 합니다 - 몸을 개별 구가 아니라 암시적 표면(metaballs / marching cubes)으로 구축하세요
- 재질: 진짜 구미 캔디. 투과와 굴절이 있는 반투명, 두꺼운 부분에서 더 깊어지는 색광 흡수, 날카로운 하이라이트가 있는 광택 클리어코트
- 색상: 체리 레드, 오렌지, 레몬 옐로, 애플 그린, 투명 파인애플
- 각 곰 아래의 부드러운 유색 그림자, 곰 자신의 색으로 착색
물리 (이것이 핵심 - 젤리처럼 느껴져야 하며 플라스틱 같으면 안 됨)
- 각 곰은 소프트 바디: 머리, 귀, 주둥이, 몸, 배, 손, 발의 질량 점을 부피 보존 형상 매칭으로 결합
- 팔다리와 목은 점들 사이의 늘어나는 가닥으로 렌더링되며, 늘어날수록 가늘어집니다
- 어느 부위든 잡고 당기면: 고무처럼 늘어나고, 나머지 몸이 뒤따라 기울며, 놓으면 감쇠된 흔들림으로 튕겨 돌아옵니다
- 머리를 위로 당기면: 목이 늘어나고 몸이 따라오며, 놓으면 곰이 찌그러졌다가 폴짝 뜁니다
- 머리를 아래로 누르면: 곰이 납작해지고 옆으로 불룩해졌다가 다시 위로 튀어 오릅니다
- 곰을 던지면: 날아가고, 착지 시 찌그러지고, 튕기며 다른 곰들을 밀어냅니다
- 곰들은 서로 충돌하며 절대 서로를 통과하지 않습니다
- 가만히 있는 곰은 찌그러짐과 늘어남을 동반한 작은 무작위 폴짝임을 합니다
- "Pour more bears" 버튼은 위에서 한 줌을 떨어뜨려 흔들리고 출렁이는 더미로 만듭니다
UI
- 흰 배경의 에디토리얼 제품 페이지 스타일. 큰 이탤릭 세리프 제목 "Gummy / Bears.", 짧은 부제, 우측의 최소한의 카드에 플레이버 스와치, 흔들림 슬라이더, 실시간 "Stretch" 및 "Bounces" 수치, "Pour more bears" 버튼
- 잡는 동안 커지는 은은한 원형 커서
- ACES 톤 매핑, 환경 반사, 부드러운 키 라이트와 백 라이트. 부드러운 60fps
