A six-tile bento whose grid tracks resize around the tile you hover or focus. The opened tile widens and grows to reveal an animated visual, details and a stat while its neighbours compress.
quarry / platform
Hover any tile to open it. The grid makes room, the rest step aside.
A full copy of production for every pull request, in two seconds.
Rewind to any second in the last 30 days.
Serve reads from the region closest to each user.
Repeat queries answered before they reach the database.
The five queries costing you the most, ranked.
Review migrations like code, with a safe deploy.
npx shadcn@latest add https://hyperblur.dev/r/bento-hover-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-hover-expand.tsx.
import { BentoHoverExpand } from "@/components/hyperblur/bento-hover-expand"
<BentoHoverExpand defaultIndex={0} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "quarry / platform" | Mono label above the heading. |
| title | string | "Postgres with the sharp edges filed off" | Section heading. |
| subtitle | string | "Hover any tile to open it..." | Paragraph beside the heading. |
| tiles | { title: string; summary: string; points: string[]; stat: string }[] | 6 tiles | Tiles in a 3 by 2 grid. The first word of stat is shown large. Tile n uses visual n. |
| defaultIndex | number | 0 | Tile open at first. |
| onItemSelect | (index: number) => void | Called when another tile opens. | |
| accent | string | "#f59e0b" | Accent for the open tile and visuals. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |