{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-cards",
  "type": "registry:component",
  "title": "Animated Cards",
  "description": "Overlapping animated cards with subtle hover zoom and per-card rotation.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/xcn/animated-cards.tsx",
      "content": "import { motion } from \"motion/react\"\r\nimport type { ReactElement, ReactNode } from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport type CardMotionConfig = {\r\n  x: number\r\n  y: number\r\n  zIndex: number\r\n}\r\n\r\nexport type CardItem = {\r\n  title: string\r\n  description: string\r\n  className?: string\r\n  skeleton: ReactElement\r\n  config: CardMotionConfig\r\n  rotation: number\r\n}\r\n\r\ntype AnimatedCardsProps = {\r\n  cards: Array<CardItem>\r\n  rounded?: boolean\r\n  className?: string\r\n  mobileContainerClassName?: string\r\n  desktopContainerClassName?: string\r\n  cardClassName?: string\r\n  initialBlur?: number\r\n  initialScale?: number\r\n  desktopHoverScale?: number\r\n  renderCardFooter?: (card: CardItem) => ReactNode\r\n}\r\n\r\nexport function AnimatedCards({\r\n  cards,\r\n  rounded = false,\r\n  className,\r\n  mobileContainerClassName,\r\n  desktopContainerClassName,\r\n  cardClassName,\r\n  initialBlur = 3,\r\n  initialScale = 0.8,\r\n  desktopHoverScale = 1.02,\r\n  renderCardFooter,\r\n}: AnimatedCardsProps) {\r\n  const cardShapeClass = rounded ? \"rounded-4xl\" : \"rounded-none\"\r\n\r\n  const defaultFooter = (card: CardItem) => (\r\n    <div className=\"items-baseline p-2\">\r\n      <h1 className=\"text-start\">{card.title}</h1>\r\n      <p className=\"text-start text-sm\">{card.description}</p>\r\n    </div>\r\n  )\r\n\r\n  const renderFooter = renderCardFooter ?? defaultFooter\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"mx-auto flex h-[calc(100svh-60px)] w-full items-center justify-center overflow-hidden\",\r\n        className\r\n      )}\r\n    >\r\n      <div\r\n        className={cn(\r\n          \"flex w-full snap-x snap-mandatory gap-6 overflow-x-auto px-6 py-10 [-ms-overflow-style:none] [scrollbar-width:none] md:hidden [&::-webkit-scrollbar]:hidden\",\r\n          mobileContainerClassName\r\n        )}\r\n      >\r\n        {cards.map((card) => (\r\n          <div\r\n            key={`${card.title}-mobile`}\r\n            className={cn(\r\n              \"flex h-84 w-64 shrink-0 snap-center flex-col justify-between border-2 p-2 text-2xl font-bold\",\r\n              cardShapeClass,\r\n              cardClassName,\r\n              card.className\r\n            )}\r\n          >\r\n            {card.skeleton}\r\n            {renderFooter(card)}\r\n          </div>\r\n        ))}\r\n      </div>\r\n\r\n      <div\r\n        className={cn(\r\n          \"relative hidden h-84 w-264 shrink-0 origin-center md:block md:scale-[0.65] lg:scale-90 xl:scale-100\",\r\n          desktopContainerClassName\r\n        )}\r\n      >\r\n        {cards.map((card) => (\r\n          <motion.div\r\n            key={`${card.title}-desktop`}\r\n            className=\"absolute top-0 left-0\"\r\n            initial={{\r\n              x: 400,\r\n              y: 200,\r\n              zIndex: 1,\r\n              filter: `blur(${initialBlur}px)`,\r\n              scale: initialScale,\r\n              rotate: 0,\r\n            }}\r\n            animate={{\r\n              x: card.config.x,\r\n              y: card.config.y,\r\n              zIndex: card.config.zIndex,\r\n              filter: \"blur(0px)\",\r\n              scale: 1,\r\n              rotate: card.rotation,\r\n            }}\r\n            transition={{\r\n              type: \"spring\",\r\n              damping: 25,\r\n              stiffness: 120,\r\n            }}\r\n          >\r\n            <motion.button\r\n              type=\"button\"\r\n              whileHover={{ scale: desktopHoverScale }}\r\n              transition={{\r\n                type: \"spring\",\r\n                damping: 25,\r\n                stiffness: 300,\r\n              }}\r\n              className={cn(\r\n                \"flex h-84 w-64 origin-center flex-col justify-between border-2 p-2 text-2xl font-bold\",\r\n                \"[outline:1px_solid_transparent] backface-hidden transform-3d\",\r\n                cardShapeClass,\r\n                cardClassName,\r\n                card.className\r\n              )}\r\n            >\r\n              {card.skeleton}\r\n              {renderFooter(card)}\r\n            </motion.button>\r\n          </motion.div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/xcn/animated-cards.tsx"
    }
  ]
}