3d Cursor Effect

1
'use client';
2

3
import { useState, HTMLAttributes } from 'react';
4
import { useMouse } from '@/hooks/use-mouse';
5

6
// Define an interface for the component's props
7
interface ScalingCursorProps extends HTMLAttributes<HTMLDivElement> {
8
  cursorSize?: number;
9
  cursorColor?: string;
10
  hoverScale?: number;
11
  hoverRotation?: number;
12
  blendMode?:
13
    | 'normal'
14
    | 'multiply'
15
    | 'screen'
16
    | 'overlay'
17
    | 'darken'
18
    | 'lighten'
19
    | 'color-dodge'
20
    | 'color-burn';
21
}
22

23
const ScalingCursor = ({
24
  cursorSize = 24, // default to 24px
25
  cursorColor = 'bg-purple-500',
26
  hoverScale = 2,
27
  hoverRotation = 45,
28
  blendMode = 'screen',
29
  className,
30
  ...rest
31
}: ScalingCursorProps) => {
32
  const [mouseState, ref] = useMouse();
33
  const [isHovering, setIsHovering] = useState(false);
34

35
  return (
36
    <div className={`relative w-full h-full  ${className}`} ref={ref} {...rest}>
37
      {mouseState.x !== null && mouseState.y !== null && (
38
        <div
39
          className='fixed pointer-events-none z-50 transition-all duration-300'
40
          style={{
41
            left: mouseState.x,
42
            top: mouseState.y,
43
            transform: `translate(-50%, -50%) 
44
              scale(${isHovering ? hoverScale : 1}) 
45
              rotate(${isHovering ? `${hoverRotation}deg` : '0deg'})`,
46
          }}
47
        >
48
          <div
49
            className={`${cursorColor} rounded-full mix-blend-${blendMode}`}
50
            style={{
51
              width: `${cursorSize}px`,
52
              height: `${cursorSize}px`,
53
            }}
54
          />
55
        </div>
56
      )}
57

58
      <div className='flex items-center justify-center h-full gap-8'>
59
        <button
60
          className='px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors'
61
          onMouseEnter={() => setIsHovering(true)}
62
          onMouseLeave={() => setIsHovering(false)}
63
        >
64
          Hover to Scale & Rotate
65
        </button>
66
      </div>
67
    </div>
68
  );
69
};
70

71
export default ScalingCursor;
72