Ink Cursor

"use client";

/**
 * Ink Cursor — the pointer leaves a trail of ink that bleeds and fades.
 *
 * Self-contained: no dependencies. Canvas 2D over whatever is behind
 * it. Drop it full-bleed behind a hero; the trail follows the pointer
 * and settles when it stops.
 *
 *   <InkCursor ink="#f5cb73" size={48} fade={0.94} />
 */
import { useEffect, useRef } from "react";

export type InkCursorProps = {
  ink?: string;
  /** Brush radius in CSS pixels. */
  size?: number;
  /** How much of the trail survives each frame, 0.8–0.99. */
  fade?: number;
  className?: string;
};

export function InkCursor({ ink = "#f5cb73", size = 48, fade = 0.94, className = "" }: InkCursorProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const context = canvas.getContext("2d");
    if (!context) return;

    let width = 0;
    let height = 0;
    let raf = 0;
    let visible = true;
    const target = { x: -9999, y: -9999 };
    const brush = { x: -9999, y: -9999 };
    const drops: { x: number; y: number; r: number; life: number }[] = [];

    function resize() {
      if (!canvas) return;
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      width = canvas.clientWidth;
      height = canvas.clientHeight;
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      context?.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    function draw() {
      if (!context) return;
      // Fade the previous frame instead of clearing it: that is the trail.
      context.globalCompositeOperation = "destination-in";
      context.fillStyle = `rgba(0,0,0,${fade})`;
      context.fillRect(0, 0, width, height);
      context.globalCompositeOperation = "source-over";

      // The brush lags the pointer, which gives the stroke its curve.
      brush.x += (target.x - brush.x) * 0.22;
      brush.y += (target.y - brush.y) * 0.22;

      if (target.x > -1000) {
        const speed = Math.hypot(target.x - brush.x, target.y - brush.y);
        const r = size * (0.55 + Math.min(1, speed / 40) * 0.45);
        drops.push({ x: brush.x, y: brush.y, r, life: 1 });
        // Occasional splatter when moving fast.
        if (speed > 24 && Math.random() < 0.35) {
          const a = Math.random() * Math.PI * 2;
          drops.push({ x: brush.x + Math.cos(a) * r * 1.6, y: brush.y + Math.sin(a) * r * 1.6, r: r * 0.18, life: 1 });
        }
      }

      for (let i = drops.length - 1; i >= 0; i -= 1) {
        const drop = drops[i];
        drop.life -= 0.06;
        if (drop.life <= 0) {
          drops.splice(i, 1);
          continue;
        }
        const g = context.createRadialGradient(drop.x, drop.y, 0, drop.x, drop.y, drop.r);
        g.addColorStop(0, ink);
        g.addColorStop(0.65, ink);
        g.addColorStop(1, ink + "00");
        context.globalAlpha = drop.life * 0.9;
        context.fillStyle = g;
        context.beginPath();
        context.arc(drop.x, drop.y, drop.r, 0, Math.PI * 2);
        context.fill();
      }
      context.globalAlpha = 1;

      if (visible) raf = requestAnimationFrame(draw);
    }

    function onMove(event: PointerEvent) {
      if (!canvas) return;
      const rect = canvas.getBoundingClientRect();
      target.x = event.clientX - rect.left;
      target.y = event.clientY - rect.top;
      if (brush.x < -1000) {
        brush.x = target.x;
        brush.y = target.y;
      }
    }
    function onLeave() {
      target.x = -9999;
      target.y = -9999;
      brush.x = -9999;
      brush.y = -9999;
    }

    const observer = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      if (visible) {
        cancelAnimationFrame(raf);
        raf = requestAnimationFrame(draw);
      }
    });

    resize();
    observer.observe(canvas);
    window.addEventListener("resize", resize);
    canvas.addEventListener("pointermove", onMove);
    canvas.addEventListener("pointerleave", onLeave);
    raf = requestAnimationFrame(draw);

    return () => {
      cancelAnimationFrame(raf);
      observer.disconnect();
      window.removeEventListener("resize", resize);
      canvas.removeEventListener("pointermove", onMove);
      canvas.removeEventListener("pointerleave", onLeave);
    };
  }, [ink, size, fade]);

  return <canvas ref={canvasRef} className={className} style={{ display: "block", width: "100%", height: "100%", minHeight: 240 }} />;
}

export default InkCursor;