Hero Dipole Field

1"use client";
2 
3import { useEffect, useRef } from "react";
4 
5// ---------------------------------------------------------------------------
6// LodestoneHero — full-bleed hero where the headline exists twice: crisp DOM
7// type above, and beneath it a canvas field of iron-filing strokes solved from
8// a two-pole dipole field (cursor pole + fixed anchor pole behind the primary
9// CTA). Filings pack densely only inside the headline's letter-mask, so the
10// type visibly "iron-files" into existence as the cursor approaches; hovering
11// the CTA doubles its pole strength and bends the whole field toward the
12// button. Vector-field solver rendering: each filing is a short line segment
13// whose angle chases atan2 of the summed field vector with critically-damped
14// easing. Canvas 2D, refs-only hot path, breath-cycle ambient drift with real
15// sleep windows between breaths.
16// ---------------------------------------------------------------------------
17 
18type Vec3 = [number, number, number];
19 
20function parseColor(raw: string): Vec3 | null {
21  const s = raw.trim();
22  if (s.startsWith("#")) {
23    const hex = s.slice(1);
24    if (hex.length === 3) {
25      const r = parseInt(hex.slice(0, 1) + hex.slice(0, 1), 16);
26      const g = parseInt(hex.slice(1, 2) + hex.slice(1, 2), 16);
27      const b = parseInt(hex.slice(2, 3) + hex.slice(2, 3), 16);
28      return Number.isNaN(r + g + b) ? null : [r, g, b];
29    }
30    if (hex.length >= 6) {
31      const r = parseInt(hex.slice(0, 2), 16);
32      const g = parseInt(hex.slice(2, 4), 16);
33      const b = parseInt(hex.slice(4, 6), 16);
34      return Number.isNaN(r + g + b) ? null : [r, g, b];
35    }
36    return null;
37  }
38  const m = s.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
39  return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null;
40}
41 
42function mix(a: Vec3, b: Vec3, t: number): Vec3 {
43  return [
44    Math.round(a[0] + (b[0] - a[0]) * t),
45    Math.round(a[1] + (b[1] - a[1]) * t),
46    Math.round(a[2] + (b[2] - a[2]) * t),
47  ];
48}
49 
50// deterministic prng — filing placement is stable across re-renders
51function mulberry32(a: number) {
52  return () => {
53    a |= 0;
54    a = (a + 0x6d2b79f5) | 0;
55    let t = Math.imul(a ^ (a >>> 15), 1 | a);
56    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
57    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
58  };
59}
60 
61// 2-octave value noise — seeds each filing's ambient-drift character
62function hash2(x: number, y: number) {
63  const n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453123;
64// … truncated