Lava Lamp

Table of Contents

• Description
• Screenshots
• Features
• Requirements
• Installation
• Usage
  • Controls
  • Tilt and shake
• Deployment
• Architecture
• Credits
• Contributing
• License

Description

A lava lamp that fills the browser window. Blobs of wax warm up at the bottom, rise, cool near the top and sink again, merging and splitting as they pass. You can heat them with a touch or a mouse drag, change the colours and the physics from a side panel, and on a phone, tilt the device to pour the wax around.

It is one HTML file with no libraries and no build step. The blobs are metaballs drawn by a WebGL fragment shader. It runs live at lava-lamp.geoffmyers.com.

Screenshots

The default Magma palette in a desktop browser window.

Left: the control panel open, with the Neon palette chosen. Right: the same page on a phone-sized screen.

These were captured in headless Chromium, which draws WebGL in software.

Features

• Metaballs on the GPU. Every pixel sums the influence of up to 64 blobs in a fragment shader, then shades the result with the palette, a glow, and a specular highlight per blob.
• Simple thermal physics. Blobs gain heat near the bottom and lose it near the top. Heat makes them buoyant and larger, gravity pulls them down, and touching blobs push apart and share heat.
• Touch and mouse. Pressing or dragging heats nearby blobs, pushes them outward and swirls them, with a glow where you touch.
• Tilt and shake on a phone: gravity follows the device, and a sharp shake scatters the blobs and warms them.
• Eight palettes: Magma, Ocean, Neon, Sunset, Acid, Ice, Rose and Aurora.
• Twelve sliders for viscosity, gravity, buoyancy, heat, cooling, blob repulsion, wobble, tilt sensitivity, touch force and radius, blob field strength and glow.
• Quick actions: heat burst, cool down, add or remove blobs, low gravity, turbulence, and a reset that restores every default.
• Scales with the screen. The blob count follows the window's area, and rendering uses the device's pixel ratio (capped at 3×).

Requirements

• A browser with WebGL (any current desktop or mobile browser).
• For tilt and shake: a phone or tablet with motion sensors, and the page served over HTTPS (browsers only expose device motion to secure pages; iOS also asks for permission).
• To serve it locally: any static file server, for example Python 3.
• To deploy it as the author does: a Cloudflare account and Wrangler 4.

Installation

git clone https://github.com/geoffmyers/lava-lamp.git
cd lava-lamp
python3 -m http.server 8000

Then open http://localhost:8000. Opening index.html straight from disk also works, since the page loads nothing but its own inline script and a web font.

Usage

Press or drag anywhere on the lamp to heat the wax under your finger or pointer. A hint at the bottom of the screen fades after your first touch.

Controls

The ☰ button at the top right opens the side panel:

Section	What it holds
Quick Actions	Heat Burst, Cool Down, Add Blobs and Remove Blobs (five at a time, never fewer than three), Low Gravity, Turbulence, Gyroscope, Shake, and Reset Simulation
Palette	The eight colour schemes
Physics	Viscosity, Gravity, Buoyancy, Heat Source, Cooling Rate, Blob Repulsion, Wobble, Gyro Sensitivity, Touch Force, Touch Radius
Display	Blob Field Strength and Glow Intensity

Nothing is saved: reloading the page, or Reset Simulation, returns every setting to its default.

Tilt and shake

Tap Gyroscope in the panel. The page explains what it will do and asks before requesting motion access; on iOS the system then shows its own prompt. Once enabled, an indicator at the top left shows the direction of gravity, and tilting the device moves the wax. Shake uses the same permission: with it on, a sharp shake scatters the blobs.

Deployment

The site is deployed as a Cloudflare Worker with static assets. The repository root is the asset directory:

• wrangler.toml names the Worker and its custom domain. Both are the author's: change name, account_id and routes before deploying your own copy.
• _headers sets the Content-Security-Policy and other security headers. Wrangler 4 applies it; older versions uploaded it as a public file instead.
• .assetsignore keeps the repository's own files (this README, the licence, wrangler.toml) from being served.

npx wrangler@4 deploy

Architecture

Everything is in index.html: the styles, the markup for the panel and prompts, and one script. Each animation frame runs the physics on the CPU, uploads every blob's position, radius and temperature to the shader as uniforms, and draws a single full-screen quad; a second, 2D canvas on top adds a few drifting motes.

Path	Role
index.html	The whole app
_headers	Security headers, including the Content-Security-Policy
wrangler.toml	Cloudflare Worker name, custom domain and asset directory
.assetsignore	Files Wrangler must not publish
docs/	README icon and screenshots

See ARCHITECTURE.md for the shader, the physics step and the coordinate systems.

Credits

• Set in Outfit, served by Google Fonts under the SIL Open Font License.
• Built on the browser's WebGL and Device Orientation APIs; no libraries.
• The README icon is the Font Awesome fire glyph, as shown for this app on geoffmyers.com, used under CC BY 4.0.

Written by Geoff Myers (geoffmyers.com).

Contributing

Bug reports and pull requests are welcome. See CONTRIBUTING.md for setup, checks and how this repository is published.

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See LICENSE.md for the full text of the GNU General Public License.

SPDX-License-Identifier: GPL-3.0-or-later