Media

Hero Card Stack

A fanned arc of overlapping artwork cards — hovered cards spring up and forward while neighbors nudge aside, crowned by floating user-handle badges.

All components

@coplin

@andrea

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<HeroCardStack
  items={[
    { src: "/images/artwork-1.jpg" },
    { src: "/images/artwork-2.jpg" },
    { src: "/images/artwork-3.jpg" },
  ]}
  badges={[
    { label: "@coplin", cardIndex: 1, color: "#3b82f6" },
    { label: "@andrea", cardIndex: 5, color: "#22c55e" },
  ]}
/>

Props

Prop	Type	Default	Description
items*	HeroCardStackItem[]	—	Artwork cards: src and optional alt. Rendered as a fanned, overlapping row.
badges	HeroCardStackBadge[]	[]	Floating handle pills: label, cardIndex to anchor above, and optional color.
cardWidth	number	168	Card width in px.
cardHeight	number	168	Card height in px.
overlap	number	44	How many px each card overlaps its left neighbor.
maxRotation	number	14	Rotation in degrees of the outermost cards in the fan.
className	string	—	Tailwind classes on the root container.

Use cases

Portfolio heroes
Lead a creative platform's landing page with a fanned wall of community artwork.
Marketplace showcases
Surface featured listings or designs with attributed creator badges.
Gallery teasers
Preview a collection where hovering lifts each piece into focus.
Community highlights
Spotlight user contributions with floating @handle callouts.