Topographic Lines

"use client";

import * as React from "react";

export interface TopoLinesProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Number of contour levels across the height range. */
  levels?: number;
  /** Contour stroke width, in px. Accent (index) lines are drawn 1.4× wider. */
  lineWidth?: number;
  /** How fast the terrain evolves. 0 freezes it. */
  speed?: number;
  /** Highlight every Nth contour in the accent colour. 0 disables index lines. */
  accentEvery?: number;
  /** Accent colour for index lines (any CSS colour). */
  accent?: string;
  /** Terrain zoom: higher values give broader, smoother landforms. */
  scale?: number;
  /** Marching-squares cell size, in px. Smaller is smoother but costs more CPU. */
  cellSize?: number;
  /** A mouse pointer raises a soft hill under it. */
  interactive?: boolean;
}

type RGB = [number, number, number];

/* ---------------------------------- Colour --------------------------------- */

let probe: CanvasRenderingContext2D | null = null;

/** Resolves any CSS colour (hex, rgb(), oklch()…) to RGB by painting it on a 1×1 canvas. */
function resolveColor(input: string, fallback: RGB): RGB {
  probe ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
  if (!probe) return fallback;
  probe.clearRect(0, 0, 1, 1);
  probe.fillStyle = "rgba(0, 0, 0, 0)";
  probe.fillStyle = input; // invalid colours are ignored → transparent → fallback
  probe.fillRect(0, 0, 1, 1);
  const [r, g, b, a] = probe.getImageData(0, 0, 1, 1).data;
  return a === 0 ? fallback : [r, g, b];
}

const luminance = ([r, g, b]: RGB) => (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;

/** On light themes (dark ink), very light colours are pulled toward the ink so they stay visible. */
function legible(color: RGB, ink: RGB): RGB {
  if (luminance(ink) > 0.5 || luminance(color) < 0.62) return color;
  return color.map((v, i) => Math.round(v + (ink[i] - v) * 0.42)) as RGB;
}

/** Re-reads colours when the theme changes: class/data-theme on <html> or a scoped [data-theme] ancestor. */
function observeTheme(el: Element, onChange: () => void) {
  const mo = new MutationObserver(onChange);
  const options = { attributes: true, attributeFilter: ["class", "data-theme"] };
  mo.observe(document.documentElement, options);
  const scoped = el.parentElement?.closest("[data-theme]");
  if (scoped && scoped !== document.documentElement) mo.observe(scoped, options);
  const mq = window.matchMedia("(prefers-color-scheme: dark)");
  mq.addEventListener("change", onChange);
  return () => {
    mo.disconnect();
    mq.removeEventListener("change", onChange);
  };
}

/* ---------------------------------- Noise ---------------------------------- */

/** Compact seeded 3D simplex noise (after Stefan Gustavson). Returns values in roughly [-1, 1]. */
function createNoise3D(seed = 7) {
  const p = new Uint8Array(256);
  for (let i = 0; i < 256; i++) p[i] = i;
  let s = seed >>> 0 || 1;
  for (let i = 255; i > 0; i--) {
    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
    const j = s % (i + 1);
    const t = p[i];
    p[i] = p[j];
    p[j] = t;
  }
  const perm = new Uint8Array(512);
  for (let i = 0; i < 512; i++) perm[i] = p[i & 255];
  const grad = [1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0, 1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, -1, 0, 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1];
  const F3 = 1 / 3;
  const G3 = 1 / 6;

  const corner = (hash: number, x: number, y: number, z: number) => {
    let t = 0.6 - x * x - y * y - z * z;
    if (t < 0) return 0;
    const g = (hash % 12) * 3;
    t *= t;
    return t * t * (grad[g] * x + grad[g + 1] * y + grad[g + 2] * z);
  };

  return (x: number, y: number, z: number) => {
    const sk = (x + y + z) * F3;
    const i = Math.floor(x + sk);
    const j = Math.floor(y + sk);
    const k = Math.floor(z + sk);
    const t = (i + j + k) * G3;
    const x0 = x - (i - t);
    const y0 = y - (j - t);
    const z0 = z - (k - t);
    let i1, j1, k1, i2, j2, k2;
    if (x0 >= y0) {
      if (y0 >= z0) [i1, j1, k1, i2, j2, k2] = [1, 0, 0, 1, 1, 0];
      else if (x0 >= z0) [i1, j1, k1, i2, j2, k2] = [1, 0, 0, 1, 0, 1];
      else [i1, j1, k1, i2, j2, k2] = [0, 0, 1, 1, 0, 1];
    } else if (y0 < z0) [i1, j1, k1, i2, j2, k2] = [0, 0, 1, 0, 1, 1];
    else if (x0 < z0) [i1, j1, k1, i2, j2, k2] = [0, 1, 0, 0, 1, 1];
    else [i1, j1, k1, i2, j2, k2] = [0, 1, 0, 1, 1, 0];
    const ii = i & 255;
    const jj = j & 255;
    const kk = k & 255;
    const n0 = corner(perm[ii + perm[jj + perm[kk]]], x0, y0, z0);
    const n1 = corner(perm[ii + i1 + perm[jj + j1 + perm[kk + k1]]], x0 - i1 + G3, y0 - j1 + G3, z0 - k1 + G3);
    const n2 = corner(perm[ii + i2 + perm[jj + j2 + perm[kk + k2]]], x0 - i2 + 2 * G3, y0 - j2 + 2 * G3, z0 - k2 + 2 * G3);
    const n3 = corner(perm[ii + 1 + perm[jj + 1 + perm[kk + 1]]], x0 - 0.5, y0 - 0.5, z0 - 0.5);
    return 32 * (n0 + n1 + n2 + n3);
  };
}

/* ----------------------------- Reduced motion ------------------------------ */

function subscribeReducedMotion(callback: () => void) {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", callback);
  return () => mq.removeEventListener("change", callback);
}

function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    () => false,
  );
}

/* ----------------------------- Marching squares ---------------------------- */

/**
 * Edge pairs per marching-squares case. Corners: TL = 8, TR = 4, BR = 2, BL = 1 (bit set when
 * above the level). Edges: 0 top, 1 right, 2 bottom, 3 left. Saddles (5, 10) use two segments.
 */
const CASES: number[][] = [
  [],
  [3, 2],
  [2, 1],
  [3, 1],
  [0, 1],
  [3, 0, 2, 1],
  [0, 2],
  [3, 0],
  [3, 0],
  [0, 2],
  [0, 1, 3, 2],
  [0, 1],
  [3, 1],
  [2, 1],
  [3, 2],
  [],
];

const FRAME_MS = 1000 / 30; // contour redraws are capped at 30fps
const HILL_HEIGHT = 0.38;
const HILL_RADIUS = 110;

/**
 * Animated topographic contour lines: an evolving fractal-noise height field is sampled on a
 * coarse grid and traced with marching squares into two batched paths (regular + index lines).
 * Redraws are capped at 30fps, stop offscreen and in hidden tabs, and reduced motion draws one
 * still map.
 */
export function TopoLines({
  levels = 16,
  lineWidth = 1,
  speed = 1,
  accentEvery = 5,
  accent = "#FF7448",
  scale = 1,
  cellSize = 6,
  interactive = true,
  className = "",
  children,
  ...props
}: TopoLinesProps) {
  const reduceMotion = usePrefersReducedMotion();
  const canvasRef = React.useRef<HTMLCanvasElement>(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");
    if (!canvas || !ctx) return;

    const noise = createNoise3D(23);
    const cell = Math.max(3, Math.round(cellSize));
    const levelCount = Math.max(2, Math.round(levels));
    const every = Math.max(0, Math.round(accentEvery));
    const frequency = 0.0021 / Math.max(0.2, scale);

    let width = 0;
    let height = 0;
    let dpr = 1;
    let cols = 0;
    let rows = 0;
    let heights = new Float32Array(0);
    let z = 0;
    let raf = 0;
    let last = 0;
    let lastDraw = 0;
    let inView = false;
    let lineColor = "";
    let accentColor = "";

    let dirty = false;
    const hill = { clientX: 0, clientY: 0, x: 0, y: 0, tx: 0, ty: 0, inside: false, strength: 0 };

    const readTheme = () => {
      const ink = resolveColor(getComputedStyle(canvas).color, [24, 24, 27]);
      const a = legible(resolveColor(accent, [255, 116, 72]), ink);
      lineColor = `rgba(${ink[0]}, ${ink[1]}, ${ink[2]}, 0.3)`;
      accentColor = `rgba(${a[0]}, ${a[1]}, ${a[2]}, 0.9)`;
    };

    /** Samples the height field (two noise octaves + pointer hill) at every grid vertex. */
    const sample = () => {
      const sigma2 = 2 * HILL_RADIUS * HILL_RADIUS;
      const lift = HILL_HEIGHT * hill.strength;
      for (let r = 0; r <= rows; r++) {
        const y = r * cell;
        for (let c = 0; c <= cols; c++) {
          const x = c * cell;
          const n = 0.72 * noise(x * frequency, y * frequency, z) + 0.28 * noise(x * frequency * 2.3 + 17, y * frequency * 2.3, z * 1.4);
          let h = 0.5 + 0.55 * n;
          if (lift > 0.002) {
            const dx = x - hill.x;
            const dy = y - hill.y;
            h += lift * Math.exp(-(dx * dx + dy * dy) / sigma2);
          }
          heights[r * (cols + 1) + c] = h;
        }
      }
    };

    const draw = () => {
      sample();
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, width, height);
      const regular = new Path2D();
      const index = new Path2D();
      const stride = cols + 1;

      for (let r = 0; r < rows; r++) {
        const y0 = r * cell;
        for (let c = 0; c < cols; c++) {
          const x0 = c * cell;
          const tl = heights[r * stride + c];
          const tr = heights[r * stride + c + 1];
          const br = heights[(r + 1) * stride + c + 1];
          const bl = heights[(r + 1) * stride + c];
          const min = Math.min(tl, tr, br, bl);
          const max = Math.max(tl, tr, br, bl);
          // Only the levels that actually cross this cell are visited.
          const from = Math.floor(min * levelCount) + 1;
          const to = Math.floor(max * levelCount);
          for (let l = from; l <= to; l++) {
            const v = l / levelCount;
            const kind = (tl > v ? 8 : 0) | (tr > v ? 4 : 0) | (br > v ? 2 : 0) | (bl > v ? 1 : 0);
            const edges = CASES[kind];
            if (!edges.length) continue;
            const path = every > 0 && l % every === 0 ? index : regular;
            for (let e = 0; e < edges.length; e += 2) {
              for (let k = 0; k < 2; k++) {
                const edge = edges[e + k];
                let x: number;
                let y: number;
                // Linear interpolation of the crossing point along the edge.
                if (edge === 0) {
                  x = x0 + cell * ((v - tl) / (tr - tl));
                  y = y0;
                } else if (edge === 1) {
                  x = x0 + cell;
                  y = y0 + cell * ((v - tr) / (br - tr));
                } else if (edge === 2) {
                  x = x0 + cell * ((v - bl) / (br - bl));
                  y = y0 + cell;
                } else {
                  x = x0;
                  y = y0 + cell * ((v - tl) / (bl - tl));
                }
                if (k === 0) path.moveTo(x, y);
                else path.lineTo(x, y);
              }
            }
          }
        }
      }

      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = lineColor;
      ctx.stroke(regular);
      if (every > 0) {
        ctx.lineWidth = lineWidth * 1.4;
        ctx.strokeStyle = accentColor;
        ctx.stroke(index);
      }
    };

    const frame = (now: number) => {
      raf = 0;
      const dt = Math.min(100, last ? now - last : 16.7);
      last = now;
      const f = dt / 16.7;

      if (hill.inside) {
        const rect = canvas.getBoundingClientRect();
        hill.tx = hill.clientX - rect.left;
        hill.ty = hill.clientY - rect.top;
      }
      // Frame-rate independent easing of the hill's position and height.
      const follow = 1 - Math.pow(0.8, f);
      hill.x += (hill.tx - hill.x) * follow;
      hill.y += (hill.ty - hill.y) * follow;
      const goal = hill.inside ? 1 : 0;
      hill.strength += (goal - hill.strength) * (1 - Math.pow(0.92, f));
      z += dt * 0.00005 * speed;

      const settling =
        Math.abs(goal - hill.strength) > 0.003 ||
        (hill.strength > 0.003 && Math.hypot(hill.tx - hill.x, hill.ty - hill.y) > 0.5);
      const pending = speed > 0 || settling || dirty;

      // Skip frames to stay at ≤30fps; the timeline above still advances smoothly.
      if (pending && now - lastDraw >= FRAME_MS - 2) {
        lastDraw = now;
        dirty = false;
        draw();
      }

      if (pending) schedule();
      else last = 0;
    };

    const schedule = () => {
      if (!raf && inView && !reduceMotion && !document.hidden) raf = requestAnimationFrame(frame);
    };
    const stop = () => {
      cancelAnimationFrame(raf);
      raf = 0;
      last = 0;
    };

    const resize = () => {
      const rect = canvas.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      dpr = Math.min(2, window.devicePixelRatio || 1);
      canvas.width = Math.max(1, Math.round(width * dpr));
      canvas.height = Math.max(1, Math.round(height * dpr));
      cols = Math.ceil(width / cell);
      rows = Math.ceil(height / cell);
      heights = new Float32Array((cols + 1) * (rows + 1));
      draw();
      schedule();
    };

    const onThemeChange = () => {
      readTheme();
      draw();
    };

    const onPointerMove = (e: PointerEvent) => {
      if (e.pointerType !== "mouse" && e.pointerType !== "pen") return;
      const rect = canvas.getBoundingClientRect();
      hill.clientX = e.clientX;
      hill.clientY = e.clientY;
      const inside = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
      if (inside && hill.strength < 0.01) {
        // Fresh entry: the hill grows where the pointer is instead of sliding in.
        hill.x = hill.tx = e.clientX - rect.left;
        hill.y = hill.ty = e.clientY - rect.top;
      }
      const changed = inside !== hill.inside;
      hill.inside = inside;
      // Moves elsewhere on the page never wake the loop.
      if (inside || changed) {
        dirty = true;
        schedule();
      }
    };
    const onPointerLeave = () => {
      hill.inside = false;
      schedule();
    };

    const onVisibility = () => (document.hidden ? stop() : schedule());

    const listenPointer = interactive && !reduceMotion;
    const io = new IntersectionObserver(([entry]) => {
      inView = entry.isIntersecting;
      if (inView) {
        if (listenPointer) {
          window.addEventListener("pointermove", onPointerMove, { passive: true });
          document.documentElement.addEventListener("pointerleave", onPointerLeave);
        }
        schedule();
      } else {
        window.removeEventListener("pointermove", onPointerMove);
        document.documentElement.removeEventListener("pointerleave", onPointerLeave);
        stop();
      }
    });

    readTheme();
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);
    io.observe(canvas);
    const unobserveTheme = observeTheme(canvas, onThemeChange);
    document.addEventListener("visibilitychange", onVisibility);

    return () => {
      stop();
      ro.disconnect();
      io.disconnect();
      unobserveTheme();
      document.removeEventListener("visibilitychange", onVisibility);
      window.removeEventListener("pointermove", onPointerMove);
      document.documentElement.removeEventListener("pointerleave", onPointerLeave);
    };
  }, [levels, lineWidth, speed, accentEvery, accent, scale, cellSize, interactive, reduceMotion]);

  return (
    <div className={`absolute inset-0 overflow-hidden ${className}`} {...props}>
      <canvas
        ref={canvasRef}
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 block h-full w-full text-zinc-900 dark:text-zinc-100"
      />
      {children != null && <div className="relative h-full w-full">{children}</div>}
    </div>
  );
}