{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-card-stack-shadcnui",
  "type": "registry:component",
  "title": "Animated Card Stack",
  "description": "Stacked cards that expand on hover",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/cards/shadcnui/animated-card-stack.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { motion, useReducedMotion } from \"framer-motion\";\n\nconst cards = [\n  { title: \"Card 1\", description: \"First card\" },\n  { title: \"Card 2\", description: \"Second card\" },\n  { title: \"Card 3\", description: \"Third card\" },\n];\n\nexport function AnimatedCardStack() {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <div className=\"relative flex items-center justify-center px-8 py-16\">\n      <div aria-hidden className=\"pointer-events-none absolute inset-0 -z-10\">\n        <motion.div\n          className=\"absolute left-1/2 top-10 h-56 w-56 -translate-x-1/2 rounded-full bg-primary/20 blur-[140px]\"\n          animate={\n            shouldReduceMotion\n              ? undefined\n              : { opacity: [0.25, 0.45, 0.25], scale: [0.9, 1.05, 0.95] }\n          }\n          transition={\n            shouldReduceMotion\n              ? undefined\n              : { duration: 11, repeat: Infinity, ease: \"easeInOut\" }\n          }\n        />\n        <motion.div\n          className=\"absolute bottom-8 right-12 h-48 w-48 rounded-full bg-emerald-400/25 blur-[150px]\"\n          animate={\n            shouldReduceMotion\n              ? undefined\n              : { opacity: [0.18, 0.35, 0.18], rotate: [0, 12, 0] }\n          }\n          transition={\n            shouldReduceMotion\n              ? undefined\n              : { duration: 13, repeat: Infinity, ease: \"linear\" }\n          }\n        />\n      </div>\n      {cards.map((card, index) => {\n        const baseScale = 1 - index * 0.04;\n        const baseOffset = index * 18;\n        const hoverMotion = shouldReduceMotion\n          ? undefined\n          : { scale: baseScale + 0.06, y: -20 };\n        return (\n          <motion.div\n            key={card.title}\n            initial={{ scale: baseScale, y: baseOffset, opacity: 0 }}\n            animate={{ scale: baseScale, y: baseOffset, opacity: 1 }}\n            whileHover={hoverMotion}\n            whileFocus={hoverMotion}\n            transition={{\n              type: shouldReduceMotion ? \"tween\" : \"spring\",\n              stiffness: 260,\n              damping: 26,\n              delay: index * 0.08,\n            }}\n            className=\"absolute w-64 rounded-3xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n            style={{ zIndex: cards.length - index }}\n            tabIndex={0}\n            aria-label={`${card.title}: ${card.description}. Hover or focus to expand this card.`}\n            role=\"group\"\n          >\n            <Card className=\"rounded-3xl border border-border/60 bg-card/80 shadow-[0_20px_70px_-40px_rgba(15,23,42,0.7)] backdrop-blur-xl transition-shadow duration-300 group-hover:shadow-[0_26px_90px_-45px_rgba(15,23,42,0.8)]\">\n              <CardHeader>\n                <CardTitle className=\"text-base font-semibold text-foreground\">\n                  {card.title}\n                </CardTitle>\n                <CardDescription className=\"text-xs uppercase tracking-[0.32em] text-muted-foreground/80\">\n                  {card.description}\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-muted-foreground\">\n                  Hover or focus to surface this panel and bring it to the\n                  front.\n                </p>\n              </CardContent>\n            </Card>\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/animated-card-stack-shadcnui.tsx"
    }
  ]
}