FlipstackAn animated card stack that fans out with rotation on scroll into viewlayoutscardstackanimationfliptransform PreviewCodeCard 1First cardCard 2Second cardCard 3Third cardCard 4Fourth cardCard 5Fifth cardCopyimport FlipStack from "@/components/vritti/flipstack"; export function FlipStackExample() { const cards = [ { id: 1, content: <div className="text-center"><h3 className="text-lg font-bold">Card 1</h3><p className="text-sm text-muted-foreground">First card</p></div> }, { id: 2, content: <div className="text-center"><h3 className="text-lg font-bold">Card 2</h3><p className="text-sm text-muted-foreground">Second card</p></div> }, { id: 3, content: <div className="text-center"><h3 className="text-lg font-bold">Card 3</h3><p className="text-sm text-muted-foreground">Third card</p></div> }, { id: 4, content: <div className="text-center"><h3 className="text-lg font-bold">Card 4</h3><p className="text-sm text-muted-foreground">Fourth card</p></div> }, { id: 5, content: <div className="text-center"><h3 className="text-lg font-bold">Card 5</h3><p className="text-sm text-muted-foreground">Fifth card</p></div> }, ]; return ( <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border"> <FlipStack cards={cards} /> </div> ); } Installation CLIManualpnpmnpmyarnbunpnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/flipstack"Copy Dependencies pnpmnpmyarnbunpnpm add motionCopy