粒子漩涡

一个带有粒子旋转的动画背景。

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

通过 CLI 安装

npm

pnpm

bun

yarn

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

npm

pnpm

bun

yarn

npm install three postprocessing
npm install -D @types/three

复制并粘贴以下代码：

ParticleWhirlpoolBg.vue

Without blur and overlay

With particleCount 500

Prop 名称	类型	默认值	描述
`class`	`string`	`""`	Additional CSS classes for custom styling.
`blur`	`number`	`0`	Amount of blur to apply to the background, specified in pixels.
`particleCount`	`number`	`2000`	Number of particles in the whirlpool animation.

Interactive Whirlpool Animation: Renders a captivating whirlpool effect with particles that respond to mouse and touch interactions.
Customizable Particle Count: Adjust the particleCount prop to control the number of particles in the animation.
Dynamic Blur Effect: Use the blur prop to apply a blur effect over the background, enhancing the visual depth.
Slot Support: Overlay additional content on top of the animation 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.

本页