Blend Mouse Trailer

1"use client";
2 
3import { useEffect, useMemo, useState } from "react";
4 
5import { motion, useMotionValue, useSpring } from "motion/react";
6 
7export const BlendMouseTrailer = ({ isHovered }: { isHovered: boolean }) => {
8  const [isVisible, setIsVisible] = useState(false);
9 
10  const mouse = {
11    x: useMotionValue(0),
12    y: useMotionValue(0),
13  };
14 
15  const smoothOptions = {
16    damping: 20,
17    stiffness: 300,
18    mass: 0.5,
19  };
20 
21  const smoothMouse = {
22    x: useSpring(mouse.x, smoothOptions),
23    y: useSpring(mouse.y, smoothOptions),
24  };
25 
26  const size = useMemo(() => (isHovered ? 300 : 30), [isHovered]);
27 
28  const mouseMove = (e: MouseEvent) => {
29    const { clientX, clientY } = e;
30 
31    mouse.x.set(clientX - size / 2);
32    mouse.y.set(clientY - size / 2);
33    setIsVisible(true);
34  };
35 
36  useEffect(() => {
37    window.addEventListener("mousemove", mouseMove);
38 
39    return () => {
40      window.removeEventListener("mousemove", mouseMove);
41    };
42  }, [size]);
43 
44  return (
45    <motion.div
46      className={`${
47        isVisible ? "hidden md:block" : "hidden"
48      } pointer-events-none fixed top-0 left-0 rounded-full bg-sky-300 mix-blend-difference`}
49      style={{
50        left: smoothMouse.x,
51        top: smoothMouse.y,
52        height: size,
53        width: size,
54        filter: `blur(${isHovered ? 30 : 0}px)`,
55        transition:
56          "height 0.3s ease-out, width 0.3s ease-out, filter 0.3s ease-out",
57      }}
58    />
59  );
60};