TileWave

A grid of tiles lighting up in a diagonal wave.

Make some waves

Installation

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

React
import TileWave from "@/components/fx/tile-wave"

<TileWave className="px-8 py-24">
    <h2>Your content</h2>
</TileWave>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Tiles pulse gently; there are no rapid flashes.
Pauses offscreen; `paused` stops it on demand (wire it to a visible control if it runs behind reading content).
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the grid unlit and still.

Prop	Type	Default	Description
color	string	violet, 50%	Tile colour.
columns	number	18	Columns.
rows	number	10	Rows.
speed	number	3.2	Seconds per wave.
paused	boolean	false	Stop the animation. It also pauses offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above.