Cursor Grid
A field of dots that swell and take the accent near the cursor, then settle back.
import { CursorGrid } from "pleate/effects/cursor-grid";Dot field
Dots wake up
Near the cursor they swell and take the accent.
Props
- gap
Distance between dots in px.
numberdefault 22- dotSize
Resting dot radius in px.
numberdefault 1.4- radius
Reach of the cursor in px.
numberdefault 120- color
Resting dot color.
stringdefault var(--pl-fg-subtle)- activeColor
Color near the cursor.
stringdefault var(--pl-accent)
Accessibility
- Decorative layer, hidden from assistive tech, and it never catches clicks.
- Touch and reduced motion get the still grid.