A tilted wall of gradient tiles with small charts and cards, its rows sliding in alternating directions. Rows under the pointer speed up and brighten.
npx shadcn@latest add https://hyperblur.dev/r/bg-grid-motion.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-grid-motion.tsx.
import { BgGridMotion } from "@/components/hyperblur/bg-grid-motion"
<div className="relative h-96 bg-black"><BgGridMotion /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| tileSize | number | 64 | Tile size in pixels. |
| gap | number | 10 | Space between tiles in pixels. |
| angle | number | -14 | Rotation of the grid in degrees. |
| speed | number | 1 | Base row speed multiplier. |
| boost | number | 4 | Extra speed of the rows under the pointer. 4 makes them five times faster. |
| accent | string | "#2f7bff" | First color of the tile palette. |
| colors | string[] | ["#7c5cff", "#ff5c8a", "#22d3a7", "#ffb547", "#38bdf8"] | Other colors used in the tile gradients. |
| tileColor | string | "#141414" | Base fill of every tile under its gradient. |
| children | ReactNode | Content rendered on top of the grid. |