Ink Field

"use client";

import { useEffect, useId, useRef, useState, type ReactNode } from "react";

/**
 * Harsh Dev UI · Developed by Harsh Pandav
 * https://harshpandav.dev · hello@harshpandav.dev
 *
 * InkField
 * A gooey mass of ink chases the pointer across any children and inverts them.
 * The body is a rope of circles — each dragged a fixed distance behind the one
 * ahead — fused by an SVG goo filter into one shape that strings out into a
 * tapering tail, curves along the path it took, and closes when you leave.
 * "invert" blends white ink with difference, so it reads black on light artwork
 * and white on dark and knocks type out in either theme; "tint" floods a colour,
 * "reveal" masks a second layer to the mass. Put the surface on the InkField
 * itself, not a wrapper — the blend is isolated here, so it can only invert
 * what's inside. One rAF loop writes transforms straight to the circles, so
 * React never re-renders mid-motion. Zero dependencies — no Motion, no GSAP.
 */

export type InkFieldMode = "invert" | "tint" | "reveal";

export type InkFieldProps = {
  children: ReactNode;
  reveal?: ReactNode;
  mode?: InkFieldMode;
  blobs?: number;
  size?: number;
  gooeyness?: number;
  viscosity?: number;
  warp?: boolean;
  color?: string;
  autoPlay?: boolean;
  className?: string;
};

const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));

export function InkField({
  children,
  reveal,
  mode = "invert",
  blobs = 24,
  size = 150,
  gooeyness = 10,
  viscosity = 0.22,
  warp = false,
  color = "#ffffff",
  autoPlay = false,
  className = "",
}: InkFieldProps) {
  const rootRef = useRef<HTMLDivElement>(null);
  const dots = useRef<(SVGCircleElement | null)[]>([]);
  const uid = useId().replace(/:/g, "");
  const [gooId, maskId, srcId] = [`goo-${uid}`, `mask-${uid}`, `src-${uid}`];
  const [reduce, setReduce] = useState(false);

  const count = clamp(Math.round(blobs), 2, 32);
  const radii = Array.from({ length: count }, (_, i) =>
    Math.round(Math.max(1.5, size * 0.5 * (1 - i / (count - 1)) ** 2.3) * 100) / 100,
  );

  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setReduce(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;

    let w = root.clientWidth;
    let h = root.clientHeight;
    let rect = root.getBoundingClientRect();
    const measure = () => {
      w = root.clientWidth;
      h = root.clientHeight;
      rect = root.getBoundingClientRect();
    };
    const ro = new ResizeObserver(measure);
    ro.observe(root);
    window.addEventListener("scroll", measure, { passive: true, capture: true });
    window.addEventListener("resize", measure, { passive: true });

    const target = { x: w / 2, y: h / 2 };
    const chain = Array.from({ length: count }, () => ({ ...target }));
    const spacing = radii.map((r, i) => (i ? (radii[i - 1] + r) * 0.52 : 0));
    const k = clamp(viscosity, 0.02, 1);
    let visible = true;
    let raf = 0;
    let idle = 0;
    let clock = 0;
    let pointerDriven = false;
    let open = autoPlay;
    let presence = autoPlay ? 1 : 0;

    const paint = () => {
      const s = presence.toFixed(4);
      for (let i = 0; i < count; i++) {
        const p = chain[i];
        dots.current[i]?.setAttribute(
          "transform",
          `translate(${p.x.toFixed(2)} ${p.y.toFixed(2)}) scale(${s})`,
        );
      }
    };

    const step = () => {
      raf = 0;
      clock += 1 / 60;

      if (autoPlay && !pointerDriven && open) {
        target.x = w * (0.5 + 0.36 * Math.sin(clock * 1.7));
        target.y = h * (0.5 + 0.3 * Math.sin(clock * 2.35 + 1.1));
      }

      const want = open ? 1 : 0;
      presence += (want - presence) * (open ? 0.16 : 0.13);
      if (Math.abs(want - presence) < 0.002) presence = want;
      let moved = Math.abs(want - presence) * 60;

      const head = chain[0];
      const hdx = target.x - head.x;
      const hdy = target.y - head.y;
      head.x += hdx * k;
      head.y += hdy * k;
      moved = Math.max(moved, Math.abs(hdx) + Math.abs(hdy));

      for (let i = 1; i < count; i++) {
        const lead = chain[i - 1];
        const p = chain[i];
        const dx = lead.x - p.x;
        const dy = lead.y - p.y;
        const d = Math.hypot(dx, dy) || 1;
        const gap = open ? spacing[i] : 0;
        if (d <= gap) continue;
        const pull = open ? (d - gap) / d : k;
        p.x += dx * pull;
        p.y += dy * pull;
        moved = Math.max(moved, (d - gap) * 0.5);
      }
      paint();

      if (!open && presence === 0) return;
      idle = moved < 0.08 ? idle + 1 : 0;
      if (visible && idle < 20) raf = requestAnimationFrame(step);
    };

    const start = () => {
      idle = 0;
      if (!raf && visible) raf = requestAnimationFrame(step);
    };

    const io = new IntersectionObserver(
      ([e]) => {
        visible = e.isIntersecting;
        if (visible) start();
      },
      { threshold: 0 },
    );
    io.observe(root);

    const onMove = (e: PointerEvent) => {
      target.x = (rect.width ? (e.clientX - rect.left) / rect.width : 0.5) * w;
      target.y = (rect.height ? (e.clientY - rect.top) / rect.height : 0.5) * h;
      if (presence < 0.05) chain.forEach((p) => ((p.x = target.x), (p.y = target.y)));
      pointerDriven = true;
      open = true;
      start();
    };

    const onLeave = () => {
      if (!open && !pointerDriven) return;
      pointerDriven = false;
      open = false;
      start();
    };
    const onVisibility = () => document.hidden && onLeave();

    if (reduce) {
      presence = 1;
      chain.forEach((p) => ((p.x = w / 2), (p.y = h / 2)));
      paint();
      return () => ro.disconnect();
    }

    paint();
    root.addEventListener("pointermove", onMove, { passive: true });
    root.addEventListener("pointerleave", onLeave, { passive: true });
    root.addEventListener("pointercancel", onLeave, { passive: true });
    window.addEventListener("blur", onLeave);
    document.addEventListener("visibilitychange", onVisibility);
    if (autoPlay) start();

    return () => {
      ro.disconnect();
      io.disconnect();
      window.removeEventListener("scroll", measure, { capture: true });
      window.removeEventListener("resize", measure);
      root.removeEventListener("pointermove", onMove);
      root.removeEventListener("pointerleave", onLeave);
      root.removeEventListener("pointercancel", onLeave);
      window.removeEventListener("blur", onLeave);
      document.removeEventListener("visibilitychange", onVisibility);
      if (raf) cancelAnimationFrame(raf);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [count, viscosity, autoPlay, reduce, size]);

  return (
    <div
      ref={rootRef}
      className={`relative overflow-hidden ${className}`}
      style={{ isolation: "isolate" }}
    >
      <div className="relative z-0 h-full w-full">{children}</div>

      <svg
        aria-hidden
        className="pointer-events-none absolute inset-0 z-10 h-full w-full"
        style={{ mixBlendMode: mode === "invert" ? "difference" : "normal" }}
      >
        <defs>
          <filter id={gooId} colorInterpolationFilters="sRGB">
            <feGaussianBlur in="SourceGraphic" stdDeviation={gooeyness} result="blur" />
            <feColorMatrix
              in="blur"
              type="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
              result="goo"
            />
            {warp && (
              <>
                <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves={2} result="n" />
                <feDisplacementMap in="goo" in2="n" scale={16} xChannelSelector="R" yChannelSelector="G" />
              </>
            )}
          </filter>

          <g id={srcId}>
            {radii.map((r, i) => (
              <circle key={i} ref={(el) => void (dots.current[i] = el)} cx={0} cy={0} r={r} />
            ))}
          </g>

          {mode === "reveal" && (
            <mask id={maskId} maskUnits="userSpaceOnUse">
              <g filter={`url(#${gooId})`}>
                <use href={`#${srcId}`} fill="#ffffff" />
              </g>
            </mask>
          )}
        </defs>

        {mode === "reveal" ? (
          <foreignObject x={0} y={0} width="100%" height="100%" mask={`url(#${maskId})`}>
            <div className="h-full w-full">{reveal}</div>
          </foreignObject>
        ) : (
          <g filter={`url(#${gooId})`}>
            <use href={`#${srcId}`} fill={mode === "invert" ? "#ffffff" : color} />
          </g>
        )}
      </svg>
    </div>
  );
}