Stacking CardsScroll-driven stacking cards that scale down as they stack on top of each othercardsscrollstackinganimationlayoutcard PreviewCodeFirst CardSecond CardThird CardFourth CardCopyimport StackingCards, { StackingCardItem } from "@/components/vritti/stacking-cards" export function StackingCardsExample() { const cards = [ { title: "First Card", color: "bg-blue-500" }, { title: "Second Card", color: "bg-green-500" }, { title: "Third Card", color: "bg-purple-500" }, { title: "Fourth Card", color: "bg-orange-500" }, ] return ( <StackingCards totalCards={cards.length} className="h-[300vh]"> {cards.map((card, i) => ( <StackingCardItem key={i} index={i} className="h-screen"> <div className={`${card.color} rounded-2xl p-8 h-[80vh] flex items-center justify-center`} > <h2 className="text-4xl font-bold text-white">{card.title}</h2> </div> </StackingCardItem> ))} </StackingCards> ) } Installation CLIManualpnpmnpmyarnbunpnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/stacking-cards"Copy Dependencies pnpmnpmyarnbunpnpm add motionCopy