A project index where hovering a row opens it in place with a thumbnail, a one-line summary and key numbers, while the other rows fade back. Hover intent timing keeps it calm as the pointer moves down the list.
npx shadcn@latest add https://hyperblur.dev/r/hover-expand-rows.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-expand-rows.tsx.
import { HoverExpandRows } from "@/components/hyperblur/hover-expand-rows"
<HoverExpandRows onOpenChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; tag: string; year: string; summary: string; stats?: { label: string; value: string }[]; background?: string; href?: string }[] | 4 case studies | Rows to show. |
| defaultOpen | number | -1 | Index of the row open at first; -1 keeps all closed. |
| autoPlay | boolean | true | Open each row in turn until someone interacts. The real pointer, a tap or keyboard focus takes over at once. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| linkLabel | string | "View case" | Text of the link inside an open row. |
| onOpenChange | (index: number) => void | Called with the open row index, or -1 when all close. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |