Chip Pile

'use client';

import './chip-pile.css';

import { useEffect, useState } from 'react';

import {
  useCanvasScene,
  useReducedMotion,
  type SceneDrawContext,
  type SceneSetupContext,
} from '@/hooks/use-canvas-scene';

/**
 * A tag list that is a pile of things.
 *
 * The chips are rigid bodies — mass, moment of inertia, contacts, friction — solved
 * by sequential impulses, the method a 2D physics engine uses. Nothing is scripted:
 * where a chip ends up is where the stack it landed on happened to be, and a chip
 * lying across two others bridges them because that is what the contact set says.
 *
 * They are capsules rather than boxes, which is the one decision the rest follows
 * from. A rounded rectangle *is* a capsule when its corner radius is half its height,
 * so the collision shape and the drawn shape are the same shape — no skin, no
 * approximation, and the corner a box would catch on does not exist. The cost is that
 * two capsules touch at a single point, and a single point cannot hold a chip level:
 * a stack built on one contact per pair rocks forever, because there is no torque to
 * resist rotation about it. So the near-parallel case is detected and clipped, and
 * emits *two* contacts spanning the overlap — the same reference-face clipping a box
 * solver does, for the same reason.
 *
 * The label widths come from `measureText`, so each chip is exactly as wide as its
 * own word at the reader's font size, and the pile is different at every viewport.
 * The same labels are also a real list, for anything that is not looking at a canvas.
 */

/** Seconds per step. */
const STEP = 1 / 120;
/** Sequential-impulse passes per step. Ten is where a four-high stack stops creeping. */
const ITERATIONS = 10;
/** Gravity, px/s². */
const G = 2000;
/** Restitution. Plastic chips on a desk: almost none. */
const REST = 0.05;
/** Approach speed below which restitution is dropped, so a resting chip cannot buzz. */
const REST_CUT = 70;
/** Coulomb friction. Above about 0.5 a pile holds its own slope instead of spreading. */
const MU = 0.55;
/** Baumgarte factor: the fraction of the remaining overlap pushed out per step. */
const BIAS = 0.2;
/** Overlap left alone, in pixels. Solving to zero is what makes contacts chatter. */
const SLOP = 0.5;
/** Velocity lost per second to the air and to the desk. */
const LINEAR_DAMP = 0.35;
const ANGULAR_DAMP = 0.9;
/** Mass per square pixel. Only ratios matter, but keeping masses near 1 keeps the
 *  impulses in a range where single-precision noise never shows. */
const DENSITY = 0.0012;
/** Half the height of a chip, and therefore the capsule's radius. */
const RADIUS = 13;
/** Space between the end of the word and the end of the chip. */
const PAD = 13;
/** Where the walls and the desk sit, inset from the canvas edges. */
const WALL = 14;
const DESK = 26;
/** |sin θ| below which two capsules are treated as parallel and their contact clipped. */
const PARALLEL = 0.08;
/** How near a chip a press has to land to take hold of it. */
const GRAB_R = 30;
/** Stiffness of the hand, as a velocity gain per second. */
const GRAB_K = 20;
/** Fastest the hand may drag a chip, px/s. A clamp is what keeps it from tunnelling. */
const GRAB_MAX = 2400;
/** Steps run in `setup` when motion is reduced, so the still is a settled pile. */
const WARM = 420;

const LABELS = [
  'TypeScript',
  'React',
  'Postgres',
  'Rust',
  'WebGL',
  'CI/CD',
  'Figma',
  'Redis',
  'Docker',
  'GraphQL',
  'Swift',
  'Terraform',
  'Kafka',
  'Go',
];

const FONT = '500 12.5px ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';

interface Chip {
  readonly label: string;
  readonly tone: number;
  /** Half the length of the capsule's spine. The word's own width decides it. */
  readonly half: number;
  readonly invMass: number;
  readonly invInertia: number;
  x: number;
  y: number;
  vx: number;
  vy: number;
  angle: number;
  spin: number;
}

/**
 * One contact. `b` is −1 for the desk and the walls, which are not bodies: an
 * immovable surface is exactly a body with zero inverse mass, so the solver needs no
 * branch for it beyond skipping the half of the application that would move it.
 */
interface Contact {
  a: number;
  b: number;
  nx: number;
  ny: number;
  /** Arms from each centre of mass to the contact point. */
  rax: number;
  ray: number;
  rbx: number;
  rby: number;
  /** Velocity the normal is solved toward: the overlap push plus any bounce. */
  target: number;
  /** Effective mass along the normal and along the tangent, once per step. */
  kn: number;
  kt: number;
  /** Impulse accumulated across the passes. The friction cone is clamped against it. */
  pn: number;
  pt: number;
}

interface PileState {
  readonly chips: Chip[];
  readonly contacts: Contact[];
  used: number;
  left: number;
  right: number;
  floor: number;
  /** Index of the chip in hand, or −1. */
  held: number;
  /** Where on that chip the hand took hold, in the chip's own frame. */
  grabX: number;
  grabY: number;
  /** The toss the pile was last built for. Compared against the component's counter. */
  toss: number;
  carry: number;
  clock: number;
  /** Stop integrating. Set under `prefers-reduced-motion`. */
  snap: boolean;
}

/** Closest points between two segments, as parameters along each. */
const pair = new Float64Array(2);

/**
 * The classic segment-segment routine: minimise the squared distance over the two
 * parameters, clamp, and re-solve the other one against the clamped edge. Exact for
 * every configuration except two parallel segments, where the minimum is a whole
 * interval rather than a point — which is precisely the case handled separately.
 */
function closest(
  px: number,
  py: number,
  dx: number,
  dy: number,
  qx: number,
  qy: number,
  ex: number,
  ey: number,
) {
  const a = dx * dx + dy * dy;
  const e = ex * ex + ey * ey;
  const rx = px - qx;
  const ry = py - qy;
  const f = ex * rx + ey * ry;
  const c = dx * rx + dy * ry;
  const b = dx * ex + dy * ey;
  const denom = a * e - b * b;

  let s = denom > 1e-9 ? Math.max(0, Math.min(1, (b * f - c * e) / denom)) : 0;
  let t = (b * s + f) / e;
  if (t < 0) {
    t = 0;
    s = Math.max(0, Math.min(1, -c / a));
  } else if (t > 1) {
    t = 1;
    s = Math.max(0, Math.min(1, (b - c) / a));
  }
  pair[0] = s;
  pair[1] = t;
}

/**
 * Record one contact and precompute everything the passes will need from it: the
 * arms, the effective mass along the normal and the tangent, and the velocity the
 * normal is to be solved toward. All of it is fixed for the step, so the ten passes
 * that follow are pure arithmetic on the velocities.
 */
function add(
  state: PileState,
  ai: number,
  bi: number,
  cx: number,
  cy: number,
  nx: number,
  ny: number,
  depth: number,
) {
  if (state.used >= state.contacts.length) return;
  const contact = state.contacts[state.used];
  const A = state.chips[ai];
  const B = bi >= 0 ? state.chips[bi] : null;

  const rax = cx - A.x;
  const ray = cy - A.y;
  const rbx = B ? cx - B.x : 0;
  const rby = B ? cy - B.y : 0;

  const invB = B ? B.invMass : 0;
  const invIB = B ? B.invInertia : 0;

  const crossAN = rax * ny - ray * nx;
  const crossBN = rbx * ny - rby * nx;
  const crossAT = rax * nx + ray * ny;
  const crossBT = rbx * nx + rby * ny;

  const vax = A.vx - A.spin * ray;
  const vay = A.vy + A.spin * rax;
  const vbx = B ? B.vx - B.spin * rby : 0;
  const vby = B ? B.vy + B.spin * rbx : 0;
  const approach = (vbx - vax) * nx + (vby - vay) * ny;

  contact.a = ai;
  contact.b = bi;
  contact.nx = nx;
  contact.ny = ny;
  contact.rax = rax;
  contact.ray = ray;
  contact.rbx = rbx;
  contact.rby = rby;
  // The overlap is pushed out over several steps rather than in one, and the last
  // half pixel is left alone — a contact solved to exactly zero re-separates, loses
  // its contact next step, falls back in, and buzzes.
  contact.target =
    (BIAS / STEP) * Math.max(0, depth - SLOP) +
    (approach < -REST_CUT ? -REST * approach : 0);
  contact.kn =
    A.invMass + invB + A.invInertia * crossAN * crossAN + invIB * crossBN * crossBN;
  contact.kt =
    A.invMass + invB + A.invInertia * crossAT * crossAT + invIB * crossBT * crossBT;
  contact.pn = 0;
  contact.pt = 0;
  state.used += 1;
}

/** Two spine points that are near enough to touch, as a contact. */
function emit(
  state: PileState,
  ai: number,
  bi: number,
  ax: number,
  ay: number,
  bx: number,
  by: number,
) {
  let nx = bx - ax;
  let ny = by - ay;
  let distance = Math.hypot(nx, ny);
  if (distance >= RADIUS * 2) return;
  if (distance > 1e-6) {
    nx /= distance;
    ny /= distance;
  } else {
    // Spines exactly coincident. Any normal will separate them; down is as good as
    // any, and the next step will have a real one.
    nx = 0;
    ny = 1;
    distance = 0;
  }
  // Midway between the two spines is midway between the two surfaces, because both
  // capsules have the same radius.
  add(
    state,
    ai,
    bi,
    ax + nx * distance * 0.5,
    ay + ny * distance * 0.5,
    nx,
    ny,
    RADIUS * 2 - distance,
  );
}

/**
 * Contacts between two chips.
 *
 * The parallel branch is the whole reason a stack here is stable. Two capsules lying
 * across each other meet at one point, and one point exerts no torque about itself —
 * so a chip resting on another would be free to rotate about the touch and would rock
 * until damping killed it, which reads as a pile of wobbling jelly. When the spines
 * are within about five degrees of parallel their overlap is an interval rather than a
 * point, so it is clipped to that interval and a contact is emitted at each end.
 * Between them they *do* resist rotation, and the chip lies still.
 */
function collide(state: PileState, ai: number, bi: number) {
  const A = state.chips[ai];
  const B = state.chips[bi];

  const reach = A.half + B.half + RADIUS * 2;
  const gapX = B.x - A.x;
  const gapY = B.y - A.y;
  if (gapX * gapX + gapY * gapY > reach * reach) return;

  const ca = Math.cos(A.angle);
  const sa = Math.sin(A.angle);
  const cb = Math.cos(B.angle);
  const sb = Math.sin(B.angle);
  const px = A.x - ca * A.half;
  const py = A.y - sa * A.half;
  const dx = ca * A.half * 2;
  const dy = sa * A.half * 2;
  const qx = B.x - cb * B.half;
  const qy = B.y - sb * B.half;
  const ex = cb * B.half * 2;
  const ey = sb * B.half * 2;

  const lenA = A.half * 2;
  const lenB = B.half * 2;
  if (Math.abs(dx * ey - dy * ex) < PARALLEL * lenA * lenB) {
    const along = lenA * lenA;
    let from = ((qx - px) * dx + (qy - py) * dy) / along;
    let to = ((qx + ex - px) * dx + (qy + ey - py) * dy) / along;
    if (from > to) {
      const swap = from;
      from = to;
      to = swap;
    }
    const lo = Math.max(0, from);
    const hi = Math.min(1, to);
    // Only worth two contacts if the shared length is more than a chip is thick.
    if ((hi - lo) * lenA > RADIUS) {
      span(state, ai, bi, px, py, dx, dy, qx, qy, ex, ey, lo);
      span(state, ai, bi, px, py, dx, dy, qx, qy, ex, ey, hi);
      return;
    }
  }

  closest(px, py, dx, dy, qx, qy, ex, ey);
  emit(
    state,
    ai,
    bi,
    px + dx * pair[0],
    py + dy * pair[0],
    qx + ex * pair[1],
    qy + ey * pair[1],
  );
}

/** One end of a clipped parallel overlap: a point on A, and the nearest point on B. */
function span(
  state: PileState,
  ai: number,
  bi: number,
  px: number,
  py: number,
  dx: number,
  dy: number,
  qx: number,
  qy: number,
  ex: number,
  ey: number,
  at: number,
) {
  const ax = px + dx * at;
  const ay = py + dy * at;
  const along = ex * ex + ey * ey;
  const t = Math.max(0, Math.min(1, ((ax - qx) * ex + (ay - qy) * ey) / along));
  emit(state, ai, bi, ax, ay, qx + ex * t, qy + ey * t);
}

/**
 * Contacts against the desk and the two walls. Both ends of the spine are tested and
 * both are allowed to report, which is what stops a chip lying flat on the desk from
 * pivoting about its middle — the same two-contact requirement as the parallel case,
 * arrived at from the same direction.
 */
function surfaces(state: PileState, index: number) {
  const chip = state.chips[index];
  const cos = Math.cos(chip.angle) * chip.half;
  const sin = Math.sin(chip.angle) * chip.half;

  for (let end = -1; end <= 1; end += 2) {
    const x = chip.x + cos * end;
    const y = chip.y + sin * end;

    const under = RADIUS - (state.floor - y);
    if (under > 0) add(state, index, -1, x, state.floor, 0, 1, under);

    const past = RADIUS - (x - state.left);
    if (past > 0) add(state, index, -1, state.left, y, -1, 0, past);

    const over = RADIUS - (state.right - x);
    if (over > 0) add(state, index, -1, state.right, y, 1, 0, over);
  }
}

/** An impulse at an arm, as the linear and angular change it is. */
function push(chip: Chip, rx: number, ry: number, ix: number, iy: number, sign: number) {
  chip.vx += ix * chip.invMass * sign;
  chip.vy += iy * chip.invMass * sign;
  chip.spin += (rx * iy - ry * ix) * chip.invInertia * sign;
}

/**
 * One pass over one contact: the normal, then friction inside the cone the normal has
 * earned. The accumulated impulse is what is clamped, not the increment — a contact
 * that has already been pushed hard is allowed to pull back this pass, which is how
 * ten cheap passes converge on the answer a matrix solve would give.
 */
function resolve(state: PileState, contact: Contact) {
  const A = state.chips[contact.a];
  const B = contact.b >= 0 ? state.chips[contact.b] : null;
  const { nx, ny, rax, ray, rbx, rby } = contact;

  if (contact.kn > 1e-12) {
    const vax = A.vx - A.spin * ray;
    const vay = A.vy + A.spin * rax;
    const vbx = B ? B.vx - B.spin * rby : 0;
    const vby = B ? B.vy + B.spin * rbx : 0;
    const vn = (vbx - vax) * nx + (vby - vay) * ny;

    const want = Math.max(0, contact.pn + (contact.target - vn) / contact.kn);
    const change = want - contact.pn;
    contact.pn = want;
    push(A, rax, ray, nx * change, ny * change, -1);
    if (B) push(B, rbx, rby, nx * change, ny * change, 1);
  }

  if (contact.kt > 1e-12) {
    const tx = -ny;
    const ty = nx;
    const vax = A.vx - A.spin * ray;
    const vay = A.vy + A.spin * rax;
    const vbx = B ? B.vx - B.spin * rby : 0;
    const vby = B ? B.vy + B.spin * rbx : 0;
    const vt = (vbx - vax) * tx + (vby - vay) * ty;

    // Coulomb, against the live normal impulse. A chip on a slope holds until the
    // tangential demand exceeds μ times what is holding it up, and then slides —
    // which is one rule producing both behaviours instead of a rule for each.
    const cone = MU * contact.pn;
    const want = Math.max(-cone, Math.min(cone, contact.pt - vt / contact.kt));
    const change = want - contact.pt;
    contact.pt = want;
    push(A, rax, ray, tx * change, ty * change, -1);
    if (B) push(B, rbx, rby, tx * change, ty * change, 1);
  }
}

/**
 * The hand, as a velocity constraint on the point that was grabbed.
 *
 * A position assignment would drag a chip straight through the desk and through its
 * neighbours, because nothing downstream can argue with a position. A velocity target
 * is answered by the contact solver on the same pass, so the desk still wins and the
 * pile still resists — the chip has to be dug out.
 */
function hand(state: PileState, handX: number, handY: number) {
  const chip = state.chips[state.held];
  const cos = Math.cos(chip.angle);
  const sin = Math.sin(chip.angle);
  const rx = cos * state.grabX - sin * state.grabY;
  const ry = sin * state.grabX + cos * state.grabY;

  const wantX = Math.max(-GRAB_MAX, Math.min(GRAB_MAX, (handX - (chip.x + rx)) * GRAB_K));
  const wantY = Math.max(-GRAB_MAX, Math.min(GRAB_MAX, (handY - (chip.y + ry)) * GRAB_K));

  const vx = chip.vx - chip.spin * ry;
  const vy = chip.vy + chip.spin * rx;

  // Effective mass of the grabbed point along each axis, which is what turns the
  // velocity error into an impulse: a chip held by its end swings, one held at its
  // centre does not.
  const kx = chip.invMass + chip.invInertia * ry * ry;
  const ky = chip.invMass + chip.invInertia * rx * rx;
  push(chip, rx, ry, (wantX - vx) / kx, (wantY - vy) / ky, 1);
}

function advance(state: PileState, handX: number, handY: number) {
  const chips = state.chips;

  for (const chip of chips) {
    chip.vy += G * STEP;
    chip.vx -= chip.vx * LINEAR_DAMP * STEP;
    chip.vy -= chip.vy * LINEAR_DAMP * STEP;
    chip.spin -= chip.spin * ANGULAR_DAMP * STEP;
  }

  state.used = 0;
  for (let i = 0; i < chips.length; i++) {
    surfaces(state, i);
    for (let j = i + 1; j < chips.length; j++) collide(state, i, j);
  }

  for (let pass = 0; pass < ITERATIONS; pass++) {
    if (state.held >= 0) hand(state, handX, handY);
    for (let c = 0; c < state.used; c++) resolve(state, state.contacts[c]);
  }

  for (const chip of chips) {
    chip.x += chip.vx * STEP;
    chip.y += chip.vy * STEP;
    chip.angle += chip.spin * STEP;
  }
}

/** Chips lifted above the stage and dropped, from a seed. */
function scatter(state: PileState, seed: number) {
  let bits = seed >>> 0;
  const random = () => {
    bits = (bits * 1664525 + 1013904223) >>> 0;
    return bits / 4294967296;
  };

  state.chips.forEach((chip, i) => {
    const margin = chip.half + RADIUS + 2;
    const room = Math.max(1, state.right - state.left - margin * 2);
    chip.x = state.left + margin + random() * room;
    // Stacked up out of sight and released together. They arrive in order, so the
    // pile is built one chip at a time rather than resolved out of one heap.
    chip.y = -RADIUS - i * 44 - random() * 26;
    chip.vx = (random() - 0.5) * 120;
    chip.vy = 60 + random() * 90;
    chip.angle = (random() - 0.5) * 1.4;
    chip.spin = (random() - 0.5) * 5;
  });

  state.held = -1;
}

const FILL = [
  'rgba(234,239,247,0.95)',
  'rgba(122,206,215,0.93)',
  'rgba(255,196,124,0.93)',
  'rgba(166,155,242,0.92)',
];
const EDGE = [
  'rgba(255,255,255,0.55)',
  'rgba(198,247,252,0.5)',
  'rgba(255,231,190,0.5)',
  'rgba(214,208,255,0.5)',
];
const INK = ['#13161d', '#04222a', '#2b1a05', '#130f38'];

function build({ context, width, height }: SceneSetupContext, reduced: boolean): PileState {
  // The chip is as wide as its word. Measured here rather than guessed at, so the
  // pile is right at whatever size the reader's font resolves to.
  context.font = FONT;
  const chips: Chip[] = LABELS.map((label, i) => {
    const half = context.measureText(label).width / 2 + PAD;
    const mass = (half * 2 * RADIUS * 2 + Math.PI * RADIUS * RADIUS) * DENSITY;
    const length = half * 2;
    // A capsule's moment about its centre: the rod, plus the two caps, which together
    // are a disc of the same radius.
    const inertia = mass * ((length * length) / 12 + (RADIUS * RADIUS) / 2);
    return {
      label,
      tone: i % FILL.length,
      half,
      invMass: 1 / mass,
      invInertia: 1 / inertia,
      x: 0,
      y: 0,
      vx: 0,
      vy: 0,
      angle: 0,
      spin: 0,
    };
  });

  /*
   * The contact pool, allocated once. Fourteen chips can report six surface contacts
   * each and two per pair, so the ceiling is a shade over two hundred and sixty; the
   * point of the pool is that a physics step never allocates, because a collection
   * pause inside a solver is a visible stutter.
   */
  const contacts: Contact[] = [];
  for (let i = 0; i < 384; i++) {
    contacts.push({
      a: 0,
      b: -1,
      nx: 0,
      ny: 0,
      rax: 0,
      ray: 0,
      rbx: 0,
      rby: 0,
      target: 0,
      kn: 0,
      kt: 0,
      pn: 0,
      pt: 0,
    });
  }

  const state: PileState = {
    chips,
    contacts,
    used: 0,
    left: WALL,
    right: width - WALL,
    floor: height - DESK,
    held: -1,
    grabX: 0,
    grabY: 0,
    toss: 0,
    carry: 0,
    clock: 0,
    snap: reduced,
  };

  scatter(state, 20260904);

  // With motion reduced the loop never runs, so the pile is settled here instead: the
  // still is the real solution three and a half seconds in, not a hand-placed guess.
  if (reduced) for (let i = 0; i < WARM; i++) advance(state, 0, 0);

  return state;
}

function paint({ context, width, height, state, pointer }: SceneDrawContext<PileState>) {
  const now = performance.now();
  const elapsed = state.clock ? Math.min(0.05, (now - state.clock) / 1000) : STEP;
  state.clock = now;

  // The box, from the live size, so a resize moves the walls instead of leaving the
  // pile standing on a desk that is no longer there.
  state.left = WALL;
  state.right = width - WALL;
  state.floor = height - DESK;

  if (!pointer.down) state.held = -1;
  else if (state.held < 0 && pointer.inside) {
    /*
     * Take hold of the nearest chip, by distance to its spine rather than to its
     * centre — a long chip has to be grabbable by its end, and where along it you
     * grabbed is what decides whether it comes up flat or swinging.
     */
    let best = -1;
    let nearest = GRAB_R;
    state.chips.forEach((chip, i) => {
      const cos = Math.cos(chip.angle);
      const sin = Math.sin(chip.angle);
      const along = Math.max(
        -chip.half,
        Math.min(chip.half, (pointer.x - chip.x) * cos + (pointer.y - chip.y) * sin),
      );
      const gap =
        Math.hypot(pointer.x - (chip.x + cos * along), pointer.y - (chip.y + sin * along)) -
        RADIUS;
      if (gap < nearest) {
        nearest = gap;
        best = i;
      }
    });

    if (best >= 0) {
      const chip = state.chips[best];
      const cos = Math.cos(chip.angle);
      const sin = Math.sin(chip.angle);
      const dx = pointer.x - chip.x;
      const dy = pointer.y - chip.y;
      state.held = best;
      state.grabX = dx * cos + dy * sin;
      state.grabY = -dx * sin + dy * cos;
    }
  }

  if (!state.snap) {
    state.carry += elapsed;
    let steps = 0;
    while (state.carry >= STEP && steps < 8) {
      advance(state, pointer.x, pointer.y);
      state.carry -= STEP;
      steps += 1;
    }
    if (state.carry > STEP * 8) state.carry = 0;
  }

  context.clearRect(0, 0, width, height);

  // The desk, as the line the contacts are actually against.
  const shade = context.createLinearGradient(0, state.floor - 22, 0, state.floor);
  shade.addColorStop(0, 'rgba(148,176,214,0)');
  shade.addColorStop(1, 'rgba(148,176,214,0.09)');
  context.fillStyle = shade;
  context.fillRect(0, state.floor - 22, width, 22);
  context.strokeStyle = 'rgba(196,214,238,0.16)';
  context.lineWidth = 1;
  context.beginPath();
  context.moveTo(0, Math.round(state.floor) + 0.5);
  context.lineTo(width, Math.round(state.floor) + 0.5);
  context.stroke();

  context.font = FONT;
  context.textAlign = 'center';
  context.textBaseline = 'middle';

  for (const chip of state.chips) {
    context.save();
    context.translate(chip.x, chip.y);
    context.rotate(chip.angle);

    /*
     * The capsule, drawn as the capsule the solver collides: two caps and two edges.
     * A rounded rectangle whose radius is half its height is the same shape, so there
     * is no gap anywhere between what is seen and what is simulated.
     */
    context.beginPath();
    context.arc(-chip.half, 0, RADIUS, Math.PI * 0.5, Math.PI * 1.5);
    context.lineTo(chip.half, -RADIUS);
    context.arc(chip.half, 0, RADIUS, Math.PI * -0.5, Math.PI * 0.5);
    context.closePath();
    context.fillStyle = FILL[chip.tone];
    context.fill();
    context.strokeStyle = EDGE[chip.tone];
    context.lineWidth = 1;
    context.stroke();

    // Turned with the chip, but never upside down: past a quarter turn the label reads
    // the other way up, which is what a printed word on a physical chip does.
    if (Math.cos(chip.angle) < 0) context.rotate(Math.PI);
    context.fillStyle = INK[chip.tone];
    context.fillText(chip.label, 0, 0);
    context.restore();
  }
}

/** `compact` is the 298x240 catalogue card: the same pile, with the copy layer cut to
 *  one line along the desk margin. Presentation only — see `chip-pile.css`. */
export type ChipPileProps = { compact?: boolean };

/**
 * The desk is the stage and takes every pointer event; the copy is a later sibling
 * that paints over it with `pointer-events: none`, and only the toss button takes its
 * clicks back. The same fourteen labels are also a plain list, visually hidden, so the
 * content of this section does not depend on being able to see a canvas.
 */
export function ChipPile({ compact = false }: ChipPileProps) {
  const reduced = useReducedMotion();
  const [toss, setToss] = useState(0);

  const { stageRef, canvasRef, requestRender } = useCanvasScene<PileState>({
    setup: (scene) => build(scene, reduced),
    draw: (scene) => {
      scene.state.snap = reduced;
      if (scene.state.toss !== toss) {
        scene.state.toss = toss;
        scatter(scene.state, 20260904 + toss * 7919);
        // Nothing will integrate this pile if the loop is stopped, so it is settled
        // here and the button still does something under reduced motion.
        if (reduced) for (let i = 0; i < WARM; i++) advance(scene.state, 0, 0);
      }
      paint(scene);
    },
  });

  useEffect(() => {
    requestRender();
  }, [toss, requestRender]);

  return (
    <div className="chip-pile-stage" data-compact={compact ? 'true' : undefined}>
      <div ref={stageRef} className="chip-pile-desk" aria-hidden="true">
        <canvas ref={canvasRef} />
      </div>

      <div className="chip-pile-face">
        <p className="chip-pile-eyebrow">Stack</p>
        <h2>Fourteen rigid bodies, and the words are the widths.</h2>
        <p className="chip-pile-copy">
          Every chip is as wide as its own label measured in your font, and as heavy as
          it is wide. Pick one up and the rest of the pile answers for it.
        </p>

        {/* Still clickable in a card, but out of the tab order: the card frame is
            aria-hidden, and a focusable node inside one is a trap with no label. */}
        <button
          type="button"
          className="chip-pile-toss"
          tabIndex={compact ? -1 : undefined}
          onClick={() => setToss((n) => n + 1)}
        >
          Toss again
        </button>

        <ul className="chip-pile-list">
          {LABELS.map((label) => (
            <li key={label}>{label}</li>
          ))}
        </ul>
      </div>

      <p className="chip-pile-hint">Drag a chip</p>
    </div>
  );
}

export default ChipPile;

.chip-pile-stage {
  position: relative;
  width: 100%;
  min-height: 27rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: radial-gradient(120% 100% at 22% 0%, #131824 0%, #0a0d15 58%, #07090f 100%);
  color: #eef2f9;
}

.chip-pile-desk {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}

.chip-pile-desk:active {
  cursor: grabbing;
}

.chip-pile-desk canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Transparent to the pointer, so a chip can be grabbed through the copy above it.
   Only the toss button takes its clicks back. */
.chip-pile-face {
  position: relative;
  max-width: 30rem;
  padding: 2.75rem 2.5rem 3rem;
  pointer-events: none;
}

.chip-pile-eyebrow {
  margin: 0 0 0.875rem;
  font: 500 0.6875rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(150, 214, 222, 0.8);
}

.chip-pile-face h2 {
  margin: 0 0 0.875rem;
  font-size: clamp(1.5rem, 2.9vw, 2.125rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: rgba(245, 249, 255, 0.92);
}

.chip-pile-copy {
  margin: 0 0 1.5rem;
  max-width: 25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(238, 242, 249, 0.5);
}

.chip-pile-toss {
  appearance: none;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 16, 26, 0.5);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(238, 242, 249, 0.78);
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.chip-pile-toss:hover {
  border-color: rgba(150, 224, 232, 0.45);
  color: #f4fdff;
}

.chip-pile-toss:focus-visible {
  outline: 2px solid rgba(150, 224, 232, 0.8);
  outline-offset: 2px;
}

/*
 * The labels, for anything that is not looking at a canvas. Clipped to a single pixel
 * rather than `display: none`, because a hidden element is not read out and the point
 * of the list is that it is.
 */
.chip-pile-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  list-style: none;
}

.chip-pile-hint {
  position: absolute;
  right: 0.875rem;
  bottom: 0.75rem;
  margin: 0;
  font: 500 0.6875rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238, 242, 249, 0.26);
  pointer-events: none;
}

/*
 * With the loop stopped the pile is solved in `setup` instead — three and a half
 * seconds of the real solver, run before the first paint — so the still is a settled
 * pile rather than a placed one, and pressing the button re-solves a new one. What is
 * gone is the fall, which is the part that was asked to go. Dragging goes with it,
 * because a chip that follows the pointer is motion arriving through another door.
 */
@media (prefers-reduced-motion: reduce) {
  .chip-pile-desk {
    cursor: default;
  }

  .chip-pile-toss {
    transition: none;
  }
}

/*
 * The card variant: the 298x240 catalogue frame, at that real size and never scaled.
 * The pile itself is already right — it is solved against the live canvas box — so all
 * this does is get the copy out of its way, down to a single strip along the bottom.
 */
.chip-pile-stage[data-compact='true'] {
  min-height: 0;
  height: 100%;
  /* The card frame rounds and clips already. */
  border-radius: 0;
}

/*
 * A full-bleed drag surface that claims every touch traps the page inside a scrolling
 * grid. `pan-y` hands the vertical gesture back to the document; a horizontal drag
 * still reaches a chip, which is the gesture this mechanism is about.
 */
.chip-pile-stage[data-compact='true'] .chip-pile-desk {
  touch-action: pan-y;
}

/*
 * The strip sits in the band the solver already keeps empty: `DESK` in the tsx holds
 * the floor 26px above the bottom edge, so nothing ever rests below it. In pixels,
 * because that constant is in pixels. `pointer-events: none` is inherited from the
 * rule above and left alone, so a press on the strip still lands on a chip; the toss
 * button goes on taking its own clicks back.
 */
.chip-pile-stage[data-compact='true'] .chip-pile-face {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 26px;
  padding: 0 0.6875rem;
}

/* One line of text, at the fixed 0.6875rem it was already set in. */
.chip-pile-stage[data-compact='true'] .chip-pile-eyebrow {
  margin: 0;
}

/* The heading is a `vw` size and the paragraph is three lines; the hint would be a
   second line of text. All of it is the card's own title's job. */
.chip-pile-stage[data-compact='true'] .chip-pile-face h2,
.chip-pile-stage[data-compact='true'] .chip-pile-copy,
.chip-pile-stage[data-compact='true'] .chip-pile-hint {
  display: none;
}

/* 18px tall, so it clears the floor line at either end of the strip. It is the one
   thing in here that re-runs the fall, which is worth keeping in a card. */
.chip-pile-stage[data-compact='true'] .chip-pile-toss {
  flex: none;
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  line-height: 1;
}

"use client"

import { useCallback, useEffect, useRef, useState } from "react"

/**
 * The canvas preamble every 2D scene needs, in one place: a DPR-scaled backing
 * store, a rebuild on resize, a loop that stops when the stage scrolls out of
 * view, pointer tracking with per-frame deltas, and teardown.
 *
 * A scene supplies two functions. `setup` builds whatever mutable state the
 * animation owns and is re-run whenever the stage changes size, so the state can
 * be sized to the stage without ever being resized in place. `draw` paints one
 * frame from that state — it is called with the transform already scaled to
 * device pixels, so every coordinate in it is a CSS pixel.
 */

export type ScenePointer = {
  x: number
  y: number
  /** Position at the previous painted frame, so `x - lastX` is a frame delta. */
  lastX: number
  lastY: number
  down: boolean
  inside: boolean
}

export type SceneSetupContext = {
  context: CanvasRenderingContext2D
  width: number
  height: number
  dpr: number
}

export type SceneDrawContext<State> = SceneSetupContext & {
  state: State
  pointer: ScenePointer
  /** Painted frames since the last rebuild. Useful for every-Nth-frame work. */
  frame: number
}

export type CanvasSceneOptions<State> = {
  setup: (context: SceneSetupContext) => State
  draw: (context: SceneDrawContext<State>) => void
}

export type CanvasScene = {
  /** The sizing element. Owns the pointer listeners and is what is observed. */
  stageRef: (node: HTMLDivElement | null) => void
  canvasRef: (node: HTMLCanvasElement | null) => void
  /** Paint one frame now. The escape hatch for a paused or reduced-motion loop. */
  requestRender: () => void
}

/** Live `prefers-reduced-motion`. False during SSR and the first paint. */
export function useReducedMotion() {
  const [reduced, setReduced] = useState(false)

  useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
    setReduced(query.matches)
    const onChange = () => setReduced(query.matches)
    query.addEventListener("change", onChange)
    return () => query.removeEventListener("change", onChange)
  }, [])

  return reduced
}

export function useCanvasScene<State>(options: CanvasSceneOptions<State>): CanvasScene {
  const reduced = useReducedMotion()

  /*
   * `draw` is usually an inline closure, so it is a new function on every
   * render. Reading it through a ref keeps the loop from being torn down and
   * the scene from being rebuilt each time the component re-renders.
   */
  const optionsRef = useRef(options)
  optionsRef.current = options

  const stage = useRef<HTMLDivElement | null>(null)
  const canvas = useRef<HTMLCanvasElement | null>(null)

  /*
   * Plain ref assignment, with no state behind it. React attaches refs during
   * the commit phase, before passive effects run, so the effect below already
   * sees both nodes on the first mount — which is why these used to bump a
   * `mounted` counter for nothing: the two `setMounted` calls batched into one
   * re-render, the counter went 0 → 2, and the effect's dependency on it tore
   * the live scene down and rebuilt it. Every scene was constructed, measured
   * and warmed twice on every mount, four times under StrictMode in dev.
   *
   * The requirement this trades for that: a consumer must render the stage and
   * the canvas unconditionally, in the same commit as the component itself. All
   * thirteen do. Gating the canvas behind a flag would leave the effect bailing
   * on the null guard with nothing to re-run it.
   */
  const stageRef = useCallback((node: HTMLDivElement | null) => {
    stage.current = node
  }, [])
  const canvasRef = useCallback((node: HTMLCanvasElement | null) => {
    canvas.current = node
  }, [])

  /** Set once the scene is live, so `requestRender` before that is a no-op. */
  const render = useRef<(() => void) | null>(null)
  const requestRender = useCallback(() => render.current?.(), [])

  useEffect(() => {
    const stageNode = stage.current
    const canvasNode = canvas.current
    if (!stageNode || !canvasNode) return

    const context = canvasNode.getContext("2d")
    if (!context) return

    const pointer: ScenePointer = {
      x: 0,
      y: 0,
      lastX: 0,
      lastY: 0,
      down: false,
      inside: false,
    }

    let state: State | null = null
    let width = 0
    let height = 0
    let dpr = 1
    let frame = 0
    let loop = 0
    let pending = 0
    let visible = true

    /** Rebuild the backing store and the scene state for the current size. */
    const measure = () => {
      // `offsetWidth`/`offsetHeight`, not `getBoundingClientRect()`: the rect is
      // post-transform, so a scene sitting inside a scaled ancestor measured its
      // own frame at the scaled size, sized the backing store to that, and then
      // had CSS scale the result a second time — the scene ran at a fraction of
      // the box it was drawn into. The catalogue's scaled-poster branch is the
      // one place that happens, and it is reachable again the moment an
      // animation is registered without a card composition. These two properties
      // are the untransformed layout box; both are integers, which is what the
      // rounding below already reduced the rect to.
      const nextWidth = Math.max(1, stageNode.offsetWidth)
      const nextHeight = Math.max(1, stageNode.offsetHeight)
      const nextDpr = Math.min(2, window.devicePixelRatio || 1)
      if (nextWidth === width && nextHeight === height && nextDpr === dpr && state) return

      width = nextWidth
      height = nextHeight
      dpr = nextDpr
      canvasNode.width = Math.round(width * dpr)
      canvasNode.height = Math.round(height * dpr)
      canvasNode.style.width = `${width}px`
      canvasNode.style.height = `${height}px`
      frame = 0
      state = optionsRef.current.setup({ context, width, height, dpr })
    }

    const paint = () => {
      if (!state) return
      // Re-applied every frame: a scene is free to install its own transform
      // for a cell or a sprite, and most do.
      context.setTransform(dpr, 0, 0, dpr, 0, 0)
      optionsRef.current.draw({ context, width, height, dpr, state, pointer, frame })
      pointer.lastX = pointer.x
      pointer.lastY = pointer.y
      frame += 1
    }

    /** One frame on the next tick, coalescing however many were asked for. */
    const paintOnce = () => {
      if (pending) return
      pending = requestAnimationFrame(() => {
        pending = 0
        measure()
        paint()
      })
    }
    render.current = paintOnce

    const tick = () => {
      loop = requestAnimationFrame(tick)
      if (visible) paint()
    }

    const start = () => {
      if (loop || reduced) return
      loop = requestAnimationFrame(tick)
    }
    const stop = () => {
      if (!loop) return
      cancelAnimationFrame(loop)
      loop = 0
    }

    const at = (event: PointerEvent) => {
      const rect = stageNode.getBoundingClientRect()
      // The rect is the right thing to subtract here — `clientX` is viewport
      // space and so is the rect — but the difference comes back in *rendered*
      // pixels, and a scene reads `pointer` in the scene pixels `measure()` set
      // up from the untransformed box. Under a CSS scale those two disagree, so
      // divide the transform back out. `rect.width / offsetWidth` is the scale
      // actually in force, whatever produced it, and it is exactly 1 when there
      // is none.
      const scale = stageNode.offsetWidth > 0 ? rect.width / stageNode.offsetWidth : 1
      pointer.x = (event.clientX - rect.left) / (scale || 1)
      pointer.y = (event.clientY - rect.top) / (scale || 1)
      // A frozen loop still owes the user feedback for a drag.
      if (reduced) paintOnce()
    }

    const onEnter = (event: PointerEvent) => {
      pointer.inside = true
      at(event)
      pointer.lastX = pointer.x
      pointer.lastY = pointer.y
    }
    const onMove = (event: PointerEvent) => {
      pointer.inside = true
      at(event)
    }
    const onDown = (event: PointerEvent) => {
      pointer.down = true
      at(event)
      // Capture keeps a drag alive past the edge of the stage, which is where
      // a hard throw naturally ends up.
      stageNode.setPointerCapture(event.pointerId)
    }
    const onUp = (event: PointerEvent) => {
      pointer.down = false
      at(event)
      if (stageNode.hasPointerCapture(event.pointerId)) {
        stageNode.releasePointerCapture(event.pointerId)
      }
    }
    const onLeave = () => {
      pointer.inside = false
      pointer.down = false
      if (reduced) paintOnce()
    }

    stageNode.addEventListener("pointerenter", onEnter)
    stageNode.addEventListener("pointermove", onMove)
    stageNode.addEventListener("pointerdown", onDown)
    stageNode.addEventListener("pointerup", onUp)
    stageNode.addEventListener("pointercancel", onUp)
    stageNode.addEventListener("pointerleave", onLeave)

    const resizes = new ResizeObserver(() => paintOnce())
    resizes.observe(stageNode)

    /*
     * An animation nobody can see is heat. The observer both pauses the loop
     * and, on the way back in, repaints immediately rather than waiting a frame.
     */
    const views = new IntersectionObserver(
      (entries) => {
        visible = entries.some((entry) => entry.isIntersecting)
        if (visible) {
          start()
          paintOnce()
        } else {
          stop()
        }
      },
      { rootMargin: "120px" },
    )
    views.observe(stageNode)

    measure()
    paint()
    start()

    return () => {
      render.current = null
      stop()
      if (pending) cancelAnimationFrame(pending)
      resizes.disconnect()
      views.disconnect()
      stageNode.removeEventListener("pointerenter", onEnter)
      stageNode.removeEventListener("pointermove", onMove)
      stageNode.removeEventListener("pointerdown", onDown)
      stageNode.removeEventListener("pointerup", onUp)
      stageNode.removeEventListener("pointercancel", onUp)
      stageNode.removeEventListener("pointerleave", onLeave)
    }
  }, [reduced])

  return { stageRef, canvasRef, requestRender }
}