{
  "name": "direction-aware-hover",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/direction-aware-hover.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const DirectionAwareHover = ({\n  imageUrl,\n  children,\n  childrenClassName,\n  imageClassName,\n  className,\n}: {\n  imageUrl: string;\n  children: React.ReactNode | string;\n  childrenClassName?: string;\n  imageClassName?: string;\n  className?: string;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const [direction, setDirection] = useState<\n    \"top\" | \"bottom\" | \"left\" | \"right\" | string\n  >(\"left\");\n\n  const handleMouseEnter = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (!ref.current) return;\n\n    const direction = getDirection(event, ref.current);\n    console.log(\"direction\", direction);\n    switch (direction) {\n      case 0:\n        setDirection(\"top\");\n        break;\n      case 1:\n        setDirection(\"right\");\n        break;\n      case 2:\n        setDirection(\"bottom\");\n        break;\n      case 3:\n        setDirection(\"left\");\n        break;\n      default:\n        setDirection(\"left\");\n        break;\n    }\n  };\n\n  const getDirection = (\n    ev: React.MouseEvent<HTMLDivElement, MouseEvent>,\n    obj: HTMLElement\n  ) => {\n    const { width: w, height: h, left, top } = obj.getBoundingClientRect();\n    const x = ev.clientX - left - (w / 2) * (w > h ? h / w : 1);\n    const y = ev.clientY - top - (h / 2) * (h > w ? w / h : 1);\n    const d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;\n    return d;\n  };\n\n  return (\n    <motion.div\n      onMouseEnter={handleMouseEnter}\n      ref={ref}\n      className={cn(\n        \"md:h-96 w-60 h-60 md:w-96 bg-transparent rounded-lg overflow-hidden group/card relative\",\n        className\n      )}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          className=\"relative h-full w-full\"\n          initial=\"initial\"\n          whileHover={direction}\n          exit=\"exit\"\n        >\n          <motion.div className=\"group-hover/card:block hidden absolute inset-0 w-full h-full bg-black/40 z-10 transition duration-500\" />\n          <motion.div\n            variants={variants}\n            className=\"h-full w-full relative bg-gray-50 dark:bg-black\"\n            transition={{\n              duration: 0.2,\n              ease: \"easeOut\",\n            }}\n          >\n            <img\n              alt=\"image\"\n              className={cn(\n                \"h-full w-full object-cover scale-[1.15]\",\n                imageClassName\n              )}\n              width=\"1000\"\n              height=\"1000\"\n              src={imageUrl}\n            />\n          </motion.div>\n          <motion.div\n            variants={textVariants}\n            transition={{\n              duration: 0.5,\n              ease: \"easeOut\",\n            }}\n            className={cn(\n              \"text-white absolute bottom-4 left-4 z-40\",\n              childrenClassName\n            )}\n          >\n            {children}\n          </motion.div>\n        </motion.div>\n      </AnimatePresence>\n    </motion.div>\n  );\n};\n\nconst variants = {\n  initial: {\n    x: 0,\n  },\n\n  exit: {\n    x: 0,\n    y: 0,\n  },\n  top: {\n    y: 20,\n  },\n  bottom: {\n    y: -20,\n  },\n  left: {\n    x: 20,\n  },\n  right: {\n    x: -20,\n  },\n};\n\nconst textVariants = {\n  initial: {\n    y: 0,\n    x: 0,\n    opacity: 0,\n  },\n  exit: {\n    y: 0,\n    x: 0,\n    opacity: 0,\n  },\n  top: {\n    y: -20,\n    opacity: 1,\n  },\n  bottom: {\n    y: 2,\n    opacity: 1,\n  },\n  left: {\n    x: -2,\n    opacity: 1,\n  },\n  right: {\n    x: 20,\n    opacity: 1,\n  },\n};\n",
      "type": "registry:ui",
      "target": "components/ui/direction-aware-hover.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Direction Aware Hover"
}