Pointerstable

GridTrail

A pointer trail that lights cells on an invisible grid, then stops the loop.

Customize

Cellssize, shape and fade

Preset palettepreset

Override colourcolor

Cell size56 pxcellSize

Gap2 pxgap

Corner radius0 pxcornerRadius

Shapeshape

Peak opacity0.50peakOpacity

Fade duration450 msfadeDuration

Max cells90maxCells

Neighbour falloff0.00neighborFalloff

Static gridlines drawn on the same canvas

Show grid linesshowGrid

Override grid colourgridColor

Grid opacity0.060gridOpacity

Blend modeblendMode

Scope to a container (demo only)scoped

TSX

import { GridTrail } from "zerogravity"

<GridTrail />

Generated from the controls above. Only props that differ from their defaults are shown.

16 documented props on GridTrail
Property	Type	Default	Description
`preset`	`"amber" \| "cyan" \| "violet" \| "emerald" \| "rose" \| "mono"`	`"amber"`	Preset palette.
`color`	`string \| null`	`null`	Override colour.
`cellSize`	`number`	`56`	Cell size. Range 16 to 160 px.
`gap`	`number`	`2`	Gap. Range 0 to 24 px.
`cornerRadius`	`number`	`0`	Corner radius. Range 0 to 40 px.
`shape`	`"square" \| "circle"`	`"square"`	Shape.
`peakOpacity`	`number`	`0.5`	Peak opacity. Range 0.05 to 1.
`fadeDuration`	`number`	`450`	Fade duration. Range 80 to 2500 ms.
`maxCells`	`number`	`90`	Max cells. Range 5 to 400.
`neighborFalloff`	`number`	`0`	Neighbour falloff. Range 0 to 1.
`showGrid`	`boolean`	`false`	Show grid lines.
`gridColor`	`string \| null`	`null`	Override grid colour.
`gridOpacity`	`number`	`0.06`	Grid opacity. Range 0 to 0.4.
`blendMode`	`"source-over" \| "lighter" \| "screen" \| "overlay"`	`"source-over"`	Blend mode.
`container`	`RefObject<HTMLElement>`	`—`	Scope the trail to one element instead of the viewport.
`zIndex`	`number`	`0`	Stacking level of the trail canvas.

0 external runtime dependencies

Ships with nothing but React.