Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.
Every prop is wired to the controls underneath. Move the cursor over the stage to see the bulge and the glow.
| Prop | Type | Default | Description |
|---|---|---|---|
dotRadius | number | 1.5 | Radius of each individual dot in the grid. |
dotSpacing | number | 14 | Spacing between dots in the grid. |
cursorRadius | number | 500 | Radius of the cursor interaction area. |
cursorForce | number | 0.1 | Force applied to dots when not in bulge mode. |
bulgeOnly | boolean | true | When true, dots bulge away from cursor. When false, dots are pushed with physics. |
bulgeStrength | number | 67 | Strength of the bulge effect around the cursor. |
glowRadius | number | 160 | Radius of the SVG glow effect that follows the cursor. |
sparkle | boolean | false | When enabled, ~3% of dots randomly sparkle at a larger size. |
waveAmplitude | number | 0 | Amplitude of the wave displacement animation applied to dots. |
gradientFrom | string | 'rgba(168, 85, 247, 0.35)' | Start color of the diagonal gradient applied to dots. |
gradientTo | string | 'rgba(180, 151, 207, 0.25)' | End color of the diagonal gradient applied to dots. |
glowColor | string | '#120F17' | Color of the radial glow effect that follows the cursor. |
Keyboard shortcuts and ARIA behavior.