import { useTrail, animated } from '@react-spring/web' import { useRef, useEffect, useCallback } from 'react'; import './BlobCursor.css'; const fast = { tension: 1200, friction: 40 }; const slow = { mass: 10, tension: 200, friction: 50 }; const trans = (x, y) => `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`; export default function BlobCursor({ blobType = 'circle', fillColor = '#00f0ff' }) { const [trail, api] = useTrail(3, i => ({ xy: [0, 0], config: i === 0 ? fast : slow, })); const ref = useRef(); const updatePosition = useCallback(() => { if (ref.current) { const rect = ref.current.getBoundingClientRect(); return { left: rect.left, top: rect.top }; } return { left: 0, top: 0 }; }, []); const handleMove = e => { const { left, top } = updatePosition(); const x = e.clientX || (e.touches && e.touches[0].clientX); const y = e.clientY || (e.touches && e.touches[0].clientY); api.start({ xy: [x - left, y - top] }); }; useEffect(() => { const handleResize = () => { updatePosition(); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, [updatePosition]); return ( ); }