morphing-cursor

1"use client";
2 
3import type React from "react";
4import { useCallback, useEffect, useRef, useState } from "react";
5import { cn } from "@/lib/utils";
6 
7interface MagneticTextProps {
8  text: string;
9  hoverText?: string;
10  className?: string;
11}
12 
13export function MagneticText({
14  text = "CREATIVE",
15  hoverText = "EXPLORE",
16  className,
17}: MagneticTextProps) {
18  const containerRef = useRef<HTMLDivElement>(null);
19  const circleRef = useRef<HTMLDivElement>(null);
20  const innerTextRef = useRef<HTMLDivElement>(null);
21  const [isHovered, setIsHovered] = useState(false);
22  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
23 
24  const mousePos = useRef({ x: 0, y: 0 });
25  const currentPos = useRef({ x: 0, y: 0 });
26  const animationFrameRef = useRef<number | undefined>(undefined);
27 
28  useEffect(() => {
29    const updateSize = () => {
30      if (containerRef.current) {
31        setContainerSize({
32          width: containerRef.current.offsetWidth,
33          height: containerRef.current.offsetHeight,
34        });
35      }
36    };
37    updateSize();
38    window.addEventListener("resize", updateSize);
39    return () => window.removeEventListener("resize", updateSize);
40  }, []);
41 
42  useEffect(() => {
43    const lerp = (start: number, end: number, factor: number) =>
44      start + (end - start) * factor;
45 
46    const animate = () => {
47      currentPos.current.x = lerp(
48        currentPos.current.x,
49        mousePos.current.x,
50        0.15,
51      );
52      currentPos.current.y = lerp(
53        currentPos.current.y,
54        mousePos.current.y,
55        0.15,
56      );
57 
58      if (circleRef.current) {
59        circleRef.current.style.transform = `translate(${currentPos.current.x}px, ${currentPos.current.y}px) translate(-50%, -50%)`;
60      }
61 
62      if (innerTextRef.current) {
63        innerTextRef.current.style.transform = `translate(${-currentPos.current.x}px, ${-currentPos.current.y}px)`;
64      }
65 
66      animationFrameRef.current = requestAnimationFrame(animate);
67    };
68 
69    animationFrameRef.current = requestAnimationFrame(animate);
70    return () => {
71      if (animationFrameRef.current)
72        cancelAnimationFrame(animationFrameRef.current);
73    };
74  }, []);
75 
76  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
77    if (!containerRef.current) return;
78    const rect = containerRef.current.getBoundingClientRect();
79    mousePos.current = {
80      x: e.clientX - rect.left,
81      y: e.clientY - rect.top,
82    };
83  }, []);
84 
85// … truncated