LatticeLoader

npx shadcn@latest add "https://designpass.dev/r/LatticeLoader-TS-TW.json"

/*!
 * LatticeLoader, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/lattice-loader
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import React, { useEffect, useMemo, useRef, type CSSProperties } from "react";

export interface LatticeLoaderProps {
  /** Outer footprint of the cube stage (px). */
  size?: number;
  /** Seconds for the crest to tour every edge once. */
  speed?: number;
  /** Interior beads sampled along each edge (corners are always included). */
  density?: number;
  /** Bead diameter (px). */
  dotSize?: number;
  /** Enables grab-and-spin pointer interaction. When false the cube only
   * auto-yaws and ignores the pointer. */
  interactive?: boolean;
  /** Dim tone for idle lattice beads. */
  colorFrom?: string;
  /** Accent on beads near the traveling crest. */
  colorMid?: string;
  /** Bright peak on the crest bead. */
  colorTo?: string;
  className?: string;
  style?: CSSProperties;
}

type Edge = { a: number; b: number };
type RGB = readonly [number, number, number];
type Vec3 = { x: number; y: number; z: number };
type Bead = { x: number; y: number; z: number; heat: number };
type Sample =
  | { kind: "edge"; edge: number; t: number; along: number }
  | { kind: "corner"; corner: number; alongs: number[] };

// Unit cube corners, then a fixed isometric-ish camera projection.
const CORNERS: [number, number, number][] = [
  [-1, -1, -1],
  [1, -1, -1],
  [1, 1, -1],
  [-1, 1, -1],
  [-1, -1, 1],
  [1, -1, 1],
  [1, 1, 1],
  [-1, 1, 1],
];

const EDGES: Edge[] = [
  { a: 0, b: 1 },
  { a: 1, b: 2 },
  { a: 2, b: 3 },
  { a: 3, b: 0 },
  { a: 4, b: 5 },
  { a: 5, b: 6 },
  { a: 6, b: 7 },
  { a: 7, b: 4 },
  { a: 0, b: 4 },
  { a: 1, b: 5 },
  { a: 2, b: 6 },
  { a: 3, b: 7 },
];

function parseHex(hex: string): RGB | null {
  if (!hex.startsWith("#")) return null;
  const h = hex.slice(1);
  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  if (full.length !== 6) return null;
  return [
    Number.parseInt(full.slice(0, 2), 16),
    Number.parseInt(full.slice(2, 4), 16),
    Number.parseInt(full.slice(4, 6), 16),
  ];
}

function mixRgb(a: RGB, b: RGB, t: number): string {
  const r = Math.max(0, Math.min(255, Math.round(a[0] + (b[0] - a[0]) * t)));
  const g = Math.max(0, Math.min(255, Math.round(a[1] + (b[1] - a[1]) * t)));
  const bl = Math.max(0, Math.min(255, Math.round(a[2] + (b[2] - a[2]) * t)));
  return `rgb(${r},${g},${bl})`;
}

/**
 * A dotted wireframe cube: beads on every corner and along every edge, a bright
 * crest touring the edges, and a slow yaw so faces keep revealing new
 * silhouettes. Back-facing beads drop in opacity so depth reads clearly. Grab
 * and drag to spin; on release the cube eases into its base spin speed in the
 * fling direction and keeps that direction. Toggle interaction off for a plain
 * auto-yaw. Canvas 2D only, zero dependencies, honors prefers-reduced-motion
 * and pauses when offscreen.
 */
export default function LatticeLoader({
  size = 40,
  speed = 1.5,
  density = 5,
  dotSize = 1,
  interactive = true,
  colorFrom = "#8e8e97",
  colorMid = "#dbc2ff",
  colorTo = "#ffffff",
  className = "",
  style,
}: LatticeLoaderProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const perEdge = Math.max(2, Math.min(10, Math.round(density)));
  const beadSize = Math.max(0.75, dotSize);

  const samples = useMemo(() => {
    // Edge samples stay strictly interior; corners are added once. Crest
    // position is edge-tour `along`. Corners keep every incident endpoint so
    // they light each time the crest passes, not only once per cycle.
    const edgeCount = EDGES.length;
    const pts: Sample[] = [];
    for (let edge = 0; edge < edgeCount; edge += 1) {
      for (let i = 0; i < perEdge; i += 1) {
        const t = (i + 1) / (perEdge + 1);
        pts.push({ kind: "edge", edge, t, along: (edge + t) / edgeCount });
      }
    }
    const cornerAlongs: number[][] = CORNERS.map(() => []);
    for (let edge = 0; edge < edgeCount; edge += 1) {
      const { a, b } = EDGES[edge];
      cornerAlongs[a].push(edge / edgeCount);
      cornerAlongs[b].push((edge + 1) / edgeCount);
    }
    for (let corner = 0; corner < CORNERS.length; corner += 1) {
      pts.push({ kind: "corner", corner, alongs: cornerAlongs[corner] });
    }
    return pts;
  }, [perEdge]);

  useEffect(() => {
    const node = canvasRef.current;
    if (!node) return;
    const ctx = node.getContext("2d");
    if (!ctx) return;
    // Fresh binding so nested functions keep a non-null canvas type.
    const canvas = node;

    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const fromRgb = parseHex(colorFrom);
    const midRgb = parseHex(colorMid);
    const toRgb = parseHex(colorTo);

    // Reused each frame so the rAF loop does not allocate per tick.
    const corners: Vec3[] = CORNERS.map(() => ({ x: 0, y: 0, z: 0 }));
    const beads: Bead[] = samples.map(() => ({ x: 0, y: 0, z: 0, heat: 0 }));
    const sampleCount = samples.length;

    let frame = 0;
    let running = true;
    let visible = true;
    const started = performance.now();
    let lastNow = started;

    let yaw = 0.7;
    let pitch = 0.48;
    const period0 = Math.max(0.3, speed);
    let spinYaw = 0.55 / period0;
    let spinPitch = 0;
    let velYaw = spinYaw;
    let velPitch = 0;
    let dragging = false;
    let lastX = 0;
    let lastY = 0;
    let pointerId: number | null = null;

    const syncSize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = Math.round(size * dpr);
      canvas.height = Math.round(size * dpr);
      canvas.style.width = `${size}px`;
      canvas.style.height = `${size}px`;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };

    const io = new IntersectionObserver(([entry]) => {
      visible = entry?.isIntersecting ?? true;
    });
    io.observe(canvas);

    const detachWindowRelease = () => {
      window.removeEventListener("pointerup", endDrag);
      window.removeEventListener("pointercancel", endDrag);
    };

    function finishDrag() {
      if (!dragging) return;
      const endedId = pointerId;
      dragging = false;
      pointerId = null;
      detachWindowRelease();
      canvas.style.cursor = interactive ? "grab" : "default";
      if (endedId != null && canvas.hasPointerCapture(endedId)) {
        try {
          canvas.releasePointerCapture(endedId);
        } catch {
          // Capture already released (lostpointercapture / browser quirks).
        }
      }
      const period = Math.max(0.3, speed);
      const baseYaw = 0.55 / period;
      const basePitchRate = 0.4 / period;
      if (Math.abs(velYaw) > 0.12) spinYaw = Math.sign(velYaw) * baseYaw;
      if (Math.abs(velPitch) > 0.12) spinPitch = Math.sign(velPitch) * basePitchRate;
    }

    function endDrag(event: PointerEvent) {
      if (pointerId !== null && pointerId !== event.pointerId) return;
      finishDrag();
    }

    function onPointerDown(event: PointerEvent) {
      if (!interactive) return;
      finishDrag();
      dragging = true;
      pointerId = event.pointerId;
      lastX = event.clientX;
      lastY = event.clientY;
      velYaw = 0;
      velPitch = 0;
      try {
        canvas.setPointerCapture(event.pointerId);
      } catch {
        // Window release listeners still end the drag if capture is unavailable.
      }
      // Only listen on window while a drag is active.
      window.addEventListener("pointerup", endDrag);
      window.addEventListener("pointercancel", endDrag);
      canvas.style.cursor = "grabbing";
      event.preventDefault();
    }

    function onPointerMove(event: PointerEvent) {
      if (!dragging || pointerId !== event.pointerId) return;
      // Buttons cleared without pointerup: stop treating hover as a drag.
      if (event.buttons === 0) {
        finishDrag();
        return;
      }
      const dx = event.clientX - lastX;
      const dy = event.clientY - lastY;
      lastX = event.clientX;
      lastY = event.clientY;
      // Past ±90° pitch, Euler yaw runs opposite on screen; flip horizontal mapping.
      // velYaw stays in screen space so fling direction stays correct after pitch.
      const sens = 0.01;
      const yawDir = Math.cos(pitch) >= 0 ? 1 : -1;
      yaw -= dx * sens * yawDir;
      pitch -= dy * sens;
      velYaw = -dx * sens * 55;
      velPitch = -dy * sens * 55;
    }

    if (interactive) {
      canvas.style.cursor = "grab";
      canvas.addEventListener("pointerdown", onPointerDown);
      canvas.addEventListener("pointermove", onPointerMove);
      canvas.addEventListener("lostpointercapture", endDrag);
    } else {
      canvas.style.cursor = "default";
    }

    const draw = (now: number) => {
      if (!running) return;
      if (!reduced) frame = requestAnimationFrame(draw);
      if (!visible && !reduced) return;

      const dt = Math.min(0.05, (now - lastNow) / 1000);
      lastNow = now;
      const elapsed = (now - started) / 1000;
      const period = Math.max(0.3, speed);
      const baseYaw = 0.55 / period;
      const basePitchRate = 0.4 / period;
      // Keep magnitude locked to current speed; preserve chosen signs.
      spinYaw = Math.sign(spinYaw || 1) * baseYaw;
      if (spinPitch !== 0) spinPitch = Math.sign(spinPitch) * basePitchRate;

      if (!reduced && !dragging) {
        // Ease toward sustained spin targets. velYaw is screen-space; map
        // through yawDir so upside-down spin still matches the fling.
        const ease = 1 - Math.pow(0.06, dt);
        velYaw += (spinYaw - velYaw) * ease;
        velPitch += (spinPitch - velPitch) * ease;
        const yawDir = Math.cos(pitch) >= 0 ? 1 : -1;
        yaw += velYaw * dt * yawDir;
        pitch += velPitch * dt;
      }

      const crest = reduced ? 0.2 : (elapsed / period) % 1;
      const scale = size * 0.28;
      const cx = size / 2;
      const cy = size / 2;
      const cyaw = Math.cos(yaw);
      const syaw = Math.sin(yaw);
      const cp = Math.cos(pitch);
      const sp = Math.sin(pitch);

      for (let i = 0; i < CORNERS.length; i += 1) {
        const [x, y, z] = CORNERS[i];
        const x1 = x * cyaw - z * syaw;
        const z1 = x * syaw + z * cyaw;
        const slot = corners[i];
        slot.x = x1;
        slot.y = y * cp - z1 * sp;
        slot.z = y * sp + z1 * cp;
      }

      for (let i = 0; i < sampleCount; i += 1) {
        const sample = samples[i];
        const bead = beads[i];
        if (sample.kind === "corner") {
          const c = corners[sample.corner];
          bead.x = c.x;
          bead.y = c.y;
          bead.z = c.z;
          let heat = 0;
          for (let a = 0; a < sample.alongs.length; a += 1) {
            let d = Math.abs(sample.alongs[a] - crest);
            d = Math.min(d, 1 - d);
            heat = Math.max(heat, 1 - d / 0.12);
          }
          bead.heat = Math.max(0, heat);
        } else {
          const edge = EDGES[sample.edge];
          const a = corners[edge.a];
          const b = corners[edge.b];
          bead.x = a.x + (b.x - a.x) * sample.t;
          bead.y = a.y + (b.y - a.y) * sample.t;
          bead.z = a.z + (b.z - a.z) * sample.t;
          let d = Math.abs(sample.along - crest);
          d = Math.min(d, 1 - d);
          bead.heat = Math.max(0, 1 - d / 0.12);
        }
      }
      beads.sort((a, b) => a.z - b.z);

      ctx.clearRect(0, 0, size, size);

      for (let i = 0; i < sampleCount; i += 1) {
        const bead = beads[i];
        // Depth 0 at the back face, 1 at the front: back beads stay faint.
        const depth = Math.max(0, Math.min(1, (bead.z + 1.6) / 3.2));
        let color = colorFrom;
        if (fromRgb && midRgb && toRgb) {
          if (bead.heat > 0.55) color = mixRgb(midRgb, toRgb, (bead.heat - 0.55) / 0.45);
          else if (bead.heat > 0.1) color = mixRgb(fromRgb, midRgb, (bead.heat - 0.1) / 0.45);
          else color = mixRgb(fromRgb, midRgb, depth * 0.35);
        } else if (bead.heat > 0.55) {
          color = colorTo;
        } else if (bead.heat > 0.1) {
          color = colorMid;
        }

        const r = beadSize * (0.8 + depth * 0.3 + bead.heat * 0.45);
        // Stronger falloff than a linear blend so the far side reads as ghosted.
        const alpha = 0.1 + depth * depth * 0.75 + bead.heat * 0.28;
        ctx.beginPath();
        ctx.globalAlpha = alpha;
        ctx.fillStyle = color;
        ctx.arc(cx + bead.x * scale, cy + bead.y * scale, r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalAlpha = 1;
    };

    // Observe after draw exists: some browsers fire ResizeObserver sync on observe.
    const ro = new ResizeObserver(() => {
      syncSize();
      if (reduced) draw(performance.now());
    });
    ro.observe(canvas);
    syncSize();

    frame = requestAnimationFrame(draw);

    return () => {
      running = false;
      cancelAnimationFrame(frame);
      ro.disconnect();
      io.disconnect();
      detachWindowRelease();
      canvas.removeEventListener("pointerdown", onPointerDown);
      canvas.removeEventListener("pointermove", onPointerMove);
      canvas.removeEventListener("lostpointercapture", endDrag);
    };
  }, [size, speed, samples, beadSize, interactive, colorFrom, colorMid, colorTo]);

  return (
    <canvas
      ref={canvasRef}
      role="status"
      aria-label="Loading"
      className={`inline-block shrink-0 touch-none ${className}`}
      style={style}
    />
  );
}