Bubbles Background

An animated background with floating bubbles.

Example

Without Blur or overlay

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

Please install Three.js using following commands.

npm

pnpm

bun

yarn

npm install three
npm install -D @types/three

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

You can copy and paste the following code to create these components:

BubblesBg.vue

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