Bubbles Screensaver_

The bubbles screensaver, explained

What is the bubbles screensaver?

It is a browser-based bubbles screensaver that fills a screen of any size with floating, wobbling bubbles. It is inspired by the classic Windows bubbles screensaver, but it is an independent project: the shading, the physics and all the art are original and generated by the page itself, with no video, no images and no audio files. It runs in any current browser with nothing to download.

Why soap bubbles are iridescent

The colours of a soap bubble are not pigment. Light bounces off the outer and the inner surface of the thin soap film, the two reflections interfere, and the colour you see depends on how thick the film is. Gravity drains the soapy water downward, so the film is thicker at the bottom and the colours settle into horizontal bands; when the top becomes so thin that every wavelength cancels it turns black, which usually means the bubble is about to pop.

The page paints its soap bubbles with a simplified version of this idea. For each of the red, green and blue channels the reflected brightness follows ½ − ½·cos(4π·n·d·cosθ / λ), with a refractive index n of about 1.33 (soapy water), a film thickness d that grows towards the bottom and swirls like flowing liquid, and a wavelength λ for each channel. Window-shaped reflections, a second dimmer reflection on the far side of the bubble and a soft rim light are added on top. Older bubbles gradually grow a dark, silvery cap at the top before they pop on their own.

Why bubbles are round, and why they wobble

Surface tension pulls a soap film towards the smallest surface it can have around the air it holds, and for a given volume that is a sphere. A bubble that is bumped, or hit by a gust, squashes and stretches before it settles again; here each bubble is a damped oscillator, so collisions and wind kicks make it wobble along the direction of the push and calm down within a second or two.

Eight modes

Soap is the classic look on a dark blue-green backdrop. Sky puts the bubbles in daylight with drifting clouds. Underwater sends air bubbles up through light shafts and caustics, and a popped bubble breaks into tiny ones. Champagne shows hundreds of tiny golden bubbles rising from nucleation points in one to three glass columns; as in a real glass they grow and speed up on the way up and vanish into the foam. Neon draws glowing outlines on black. Glass marbles are heavy, glossy and colourful, and bounce slowly on a floor with soft shadows. Night is bioluminescent blue with sparks, and Studio is a macro-photo look with a few giant bubbles on a white and grey backdrop.

Wind, gravity and depth of field

Gravity runs from -10 (bubbles fall) to +10 (they rise) and Wind has a strength and a compass direction, with gentle gusts. Every bubble sits at its own depth: far bubbles are smaller, slower and blurrier, near ones are bigger and sharp, and the Depth of field slider decides how strongly the blur grows. Bubbles bump into each other softly, only when they are at a similar depth, and the ones at the edge of the screen drift out and are replaced by new ones entering from upwind.

Pop, blow and play

Click or tap a bubble to pop it: a ring and a burst of droplets fly out. Hold the pointer on empty space, or press B, to blow a stream of new bubbles from a little wand. Pointer sets what the mouse or finger does on its own: push bubbles away, pop what it touches, attract them, or nothing. Calm mode switches popping off, so a click only makes a bubble wobble, and the pop counter counts the bubbles you pop (the all-time total stays on your device). The optional pop sound is generated in your browser, is off by default and only starts after you switch it on.

Tilt your phone

Switch on Tilt on a phone or tablet and the bubbles slide towards the side you tilt the device to, measured from the way you were holding it when you switched it on. Some browsers, including Safari on iPhone and iPad, ask for motion access first; the page only asks after you press the switch. Where there is no motion sensor, nothing happens.

Run it as a screensaver on a TV or monitor

Click the background or press F for full screen, then leave the mouse alone: the cursor and the buttons hide after a few seconds. Switch on the clock and a big soft bubble with the time floats in the middle while the other bubbles flow around it. In full screen the page asks the browser not to let the display sleep, where the Screen Wake Lock feature is supported. A web page cannot register itself as your operating system’s screensaver, so if the screen sleeps, set the sleep timer to Never while it runs.

Smooth on slow devices

Every bubble is shaded once, pixel by pixel, into a small image (a sprite) and then drawn on a 2D canvas, so the page needs no WebGL and behaves the same on every device. The sprites are baked in short time slices so the page never freezes, and they are rebuilt whenever you change the look. With Auto quality on, the page lowers the render resolution and then the number of bubbles when it stays below about 38 frames per second for three seconds. If you ask your device for reduced motion, the page starts in the slow Studio mode.

Save a picture or share your bubbles

Save as PNG downloads the current scene, at the current size, at Full HD (1920 pixels on the long side) or at 4K (3840 pixels on the long side), handy as a wallpaper. Copy link gives you an address that reopens the page with the same mode, sliders, backdrop, pointer and clock. Add ?fs=1 to the address to fill the window as soon as the page opens, or aq=0 to switch Auto quality off.

Privacy

The bubbles are computed and drawn entirely in your browser, and your settings stay in its local storage on your device. Nothing about your scene is sent anywhere; like every page here it loads a web font and a cookie-free visit counter. The pop sound, if you switch it on, is synthesised locally.

More free tools