Cursor Reveal.

"use client";

/**
 * CursorReveal
 * ------------
 * Renders its children twice and reveals the second copy (optionally in a
 * different typeface, optionally tinted) inside a soft circular lens that
 * follows the cursor.
 *
 * Architecture in six points:
 *
 * 1) Two DOM copies, not a font-swap-in-region. CSS applies fonts per
 *    element, never per spatial region. Rendering twice keeps the text real
 *    — selectable, scalable, crawler-visible without cloaking risk.
 *
 * 2) The reveal layer is `aria-hidden` and `inert`. Screen readers and
 *    keyboard users never reach it. Crawlers see duplicate text but it is
 *    identical to the visible text and clearly decorative — not cloaking.
 *
 * 3) The lens is a CSS `mask-image: radial-gradient(...)` centred on two
 *    CSS custom properties (--lens-x, --lens-y) updated from JS. The mask
 *    is GPU-composited, so we pay one layer's cost, not a paint per frame.
 *
 * 4) Easing: lerp `current` toward `target` each rAF tick. The loop self-
 *    suspends when they converge so a still cursor costs nothing.
 *
 * 5) Positioning: the reveal layer is `position: fixed` covering the
 *    viewport (so the mask works in viewport coordinates, matching
 *    pointer.clientX/Y). The contents of the layer are translated by
 *    -scrollY so they scroll with the page, even though the layer itself
 *    is viewport-pinned.
 *
 * 6) Pause regions: any element with `data-cursor-reveal-pause` (or any
 *    ancestor with that attribute) suppresses the reveal while the cursor
 *    is over it. Useful for nav dropdowns, modals, tooltips.
 *
 * Tint: when set, every text descendant of the reveal layer is forced to
 * the tint colour via a scoped <style> block with !important.
 *
 * Guards: the reveal layer renders only when (pointer: fine) matches and
 * prefers-reduced-motion: reduce does not. SSR sends sans-only.
 */
 
import {
  useEffect,
  useId,
  useRef,
  useState,
  type ReactNode,
  type CSSProperties,
} from "react";
 
type CursorRevealProps = {
  children: ReactNode;
  radius?: number;
  feather?: number;
  ease?: number;
  serifClassName?: string;
  tint?: string;
};
 
export function CursorReveal({
  children,
  radius = 180,
  feather = 0.35,
  ease = 0.15,
  serifClassName = "font-serif",
  tint,
}: CursorRevealProps) {
  const [enabled, setEnabled] = useState(false);
 
  const reactId = useId();
  const scopeId = `cursor-reveal-${reactId.replace(/:/g, "")}`;
 
  const layerRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const fineMQ = window.matchMedia("(pointer: fine)");
    const reduceMQ = window.matchMedia("(prefers-reduced-motion: reduce)");
 
    const update = () => setEnabled(fineMQ.matches && !reduceMQ.matches);
    update();
 
    fineMQ.addEventListener("change", update);
    reduceMQ.addEventListener("change", update);
    return () => {
      fineMQ.removeEventListener("change", update);
      reduceMQ.removeEventListener("change", update);
    };
  }, []);
 
  useEffect(() => {
    if (!enabled) return;
    const layer = layerRef.current;
    if (!layer) return;
 
    let targetX = -9999;
    let targetY = -9999;
    let currentX = -9999;
    let currentY = -9999;
    let rafId = 0;
    let running = false;
    let paused = false;
 
    const tick = () => {
      currentX += (targetX - currentX) * ease;
      currentY += (targetY - currentY) * ease;
      layer.style.setProperty("--lens-x", `${currentX}px`);
      layer.style.setProperty("--lens-y", `${currentY}px`);
 
      const dx = targetX - currentX;
      const dy = targetY - currentY;
      if (dx * dx + dy * dy < 0.25) {
        running = false;
        return;
      }
      rafId = requestAnimationFrame(tick);
    };
 
    const start = () => {
      if (running) return;
      running = true;
      rafId = requestAnimationFrame(tick);
    };
 
    const isPaused = (x: number, y: number): boolean => {
      const stack = document.elementsFromPoint(x, y);
      for (const el of stack) {
        if (layer.contains(el)) continue;
        return !!el.closest(
          "[data-cursor-reveal-pause], input, textarea, select, [contenteditable='true']"
        );
      }
      return false;
    };
 
    const onMove = (e: PointerEvent) => {
      const wasPaused = paused;
      paused = isPaused(e.clientX, e.clientY);
 
      if (paused) {
        targetX = -9999;
        targetY = -9999;
        currentX = -9999;
        currentY = -9999;
        layer.style.setProperty("--lens-x", "-9999px");
        layer.style.setProperty("--lens-y", "-9999px");
        return;
      }
 
      if (wasPaused) {
        currentX = e.clientX;
        currentY = e.clientY;
      }
 
      targetX = e.clientX;
      targetY = e.clientY;
      start();
    };
 
    const onLeave = () => {
      targetX = -9999;
      targetY = -9999;
      start();
    };
 
    window.addEventListener("pointermove", onMove, { passive: true });
    window.addEventListener("pointerleave", onLeave);
    return () => {
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerleave", onLeave);
      cancelAnimationFrame(rafId);
    };
  }, [enabled, ease]);
 
  useEffect(() => {
    if (!enabled) return;
    const content = contentRef.current;
    if (!content) return;
 
    let pending = false;
 
    const apply = () => {
      pending = false;
      content.style.transform = `translate3d(0, ${-window.scrollY}px, 0)`;
    };
 
    const onScroll = () => {
      if (pending) return;
      pending = true;
      requestAnimationFrame(apply);
    };
 
    apply();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [enabled]);
 
  const inner = Math.max(0, radius * (1 - feather));
  const outer = radius;
  const maskValue = `radial-gradient(circle ${outer}px at var(--lens-x) var(--lens-y), #000 0, #000 ${inner}px, transparent ${outer}px)`;
 
  const layerStyle: CSSProperties = {
    WebkitMaskImage: maskValue,
    maskImage: maskValue,
    ["--lens-x" as string]: "-9999px",
    ["--lens-y" as string]: "-9999px",
  };
 
  const tintStyleSheet = tint
    ? `[data-cursor-reveal-scope="${scopeId}"], [data-cursor-reveal-scope="${scopeId}"] * { color: ${tint} !important; }`
    : null;
 
  return (
    <>
      {children}
 
      {enabled && (
        <>
          {tintStyleSheet && (
            <style dangerouslySetInnerHTML={{ __html: tintStyleSheet }} />
          )}
          <div
            ref={layerRef}
            aria-hidden="true"
            inert
            className={`pointer-events-none fixed inset-0 z-[100] overflow-hidden ${serifClassName}`}
            style={layerStyle}
          >
            <div
              ref={contentRef}
              data-cursor-reveal-scope={scopeId}
              style={{ willChange: "transform" }}
            >
              {children}
            </div>
          </div>
        </>
      )}
    </>
  );
}