Toggle Sidebar B
AppearanceLight & dark mode D

Cursor Grid

Canvas grid whose cells light up around the cursor with configurable radius, falloff and click pulses.

Default

Move the pointer over the grid and click to send out a ring. Every prop is wired to the controls underneath. The component fills its parent, so give the parent a size.

Dark previewReplay previewOpen in new tab

Move Your Cursor

Customize

Color
Falloff
Cell Size70px
Radius140px
Hold Time400ms
Fade Duration800ms
Line Width1.2px
Max Opacity1
Fill Opacity0
Grid Opacity0
Cell Corners0px
Pulse Speed600px/s

API Reference

CursorGrid

PropTypeDefaultDescription
cellSizenumber70Size of each grid cell in pixels.
colorstring"#D946EF"Color of the cell strokes, fills and pulses.
radiusnumber140Radius in pixels around the cursor within which cells light up.
falloff"linear" | "smooth" | "sharp""smooth"Curve mapping distance from the cursor to cell brightness.
holdTimenumber400How long in milliseconds a cell stays lit before it starts fading.
fadeDurationnumber800How long in milliseconds a fully lit cell takes to fade out.
lineWidthnumber1.2Stroke width of the cell outlines.
maxOpacitynumber1Peak opacity of a cell at the cursor position.
fillOpacitynumber0Translucent fill of lit cells; 0 disables the fill.
gridOpacitynumber0Opacity of a faint always-visible lattice; 0 hides it.
cellRadiusnumber0Corner radius of the cells in pixels.
clickPulsebooleantrueEmit an expanding ring of lit cells on click.
pulseSpeednumber600Expansion speed of the click ring in pixels per second.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The canvas is decorative and reacts to the pointer only, so keep any real content in a separate layer above it.
  • Turn clickPulse off for users who prefer reduced motion.
CubesDither Veil