JellyfishBG
A free, dependency-free animated underwater background for any website — glowing jellyfish, bubbles, schools of fish, light rays and marine snow in one tiny script.
Role: Creative development, library design. Stack: JavaScript, Canvas 2D, UMD, jsDelivr CDN.
The challenge
Animated backgrounds usually mean pulling in a heavy 3D engine or a paid template. I wanted something any developer could drop into a page in two lines — beautiful, interactive and light enough not to slow the site down.
The solution
A single self-contained script with no dependencies. Five independent systems — jellyfish, bubbles, fish, god rays and marine snow — can be mixed in any combination. Jellyfish swim with a natural pulse and glow with bioluminescent sparks, the pointer pushes them aside with a soft light halo, and clicks send out ripples. Adaptive quality lowers effects on slower devices, and reduced-motion preferences are respected automatically.
Outcome
- Two-line integration: one container, one script, one init() call
- Five mixable systems with counts, colours, speed and pointer options
- Cursor glow, pointer disturbance and click ripple bursts
- Adaptive quality and prefers-reduced-motion support built in
- destroy() handle for single-page apps
- MIT licensed, served free from GitHub + jsDelivr