Grid Distortion
An image or palette gradient cut into cells that the pointer drags around; they settle back when it stops.
import { GridDistortion } from "pleate/effects/grid-distortion";Behind a headline
Drag the grid apart
Props
- src
Image to distort, drawn to cover. Palette gradient when omitted.
string- grid
Cells along the short side.
numberdefault 12- strength
How far cells follow the pointer.
numberdefault 0.15- radius
Pointer reach as a share of the short side.
numberdefault 0.25- relaxation
How fast cells settle back, 0 to 1.
numberdefault 0.9- colors
CSS colors or tokens: light, mid and deep stops of the default gradient. Defaults follow the palette.
string[]- speed
Playback speed.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- interactive
React to the pointer over the parent.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays usable.
- Pauses off screen and in hidden tabs; with reduced motion it shows a still frame.
- Fills its parent: give the parent position relative and the background absolute inset-0.