{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stacked-card-carousel-shadcnui",
  "type": "registry:component",
  "title": "Stacked Card Carousel",
  "description": "Three stacked cards that shift and tilt dynamically on hover",
  "registryDependencies": [
    "button",
    "card"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/stacked-card-carousel.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { useState } from \"react\";\n\ntype Card = {\n  id: string;\n  title: string;\n  description: string;\n  color?: string;\n};\n\ntype StackedCardCarouselProps = {\n  cards?: Card[];\n};\n\nexport function StackedCardCarousel({\n  cards = [\n    {\n      id: \"1\",\n      title: \"Card One\",\n      description: \"Description for card one\",\n      color: \"bg-primary\",\n    },\n    {\n      id: \"2\",\n      title: \"Card Two\",\n      description: \"Description for card two\",\n      color: \"bg-primary/80\",\n    },\n    {\n      id: \"3\",\n      title: \"Card Three\",\n      description: \"Description for card three\",\n      color: \"bg-primary/60\",\n    },\n  ],\n}: StackedCardCarouselProps) {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  return (\n    <div className=\"relative h-96 w-full max-w-md\">\n      {cards.map((card, index) => {\n        const isHovered = hoveredIndex === index;\n        const zIndex = isHovered ? cards.length : cards.length - index;\n        const scale = isHovered ? 1.05 : 1 - index * 0.05;\n        const y = isHovered ? index * -20 : index * 10;\n        const rotate = isHovered ? (index % 2 === 0 ? -2 : 2) : 0;\n\n        return (\n          <motion.div\n            key={card.id}\n            initial={{ opacity: 0, y: 50 }}\n            animate={{\n              zIndex,\n              scale,\n              y,\n              rotate,\n              opacity: 1,\n            }}\n            transition={{\n              type: \"spring\",\n              stiffness: 300,\n              damping: 30,\n            }}\n            onHoverStart={() => setHoveredIndex(index)}\n            onHoverEnd={() => setHoveredIndex(null)}\n            className={`absolute inset-0 rounded-2xl border border-border bg-card p-6 shadow-lg ${card.color || \"\"}`}\n          >\n            <motion.div\n              animate={{\n                y: isHovered ? -10 : 0,\n              }}\n              transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n            >\n              <h3 className=\"mb-2 text-xl font-semibold\">{card.title}</h3>\n              <p className=\"text-sm text-muted-foreground\">\n                {card.description}\n              </p>\n            </motion.div>\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/stacked-card-carousel-shadcnui.tsx"
    }
  ]
}