CursorsNew
Magnetic Dots
A dot grid that parts around the cursor or gathers to it. Dots near the cursor glow brighter.
Customize
color
A Codearia component ยท Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#e5e5e5" | Dot color. |
| spacing | number | 22 | Distance between dots, in pixels. |
| dotSize | number | 1.6 | Dot radius, in pixels. |
| radius | number | 120 | Cursor reach, in pixels. |
| strength | number | 0.6 | How far the dots move. |
| mode | 'repel' | 'attract' | "repel" | Dots run from the cursor or gather to it. |
| autoDemo | boolean | true | A phantom cursor wanders over the grid until the visitor moves the mouse. |
| children | ReactNode | โ | Content on top of the effect. |
| className | string | โ | Classes for the wrapper. |
Dependencies
3 required packages
npm install ogl clsx tailwind-merge