Metal card stack

A stack of brushed metal payment cards that look like the real thing. Throw the front card to cycle the stack, or click it to flip it over.

Cards, drag, Motion + GSAP

Install

npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/metal-card-stack.tsx https://motion-brew.com/r/metal-card-stack.tsx

One self contained file for React and Tailwind CSS: metal-card-stack.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { MetalCardStack } from "@/components/metal-card-stack";

const cards = [
  {
    holder: "Alex Morgan",
    last4: "4821",
    expiry: "08/29",
    finish: "graphite",
    tier: "Reserve",
  },
  {
    holder: "Alex Morgan",
    last4: "1937",
    expiry: "11/28",
    finish: "gold",
    tier: "Private",
  },
];

export default function Page() {
  return <MetalCardStack cards={cards} onChange={(card) => setActive(card)} />;
}

Props

Prop	Type	Default	Description
cards	{ holder; last4; expiry; finish; tier? }[]	four cards	Cards in the stack, front first; finish is graphite, gold, titanium or obsidian
width	number	320	Card width in px; height follows the real card ratio
onChange	(card, index) => void		Called with the card now at the front
className	string		Placement

More cards

Contact card: Not just a simple Contact button: an inline link that opens a card with an avatar, email to copy, LinkedIn and Book a call.
Decay card: A 3D tilting image card with text over it that rots away from the inside when you hover, until a second picture takes the whole card, then grows back.
Liquid metal card: Hover and black liquid metal pours in from the nearest corner, beaded rivulets running ahead, until a second picture surfaces from inside it.
Reaction card: A post with three reaction buttons.

All animated react card components