Blob Mouse Trailer

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5import { motion, useMotionValue, useSpring } from "motion/react";
6 
7export const BlobMouseTrailer = () => {
8  const [isVisible, setIsVisible] = useState(false);
9 
10  const mouse = {
11    x: useMotionValue(0),
12    y: useMotionValue(0),
13  };
14 
15  const mouseMove = (e: any) => {
16    const { clientX, clientY } = e;
17    mouse.x.set(clientX - 192);
18    mouse.y.set(clientY - 192);
19    setIsVisible(true);
20  };
21 
22  const smoothOptions = {
23    damping: 10,
24    stiffness: 35,
25    mass: 0.5,
26  };
27 
28  const smoothMouse = {
29    x: useSpring(mouse.x, smoothOptions),
30    y: useSpring(mouse.y, smoothOptions),
31  };
32 
33  useEffect(() => {
34    window.addEventListener("mousemove", mouseMove);
35 
36    return () => {
37      window.removeEventListener("mousemove", mouseMove);
38    };
39  }, []);
40  return (
41    <motion.div
42      className={` ${
43        isVisible ? "hidden md:block" : "hidden"
44      } animate-rotate pointer-events-none fixed top-0 left-0 -z-10 h-96 w-96 rounded-full bg-linear-to-r from-purple-500 to-amber-500 opacity-80 blur-[100px]`}
45      style={{
46        left: smoothMouse.x,
47        top: smoothMouse.y,
48      }}
49    />
50  );
51};