Card Stack

stack x fan

Stacked cards with fan-out on hover. From Animata.

cardstackfananimata

Card 1

Card 2

Card 3

Code

card-stack.tsx

export function CardStack({ cards }: { cards: string[] }) {
  return (
    <div className="relative flex h-32 w-48 items-center justify-center">
      {cards.map((label, i) => (
        <div key={label}
          className="absolute rounded-xl border border-border bg-card p-4 shadow-lg transition-all duration-300 hover:translate-y-1"
          style={{ top: i * 6, left: i * 6, right: i * 6, zIndex: cards.length - i, transform: \`rotate(\${(i - 1) * 3}deg)\` }}>
          <p className="text-sm font-medium">{label}</p>
        </div>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Card Stack component and wire it to my accent.”