Shape Grid
A grid of outlined shapes drifting diagonally. Cells under the pointer fill in and fade out behind it. Fills its parent: place it with absolute inset-0 behind your content.
import { ShapeGrid } from "pleate/effects/shape-grid";Behind a headline
Move across the grid
Props
- colors
CSS colors or tokens: [outline, hover fill]. Defaults follow the palette.
string[]- speed
Playback speed.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- interactive
Follow the pointer over the parent element.
booleandefault true- shape
Cell shape.
"square" | "circle" | "hexagon" | "triangle"default "square"- cell
Cell size in px, times scale.
numberdefault 44
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays clickable.
- Pauses off screen and in hidden tabs; reduced motion shows one still frame.
- Canvas 2D.