Spaces:
Sleeping
Sleeping
File size: 3,850 Bytes
74626f2 | 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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | import React, { useEffect, useState } from 'react';
import { motion, useSpring, useMotionValue } from 'framer-motion';
export const CustomCursor: React.FC = () => {
const cursorX = useMotionValue(-100);
const cursorY = useMotionValue(-100);
const [isHovering, setIsHovering] = useState(false);
// Trailing Effect - Create 4 dots with staggered spring physics
const trail1X = useSpring(cursorX, { damping: 20, stiffness: 200 });
const trail1Y = useSpring(cursorY, { damping: 20, stiffness: 200 });
const trail2X = useSpring(cursorX, { damping: 30, stiffness: 150 });
const trail2Y = useSpring(cursorY, { damping: 30, stiffness: 150 });
const trail3X = useSpring(cursorX, { damping: 40, stiffness: 100 });
const trail3Y = useSpring(cursorY, { damping: 40, stiffness: 100 });
useEffect(() => {
const moveCursor = (e: MouseEvent) => {
cursorX.set(e.clientX);
cursorY.set(e.clientY);
};
const handleMouseOver = (e: MouseEvent) => {
const target = e.target as HTMLElement;
const isClickable = target.closest('button, a, input, select, [role="button"]');
setIsHovering(!!isClickable);
};
window.addEventListener('mousemove', moveCursor);
window.addEventListener('mouseover', handleMouseOver);
return () => {
window.removeEventListener('mousemove', moveCursor);
window.removeEventListener('mouseover', handleMouseOver);
};
}, [cursorX, cursorY]);
const trails = [
{ x: trail1X, y: trail1Y, scale: 0.8, opacity: 0.6, delay: 0 },
{ x: trail2X, y: trail2Y, scale: 0.6, opacity: 0.4, delay: 0.05 },
{ x: trail3X, y: trail3Y, scale: 0.4, opacity: 0.2, delay: 0.1 },
];
return (
<>
<style>{`
body, a, button, input, select {
cursor: none !important;
}
`}</style>
{/* Trailing Dots (The "Dragging" effect) */}
{trails.map((trail, i) => (
<motion.div
key={i}
className="fixed top-0 left-0 bg-brand rounded-full pointer-events-none z-[9996]"
style={{
width: 12,
height: 12,
x: trail.x,
y: trail.y,
scale: trail.scale,
opacity: trail.opacity,
translateX: '-50%',
translateY: '-50%',
}}
/>
))}
{/* Main Lead Dot */}
<motion.div
className="fixed top-0 left-0 w-3 h-3 bg-brand rounded-full pointer-events-none z-[9999] mix-blend-difference"
style={{
x: cursorX,
y: cursorY,
translateX: '-50%',
translateY: '-50%',
}}
/>
{/* Pulsing Outer Ring */}
<motion.div
className="fixed top-0 left-0 w-10 h-10 border-2 border-brand/40 rounded-full pointer-events-none z-[9998]"
animate={{
scale: isHovering ? 1.6 : 1,
borderColor: isHovering ? 'rgba(59, 130, 246, 0.8)' : 'rgba(59, 130, 246, 0.3)',
backgroundColor: isHovering ? 'rgba(59, 130, 246, 0.15)' : 'rgba(0,0,0,0)',
}}
style={{
x: trail1X,
y: trail1Y,
translateX: '-50%',
translateY: '-50%',
}}
transition={{ type: 'spring', damping: 20, stiffness: 150 }}
/>
{/* Technical HUD Crosshair (Centered on lead) */}
<motion.div
className="fixed top-0 left-0 pointer-events-none z-[9997]"
style={{
x: cursorX,
y: cursorY,
translateX: '-50%',
translateY: '-50%',
}}
>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-[1px] bg-brand/30"></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-[1px] bg-brand/30"></div>
</motion.div>
</>
);
};
|