const cursorX = useSpring(0, springConfig)
const cursorY = useSpring(0, springConfig)
const rotation = useSpring(0, { ...springConfig, damping: 60, stiffness: 300 })
const scale = useSpring(1, { ...springConfig, stiffness: 500, damping: 35 })
useEffect(() => {
const CustomMouseMove = (e: MouseEvent) => {
const currentPos = { x: e.clientX, y: e.clientY }
// ... velocity calculation logic ...
cursorX.set(currentPos.x)
cursorY.set(currentPos.y)
if (speed > 0.1) {
// Calculate rotation based on velocity
rotation.set(accumulatedRotation.current)
scale.set(0.95)
setIsMoving(true)
setTimeout(() => {
scale.set(1)
setIsMoving(false)
}, 150)
}
}
const throttledMouseMove = (e: MouseEvent) => {
if (rafId) return
rafId = requestAnimationFrame(() => {
CustomMouseMove(e)
rafId = 0
})
}
document.body.style.cursor = "none"
window.addEventListener("mousemove", throttledMouseMove)
return () => {
window.removeEventListener("mousemove", throttledMouseMove)
document.body.style.cursor = "auto"
}
}, [cursorX, cursorY, rotation, scale])
return (
<motion.div
style={{
position: "fixed",
left: cursorX,
top: cursorY,
translateX: "-50%",
translateY: "-50%",
rotate: rotation,
scale: scale,
zIndex: 100,
pointerEvents: "none",
willChange: "transform",
}}
>
{cursor}
</motion.div>
)
