Particle Whirlpool

An animated background with swirling particles.

Examples

Without blur and overlay

With particleCount 500

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

Please install Three.js using following commands.

npm

pnpm

bun

yarn

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

Prop Name	Type	Default	Description
`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.

You can copy and paste the following code to create this component:

ParticleWhirlpoolBg.vue

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.

On This Page