Skip to content

Jellyfish

Bioluminescent jellyfish pulsing and drifting through deep water, their tentacles trailing beads of light, shafts of light far above. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified643 lines of codev1.0.0

In Food & sweets, Light, glass & shine, Nature & weather

Next: Aurora BorealisSurprise me

Jellyfish preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

5
1
6
16
1
1
1
6

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

Translucent jellyfish with scalloped bells ribbed by radial canals and a glowing ring inside, pulsing in sharp squeezes and long rests, long tentacles with waves running down them and beads of light travelling along, frilly oral arms, marine snow falling through the water and shafts of light from far above. They drift on slow loops at different depths, the nearer ones bigger and brighter, the far ones fading into the blue, while the camera sways a little. Choose the colours (deep blue, violet, aqua, warm or a mix), how many jellyfish, their size, how fast they pulse, how many tentacles, the marine snow, the light from above and the glow.

Reuse it in your own idea

  • Sleep or meditation loop: Deep blue drift, slow.
  • Ocean documentary title: Rainbow swarm with a kinetic title.
  • Fantasy scene: Warm abyss.

Which part is reusable

src/jellyfish.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • Everything is drawn additively, so the jellyfish are all glow with no solid body; they cannot pass in front of a bright background.
  • The bells are shells with no internal organs other than a ring and canals.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/jellyfish.js
Exports
  • createJellyfish({ palette?, count?, size?, pulse?, tentacles?, snow?, shafts?, glow?, seed?, aspect? }) => { scene, camera, swarm, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • planSwarm({ count?, size?, pulse?, palette?, seed?, aspect? }) => [{ position, scale, pulses, phase, tilt, orbit, seed, palette }]
  • PALETTES: { blue, violet, aqua, warm }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, instanced bells and ribbons, and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Perspective, 38° field of view, the camera 7.5 units from the origin; the jellyfish drift between z = -4.5 and z = 0.5.

Lighting: Self-lit: every surface glows (a rim light that grows with the angle, canals, a ring of organs); distance dims them into the blue.

Timing: update(time, loopSeconds) sets the loop time; every position is a closed-form function of it, so frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — Every jellyfish pulses a whole number of times per loop; the waves in the tentacles and the beads of light run a whole number of times down them; each jellyfish drifts on a loop of one cycle; the marine snow is a field that repeats every slab and falls one slab per loop; the camera sways in a sine of the loop, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Up to eight bells of about 6,000 vertices and some 250 ribbons, a few hundred points of snow, all positioned in vertex shaders, plus a small bloom. About 18 ms a frame at 1080p on an integrated Intel GPU. At most eight jellyfish with up to 28 tentacles each.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- jellyfish/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:92909ee711deba84…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/nature-organic/bioluminescent-jellyfish (with webgpu-jellyfish-bloom, MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original scene: a bell drawn from a surface of revolution in the vertex shader, pixel-width tentacle ribbons with travelling waves and beads of light, marine snow, shafts of light, an exact loop and the frame/time contract.
BinMore like this