Bubble Background

Bubble Background

A canvas-based background that renders animated, floating bubbles which react to scroll inertia. It automatically fits its container and supports overlay content on top.

Customization

• bubbleCount — number of bubbles rendered.
• colors — palette of hex values sampled for bubble fill.
• minRadius / maxRadius — minimum and maximum bubble size (px).
• speed — scalar controlling overall movement speed.
• blur — amount of blur applied to the canvas (px).
• children — optional overlay content displayed above the canvas.
• className — extra classes for the overlay wrapper (z-10).
• containerClassName — extra classes for the outer container (z-0 canvas lives inside).

---

Bubble as Gradient Background

By increasing blur, maxRadius, and bubbleCount, you can create a soft, moving gradient effect. Use the speed prop to adjust how fast or slow the gradient shifts.