Bubble Background
Renders floating animated bubbles across the background that smoothly move and drift away when users move their mouse.
6.5 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-backgrounds-bubbleUsage
Code
<BubbleBackground />API Reference
BubbleBackground
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| interactive | boolean | false | Whether the background is interactive with mouse movement. | |
| transition | SpringOptions | { stiffness: 100, damping: 20 } | The transition of the background. | |
| colors | BubbleColors | { first: "18,113,255", second: "221,74,255", third: "0,220,255", fourth: "200,50,50", fifth: "180,180,50", sixth: "140,100,255" } | The colors of the background. | |
| ...props | React.ComponentProps<"div"> | - | The props of the BubbleBackground. |
Credits
- Credits to GlitchWorker for the inspiration
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
Related Components
Powered by