Project cards whose caption panel slides in from the edge the pointer entered and leaves through the edge it exits, with the text lines rising in a stagger and the image drifting the other way.
npx shadcn@latest add https://hyperblur.dev/r/hover-direction-caption.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-direction-caption.tsx.
import { HoverDirectionCaption } from "@/components/hyperblur/hover-direction-caption"
<HoverDirectionCaption columns={3} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; kicker: string; detail: string; background: string; href?: string }[] | 3 projects | Cards to show; background is any CSS background. |
| columns | number | 3 | Number of grid columns. |
| ratio | number | 0.78 | Card width divided by height. |
| tint | string | "rgba(10,10,10,.72)" | Color of the caption panel. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| autoPlay | boolean | true | Sweep the caption from card to card while nobody is hovering. On touch the first tap opens a card, the second follows its link. The real pointer, a tap or keyboard focus takes over at once. |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |