Grid Motion
A tilted wall of tiles whose rows slide with the pointer, each with its own lag and direction. Tiles take any content.
import { GridMotion } from "pleate/effects/grid-motion";Behind a headline
Everything in motion
Props
- items
Tile contents, reused in order. Empty tiles when omitted.
ReactNode[]- rows / columns
Grid size.
numberdefault 4 / 7- angle
Tilt of the wall in degrees.
numberdefault -12- colors
CSS colors or tokens: tile fill and backdrop glow. 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.