Soap Bubbles 2D Shader for React

Soap Bubbles 2D Shader floats dozens of soap bubbles over a slowly drifting field of three colors. The bubbles sit in five layers: each layer rises at its own pace, the nearest fastest, and every bubble jiggles gently in place. Each one is clear, with a bright rim, an iridescent film that swirls toward its edge, a window highlight and a faint second reflection, and it bends the bubbles and colors behind it like a weak lens. The nearest layer and the farthest are out of focus, so the scene has depth. A WGSL fragment shader on WebGPU draws it all for every pixel, every frame; there are no particles, just a grid of cells per layer.

Use it behind a playful hero, a product launch, or a page for a kids', bath or beauty brand. For bubbles in plain CSS, use the Bubbles background; for water seen from above, Water Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same colors with a few rings in browsers without WebGPU.

Installation

Usage

import {
  SoapBubbles2dShader,
} from "@/components/ui/soap-bubbles-2d-shader";

<SoapBubbles2dShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-black/50 px-8 py-6">
    <h1 className="text-5xl font-semibold text-white">Make a splash</h1>
  </div>
</SoapBubbles2dShader>

Soap Bubbles 2D Shader is a container: your content sits on top of the bubbles, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The default colors are mid-toned and vivid in both color schemes, so put white text on a soft scrim, as above.

Demos

Big bubbles

scale={1.6} makes every bubble about 1.6 times bigger, so fewer fit in the box. refraction={0} turns the lens off, so the bubbles are clear glass and the layers behind show through unbent.

In a card

fromColor="#0b1026", viaColor="#1e3a8a" and toColor="#7c3aed" set a midnight blue and violet field; the white rims and the film read like light on it.

Performance

About 1.7 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Each pixel checks nine cells in each of the five layers and shades the one bubble that covers it per layer, and the blur of the out-of-focus layers is drawn by widening the falloffs, not by extra samples, so none of the props change the cost. quality={0.75} draws a little over half the pixels, for phones and large screens, with slightly softer rims. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a gradient of the same colors with three white rings, so the layout never jumps. It follows the color props. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The bubbles are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the bubbles rise and the colors drift over seconds. At the default colors, white text has a contrast of about 3.8:1 on half the frame and drops near 2:1 on the brighter green. Behind a bg-black/50 scrim it's above 6:1 on half the frame, above 3.8:1 on three quarters and above 3.4:1 on nine tenths, fine for a headline; put small text on a solid panel.

FAQ

Credits

Inspired by Soap Bubbles 2D (opens in a new tab) by foxes on Shadertoy. The code is our own: layers of bubbles on jittered grids over a noise field, with depth of field and a lens, is the shared idea. The bubble shading, the iridescent film, the front-to-back compositing, the blur by wider falloffs, the color props and the API are new.

API Reference