Animated dot grid with cursor interactions.
Move the pointer quickly over the dots to push them, or click to send a shockwave. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
dotSize | number | 16 | Size of each dot in pixels. |
gap | number | 32 | Gap between each dot in pixels. |
baseColor | string | '#5227FF' | Base color of the dots. |
activeColor | string | '#5227FF' | Color of dots when hovered or activated. |
proximity | number | 150 | Radius around the mouse pointer within which dots react. |
speedTrigger | number | 100 | Mouse speed threshold to trigger inertia effect. |
shockRadius | number | 250 | Radius of the shockwave effect on click. |
shockStrength | number | 5 | Strength of the shockwave effect on click. |
maxSpeed | number | 5000 | Maximum speed for inertia calculation. |
resistance | number | 750 | Resistance for the inertia effect. |
returnDuration | number | 1.5 | Duration for dots to return to their original position after inertia. |
Keyboard shortcuts and ARIA behavior.