Particle Image

An image dissolved into GPU particles that swirl apart and reassemble

particle-image-tw

Customize

Image URL

Particle Count

500000

Particle Size

2.0

Particle Opacity

0.85

Speed

1.0

Noise Scale

0.0005

Noise Strength

0.05

Damping

0.950

Lifespan

200

Image Opacity

1.00

Cursor Strength

0.10

Cursor Radius

100

Background

Show ImageCursor InteractionPaused

Props

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

imageUrlstring

Image sampled for particle color and drawn behind the field

Default"https://images.unsplash.com/..."

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes

Defaultundefined

childrenReactNode

Content rendered above the effect

Defaultundefined

particleCountnumber

Number of live particles, rounded up to a square simulation grid

Default500000

particleSizenumber

Particle diameter in CSS pixels

Default2

particleOpacitynumber

Peak particle opacity

Default0.85

speednumber

Rate the flow field evolves

Default1

noiseScalenumber

Flow field frequency: lower means longer, smoother currents

Default0.0005

noiseStrengthnumber

Acceleration applied along the flow field each frame

Default0.05

dampingnumber

Velocity retained each frame, lower settles faster

Default0.95

lifespannumber

Frames a particle lives before it respawns

Default200

showImageboolean

Draw the source image behind the particles

Defaulttrue

imageOpacitynumber

Opacity of the image behind the particles

Default1

backgroundColorstring

Background fill color in hex

Default"#ffffff"

cursorInteractionboolean

Let pointer movement drag particles along with it

Defaulttrue

cursorStrengthnumber

How much pointer momentum transfers to nearby particles

Default0.1

cursorRadiusnumber

Radius of the pointer influence in CSS pixels

Default100

dprnumber

Maximum device pixel ratio

Default2

pausedboolean

Freeze the simulation in place

Defaultfalse