Bioluminescent Jellyfish — Organic Canvas Animation

The Bioluminescent Jellyfish simulation is a serene, interactive art piece for the web. Featuring organic drifting motion and soft light-pulsing physics, it turns any webpage into a deep-sea exploration.

How It Works

The animation uses a Canvas API loop where each jellyfish is an object with its own autonomous path. We use sine-wave math to simulate the “pulsing” bell motion and a simple spring-physics system for the dragging tentacles. The jellyfish react to the cursor by applying a repelling force, making them drift away gracefully when “touched” by the user.

Use Cases

• Modern landing page backgrounds
• Meditation or wellness apps
• Interactive portfolio showcases
• Environmental or ocean-themed digital projects

How to Customize

• Change Glow Color: Update the this.color property in the JavaScript Jellyfish class (uses HSL).
• Control Population: Increase the number of entities by changing the jellies array length (currently 12).
• Adjust Drift Speed: Modify this.vy and this.vx to make the jellyfish move faster or slower.

Frequently Asked Questions

Can I add more jellyfish types?

Yes. You can add more classes or conditional logic to the Jellyfish constructor to create different shapes, sizes, and pulse rates for more variety.

How is the pulse synchronized?

Each jellyfish has its own t (time) variable that increments at different speeds, ensuring they don’t all pulse at the exact same moment—creating a more natural, organic feel.

Is it accessible?

Yes. The canvas is purely visual. For users who prefer reduced motion, you can add a media query check to the JavaScript to pause the animation or reduce the velocity.