Theme

Effect 12 - Mouse Repel Particles

Pro

An interactive particle effect where particles are pushed away from the mouse cursor and smoothly snap back.

Mouse Repel Particles

An interactive particle effect that responds to your cursor. Particles are pushed away in a ring and smoothly snap back when the mouse moves away.

Move your mouse around to see the particles react

Loading code...

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Failed to load code. Please try again.

Usage

<Effect12
  particle-color="currentColor"
  repel-radius={150}
  repel-strength={1}
  snap-back-duration={300}
/>

prop	type	default	description
`particleCount`	`number`	`80`	Number of particles generated during render.
`minSize`	`number`	`3`	Minimum generated particle size in pixels.
`maxSize`	`number`	`8`	Maximum generated particle size in pixels.
`particleColor`	`string`	`"currentColor"`	CSS color value used by the particles.
`minOpacity`	`number`	`0.2`	Minimum generated particle opacity.
`maxOpacity`	`number`	`0.7`	Maximum generated particle opacity.
`repelRadius`	`number`	`150`	Mouse repel radius in pixels.
`repelStrength`	`number`	`1`	Multiplier for the particle repel force.
`snapBackDuration`	`number`	`300`	Duration of the snap-back transition in milliseconds.