About luvbubl

luvbubl is a bubble playground that runs in your browser. There is no goal, no score to chase and nothing to unlock — it exists because popping bubbles is satisfying and a screen full of drifting, wobbling, colliding ones is pleasant to look at.

Why it exists

Most things competing for your attention online want something from you: an account, an email address, a subscription, a streak to maintain. luvbubl wants none of those. You open it, you play with it, you close it. Nothing is remembered, nothing follows you, and there is nothing to sign up for.

It works well as a two-minute break, as something to hand a restless child, or as an ambient thing to leave running in a spare browser tab with the fan machine going.

How the simulation works

Everything you see on the playground is drawn into a single HTML5 canvas element, sixty times a second. There is no game engine and no physics library — the whole simulation is written by hand, and it is small enough to fit in one file.

Movement

Every bubble carries a position, a velocity and a wobble phase. Each frame the wobble nudges horizontal velocity along a sine curve, drag scales it back slightly, and the gravity mode adds or removes vertical pull. That combination — push, damp, drift — is what makes the motion read as buoyant rather than mechanical.

Collisions

When two bubbles overlap, the simulation computes the normal between their centres and exchanges momentum along it, then pushes them apart so they do not sink into each other. Collision checking is capped at a fixed number of bubbles per frame, which is a deliberate trade: on a very crowded screen a few distant pairs go unchecked, and in exchange the frame rate degrades gently instead of collapsing.

Merging

Two bubbles that stay deeply overlapped can occasionally fuse. The new radius is the square root of the sum of the squares of the old ones, which conserves area — so merging two equal bubbles gives one about 1.4 times as wide, not twice. It is intentionally rare, so a busy screen grows a few giants slowly rather than immediately collapsing into a single blob.

Sound

There are no audio files anywhere on the site. Every pop is synthesised on the spot with the Web Audio API: an oscillator whose frequency sweeps downward while its gain falls away. The starting pitch and the speed of the sweep are chosen from the bubble's radius, which is why small bubbles ping and large ones thud. Milestone chimes are a four-note arpeggio built the same way.

Rendering

Each bubble is a radial gradient with two specular highlights and a rim stroke, drawn through a path that changes with the chosen shape — an arc for classic, two Bézier curves for the heart, ten alternating points for the star. Pops spawn a short-lived ring plus a dozen particles under their own gravity.

Technology

• React and TypeScript for the interface, built with Vite
• HTML5 Canvas 2D for all rendering
• The Web Audio API for every sound
• A static site with no backend, no database and no accounts

Support and feedback

luvbubl is free and is supported by advertising, which pays for the domain and hosting. If you have found a bug, have an idea for a machine or a shape, or just want to say the merge threshold is wrong, write to hello@luvbubl.com — see the contact page for what is most useful to include.