CodeReviewAgent/components/cursor-effect.tsx at main · gauravxdev/CodeReviewAgent · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
'use client';

import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export const CursorEffect = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
      setIsActive(true);
    };

    const handleMouseLeave = () => {
      setIsActive(false);
    };

    window.addEventListener('mousemove', handleMouseMove);
    document.body.addEventListener('mouseleave', handleMouseLeave);

    // Clean up event listeners
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      document.body.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);

  return (
    <AnimatePresence>
      {isActive && (
        <>
          {/* Main cursor effect */}
          <motion.div
            className="fixed pointer-events-none z-50 mix-blend-difference"
            animate={{
              x: mousePosition.x - 8,
              y: mousePosition.y - 8,
              scale: 1,
              opacity: 0.8,
            }}
            initial={{
              opacity: 0,
              scale: 0.5,
            }}
            exit={{
              opacity: 0,
              scale: 0,
            }}
            transition={{
              type: "spring",
              stiffness: 500,
              damping: 28,
              mass: 0.5,
            }}
            style={{
              width: '24px',
              height: '24px',
            }}
          >
            <div className="w-full h-full rounded-full bg-white" />
          </motion.div>

          {/* Trailing effect */}
          <motion.div
            className="fixed pointer-events-none z-50 mix-blend-difference"
            animate={{
              x: mousePosition.x - 30,
              y: mousePosition.y - 30,
              scale: 1,
              opacity: 0.2,
            }}
            initial={{
              opacity: 0,
              scale: 0.5,
            }}
            exit={{
              opacity: 0,
              scale: 0,
            }}
            transition={{
              type: "spring",
              stiffness: 100,
              damping: 30,
              mass: 1.2,
              delay: 0.08,
            }}
            style={{
              width: '100px',
              height: '100px',
            }}
          >
            <div className="w-full h-full rounded-full bg-white opacity-50 blur-sm" />
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

export default CursorEffect;