Deck Shuffle

Cards

About

A stack of three cards: the front one lifts away and parks at the back while the others move up. Pauses on hover. CSS only. From WunderUI Motion, free, MIT.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Deck Shuffle to your project and fits it to your theme.

Code

How Deck Shuffle is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Bell, FileText, Receipt } from "lucide-react";
import { DeckShuffle } from "@/components/ui/deck-shuffle";

export default function DeckShuffleDemo() {
  return (
    <div className="flex min-h-72 items-center justify-center p-8">
      <DeckShuffle
        cards={[
          {
            title: "Weekly digest",
            description: "14 updates from your team",
            icon: <Bell className="size-5 text-primary" />,
          },
          {
            title: "Release notes",
            description: "Version 2.4 is live",
            icon: <FileText className="size-5 text-primary" />,
          },
          {
            title: "Billing",
            description: "Your invoice is ready",
            icon: <Receipt className="size-5 text-primary" />,
          },
        ]}
      />
    </div>
  );
}