Golden Deep-Sea Jellyfish

Build a Three.js interactive jellyfish webpage. Against an ocean backdrop that is bright at the center and deep blue at the edges, show 6–10 golden translucent jellyfish slowly rotating and pulsing upward; at least three must remain visible at all times, and any jellyfish crossing the upper boundary re-enters from the bottom. Each jellyfish has orange and cream-white radial stripes, spots, an internal glow, and a clear translucent rim; the frilled oral arms are visible through the bell. When the bell contracts, its edge visibly flares outward.

Each jellyfish consists of an inner and an outer bell layer, a soft skirt, 20 hair-thin tentacles, and 4 frilled oral arms. The bell contracts periodically, and the skirt, tentacles, and oral arms follow through a stable Verlet spring physics system — do not use pre-recorded animation. All motion runs on a single unified physics clock; clamp large frame intervals and use enough substeps so the simulation does not diverge or drift out of place during long runs.

Add soft caustics, fake volumetric light curtains, and twinkling plankton to the background, rendered with soft bloom and ACES tone mapping for a deep-sea lighting feel. Handle transparent layer sorting and anti-aliasing properly so the tentacles stay continuous and sharp. When the mouse approaches a jellyfish, its pulse speeds up, its glow intensifies, and its tentacles receive a slight push. Support mouse drag to rotate the view and scroll wheel to zoom, with clamped viewing distance and pitch angle. Replace the golden jellyfish with 15–20 blue-green glowing tropical fish. Keep the Verlet spring physics for tail and fin motion, and make the school circle slowly through the scene while avoiding collisions. Use WebGL2 with procedural models and materials. No WebGPU, no external models, no audio, no control panel, and no multi-scene switching. Deliver a static webpage that runs directly, with dependencies bundled locally. Follow the visual and physics approach of Aurelia, and keep attribution and license notes for all code and algorithms used; if you reuse the original work or Dave Hoskins' caustics algorithm, retain the corresponding license attribution.

Build a Three.js interactive jellyfish webpage. Against an ocean backdrop that is bright at the center and deep blue at the edges, show 6–10 golden translucent jellyfish slowly rotating and pulsing upward; at least three must remain visible at all times, and any jellyfish crossing the upper boundary re-enters from the bottom. Each jellyfish has orange and cream-white radial stripes, spots, an internal glow, and a clear translucent rim; the frilled oral arms are visible through the bell. When the bell contracts, its edge visibly flares outward.

Each jellyfish consists of an inner and an outer bell layer, a soft skirt, 20 hair-thin tentacles, and 4 frilled oral arms. The bell contracts periodically, and the skirt, tentacles, and oral arms follow through a stable Verlet spring physics system — do not use pre-recorded animation. All motion runs on a single unified physics clock; clamp large frame intervals and use enough substeps so the simulation does not diverge or drift out of place during long runs.

Add soft caustics, fake volumetric light curtains, and twinkling plankton to the background, rendered with soft bloom and ACES tone mapping for a deep-sea lighting feel. Handle transparent layer sorting and anti-aliasing properly so the tentacles stay continuous and sharp. When the mouse approaches a jellyfish, its pulse speeds up, its glow intensifies, and its tentacles receive a slight push. Support mouse drag to rotate the view and scroll wheel to zoom, with clamped viewing distance and pitch angle. Make each jellyfish clickable. On click, pause its motion and show an info card with the species name, habitat depth, and two short facts written for a general audience. Use WebGL2 with procedural models and materials. No WebGPU, no external models, no audio, no control panel, and no multi-scene switching. Deliver a static webpage that runs directly, with dependencies bundled locally. Follow the visual and physics approach of Aurelia, and keep attribution and license notes for all code and algorithms used; if you reuse the original work or Dave Hoskins' caustics algorithm, retain the corresponding license attribution.