"use client"; import { MousePointer2, MousePointerClick } from "lucide-react"; import React, { useRef, useState } from "react"; import { motion, useMotionValue, useSpring, easeInOut } from "motion/react"; import { cn } from "@/src/lib/utils"; function CursorCard() { const containerRef = useRef(null); const [isHovering, setIsHovering] = useState(false); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const cursor1TargetX = useMotionValue(50); const cursor1TargetY = useMotionValue(100); const cursor2TargetX = useMotionValue(180); const cursor2TargetY = useMotionValue(190); const cursor1X = useSpring(cursor1TargetX, { stiffness: 50, damping: 25, mass: 0.5, }); const cursor1Y = useSpring(cursor1TargetY, { stiffness: 50, damping: 25, mass: 0.5, }); const cursor2X = useSpring(cursor2TargetX, { stiffness: 40, damping: 30, mass: 0.8, }); const cursor2Y = useSpring(cursor2TargetY, { stiffness: 40, damping: 30, mass: 0.8, }); const updateCursorPositions = (mouseXVal: number, mouseYVal: number) => { if (!containerRef.current) return; const containerWidth = containerRef.current.offsetWidth; const containerHeight = containerRef.current.offsetHeight; const contentWidth = containerWidth - 48; const headerHeight = 100; const contentAreaHeight = containerHeight - headerHeight - 48; const cursorSize = 24; const minX = 10; const maxX = contentWidth - cursorSize - 10; const minY = 10; const maxY = contentAreaHeight - cursorSize - 10; const isRight = mouseXVal > containerWidth * 0.5; const isBottom = mouseYVal > containerHeight * 0.5; let cursor1TargetXVal, cursor1TargetYVal; if (!isRight && !isBottom) { cursor1TargetXVal = minX; cursor1TargetYVal = maxY - 20; } else if (isRight && !isBottom) { cursor1TargetXVal = maxX - 20; cursor1TargetYVal = maxY - 10; } else if (!isRight && isBottom) { cursor1TargetXVal = minX + 10; cursor1TargetYVal = contentAreaHeight * 0.3; } else { cursor1TargetXVal = contentWidth * 0.3; cursor1TargetYVal = contentAreaHeight * 0.3; } let cursor2TargetXVal, cursor2TargetYVal; if (!isRight && !isBottom) { cursor2TargetXVal = contentWidth * 0.5; cursor2TargetYVal = contentAreaHeight * 0.4; } else if (isRight && !isBottom) { cursor2TargetXVal = contentWidth * 0.25; cursor2TargetYVal = contentAreaHeight * 0.4; } else if (!isRight && isBottom) { cursor2TargetXVal = contentWidth * 0.5; cursor2TargetYVal = maxY - 10; } else { cursor2TargetXVal = contentWidth * 0.25; cursor2TargetYVal = maxY - 15; } cursor1TargetX.set(Math.max(minX, Math.min(maxX, cursor1TargetXVal))); cursor1TargetY.set(Math.max(minY, Math.min(maxY, cursor1TargetYVal))); cursor2TargetX.set(Math.max(minX, Math.min(maxX, cursor2TargetXVal))); cursor2TargetY.set(Math.max(minY, Math.min(maxY, cursor2TargetYVal))); }; const handleMouseMove = (e: React.MouseEvent) => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; mouseX.set(x); mouseY.set(y); if (isHovering) { updateCursorPositions(x, y); } } }; const handleMouseEnter = () => { setIsHovering(true); if (containerRef.current) { const x = mouseX.get(); const y = mouseY.get(); updateCursorPositions(x, y); } }; const handleMouseLeave = () => { setIsHovering(false); cursor1TargetX.set(50); cursor1TargetY.set(100); cursor2TargetX.set(180); cursor2TargetY.set(190); }; const cursorVariants = { idle: { scale: 1, rotate: 0, }, hover: { scale: 1.1, rotate: [0, -2, 2, 0], transition: { rotate: { repeat: Infinity, duration: 2, ease: easeInOut, }, scale: { duration: 0.2, }, }, }, }; const nameTagVariants = { idle: { opacity: 0.8, y: 0, }, hover: { opacity: 1, y: -2, transition: { duration: 0.2, }, }, }; return (

{" "}

{" "} Interactive Demo

{" "}

Mouse tracking simulation

Dynamic cursor movement and interactions

{" "}

User A{" "} {" "} User B

); } export default CursorCard;

Cursors

Interactive Demo

Mouse tracking simulation

Installation