Dots that stick together and stretch apart like glue
| Name | Type | Default | Description |
|---|---|---|---|
columns | number | 14 | Dots across the grid. |
rows | number | 9 | Dots down the grid. |
fill | boolean | true | Spread the grid across the container instead of using spacing. |
spacing | number | 56 | Gap between dot centres in pixels, used when fill is off. |
inset | number | 0 | Padding kept clear around the grid in pixels. |
dotRadius | number | 12 | Resting dot radius in pixels. |
blur | number | 8 | Blur radius feeding the merge filter. |
contrast | number | 28 | Threshold of the merge filter, higher snaps edges harder. |
merge | boolean | true | Merge neighbouring dots into one another. |
tension | number | 0.085 | Pull of each dot back toward its rest position. |
damping | number | 0.8 | Velocity retained each frame, below 1 settles the motion. |
travelDelay | number | 0.06 | Seconds the ripple takes to travel one cell outward. |
bounce | number | 14 | Peak throw of a ripple in pixels. |
decay | number | 2.6 | How quickly a ripple dies out over time. |
frequency | number | 12 | Oscillation rate of a ripple in radians per second. |
spread | number | 0.18 | How quickly a ripple weakens with distance from its origin. |
rippleOnPress | boolean | true | Release a radial ripple where the pointer presses. |
cursorInteraction | boolean | true | Let the pointer drag nearby dots toward it. |
cursorRadius | number | 200 | Reach of the pointer well in pixels. |
cursorPull | number | 22 | How far dots slide toward the pointer in pixels. |
cursorSwell | number | 0.25 | How much dots swell inside the pointer well. |
color | string | "#ffffff" | Colour of the dots. |
backgroundColor | string | "#0a0a0a" | Panel backdrop, or "transparent" to show the page through. |
opacity | number | 1 | Master alpha. |
paused | boolean | false | Freeze the animation. |
dpr | number | 2 | Upper device pixel ratio bound. |
className | string | undefined | Extra classes for the panel. |
children | ReactNode | undefined | Content layered above the panel. |
columnsnumberDots across the grid.
14rowsnumberDots down the grid.
9fillbooleanSpread the grid across the container instead of using spacing.
truespacingnumberGap between dot centres in pixels, used when fill is off.
56insetnumberPadding kept clear around the grid in pixels.
0dotRadiusnumberResting dot radius in pixels.
12blurnumberBlur radius feeding the merge filter.
8contrastnumberThreshold of the merge filter, higher snaps edges harder.
28mergebooleanMerge neighbouring dots into one another.
truetensionnumberPull of each dot back toward its rest position.
0.085dampingnumberVelocity retained each frame, below 1 settles the motion.
0.8travelDelaynumberSeconds the ripple takes to travel one cell outward.
0.06bouncenumberPeak throw of a ripple in pixels.
14decaynumberHow quickly a ripple dies out over time.
2.6frequencynumberOscillation rate of a ripple in radians per second.
12spreadnumberHow quickly a ripple weakens with distance from its origin.
0.18rippleOnPressbooleanRelease a radial ripple where the pointer presses.
truecursorInteractionbooleanLet the pointer drag nearby dots toward it.
truecursorRadiusnumberReach of the pointer well in pixels.
200cursorPullnumberHow far dots slide toward the pointer in pixels.
22cursorSwellnumberHow much dots swell inside the pointer well.
0.25colorstringColour of the dots.
"#ffffff"backgroundColorstringPanel backdrop, or "transparent" to show the page through.
"#0a0a0a"opacitynumberMaster alpha.
1pausedbooleanFreeze the animation.
falsedprnumberUpper device pixel ratio bound.
2classNamestringExtra classes for the panel.
undefinedchildrenReactNodeContent layered above the panel.
undefined