A field of small tiles where a click or hover sends a radial wave that lifts, scales and lights them by distance. Ripples from the center on its own when idle.
npx shadcn@latest add https://hyperblur.dev/r/ripple-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/ripple-grid.tsx.
import { RippleGrid } from "@/components/hyperblur/ripple-grid"
<div className="relative h-72"><RippleGrid rows={10} cols={18} color="#7fb3ff" /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| rows | number | 12 | Number of rows. |
| cols | number | 20 | Number of columns. |
| shape | "square" | "dot" | "square" | Rounded squares that fill each cell, or smaller round dots. |
| color | string | "#2f7bff" | Wave color. The resting tiles use a dim tint of it. |
| gap | number | 4 | Space between cells in pixels. |
| autoPlay | boolean | true | Send a ripple from the center every few seconds while nobody is interacting. |
| interactive | boolean | true | Start ripples from the tile under the pointer on click and hover. |
| interval | number | 3.6 | Seconds between idle ripples. |