BlobCursor

1'use client';
2 
3import { useRef, useEffect, useCallback } from 'react';
4import gsap from 'gsap';
5import './BlobCursor.css';
6 
7export default function BlobCursor({
8  blobType = 'circle',
9  fillColor = '#5227FF',
10  trailCount = 3,
11  sizes = [60, 125, 75],
12  innerSizes = [20, 35, 25],
13  innerColor = 'rgba(255,255,255,0.8)',
14  opacities = [0.6, 0.6, 0.6],
15  shadowColor = 'rgba(0,0,0,0.75)',
16  shadowBlur = 5,
17  shadowOffsetX = 10,
18  shadowOffsetY = 10,
19  filterId = 'blob',
20  filterStdDeviation = 30,
21  filterColorMatrixValues = '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10',
22  useFilter = true,
23  fastDuration = 0.1,
24  slowDuration = 0.5,
25  fastEase = 'power3.out',
26  slowEase = 'power1.out',
27  zIndex = 100
28}) {
29  const containerRef = useRef(null);
30  const blobsRef = useRef([]);
31 
32  const updateOffset = useCallback(() => {
33    if (!containerRef.current) return { left: 0, top: 0 };
34    const rect = containerRef.current.getBoundingClientRect();
35    return { left: rect.left, top: rect.top };
36  }, []);
37 
38  const handleMove = useCallback(
39    e => {
40      const { left, top } = updateOffset();
41      const x = 'clientX' in e ? e.clientX : e.touches[0].clientX;
42      const y = 'clientY' in e ? e.clientY : e.touches[0].clientY;
43 
44      blobsRef.current.forEach((el, i) => {
45        if (!el) return;
46        const isLead = i === 0;
47        gsap.to(el, {
48          x: x - left,
49          y: y - top,
50          duration: isLead ? fastDuration : slowDuration,
51          ease: isLead ? fastEase : slowEase
52        });
53      });
54    },
55    [updateOffset, fastDuration, slowDuration, fastEase, slowEase]
56  );
57 
58  useEffect(() => {
59    const onResize = () => updateOffset();
60    window.addEventListener('resize', onResize);
61    return () => window.removeEventListener('resize', onResize);
62  }, [updateOffset]);
63 
64  return (
65    <div
66      ref={containerRef}
67      className="blob-container"
68      style={{ zIndex }}
69      onMouseMove={handleMove}
70      onTouchMove={handleMove}
71    >
72      {useFilter && (
73        <svg style={{ position: 'absolute', width: 0, height: 0 }}>
74          <filter id={filterId}>
75            <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation={filterStdDeviation} />
76            <feColorMatrix in="blur" values={filterColorMatrixValues} />
77          </filter>
78        </svg>
79      )}
80 
81      <div className="blob-main" style={{ filter: useFilter ? `url(#${filterId})` : undefined }}>
82        {Array.from({ length: trailCount }).map((_, i) => (
83          <div
84// … truncated