Components
Loading preview...
Unique Crad stack layout different types of layouts from presenting Your data and animations around switching them
@kousthubha_sky_
npx shadcn@latest add https://21st.dev/r/koustubhayadiyala36/morphing-card-stackimport { 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} />;
}