Magnetic Cursor Dock for React

"use client";

import {
  motion,
  useMotionValue,
  useTransform,
} from "framer-motion";
import React, { useEffect, useRef } from "react";
import { cn } from "@/lib/utils";

interface MagneticCursorDockItemProps {
  children: React.ReactNode;
  mousePosRef: React.MutableRefObject<{
    x: number;
    y: number;
  }>;
  dockRef: React.RefObject<HTMLDivElement | null>;
  maxDist?: number;
  scaleFactor?: number;
  liftAmount?: number;
}

function MagneticCursorDockItem({
  children,
  mousePosRef,
  dockRef,
  maxDist = 90,
  scaleFactor = 0.6,
  liftAmount = 16,
}: MagneticCursorDockItemProps) {
  const ref = useRef<HTMLDivElement>(null);
  const scale = useMotionValue(1);
  const y = useMotionValue(0);
  const zIndex = useTransform(scale, (s) =>
    s > 1 ? Math.round(10 + (s - 1) * 100) : 0,
  );

  useEffect(() => {
    const el = ref.current;
    const dock = dockRef.current;
    if (!(el && dock)) {
      return;
    }

    const raf = () => {
      if (!(el && dock)) {
        return;
      }
      const rect = dock.getBoundingClientRect();
      const itemRect = el.getBoundingClientRect();
      const itemCx =
        itemRect.left - rect.left + itemRect.width / 2;
      const itemCy =
        itemRect.top - rect.top + itemRect.height / 2;
      const mx = mousePosRef.current.x;
      const my = mousePosRef.current.y;
      const dx = mx - itemCx;
      const dy = my - itemCy;
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < maxDist) {
        const factor = 1 - dist / maxDist;
        scale.set(1 + factor * scaleFactor);
        y.set(-factor * liftAmount);
      } else {
        scale.set(1);
        y.set(0);
      }
      requestAnimationFrame(raf);
    };
    const id = requestAnimationFrame(raf);
    return () => cancelAnimationFrame(id);
  }, [
    dockRef,
    mousePosRef,
    maxDist,
    scaleFactor,
    liftAmount,
    scale.set,
    y.set,
  ]);

  return (
    <motion.div
      ref={ref}
      style={{ scale, y, zIndex }}
      className="isolate origin-bottom"
    >
      {children}
    </motion.div>
  );
}

interface MagneticCursorDockProps {
  children: React.ReactNode;
  className?: string;
  dockClassName?: string;
  maxDist?: number;
  scaleFactor?: number;
  liftAmount?: number;
}

export function MagneticCursorDock({
  children,
  className,
  dockClassName,
  maxDist = 90,
  scaleFactor = 0.6,
  liftAmount = 16,
}: MagneticCursorDockProps) {
  const dockRef = useRef<HTMLDivElement>(null);
  const mousePos = useRef({ x: -9999, y: -9999 });

  useEffect(() => {
    const dock = dockRef.current;
    if (!dock) {
      return;
    }

    const handleMove = (e: MouseEvent) => {
      const rect = dock.getBoundingClientRect();
      mousePos.current = {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      };
    };

    const handleLeave = () => {
      mousePos.current = { x: -9999, y: -9999 };
    };

    dock.addEventListener("mousemove", handleMove);
    dock.addEventListener("mouseleave", handleLeave);
    return () => {
      dock.removeEventListener("mousemove", handleMove);
      dock.removeEventListener("mouseleave", handleLeave);
    };
  }, []);

  return (
    <div
      ref={dockRef}
      className={cn(
        "relative flex cursor-default items-end justify-center gap-2 rounded-2xl border border-white/10 bg-black/40 p-4 backdrop-blur-xl",
        dockClassName,
        className,
      )}
    >
      {React.Children.map(children, (child, i) =>
        child ? (
          <MagneticCursorDockItem
            key={
              React.isValidElement(child) &&
              child.key != null
                ? child.key
                : `dock-${i}`
            }
            mousePosRef={mousePos}
            dockRef={dockRef}
            maxDist={maxDist}
            scaleFactor={scaleFactor}
            liftAmount={liftAmount}
          >
            {child}
          </MagneticCursorDockItem>
        ) : null,
      )}
    </div>
  );
}