Direction Aware Hover

1"use client"
2 
3import { useRef, useState } from "react"
4 
5import { AnimatePresence, motion } from "motion/react"
6import { cn } from "@/lib/utils"
7 
8export const DirectionAwareHover = ({
9  imageUrl,
10  children,
11  childrenClassName,
12  imageClassName,
13  className,
14}: {
15  imageUrl: string
16  children: React.ReactNode | string
17  childrenClassName?: string
18  imageClassName?: string
19  className?: string
20}) => {
21  const ref = useRef<HTMLDivElement>(null)
22 
23  const [direction, setDirection] = useState<
24    "top" | "bottom" | "left" | "right" | string
25  >("left")
26 
27  const handleMouseEnter = (
28    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
29  ) => {
30    if (!ref.current) return
31 
32    const direction = getDirection(event, ref.current)
33    console.log("direction", direction)
34    switch (direction) {
35      case 0:
36        setDirection("top")
37        break
38      case 1:
39        setDirection("right")
40        break
41      case 2:
42        setDirection("bottom")
43        break
44      case 3:
45        setDirection("left")
46        break
47      default:
48        setDirection("left")
49        break
50    }
51  }
52 
53  const getDirection = (
54    ev: React.MouseEvent<HTMLDivElement, MouseEvent>,
55    obj: HTMLElement,
56  ) => {
57    const { width: w, height: h, left, top } = obj.getBoundingClientRect()
58    const x = ev.clientX - left - (w / 2) * (w > h ? h / w : 1)
59    const y = ev.clientY - top - (h / 2) * (h > w ? w / h : 1)
60    const d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4
61    return d
62  }
63 
64  return (
65    <motion.div
66      onMouseEnter={handleMouseEnter}
67      ref={ref}
68      className={cn(
69        "group/card relative h-60 w-60 overflow-hidden rounded-lg bg-transparent md:h-96 md:w-96",
70        className,
71      )}
72    >
73      <AnimatePresence mode="wait">
74        <motion.div
75          className="relative h-full w-full"
76          initial="initial"
77          whileHover={direction}
78          exit="exit"
79        >
80          <motion.div className="absolute inset-0 z-10 hidden h-full w-full bg-black/40 transition duration-500 group-hover/card:block" />
81          <motion.div
82            variants={variants}
83            className="relative h-full w-full bg-gray-50 dark:bg-black"
84            transition={{
85              duration: 0.2,
86              ease: "easeOut",
87            }}
88          >
89            <img
90              alt="image"
91              className={cn(
92                "h-full w-full scale-[1.15] object-cover",
93                imageClassName,
94              )}
95// … truncated