Particle Morph

GPU particles that flow between a sequence of images, logos and silhouettes

particle-morph-tw

Customize

Transition Duration

1800ms

Interval

2600ms

Particle Density

Particle Size

2.0

Particle Opacity

0.90

Dispersion

1.0

Chaos

0.00

Idle Drift

1.0

Idle Speed

1.0

Pointer Strength

1.0

Pointer Radius

120

Glow

0.6

Aberration

1.5px

Color

Background

AutoplayLoopImage Colors

Props

Name	Type	Default	Description
`images`	string[]	`required`	Ordered image sources the particles morph between
`activeIndex`	number	`undefined`	Controlled index of the image currently formed
`defaultIndex`	number	`0`	Initial index when uncontrolled
`autoplay`	boolean	`true`	Advance to the next image automatically
`interval`	number	`3000`	Time each image is held before autoplay advances, in ms
`transitionDuration`	number	`1800`	Duration of one morph, in ms
`particleDensity`	number	`80`	Particles per 1,000 square CSS pixels of the frame
`particleSize`	number	`2`	Particle diameter in CSS pixels
`particleOpacity`	number	`0.9`	Peak particle opacity
`dispersion`	number	`1`	Orbital swing particles take while travelling, 0 = straight lines
`chaos`	number	`0`	How far particles burst outward in waves before regrouping into the next shape, 0 = direct morph
`idleDrift`	number	`1`	Amplitude of the resting drift and sway, 0 holds particles still
`idleSpeed`	number	`1`	Speed multiplier for the resting drift
`pointerStrength`	number	`1`	How hard the pointer pushes particles away, 0 disables it
`pointerRadius`	number	`120`	Radius of the pointer influence in CSS pixels
`glow`	number	`0.6`	Bloom strength around the particles, 0 disables the pass
`aberration`	number	`1.5`	Chromatic aberration at the frame edge in CSS pixels; pulses while morphing, 0 disables
`color`	string	`undefined`	Solid particle color; omit to sample colors from the images
`backgroundColor`	string	`"#0a0a0a"`	Background fill color
`luminanceThreshold`	number	`0`	Pixels darker than this (0 to 1) count as background and get no particles
`loop`	boolean	`true`	Wrap from the last image back to the first when autoplaying
`onIndexChange`	(index: number) => void	`undefined`	Called whenever the formed image changes, including from autoplay
`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
`dpr`	number	`2`	Maximum device pixel ratio

imagesstring[]

Ordered image sources the particles morph between

Defaultrequired

activeIndexnumber

Controlled index of the image currently formed

Defaultundefined

defaultIndexnumber

Initial index when uncontrolled

Default0

autoplayboolean

Advance to the next image automatically

Defaulttrue

intervalnumber

Time each image is held before autoplay advances, in ms

Default3000

transitionDurationnumber

Duration of one morph, in ms

Default1800

particleDensitynumber

Particles per 1,000 square CSS pixels of the frame

Default80

particleSizenumber

Particle diameter in CSS pixels

Default2

particleOpacitynumber

Peak particle opacity

Default0.9

dispersionnumber

Orbital swing particles take while travelling, 0 = straight lines

Default1

chaosnumber

How far particles burst outward in waves before regrouping into the next shape, 0 = direct morph

Default0

idleDriftnumber

Amplitude of the resting drift and sway, 0 holds particles still

Default1

idleSpeednumber

Speed multiplier for the resting drift

Default1

pointerStrengthnumber

How hard the pointer pushes particles away, 0 disables it

Default1

pointerRadiusnumber

Radius of the pointer influence in CSS pixels

Default120

glownumber

Bloom strength around the particles, 0 disables the pass

Default0.6

aberrationnumber

Chromatic aberration at the frame edge in CSS pixels; pulses while morphing, 0 disables

Default1.5

colorstring

Solid particle color; omit to sample colors from the images

Defaultundefined

backgroundColorstring

Background fill color

Default"#0a0a0a"

luminanceThresholdnumber

Pixels darker than this (0 to 1) count as background and get no particles

Default0

loopboolean

Wrap from the last image back to the first when autoplaying

Defaulttrue

onIndexChange(index: number) => void

Called whenever the formed image changes, including from autoplay

Defaultundefined

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes

Defaultundefined

childrenReactNode

Content rendered above the effect

Defaultundefined

dprnumber

Maximum device pixel ratio

Default2