{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "direction-aware-hover",
  "title": "Direction Aware Hover",
  "description": "A direction aware hover effect using Framer Motion.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/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        \"group/card relative h-60 w-60 overflow-hidden rounded-lg bg-transparent md:h-96 md:w-96\",\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=\"absolute inset-0 z-10 hidden h-full w-full bg-black/40 transition duration-500 group-hover/card:block\" />\n          <motion.div\n            variants={variants}\n            className=\"relative h-full w-full 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 scale-[1.15] object-cover\",\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              \"absolute bottom-4 left-4 z-40 text-white\",\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"
    }
  ],
  "type": "registry:ui"
}