泡泡背景

An animated background with floating bubbles.

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

通过 CLI 安装

npm

pnpm

bun

yarn

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

npm

pnpm

bun

yarn

npm install three
npm install -D @types/three

复制并粘贴以下代码：

BubblesBg.vue

Without Blur or overlay

Prop 名称	类型	默认值	描述
`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.

本页