Ink Cursor

import React, { useRef, useEffect } from "react";
 
const useInkCursor = () => {
  const canvasRef = useRef(null);
  const ctxRef = useRef(null);
  const pointerRef = useRef({
    x: null,
    y: null,
  });
  const trailRef = useRef([]);
  const paramsRef = useRef({
    pointsNumber: 40,
    widthFactor: 0.3,
    mouseThreshold: 0.6,
    spring: 0.4,
    friction: 0.5,
  });
 
  useEffect(() => {
      pointerRef.current = {
        x: 0.5 * window.innerWidth,
        y: 0.5 * window.innerHeight,
      };
      const canvas = canvasRef.current;
      const ctx = canvas.getContext("2d");
      ctxRef.current = ctx;
 
      // Initialize trail array
      const trail = new Array(paramsRef.current.pointsNumber).fill(null).map(() => ({
        x: pointerRef.current.x,
        y: pointerRef.current.y,
        dx: 0,
        dy: 0,
      }));
      trailRef.current = trail;
 
      const updateMousePosition = (x, y) => {
        pointerRef.current.x = x;
        pointerRef.current.y = y;
      };
 
      const handleMouseMove = (e) => {
        updateMousePosition(e.clientX, e.clientY);
      };
 
      const handleTouchMove = (e) => {
        updateMousePosition(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
      };
 
      const setupCanvas = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      };
 
      const update = (t) => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
        const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, "#833ab4");
        gradient.addColorStop(1, "#fd1d1d");
 
        ctx.strokeStyle = gradient;
 
        trailRef.current.forEach((p, pIdx) => {
          const prev = pIdx === 0 ? pointerRef.current : trailRef.current[pIdx - 1];
          const spring = pIdx === 0 ? 0.4 * paramsRef.current.spring : paramsRef.current.spring;
          p.dx += (prev.x - p.x) * spring;
          p.dy += (prev.y - p.y) * spring;
          p.dx *= paramsRef.current.friction;
          p.dy *= paramsRef.current.friction;
          p.x += p.dx;
          p.y += p.dy;
        });
 
        ctx.lineCap = "round";
        ctx.beginPath();
        ctx.moveTo(trailRef.current[0].x, trailRef.current[0].y);
 
        for (let i = 1; i < trailRef.current.length - 1; i++) {
          const xc = 0.5 * (trailRef.current[i].x + trailRef.current[i + 1].x);
          const yc = 0.5 * (trailRef.current[i].y + trailRef.current[i + 1].y);
 
          ctx.quadraticCurveTo(trailRef.current[i].x, trailRef.current[i].y, xc, yc);
          ctx.lineWidth = paramsRef.current.widthFactor * (paramsRef.current.pointsNumber - i);
          ctx.stroke();
        }
        ctx.lineTo(trailRef.current[trailRef.current.length - 1].x, trailRef.current[trailRef.current.length - 1].y);
        ctx.stroke();
 
        window.requestAnimationFrame(update);
      };
 
      setupCanvas();
      update(0);
 
      window.addEventListener("mousemove", handleMouseMove);
      window.addEventListener("touchmove", handleTouchMove);
      window.addEventListener("resize", setupCanvas);
 
      return () => {
        window.removeEventListener("mousemove", handleMouseMove);
        window.removeEventListener("touchmove", handleTouchMove);
        window.removeEventListener("resize", setupCanvas);
      };
 
  }, []);
 
  return (
    <canvas
      ref={canvasRef}
      className="h-screen w-screen"
    />
  );
};
 
export default useInkCursor;
 

components/edil-ozi/ink-cursor.tsx