Bubbles Background is a full-bleed React backdrop that layers soft colorful blobs across the viewport and drifts them in slow ambient motion. Pointer movement pushes nearby bubbles aside, and configurable blur and saturation keep the effect readable under text. Built with React and Tailwind CSS. Useful as a subtle hero backdrop, an authenticated app shell, or a landing page section divider.
Installation
Usage
import { BubbleBackground } from "@/components/ui/bubble-background";<div className="relative h-[400px] w-full overflow-hidden bg-transparent">
<BubbleBackground
bgColorA="rgb(108, 0, 162)"
bgColorB="rgb(0, 17, 82)"
blendMode="hard-light"
/>
</div>Props
Bubble Background
| Prop | Type | Default | Description |
|---|---|---|---|
bgColorA | string | "rgb(108, 0, 162)" | First color for the background gradient |
bgColorB | string | "rgb(0, 17, 82)" | Second color for the background gradient |
bubbleColors | { colorA?: string; colorB?: string; colorC?: string; colorD?: string; colorE?: string; interactive?: string } | defaultBubbleColors | RGB color values for different bubbles and the interactive bubble |
blendMode | CSSProperties["mixBlendMode"] | "hard-light" | CSS blend mode for the bubble elements |
bubbleSize | string | "80%" | Size of the bubble elements relative to the container |