Cursor Grid

A responsive lattice that lights beneath your pointer and ripples out on click.

About this tool

An original HorizonX canvas interaction. Cells keep their light briefly, then dissolve; clicks launch expanding waves across the grid. Adjust cell size, colour, radius, falloff, hold and fade timing, stroke, fill, resting lattice and rounded corners. Supports touch, keyboard activation and reduced motion. Export dependency-free HTML or a React or Svelte component.

In collections: Cursor Effects & Mouse Trail Animations

Guide: Cursor Effects for Websites: Delight Without Hiding the Interface

Pointer Physics · HTML / CSS / JS All tools

Grid

Cell size px

Colour

#ffffff

Line width px

Cell radius px

Resting grid

Light

Pointer radius px

Falloff

linear smooth sharp

Peak opacity

Fill opacity

Pulse

Click pulse

on off

Pulse speed px/s

Stage

Stage width px

Stage height px

Advanced

CSS class