A three-column bento grid where one cursor-following glow lights every tile border and surface. Tiles lift on hover or focus and swap their description for a secondary caption; built-in visuals animate on their own.
npx shadcn@latest add https://hyperblur.dev/r/bento-pointer-glow.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-pointer-glow.tsx.
import { BentoPointerGlow } from "@/components/hyperblur/bento-pointer-glow"
<BentoPointerGlow items={[{ id: "a", title: "Traffic", description: "Visits", visual: "bars", size: "wide" }, { id: "b", title: "Latency", description: "p95", visual: "spark" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | BentoPointerGlowItem[] | four sample tiles | Tiles to render. Each has id, title, description, optional caption, visual and size. |
| items[].visual | "bars" | "toggles" | "avatars" | "spark" | "none" | ReactNode | "none" | Built-in animated visual or any custom node shown in the tile body. |
| items[].size | "sm" | "wide" | "tall" | "large" | "sm" | Grid footprint: wide spans two columns, tall two rows, large both. |
| items[].caption | string | Secondary line revealed on hover or focus. Falls back to the description. | |
| accent | string | "#2f7bff" | Glow and visual accent color. |
| rowHeight | number | 132 | Height of one grid row in pixels. |
| gap | number | 10 | Space between tiles in pixels. |
| radius | number | 18 | Tile corner radius in pixels. |
| glowSize | number | 220 | Radius of the pointer glow in pixels. |
| idle | boolean | true | Sweep a scripted glow across the grid while the pointer is away. |