{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-card",
  "title": "Animated Card",
  "description": "component for the Animated Card",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "app/registry/animatedcard/animatedcard.tsx",
      "content": "import Image, { StaticImageData } from \"next/image\";\n\nconst AnimatedCard = ({\n  imgSrc,\n  title,\n\n  aboutProduct,\n}: {\n  imgSrc: StaticImageData | string;\n  title: string;\n\n  aboutProduct: string;\n}) => {\n  return (\n    <div className=\"md:w-80 border rounded-2xl shadow-lg border-white dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900 overflow-hidden transition-transform duration-300 hover:scale-105\">\n      <div className=\"p-5 flex flex-col items-center\">\n        <Image\n          className=\"w-32 h-32 object-contain mb-4\"\n          src={imgSrc}\n          alt={`${title} logo`}\n          width={128}\n          height={128}\n        />\n        <div className=\"text-center space-y-1\">\n          <div className=\"text-2xl font-bold tracking-tight text-foreground\">{title}</div>\n\n          <p className=\"text-sm text-muted-foreground mt-2\">{aboutProduct}</p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default AnimatedCard;\n",
      "type": "registry:component",
      "target": "components/spectrumui/animatedcard.tsx"
    },
    {
      "path": "app/registry/animatedcard/animatedcarddemo.tsx",
      "content": "'use client'\nimport AnimatedCard from './animatedcard';\nimport { easeInOut, motion } from 'framer-motion';\nimport { useState } from 'react';\n\n\nconst tools = [\n  {\n    imgSrc: '/tailwind.svg',\n    title: 'Tailwind CSS',\n\n    aboutProduct: 'A utility-first CSS framework for rapidly building custom UIs.',\n  },\n  {\n    imgSrc: '/nextjs.svg',\n    title: 'Next.js',\n\n    aboutProduct:\n      'A React framework for production with server-side rendering and static site generation.',\n  },\n  {\n    imgSrc: '/shadcn.svg',\n    title: 'Shadcn UI',\n\n    aboutProduct: 'Beautiful, accessible components built using Radix UI and Tailwind CSS.',\n  },\n  {\n    imgSrc: 'aceternity.svg',\n    title: 'Aceternity UI',\n\n    aboutProduct: 'Beautiful, accessible components built using Shadcn UI and Tailwind CSS.',\n  },\n];\n\nexport default function AnimatedCardDemo() {\n  const [touchComponent, setTouchComponent] = useState(false);\n\n  const rotateDegree = [-20, -10, 0, 20];\n  const xAxis = [-300, -50, 240, 330];\n  const yAxis = [-60, -120, -140, -100];\n  const initialRotation = [0, 6, 12, 17];\n  const zIndex = [40, 30, 20, 10];\n\n  return (\n    <div\n      className=\"hidden md:flex justify-center min-h-screen items-center\"\n      onClick={() => setTouchComponent(!touchComponent)}\n    >\n      {tools.map((tool, ind) => (\n        <motion.div\n          key={ind}\n          initial={{ x: 0, y: 0 }}\n          animate={\n            touchComponent\n              ? { x: xAxis[ind], y: yAxis[ind], rotate: rotateDegree[ind] }\n              : { x: 0, y: 0 }\n          }\n          transition={{ ease: easeInOut }}\n          style={{\n            zIndex: zIndex[ind],\n            rotate: initialRotation[ind],\n          }}\n          className=\"absolute flex justify-center items-center \"\n        >\n          <AnimatedCard imgSrc={tool.imgSrc} title={tool.title} aboutProduct={tool.aboutProduct} />\n        </motion.div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/animatedcarddemo.tsx"
    }
  ],
  "type": "registry:component"
}