JellyfishBG
An animated bioluminescent underwater scene for any page — jellyfish, bubbles, fish, light rays, marine snow. Pick any mix, live, below.
Quick start
Add a container element and two lines of markup. That's the whole integration.
<!-- 1. a container to render into -->
<div id="jellyfish-bg" style="position:fixed;inset:0;z-index:-1;"></div>
<!-- 2. the library -->
<script src="https://cdn.jsdelivr.net/gh/haryskit/jellyfish-bg@latest/dist/jellyfish-bg.min.js"></script>
<!-- 3. initialize -->
<script>
JellyfishBG.init('jellyfish-bg');
</script>Want it inside one section instead of the whole page? Give any container a real size — JellyfishBG fills exactly that box. See the README.
Options
Pass a second argument to init() to customize the field. elements
picks which systems render — any subset, one to all five, exactly like the picker above.
JellyfishBG.init('jellyfish-bg', {
elements: ['jellyfish', 'bubbles', 'fish', 'godRays', 'motes'],
jellyfishCount: 8,
bubbleCount: 26,
fishCount: 18,
particleCount: 140,
colors: [[94,234,212], [167,139,250]],
driftSpeed: 0.15,
pointerStrength: 0.9,
adaptiveQuality: true
});| Option | Default | What it does |
|---|---|---|
| elements | all 5 | Which systems to render: jellyfish, bubbles, fish, godRays, motes — any subset |
| jellyfishCount | 8 | Number of jellyfish on screen |
| bubbleCount | 26 | Rising glassy bubbles |
| fishCount | 18 | Fish, split across 1–3 schools |
| particleCount | 140 | Ambient marine-snow particles |
| colors | 5 presets | Array of [r,g,b] glow colors, picked randomly per creature |
| driftSpeed | 0.15 | Base upward swim speed for jellyfish |
| pointerInfluence | 220 | Radius (px) of pointer disturbance |
| pointerStrength | 0.9 | How strongly the pointer pushes jellyfish |
| sparks | true | Toggle bioluminescent spark flashes on jellyfish |
| cursorGlow | true | Soft light halo that follows the pointer |
| clickBursts | true | Ripple + spark burst on click/tap |
| adaptiveQuality | true | Automatically lowers effects if a device can't keep up |
| respectReducedMotion | true | Freezes animation for prefers-reduced-motion users |
Removing it
init() returns a handle you can use to clean up, e.g. when unmounting in a single-page app.
const field = JellyfishBG.init('jellyfish-bg');
// later...
field.destroy();Hosting this yourself, for free
This whole thing is one static JS file — no server, no build pipeline, no paid hosting needed. See the README in the repo for the exact steps (GitHub + jsDelivr, both free forever on a public repo).