Grid Warp

"use client";

/**
 * Grid Warp — a hairline grid that bends around the cursor.
 *
 * Self-contained: no dependencies. Canvas 2D; pauses when it is not
 * on screen.
 *
 *   <GridWarp color="#e4a256" spacing={36} strength={60} />
 */
import { useEffect, useRef } from "react";

export type GridWarpProps = {
  color?: string;
  /** Distance between lines, in CSS pixels. */
  spacing?: number;
  /** How far lines are pushed, in CSS pixels. */
  strength?: number;
  className?: string;
};

export function GridWarp({ color = "#e4a256", spacing = 36, strength = 60, className = "" }: GridWarpProps) {
  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 dpr = 1;
    const target = { x: -9999, y: -9999 };
    const pointer = { x: -9999, y: -9999 };
    let raf = 0;
    let visible = true;

    function resize() {
      if (!canvas) return;
      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);
    }

    const radius = Math.max(120, strength * 3.2);

    function warp(x: number, y: number): [number, number] {
      const dx = x - pointer.x;
      const dy = y - pointer.y;
      const d = Math.hypot(dx, dy);
      if (d > radius || d === 0) return [x, y];
      const falloff = (1 - d / radius) ** 2;
      const push = strength * falloff;
      return [x + (dx / d) * push, y + (dy / d) * push];
    }

    function draw() {
      if (!context) return;
      pointer.x += (target.x - pointer.x) * 0.12;
      pointer.y += (target.y - pointer.y) * 0.12;

      context.clearRect(0, 0, width, height);
      context.strokeStyle = color;
      context.lineWidth = 1;

      const step = Math.max(8, spacing / 2);
      // Verticals.
      for (let x = 0.5; x <= width; x += spacing) {
        context.globalAlpha = 0.22;
        context.beginPath();
        for (let y = 0; y <= height + step; y += step) {
          const [wx, wy] = warp(x, Math.min(y, height));
          if (y === 0) context.moveTo(wx, wy);
          else context.lineTo(wx, wy);
        }
        context.stroke();
      }
      // Horizontals.
      for (let y = 0.5; y <= height; y += spacing) {
        context.globalAlpha = 0.22;
        context.beginPath();
        for (let x = 0; x <= width + step; x += step) {
          const [wx, wy] = warp(Math.min(x, width), y);
          if (x === 0) context.moveTo(wx, wy);
          else context.lineTo(wx, wy);
        }
        context.stroke();
      }
      // A soft glow under the pointer.
      if (pointer.x > -1000) {
        const glow = context.createRadialGradient(pointer.x, pointer.y, 0, pointer.x, pointer.y, radius);
        glow.addColorStop(0, color + "33");
        glow.addColorStop(1, color + "00");
        context.globalAlpha = 1;
        context.fillStyle = glow;
        context.fillRect(pointer.x - radius, pointer.y - radius, radius * 2, radius * 2);
      }

      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;
    }
    function onLeave() {
      target.x = -9999;
      target.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);
    };
  }, [color, spacing, strength]);

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

export default GridWarp;