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        "md:h-96 w-60 h-60 md:w-96 bg-transparent rounded-lg overflow-hidden group/card relative",
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="group-hover/card:block hidden absolute inset-0 w-full h-full bg-black/40 z-10 transition duration-500" />
81          <motion.div
82            variants={variants}
83            className="h-full w-full relative 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 object-cover scale-[1.15]",
93                imageClassName
94// … truncated