Bubbles Background

An animated background with floating bubbles.

Note: This component uses Three.js & requires three npm package as a dependency.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/bubbles-bg.json"

npm

pnpm

bun

yarn

npm install three
npm install -D @types/three

BubblesBg.vue

Without Blur or overlay

Prop Name	Type	Default	Description
`blur`	`number`	`0`	Amount of blur to apply to the background, specified in pixels.

Animated Bubble Background: Renders a captivating background with animated, floating bubbles using 3D graphics.
Dynamic Color Gradients: The bubbles and background smoothly transition between colors over time, creating a visually engaging effect.
Customizable Blur Effect: Use the blur prop to adjust the blur intensity applied over the background, enhancing depth perception.
Slot Support: Easily overlay content on top of the animated background using the default slot.
Responsive Design: The component adjusts to fit the width and height of its parent container, ensuring compatibility across different screen sizes.

On This Page