Dot And Circle Mouse Trailer

1"use client";
2 
3import React, { useEffect, useState } from "react";
4 
5import { motion, useMotionValue, useSpring } from "motion/react";
6 
7export const DotAndCircleMouseTrailer = () => {
8  const [isVisible, setIsVisible] = useState(false);
9 
10  // Cursor Dot
11  const mouse = {
12    x: useMotionValue(0),
13    y: useMotionValue(0),
14  };
15 
16  const mouseMove = (e: any) => {
17    const { clientX, clientY } = e;
18    mouse.x.set(clientX - 4);
19    mouse.y.set(clientY - 4);
20    setIsVisible(true);
21  };
22 
23  const smoothOptions = {
24    damping: 20,
25    stiffness: 300,
26    mass: 0.5,
27  };
28 
29  const smoothMouse = {
30    x: useSpring(mouse.x, smoothOptions),
31    y: useSpring(mouse.y, smoothOptions),
32  };
33 
34  //   Cursor Outline
35  const mouseOutline = {
36    _x: useMotionValue(0),
37    _y: useMotionValue(0),
38  };
39 
40  const outlineMouse = (e: any) => {
41    const { clientX, clientY } = e;
42    mouseOutline._x.set(clientX - 40);
43    mouseOutline._y.set(clientY - 40);
44  };
45 
46  const outlineOptions = {
47    damping: 10,
48    stiffness: 50,
49    mass: 0.5,
50  };
51  const smoothOutline = {
52    _x: useSpring(mouseOutline._x, outlineOptions),
53    _y: useSpring(mouseOutline._y, outlineOptions),
54  };
55 
56  useEffect(() => {
57    window.addEventListener("mousemove", mouseMove);
58    window.addEventListener("mousemove", outlineMouse);
59 
60    return () => {
61      window.removeEventListener("mousemove", mouseMove);
62      window.removeEventListener("mousemove", outlineMouse);
63    };
64  }, []);
65 
66  return (
67    <motion.div
68      className={`${
69        isVisible ? "hidden md:block" : "hidden"
70      } pointer-events-none fixed top-0 left-0 z-50 h-20 w-20 rounded-full border border-black dark:border-white`}
71      style={{
72        left: smoothOutline._x,
73        top: smoothOutline._y,
74      }}
75    >
76      <motion.div
77        className="pointer-events-none fixed top-0 left-0 hidden h-2 w-2 rounded-full bg-black md:block dark:bg-white"
78        style={{
79          left: smoothMouse.x,
80          top: smoothMouse.y,
81        }}
82      />
83    </motion.div>
84  );
85};