Bubbles Background for React

Soap bubbles float up through the section, swaying as they rise. Near bubbles are bigger, clearer and quicker; far ones are small and faint, and behind them two layers of tiny bubbles drift up, so the scene has depth. Each bubble is clear glass with a thin film of colour that's strongest at its rim and slowly turns, magenta into gold into cyan, plus a soft highlight and the faint reflection of a window. On a light page the rims read as pastel colour on paper; on a dark one they glow. Bubbles are placed when the page renders and moved by keyframes the install adds to your stylesheet, so no script runs while they rise. With interactive, one more bubble follows the pointer.

Use it behind a hero, a portfolio intro or a launch section that should feel light and a little playful. For soft out-of-focus discs of light use Bokeh; for one large, slow liquid mass, Metaballs; for tiny motes in a shaft of light, Pollen.

Installation

Usage

import { Bubbles } from "@/components/ui/bubbles";

<Bubbles className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold">Ideas that rise</h1>
</Bubbles>

Bubbles is a container: whatever you put inside 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".

Demos

Colors

colors takes up to four CSS colours for the film, repeated when there are fewer; your theme's variables work too. Here an icy cyan, blue and violet, with intensity="subtle" for fainter bubbles and speed={0.6} for a slower rise.

Interactive

interactive adds a bubble that follows the pointer: it grows in where the pointer enters, glides after it with a small overshoot, and shrinks away where it was when the pointer leaves. count sets how many rise at once; in a card this narrow about half of them show.

Accessibility

The bubbles are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion every bubble stops where it is, so the box shows a still picture of floating bubbles; the pointer bubble still follows a mouse, without gliding. Touch doesn't move it, so scrolling stays smooth. Nothing flashes: the film turns once every half minute or so.

Put copy over it in your foreground colour (text-foreground). The bubbles are mostly clear: their faces carry under a tenth of the film's colour, so text over a face keeps its contrast in both themes. Only a bubble's thin rim is bright, and on a dark page a rim passing behind small text dims it for a moment; behind body text use intensity="subtle", which keeps the rims faint.

FAQ

API Reference