Particle Animation
MAX
A flexible particle effect animation for your React components.
Demo
Cursor ModePass the cursor over the text
Exclusive Launch 50% offspots left: 0 / 50
$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Properties
The ParticleAnimation component accepts the following props:
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to animate |
active | boolean | true | Whether the animation is active |
className | string | "" | Additional CSS classes |
particleCount | number | 20 | Number of particles emitted per click |
particleColors | string[] | ["#ffffff", ...] | Array of colors for the particles |
particleSize | [number, number] | [1, 3] | Min and max size of particles |
particleSpeed | number | 1 | Speed of the particles |
emitOnHover | boolean | false | Emit particles on mouse hover |
emitOnClick | boolean | true | Emit particles on click |
particleLife | number | 1000 | Particle life in ms |
particleOpacity | number | 0.7 | Opacity of the particles |
direction | "outward" | "upward" | "downward" | "random" | "outward" | Direction of the particles |
Usage Examples
Cursor ModePass the cursor over the text
Confetti ModeClick where you want
