Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Lava Lamp

A glowing lava lamp: wax swells off the hot pool, rises through the liquid, cools and sinks back. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified295 lines of codev1.0.0

In Light, glass & shine, Liquids, Patterns & illusions, Craft & heritage

Next: Torus Wave LoopSurprise me

Lava Lamp 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

7
1

How brightly the bulb lights the wax and the liquid.

2

Changes the size and path of every blob.

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

View code Sample video (default settings, 1013 KB)
Info

What it is

A classic lava lamp glowing in a dark room: a tapered glass bottle on a turned metal base with a pointed cap, a hot bulb underneath and blobs of wax that swell from the pool at the bottom, rise through the glowing liquid, cool at the top and sink back, merging and splitting on the way. The wax is translucent and brightest near the bulb, with a halo in the liquid round it; the glass reflects and refracts the room. Choose the colours (classic red and amber, violet and blue, lime and teal, rose and gold), the metal of the base (chrome, brass, black or copper), how many blobs ride in the lamp, how hot the bulb burns, and a macro view that puts the camera right up against the glass so the wax fills the frame.

Reuse it in your own idea

  • Lofi stream: Classic red and amber, camera drift on, with a small caption or a music player.
  • Retro intro: Violet and blue with a brass base, and a chunky 70s title.
  • Full-screen texture: Rose and gold in macro view behind a quote.

Which part is reusable

src/lava-lamp.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The blobs follow choreographed paths rather than a heat-and-buoyancy simulation: they never stick to the glass or pinch off in different places each time.
  • The lamp stands still; only the camera moves.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/lava-lamp.js
Exports
  • createLavaLamp({ wax?, liquid?, metal?, blobs?, heat?, seed? }) => { group, height, uniforms, update(time, loopSeconds, camera?, pixelHeight?), dispose() }
  • createGlowBackdrop(glow, wall?) => { mesh, dispose() }
  • METALS: { chrome, brass, black, copper }
  • PALETTES: { classic, violet, lime, rose }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, physical glass and metal, and the wax's ray-marching shader.
  • chrome-material@1.1.0 (demo) — Studio environment light and the contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: 1 unit = 10 cm. The lamp is 3.98 tall; the bottle runs from 0.92 to 3.3 and is 1.4 wide at the bottom, 0.72 at the neck.

Lighting: Physical glass and metal: needs scene.environment. The wax is lit by the bulb inside its own shader; add point lights in the wax colour to wash the base and the table.

Timing: update(time, loopSeconds) is a pure function of time; frames render in any order.

Output
1080×1080, 30 fps, 15 s · procedural (computed from the frame number) · seamless loop — Every blob makes a whole number of trips up and down the bottle per loop, with its sideways sway and its breathing in whole cycles, and the pool swells in whole cycles, so the last frame meets the first.
Tested
Rendered 450 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
One ray-marched pass over the bottle's silhouette (up to 96 steps over at most eleven metaballs) plus one transmissive glass shell. Smooth at 1080p on laptop GPUs. Software WebGL (no GPU) renders slowly. Transmission renders the opaque scene a second time.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- lava-lamp/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:dd38a3c2d26cfea5…
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/webgpu-lava-lamp (liquid-fluid, MIT), rebuilt for AI Pixel Wizard in October 2026 in WebGL: a modelled lamp with physical glass and metal, translucent ray-marched metaball wax lit by the bulb, a halo in the liquid, four colourways, a macro view, an exact loop and the frame/time contract.
BinMore like this

More like this

Play these full screen