Arrow Cursor Effect

1
'use client';
2
import React, { useState, useEffect } from 'react';
3
import { motion, AnimatePresence } from 'framer-motion';
4

5
const ArrowCursor: React.FC = () => {
6
  const [lastY, setLastY] = useState<number | null>(null);
7
  const [direction, setDirection] = useState<'up' | 'down' | null>(null);
8
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
9

10
  useEffect(() => {
11
    const handleMouseMove = (e: MouseEvent) => {
12
      // Track mouse position
13
      setMousePosition({ x: e.clientX, y: e.clientY });
14

15
      // Determine direction
16
      if (lastY !== null) {
17
        if (e.clientY < lastY) {
18
          setDirection('up');
19
        } else if (e.clientY > lastY) {
20
          setDirection('down');
21
        }
22
      }
23
      setLastY(e.clientY);
24
    };
25

26
    window.addEventListener('mousemove', handleMouseMove);
27

28
    return () => {
29
      window.removeEventListener('mousemove', handleMouseMove);
30
    };
31
  }, [lastY]);
32

33
  const arrowVariants = {
34
    initial: {
35
      opacity: 0,
36
      scale: 0.5,
37
      rotate: direction === 'up' ? 0 : 180,
38
    },
39
    animate: {
40
      opacity: 1,
41
      scale: 1,
42
      rotate: direction === 'up' ? 0 : 180,
43
    },
44
    exit: {
45
      opacity: 0,
46
      scale: 0.5,
47
    },
48
  };
49

50
  return (
51
    <div className='fixed top-0 left-0 w-full h-full pointer-events-none z-50'>
52
      <AnimatePresence>
53
        {direction && (
54
          <motion.div
55
            key={`${direction}-arrow`}
56
            style={{
57
              position: 'fixed',
58
              top: mousePosition.y - 25,
59
              left: mousePosition.x + 15, // Offset 15 pixels to the right
60
            }}
61
            initial='initial'
62
            animate='animate'
63
            exit='exit'
64
            variants={arrowVariants}
65
          >
66
            <div className='w-[50px] h-[50px] bg-black dark:bg-white rounded-full flex items-center justify-center'>
67
              <svg
68
                xmlns='http://www.w3.org/2000/svg'
69
                width='30'
70
                height='30'
71
                viewBox='0 0 24 24'
72
                fill='none'
73
                stroke='currentColor'
74
                strokeWidth='2'
75
                strokeLinecap='round'
76
                strokeLinejoin='round'
77
                className='text-white dark:text-black'
78
              >
79
                <line x1='12' y1='19' x2='12' y2='5'></line>
80
                <polyline points='5 12 12 5 19 12'></polyline>
81
              </svg>
82
            </div>
83
          </motion.div>
84
        )}
85
      </AnimatePresence>
86
    </div>
87
  );
88
};
89

90
export default ArrowCursor;
91