A tidy stack of cards that fans into an arc around a low pivot on hover. The card under the pointer lifts and pushes its neighbours aside, and a click brings it to the front of the stack.
Night Drive · now playing
npx shadcn@latest add https://hyperblur.dev/r/hover-fan-stack.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-fan-stack.tsx.
import { HoverFanStack } from "@/components/hyperblur/hover-fan-stack"
<HoverFanStack autoPlay onSelect={(i, card) => console.log(card.title)} />| Prop | Type | Default | Description |
|---|---|---|---|
| cards | { title: string; meta: string; from: string; to: string }[] | 5 playlists | Cards from back to front; from and to are the cover gradient colors. |
| spread | number | 10 | Rotation in degrees between neighbouring cards when fanned. |
| cardWidth | number | 96 | Card width in pixels. Height and the stage scale with it. |
| autoPlay | boolean | false | Fan open and closed on a loop until someone interacts. On touch the first tap fans the deck and the next one picks a card. |
| defaultSelected | number | 1 | Index of the card shown on top at first. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| labels | { selected: string; pick: string } | { selected: "now playing", pick: "select" } | Words in the caption under the deck. |
| onSelect | (index: number, card) => void | Called when a card is chosen. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |