{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "three-d-card-motion",
  "type": "registry:component",
  "description": "A Card component with 3D hover effect.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/cards/three-d-card/ThreeDCardMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\n\r\nconst cards = [\r\n  {\r\n    href: \"https://www.mythrillfiction.com/force-mage\",\r\n    cover:\r\n      \"https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg\",\r\n    title:\r\n      \"https://ggayane.github.io/css-experiments/cards/force_mage-title.png\",\r\n    character:\r\n      \"https://ggayane.github.io/css-experiments/cards/force_mage-character.webp\",\r\n  },\r\n];\r\n\r\nexport default function ThreeDCardMotion() {\r\n  return (\r\n    <div\r\n      className=\"flex justify-center items-center\"\r\n      style={{ perspective: \"2500px\" }}\r\n    >\r\n      <div className=\"flex gap-12\">\r\n        {cards.map((card, index) => (\r\n          <a key={index} href={card.href} target=\"_blank\" rel=\"noreferrer\">\r\n            <motion.div\r\n              className=\"relative w-[200px] h-[300px] flex justify-center items-end px-4\"\r\n              style={{ transformStyle: \"preserve-3d\" }}\r\n              initial={{\r\n                rotateX: 0,\r\n                rotateY: 0,\r\n                translateY: 0,\r\n              }}\r\n              whileHover={{\r\n                translateY: -15,\r\n              }}\r\n              transition={{ duration: 0.4 }}\r\n            >\r\n              {/* Wrapper (background image) */}\r\n              <motion.div\r\n                className=\"absolute w-full h-full top-0 left-0 rounded-md overflow-hidden\"\r\n                style={{ transformStyle: \"preserve-3d\", zIndex: 0 }}\r\n                initial={{\r\n                  rotateX: 0,\r\n                  translateY: 0,\r\n                  translateZ: 0,\r\n                  boxShadow: \"0px 20px 60px rgba(0,0,0,0.5)\",\r\n                }}\r\n                whileHover={{\r\n                  rotateX: 50,\r\n                  translateY: -40,\r\n                  translateZ: -80,\r\n                  boxShadow: \"2px 35px 32px -8px rgba(0,0,0,0.75)\",\r\n                }}\r\n                transition={{ duration: 0.5 }}\r\n              >\r\n                <img\r\n                  src={card.cover}\r\n                  alt=\"cover\"\r\n                  className=\"w-full h-full object-cover\"\r\n                />\r\n              </motion.div>\r\n\r\n              {/* Title */}\r\n              <motion.img\r\n                src={card.title}\r\n                alt=\"title\"\r\n                className=\"w-full relative z-10\"\r\n                initial={{ translateZ: 0 }}\r\n                whileHover={{ translateY: -50, translateZ: 100 }}\r\n                transition={{ duration: 0.5 }}\r\n              />\r\n\r\n              {/* Character */}\r\n              <motion.img\r\n                src={card.character}\r\n                alt=\"character\"\r\n                className=\"w-full absolute top-0 left-0 z-20 opacity-0\"\r\n                initial={{ translateZ: 0 }}\r\n                whileHover={{ opacity: 1, translateY: -90, translateZ: 100 }}\r\n                transition={{ duration: 0.5 }}\r\n              />\r\n            </motion.div>\r\n          </a>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/cards/three-d-card/ThreeDCardMotion.tsx"
    }
  ]
}