Weave

"use client";

import { useEffect, useRef, type CSSProperties } from "react";
import { cn } from "@/lib/utils";

export type WeaveProps = {
  className?: string;
  speed?: number;
  style?: CSSProperties;
};

type Point = {
  x: number;
  y: number;
};

const GRID_SIZE = 12;
const GUTTER_RATIO = 0.14;
const STAGGER_SPREAD = 0.5;
const FIELD_ANGLE = Math.PI / 4;
const LOOP_DURATION = 6000;
const TAU = Math.PI * 2;
const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
const FINE_POINTER_QUERY = "(pointer: fine)";

function clamp01(value: number) {
  return Math.min(1, Math.max(0, value));
}

function easeInOut(value: number) {
  return 0.5 - Math.cos(clamp01(value) * Math.PI) * 0.5;
}

function smoothstep(edgeStart: number, edgeEnd: number, value: number) {
  const amount = clamp01((value - edgeStart) / (edgeEnd - edgeStart));
  return amount * amount * (3 - 2 * amount);
}

function appendPolygon(path: Path2D, polygon: Point[]) {
  if (polygon.length < 3) return;
  path.moveTo(polygon[0].x, polygon[0].y);
  for (let index = 1; index < polygon.length; index += 1) {
    path.lineTo(polygon[index].x, polygon[index].y);
  }
  path.closePath();
}

function clipAgainstHalfPlane(
  polygon: Point[],
  center: Point,
  normal: Point,
  distance: number,
) {
  const clipped: Point[] = [];

  const signedDistance = (point: Point) =>
    (point.x - center.x) * normal.x +
    (point.y - center.y) * normal.y -
    distance;

  for (let index = 0; index < polygon.length; index += 1) {
    const current = polygon[index];
    const previous = polygon[(index + polygon.length - 1) % polygon.length];
    const currentDistance = signedDistance(current);
    const previousDistance = signedDistance(previous);
    const currentInside = currentDistance <= 0;
    const previousInside = previousDistance <= 0;

    if (currentInside !== previousInside) {
      const amount = previousDistance / (previousDistance - currentDistance);
      clipped.push({
        x: previous.x + (current.x - previous.x) * amount,
        y: previous.y + (current.y - previous.y) * amount,
      });
    }

    if (currentInside) clipped.push(current);
  }

  return clipped;
}

/**
 * A seamless op-art loom built from square windows clipped by one moving edge.
 * Alternating diagonal bands counter-rotate while a fine pointer pulls locally
 * on the weave without adding a separate visual layer.
 */
export function Weave({ className, speed = 1, style }: WeaveProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const container = containerRef.current;
    if (!canvas || !container) return;

    const context = canvas.getContext("2d", { alpha: false });
    if (!context) return;

    const reducedMotionQuery = window.matchMedia(REDUCED_MOTION_QUERY);
    const finePointerQuery = window.matchMedia(FINE_POINTER_QUERY);
    let width = 1;
    let height = 1;
    let dpr = 1;
    let elapsed = 0;
    let previousTime = performance.now();
    let frame: number | null = null;
    let pageVisible = !document.hidden;
    let pointerInside = false;
    let hover = 0;
    let pointerX = 0.5;
    let pointerY = 0.5;
    let targetX = 0.5;
    let targetY = 0.5;
    const safeSpeed = Number.isFinite(speed) ? Math.max(0, speed) : 1;

    const paint = (progress: number) => {
      context.setTransform(dpr, 0, 0, dpr, 0, 0);
      context.fillStyle = "#F6F1E8";
      context.fillRect(0, 0, width, height);

      const gridExtent = Math.min(width, height);
      const pitch = gridExtent / GRID_SIZE;
      const gridLeft = (width - gridExtent) * 0.5;
      const gridTop = (height - gridExtent) * 0.5;
      const windowSize = pitch * (1 - GUTTER_RATIO);
      const halfWindow = windowSize * 0.5;
      const originIndex = Math.floor(GRID_SIZE / 2);
      const maximumColumnDistance = Math.max(
        originIndex,
        GRID_SIZE - 1 - originIndex,
      );
      const maximumRowDistance = Math.max(
        originIndex,
        GRID_SIZE - 1 - originIndex,
      );
      const maximumRadius = Math.hypot(
        maximumColumnDistance,
        maximumRowDistance,
      );

      const pointer = {
        x: pointerX * width,
        y: pointerY * height,
      };
      const interactionRadius = pitch * 3.25;
      const inkPath = new Path2D();
      const signaturePath = new Path2D();

      for (let row = 0; row < GRID_SIZE; row += 1) {
        for (let column = 0; column < GRID_SIZE; column += 1) {
          const diagonal = (column + row) / (2 * (GRID_SIZE - 1));
          const delay = diagonal * STAGGER_SPREAD;
          const localProgress = clamp01(
            (progress - delay) / (1 - STAGGER_SPREAD),
          );
          const center = {
            x: gridLeft + (column + 0.5) * pitch,
            y: gridTop + (row + 0.5) * pitch,
          };
          const pointerDistance = Math.hypot(
            center.x - pointer.x,
            center.y - pointer.y,
          );
          const pointerFalloff =
            hover *
            (1 - smoothstep(interactionRadius * 0.18, interactionRadius, pointerDistance));
          const tension = pointerFalloff * pointerFalloff;
          const pointerAngle = Math.atan2(
            center.y - pointer.y,
            center.x - pointer.x,
          );

          const diagonalBand = Math.floor((column + row) / 3);
          const turnDirection = diagonalBand % 2 === 0 ? 1 : -1;
          const turnCount = diagonalBand % 4 === 0 ? 2 : 1;
          const tensionEnvelope = Math.sin(Math.PI * localProgress);
          const tensionAdvance =
            tension * 0.075 * turnDirection * tensionEnvelope;
          const easedProgress = easeInOut(
            clamp01(localProgress + tensionAdvance),
          );
          const angle =
            FIELD_ANGLE +
            easedProgress * TAU * turnCount * turnDirection +
            Math.sin(pointerAngle - FIELD_ANGLE) * tension * 0.48;
          const normal = {
            x: -Math.sin(angle),
            y: Math.cos(angle),
          };

          const radialDistance = Math.hypot(
            column - originIndex,
            row - originIndex,
          );
          const radius = clamp01(radialDistance / maximumRadius);
          const damping = easeInOut(radius);
          const offsetPhase = radius * 2;
          const edgeDistance =
            Math.sin(TAU * (easedProgress + offsetPhase)) *
              windowSize *
              0.19 *
              damping +
            Math.cos(pointerAngle + easedProgress * TAU) *
              windowSize *
              0.11 *
              tension;

          const square = [
            { x: center.x - halfWindow, y: center.y - halfWindow },
            { x: center.x + halfWindow, y: center.y - halfWindow },
            { x: center.x + halfWindow, y: center.y + halfWindow },
            { x: center.x - halfWindow, y: center.y + halfWindow },
          ];
          const clipped = clipAgainstHalfPlane(
            square,
            center,
            normal,
            edgeDistance,
          );

          appendPolygon(inkPath, clipped);
          if (column === row) appendPolygon(signaturePath, clipped);
        }
      }

      context.fillStyle = "#181318";
      context.fill(inkPath);
      context.fillStyle = "#F15A3A";
      context.fill(signaturePath);

    };

    const tick = (now: number) => {
      frame = null;
      const delta = Math.min(50, Math.max(0, now - previousTime));
      previousTime = now;
      elapsed += delta * safeSpeed;

      const hoverTarget = pointerInside && finePointerQuery.matches ? 1 : 0;
      const hoverDuration = hoverTarget > hover ? 80 : 340;
      hover +=
        (hoverTarget - hover) * (1 - Math.exp(-delta / hoverDuration));
      pointerX += (targetX - pointerX) * (1 - Math.exp(-delta / 62));
      pointerY += (targetY - pointerY) * (1 - Math.exp(-delta / 62));
      if (Math.abs(hoverTarget - hover) < 0.001) hover = hoverTarget;

      paint((elapsed % LOOP_DURATION) / LOOP_DURATION);

      const interactionIsSettling =
        Math.abs(hoverTarget - hover) >= 0.001 ||
        Math.abs(targetX - pointerX) >= 0.001 ||
        Math.abs(targetY - pointerY) >= 0.001;
      if (
        !reducedMotionQuery.matches &&
        pageVisible &&
        (safeSpeed > 0 || interactionIsSettling)
      ) {
        frame = window.requestAnimationFrame(tick);
      }
    };

    const requestTick = () => {
      if (frame === null && !reducedMotionQuery.matches && pageVisible) {
        previousTime = performance.now();
        frame = window.requestAnimationFrame(tick);
      }
    };

    const resize = () => {
      const bounds = container.getBoundingClientRect();
      width = Math.max(1, bounds.width);
      height = Math.max(1, bounds.height);
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      paint(reducedMotionQuery.matches ? 0 : (elapsed % LOOP_DURATION) / LOOP_DURATION);
      requestTick();
    };

    const onReducedMotionChange = () => {
      pointerInside = false;
      hover = 0;
      if (reducedMotionQuery.matches && frame !== null) {
        window.cancelAnimationFrame(frame);
        frame = null;
      }
      paint(0);
      requestTick();
    };

    const onPointerMove = (event: PointerEvent) => {
      if (!finePointerQuery.matches || reducedMotionQuery.matches) return;
      const bounds = container.getBoundingClientRect();
      targetX = clamp01((event.clientX - bounds.left) / bounds.width);
      targetY = clamp01((event.clientY - bounds.top) / bounds.height);
      pointerInside = true;
      requestTick();
    };

    const onPointerLeave = () => {
      pointerInside = false;
      requestTick();
    };

    const onPointerCapabilityChange = () => {
      if (!finePointerQuery.matches) pointerInside = false;
      requestTick();
    };

    const onVisibilityChange = () => {
      pageVisible = !document.hidden;
      if (!pageVisible && frame !== null) {
        window.cancelAnimationFrame(frame);
        frame = null;
      }
      requestTick();
    };

    const observer = new ResizeObserver(resize);
    observer.observe(container);
    container.addEventListener("pointermove", onPointerMove, { passive: true });
    container.addEventListener("pointerleave", onPointerLeave, {
      passive: true,
    });
    finePointerQuery.addEventListener("change", onPointerCapabilityChange);
    reducedMotionQuery.addEventListener("change", onReducedMotionChange);
    document.addEventListener("visibilitychange", onVisibilityChange);
    resize();

    return () => {
      observer.disconnect();
      container.removeEventListener("pointermove", onPointerMove);
      container.removeEventListener("pointerleave", onPointerLeave);
      finePointerQuery.removeEventListener("change", onPointerCapabilityChange);
      reducedMotionQuery.removeEventListener("change", onReducedMotionChange);
      document.removeEventListener("visibilitychange", onVisibilityChange);
      if (frame !== null) window.cancelAnimationFrame(frame);
    };
  }, [speed]);

  return (
    <div
      ref={containerRef}
      className={cn("relative isolate overflow-hidden bg-[#f6f1e8]", className)}
      style={style}
    >
      <canvas
        ref={canvasRef}
        aria-hidden="true"
        className="absolute inset-0 block size-full"
      />
    </div>
  );
}