Overshoot Lattice Hero

"use client";

import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";

/**
 * OvershootLatticeHero — a first screen on the drawn lattice, with the rule set in the headline and a plate you can move by it.
 *
 * The Klein-blue field carries the full lattice. The caps headline is a run
 * of lines, and its third (never the first or last) starts one column to
 * the left, the rule's overshoot at the scale of type. A construction plate
 * follows a drag 1:1 (or the arrow keys), shows the free cell it will take
 * (never over the words) and snaps there; on column 3, 6 or 9 it breaks by
 * the rule and the hairlines it crosses bend. G (or Inspect) shows the grid,
 * numbered, with each break read out; inspect={false} removes both. The
 * lattice is drawn on a canvas and sleeps when still.
 *
 * Part of the Broken Grid kit: a Klein-blue field #2416f0, paper plates

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}