Gummy bear

🧸 Interactive 3D Gummy Bear — React App Specification ✅ Tech Stack Framework: React + TypeScript Styling: Tailwind CSS 3D Engine: Three.js via: - @react-three/fiber - @react-three/drei - @react-spring/three Icons: Lucide-React 🎯 Objective Create an interactive, hyper-realistic 3D gummy bear that behaves like a soft, translucent jelly object with physics-driven interaction and polished UI controls. 🧩 3D Model — Procedural Generation Construct the gummy bear programmatically by merging primitive geometries: - CapsuleGeometry → body and limbs - SphereGeometry → head, ears, snout Arm Positioning (Important): - Place arms lower on the torso - Rotate them forward toward the Z-axis - Avoid upward or outward angles The final mesh should appear as one seamless molded piece — no visible separations. 🍬 Material & Appearance Use MeshTransmissionMaterial from @react-three/drei to achieve a jelly-like look. Material must support configurable: Roughness → controls blur Transmission → controls translucency Color Internal Glow Add a pointLight inside the bear mesh. Light intensity must be user-adjustable. 🎞 Animation & Interaction Idle Animation Bear should gently float when inactive. Physics-Based Interaction Implement a squeeze + wobble effect using @react-spring/three. On click/tap: Bear squashes slightly. On release: Bear rebounds and wobbles with high tension (jello-like behavior). 💡 Scene & Lighting 3-Point Lighting Setup Ambient light Strong Key light Dedicated Backlight (Rim light) - Enhances subsurface scattering 🌗 Environment Modes Dark Mode Background: #000000 Include a star field using <Stars /> Light Mode Background: soft gray 🎛 UI Controls (Overlay) Top Right Toggle button → Dark / Light mode Bottom Left — Glassmorphism Panel Include two sliders: Inner Light - Controls intensity of internal point light Blur - Maps to material roughness Bottom Center Preset color buttons: - Red - Green - Yellow - Clear - (extendable) Custom color picker input Bottom Right — Glassmorphism Panel Slider labeled “Opaqueness” - Controls the inverse of transmission ⚙️ Technical Constraints Use functional components + hooks Canvas must: - Fill the viewport - Handle resizing gracefully