A tile grid that reveals as a wavefront spreading from one point, with a glowing ring riding the edge. Far tiles arrive later, softer and fainter, and clicking any tile moves the origin there.
npx shadcn@latest add https://hyperblur.dev/r/motion-radial-grid-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-radial-grid-reveal.tsx.
import { MotionRadialGridReveal } from "@/components/hyperblur/motion-radial-grid-reveal"
<MotionRadialGridReveal columns={6} origin={[0, 0]} fade={0.6} />| Prop | Type | Default | Description |
|---|---|---|---|
| tiles | { label: string; from: string; to: string }[] | 32 swatch tiles | Tiles with a label and two gradient colors. |
| columns | number | 8 | Number of grid columns. |
| origin | [number, number] | [0.5, 0.5] | Starting point of the wave as fractions of width and height. |
| fade | number | 0.45 | How much fainter the farthest tiles stay, from 0 to 1. |
| band | number | 0.35 | Width of the wavefront. Larger values blend more tiles at once. |
| gap | number | 8 | Gap between tiles in pixels. |
| accent | string | "#2f7bff" | Color of the wave ring and the arrival flash. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the reveal in and out by itself. Without it the reveal follows the grid entering the viewport. |
| duration | number | 3.2 | Seconds for one reveal in the autoplay loop. |
| onTileClick | (index: number, tile: Tile) => void | undefined | Called when a tile is clicked. The click also moves the wave origin to that tile. |