An image of particles that swirl apart and reform
| Name | Type | Default | Description |
|---|---|---|---|
imageUrl | string | "https://images.unsplash.com/..." | Image sampled for particle color and drawn behind the field |
width | string | number | "100%" | Container width |
height | string | number | "100%" | Container height |
className | string | undefined | Additional CSS classes |
children | ReactNode | undefined | Content rendered above the effect |
particleCount | number | 500000 | Number of live particles, rounded up to a square simulation grid |
particleSize | number | 2 | Particle diameter in CSS pixels |
particleOpacity | number | 0.85 | Peak particle opacity |
speed | number | 1 | Rate the flow field evolves |
noiseScale | number | 0.0005 | Flow field frequency: lower means longer, smoother currents |
noiseStrength | number | 0.05 | Acceleration applied along the flow field each frame |
damping | number | 0.95 | Velocity retained each frame, lower settles faster |
lifespan | number | 200 | Frames a particle lives before it respawns |
showImage | boolean | true | Draw the source image behind the particles |
imageOpacity | number | 1 | Opacity of the image behind the particles |
backgroundColor | string | "#ffffff" | Background fill color in hex |
cursorInteraction | boolean | true | Let pointer movement drag particles along with it |
cursorStrength | number | 0.1 | How much pointer momentum transfers to nearby particles |
cursorRadius | number | 100 | Radius of the pointer influence in CSS pixels |
dpr | number | 2 | Maximum device pixel ratio |
paused | boolean | false | Freeze the simulation in place |
imageUrlstringImage sampled for particle color and drawn behind the field
"https://images.unsplash.com/..."widthstring | numberContainer width
"100%"heightstring | numberContainer height
"100%"classNamestringAdditional CSS classes
undefinedchildrenReactNodeContent rendered above the effect
undefinedparticleCountnumberNumber of live particles, rounded up to a square simulation grid
500000particleSizenumberParticle diameter in CSS pixels
2particleOpacitynumberPeak particle opacity
0.85speednumberRate the flow field evolves
1noiseScalenumberFlow field frequency: lower means longer, smoother currents
0.0005noiseStrengthnumberAcceleration applied along the flow field each frame
0.05dampingnumberVelocity retained each frame, lower settles faster
0.95lifespannumberFrames a particle lives before it respawns
200showImagebooleanDraw the source image behind the particles
trueimageOpacitynumberOpacity of the image behind the particles
1backgroundColorstringBackground fill color in hex
"#ffffff"cursorInteractionbooleanLet pointer movement drag particles along with it
truecursorStrengthnumberHow much pointer momentum transfers to nearby particles
0.1cursorRadiusnumberRadius of the pointer influence in CSS pixels
100dprnumberMaximum device pixel ratio
2pausedbooleanFreeze the simulation in place
false