{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tooltip-motion",
  "type": "registry:component",
  "description": "A tooltip component with animated selection.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/tooltip/animated-tooltip/AnimatedTooltipMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport { motion, useTransform, useMotionValue, useSpring } from \"motion/react\";\r\nimport Image from \"next/image\";\r\n\r\ntype Item = {\r\n  id: number;\r\n  name: string;\r\n  designation: string;\r\n  image: string;\r\n};\r\n\r\nexport const AnimatedTooltipMotion = () => {\r\n  const x = useMotionValue(0);\r\n  const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), {\r\n    stiffness: 100,\r\n    damping: 15,\r\n  });\r\n  const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), {\r\n    stiffness: 100,\r\n    damping: 15,\r\n  });\r\n\r\nconst items = [\r\n  {\r\n    id: 1,\r\n    name: \"Aarav Mehta\",\r\n    designation: \"AI Researcher\",\r\n    image: \"/images/profile/user-1.jpg\",\r\n  },\r\n  {\r\n    id: 2,\r\n    name: \"Sofia Martinez\",\r\n    designation: \"Cloud Architect\",\r\n    image: \"/images/profile/user-2.jpg\",\r\n  },\r\n  {\r\n    id: 3,\r\n    name: \"Kenji Tanaka\",\r\n    designation: \"Cybersecurity Analyst\",\r\n    image: \"/images/profile/user-3.jpg\",\r\n  },\r\n  {\r\n    id: 4,\r\n    name: \"Amelia Rossi\",\r\n    designation: \"UX Strategist\",\r\n    image: \"/images/profile/user-4.jpg\",\r\n  },\r\n  {\r\n    id: 5,\r\n    name: \"Liam O’Connor\",\r\n    designation: \"Blockchain Developer\",\r\n    image: \"/images/profile/user-5.jpg\",\r\n  },\r\n  {\r\n    id: 6,\r\n    name: \"Zara Ibrahim\",\r\n    designation: \"Robotics Engineer\",\r\n    image: \"/images/profile/user-6.jpg\",\r\n  },\r\n];\r\n\r\n\r\n\r\n  return (\r\n    <div className=\"flex items-center justify-center \" >\r\n      {items.map((item) => (\r\n        <div key={item.id} className=\"group relative -mr-4\">\r\n\r\n          <motion.div\r\n            style={{ translateX, rotate }}\r\n            className=\"pointer-events-none absolute -top-16 left-1/2 hidden -translate-x-1/2 flex-col items-center rounded-md bg-primary px-4 py-2 text-xs shadow-xl group-hover:flex\"\r\n          >\r\n            <div className=\"text-base font-bold text-white whitespace-nowrap\">{item.name}</div>\r\n            <div className=\"text-xs text-white whitespace-nowrap\">{item.designation}</div>\r\n          </motion.div>\r\n\r\n     \r\n          <Image\r\n            onMouseMove={(e) =>\r\n              x.set(e.nativeEvent.offsetX - e.currentTarget.offsetWidth / 2)\r\n            }\r\n            src={item.image}\r\n            alt={item.name}\r\n            width={56}\r\n            height={56}\r\n            className=\"h-14 w-14 rounded-full border-2 border-white object-cover object-top transition duration-500 group-hover:z-30 group-hover:scale-105\"\r\n          />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n",
      "type": "registry:component",
      "target": "components/animated/tooltip/animated-tooltip/AnimatedTooltipMotion.tsx"
    }
  ]
}