A halftone dot matrix that morphs from one image into the next
| Name | Type | Default | Description |
|---|---|---|---|
images | string[] | required | Ordered image sources the particles morph between. |
activeIndex | number | — | Controlled index of the image to show. |
defaultIndex | number | 0 | Initial image when uncontrolled. |
autoplay | boolean | true | Cycle through the images automatically. |
interval | number | 3000 | Time each image holds, in milliseconds. |
transitionDuration | number | 1800 | Length of each morph, in milliseconds. |
layout | "matrix" | "scatter" | "matrix" | Matrix arranges the particles on a clean hexagonal dot grid. Scatter fills the shape with randomly placed particles. |
colors | [string, string] | — | Two colours blended across the shape. Overrides the image colours. |
color | string | — | A single colour for every particle. Overrides colors and the image colours. |
particleDensity | number | 3 (matrix) / 80 (scatter) | How many particles fill the frame. |
particleSize | number | 6 | Diameter of each dot in pixels. |
sizeByLuminance | number | 0.75 | Sizes each dot by the brightness of the image beneath it, like a halftone print. |
halo | number | 0.4 | Soft glow around each dot. |
particleOpacity | number | 0.9 | Opacity of the particles. |
dispersion | number | 1 | How far particles swing out while morphing. |
chaos | number | 0 | Lets particles flow through turbulence between shapes. |
idleDrift | number | 1 | Gentle drift while a shape is held. |
idleSpeed | number | 1 | Speed of the idle drift. |
tilt | number | 1 | How much the shape tilts in depth toward the pointer. |
pointerStrength | number | 1 | How strongly the pointer pushes particles aside. |
pointerRadius | number | 120 | Reach of the pointer, in pixels. |
glow | number | 0.35 | Bloom around the shape. |
aberration | number | 0 | Colour fringing that pulses during transitions. |
backgroundColor | string | "#0a0a0a" | Background behind the particles. |
luminanceThreshold | number | 0 | Pixels darker than this are left empty. |
loop | boolean | true | Return to the first image after the last. |
onIndexChange | (index: number) => void | — | Called when the active image changes. |
width | string | number | "100%" | Width of the component. |
height | string | number | "100%" | Height of the component. |
className | string | — | Classes for the root element. |
children | ReactNode | — | Content laid over the particles. |
dpr | number | 2 | Maximum device pixel ratio. |
imagesstring[]Ordered image sources the particles morph between.
requiredactiveIndexnumberControlled index of the image to show.
—defaultIndexnumberInitial image when uncontrolled.
0autoplaybooleanCycle through the images automatically.
trueintervalnumberTime each image holds, in milliseconds.
3000transitionDurationnumberLength of each morph, in milliseconds.
1800layout"matrix" | "scatter"Matrix arranges the particles on a clean hexagonal dot grid. Scatter fills the shape with randomly placed particles.
"matrix"colors[string, string]Two colours blended across the shape. Overrides the image colours.
—colorstringA single colour for every particle. Overrides colors and the image colours.
—particleDensitynumberHow many particles fill the frame.
3 (matrix) / 80 (scatter)particleSizenumberDiameter of each dot in pixels.
6sizeByLuminancenumberSizes each dot by the brightness of the image beneath it, like a halftone print.
0.75halonumberSoft glow around each dot.
0.4particleOpacitynumberOpacity of the particles.
0.9dispersionnumberHow far particles swing out while morphing.
1chaosnumberLets particles flow through turbulence between shapes.
0idleDriftnumberGentle drift while a shape is held.
1idleSpeednumberSpeed of the idle drift.
1tiltnumberHow much the shape tilts in depth toward the pointer.
1pointerStrengthnumberHow strongly the pointer pushes particles aside.
1pointerRadiusnumberReach of the pointer, in pixels.
120glownumberBloom around the shape.
0.35aberrationnumberColour fringing that pulses during transitions.
0backgroundColorstringBackground behind the particles.
"#0a0a0a"luminanceThresholdnumberPixels darker than this are left empty.
0loopbooleanReturn to the first image after the last.
trueonIndexChange(index: number) => voidCalled when the active image changes.
—widthstring | numberWidth of the component.
"100%"heightstring | numberHeight of the component.
"100%"classNamestringClasses for the root element.
—childrenReactNodeContent laid over the particles.
—dprnumberMaximum device pixel ratio.
2