Blob Cursor

"use client";
import { useRef, useEffect } from "react";

export default function BlobCursor() {
  const blobRef = useRef<HTMLDivElement>(null);
  const mouse = useRef({ x: 200, y: 200 });
  const pos = useRef({ x: 200, y: 200 });

  useEffect(() => {
    let raf: number;
    const lerp = () => {
      pos.current.x += (mouse.current.x - pos.current.x) * 0.08;
      pos.current.y += (mouse.current.y - pos.current.y) * 0.08;
      if (blobRef.current) {
        blobRef.current.style.transform = `translate(${pos.current.x - 100}px, ${pos.current.y - 100}px)`;
      }
      raf = requestAnimationFrame(lerp);
    };
    raf = requestAnimationFrame(lerp);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div onMouseMove={(e) => {
      const rect = e.currentTarget.getBoundingClientRect();
      mouse.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
    }}>
      <div ref={blobRef} style={{
        width: 200, height: 200, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(225,255,108,0.3), transparent 70%)",
        filter: "blur(40px)", position: "absolute", pointerEvents: "none",
      }} />
    </div>
  );
}