Dot Matrix
Interactive grid of dots that react to mouse proximity with scale and color changes.
Move your mouse
Purple glow on hover
Larger gap, bigger dots
Installation
npx shadcn@latest add https://wise-ui.com/r/dot-matrix.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | number | 24 | Pixel spacing between dots. |
| dotSize | number | 2 | Base dot radius in pixels. |
| color | string | "currentColor" | Base dot color. |
| activeColor | string | same as color | Color of dots near the cursor. |
| influence | number | 100 | Pixel radius of the mouse effect. |
| maxScale | number | 3 | Maximum dot scale near the cursor. |
| className | string | - | Additional classes for the container. |