GridBackdrop

A perspective grid gliding toward the viewer and fading at the horizon.

Enter the grid

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/grid-backdrop.json

React
import GridBackdrop from "@/components/fx/grid-backdrop"

<GridBackdrop className="px-8 py-28"><h2>Enter the grid</h2></GridBackdrop>

The grid is aria-hidden and ignores pointer events.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) holds the grid still.

Prop	Type	Default	Description
color	string	violet, 45%	Line colour.
glowColor	string	violet, 35%	Glow along the horizon.
cellSize	number	28	Cell size in px (before perspective).
speed	number	1.2	Seconds to travel one cell.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.