Morphing Card Stack

Cards 1.8K

About

Unique Crad stack layout different types of layouts from presenting Your data and animations around switching them

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

Code

How Morphing Card Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from "@/components/ui/morphing-card-stack";
import { Layers,Palette,Clock,Sparkles} from "lucide-react";

const cardData = [
  {
    id: "1",
    title: "Magnetic Dock",
    description: "Cursor-responsive scaling with smooth spring animations",
    icon: <Layers className="h-5 w-5" />,
  },
  {
    id: "2",
    title: "Gradient Mesh",
    description: "Dynamic animated gradient backgrounds that follow your cursor",
    icon: <Palette className="h-5 w-5" />,
  },
  {
    id: "3",
    title: "Pulse Timeline",
    description: "Interactive timeline with animated pulse nodes",
    icon: <Clock className="h-5 w-5" />,
  },
  {
    id: "4",
    title: "Command Menu",
    description: "Radial command palette with keyboard navigation",
    icon: <Sparkles className="h-5 w-5" />,
  },
]
export default function DemoOne() {
  return <Component cards={cardData} />;
}