{
  "name": "animated-tooltip",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/animated-tooltip.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport {\n  motion,\n  useTransform,\n  AnimatePresence,\n  useMotionValue,\n  useSpring,\n} from \"motion/react\";\n\nexport const AnimatedTooltip = ({\n  items,\n}: {\n  items: {\n    id: number;\n    name: string;\n    designation: string;\n    image: string;\n  }[];\n}) => {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n  const springConfig = { stiffness: 100, damping: 15 };\n  const x = useMotionValue(0);\n  const animationFrameRef = useRef<number | null>(null);\n\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig,\n  );\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig,\n  );\n\n  const handleMouseMove = (event: any) => {\n    if (animationFrameRef.current) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n\n    animationFrameRef.current = requestAnimationFrame(() => {\n      const halfWidth = event.target.offsetWidth / 2;\n      x.set(event.nativeEvent.offsetX - halfWidth);\n    });\n  };\n\n  return (\n    <>\n      {items.map((item, idx) => (\n        <div\n          className=\"group relative -mr-4\"\n          key={item.name}\n          onMouseEnter={() => setHoveredIndex(item.id)}\n          onMouseLeave={() => setHoveredIndex(null)}\n        >\n          <AnimatePresence>\n            {hoveredIndex === item.id && (\n              <motion.div\n                initial={{ opacity: 0, y: 20, scale: 0.6 }}\n                animate={{\n                  opacity: 1,\n                  y: 0,\n                  scale: 1,\n                  transition: {\n                    type: \"spring\",\n                    stiffness: 260,\n                    damping: 10,\n                  },\n                }}\n                exit={{ opacity: 0, y: 20, scale: 0.6 }}\n                style={{\n                  translateX: translateX,\n                  rotate: rotate,\n                  whiteSpace: \"nowrap\",\n                }}\n                className=\"absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs shadow-xl\"\n              >\n                <div className=\"absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent\" />\n                <div className=\"absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent\" />\n                <div className=\"relative z-30 text-base font-bold text-white\">\n                  {item.name}\n                </div>\n                <div className=\"text-xs text-white\">{item.designation}</div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <img\n            onMouseMove={handleMouseMove}\n            height={100}\n            width={100}\n            src={item.image}\n            alt={item.name}\n            className=\"relative !m-0 h-14 w-14 rounded-full border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105\"\n          />\n        </div>\n      ))}\n    </>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/animated-tooltip.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Animated Tooltip"
}