Pop Some
Bubbles

Sometimes I come across an idea that doesn't necessarily solve a problem or make anything more productive. It just sounds fun to build.

This was one of those ideas.

I wanted to create something simple: a bunch of bubbles floating around a website that visitors could pop whenever they felt like it.

But there was one condition. I didn't want the bubbles to replace the website or open inside a separate game. I wanted the website to carry on as usual.

You could still read an article, scroll through a page, or follow a link. The bubbles would simply exist on top of everything, floating around until you decided to pop them.

And if a bubble happened to be covering something you wanted to click? Well, you'd have to pop it first. That little interaction was the part I found most interesting.

The idea sounds straightforward until you start thinking about how browsers handle interactions. A transparent overlay covering the entire screen would normally intercept clicks intended for the website underneath it. That would defeat the whole purpose.

The challenge was to make the bubbles feel like actual objects floating between the visitor and the page, without interfering with anything else.

The solution separates the visual animation from the interactive surfaces.

A canvas renders the bubbles and their movement, while individual circular hit targets handle clicks. The canvas itself doesn't intercept pointer events, so interactions outside the bubbles continue to reach the website normally.

Click a bubble, and it pops. Click an empty space, and the website responds normally. Scroll the page, and the bubbles remain floating over it. Pop every bubble, and the website returns to its original appearance.

There are no scores, timers, or objectives. You can pop the bubbles, ignore them, or end the experiment whenever you like.

I also wanted this to be more than a feature tied to my personal website.

The experiment is built as a standalone JavaScript library using native browser APIs, without depending on Astro, React, or another frontend framework. A website only needs to load the library and provide a way to launch it.

The library handles the bubble animation, movement, hit detection, popping effects, and cleanup independently of the page underneath.

The first version includes bubbles of different sizes, gentle movement, viewport boundary bouncing, and a playful exit sequence that pops the remaining bubbles.

There are still things I'd like to explore, including more natural bubble interactions and richer physics. But I wanted to get the essential experience right before adding complexity.

My favorite part wasn't drawing the bubbles or making them move.

It was figuring out how to make something feel like it belonged to a webpage while remaining completely independent of that webpage.

It's a small experiment in animation, geometry, browser events, and interaction design.

And I like that it doesn't really need a practical purpose. Sometimes building something just because it makes you smile is a good enough reason.

Launch the experiment and watch a few bubbles float across the page.

Pop them, leave them alone, or clear them all at once.

The rest of the website isn't going anywhere.

JavaScript, HTML Canvas, browser APIs, and CSS. A personal experiment, and a small reusable browser library.