Glyph Wave Field

"use client";

import { useEffect, useRef, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";

/**
 * GlyphWaveField — a field of letters that behaves like water.
 *
 * A grid of letters on canvas over a 2D wave: drag the pointer and a wake of
 * weight follows, tap and a stone's rings travel out. Crests swell to 900,
 * expand and take the accent; troughs thin to hairlines and condense. Drawn
 * from a glyph atlas of the face at nine weights and three widths, at up to
 * 30fps and only on screen, idling at 10fps with a slow 34s swell when still.
 * The letters follow your text in reading order. Content goes on top as
 * children; reduced motion draws one still frame.
 *
 * Part of the Kinetic Type kit: paper #f0ede2 and ink #131315 (an inverted
 * ink stage for loud sections), one accent that letters take only under

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