// Diagrams — restrained, geometric. No icons. Pure type + lines.
// All exposed on window for cross-script access.
const Diagram = {};
// --- Drift glyph: 7 arrows, gradually misaligning ---
Diagram.DriftGlyph = function ({ size = 140, color = "var(--ink)", accent = "var(--accent)" }) {
const arrows = Array.from({ length: 7 }, (_, i) => {
const t = i / 6;
const angle = t * t * 32; // accelerating drift
return { y: 18 + i * 16, angle };
});
return (
);
};
// --- Drift field: live, drift increasing as it scrolls into view ---
Diagram.DriftField = function ({ height = 360 }) {
const [t, setT] = React.useState(0);
const ref = React.useRef(null);
React.useEffect(() => {
let raf;
let phase = 0;
const tick = () => {
phase += 0.004;
setT(phase);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
const cols = 28;
const rows = 14;
const w = 1000;
const h = 480;
const cellW = w / cols;
const cellH = h / rows;
const arrows = [];
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const x = cellW * c + cellW / 2;
const y = cellH * r + cellH / 2;
// drift grows left-to-right
const driftAmt = (c / cols) ** 1.6;
const noise = Math.sin(c * 0.6 + r * 0.9 + t * 1.2) * 0.5 + Math.cos(r * 0.7 - t) * 0.3;
const angle = driftAmt * 70 * (0.4 + noise);
const dim = 1 - driftAmt * 0.45;
arrows.push({ x, y, angle, dim, key: `${r}-${c}`, drifted: driftAmt > 0.55 });
}
}
return (
);
};
// --- Cultural mishearing: same sentence, two decoders ---
Diagram.MishearingDiagram = function () {
return (
);
};
// --- The five mechanism marks ---
Diagram.MechMarks = {
Technical: () => (
),
Capability: () => (
),
Decision: () => (
),
Structural: () => (
),
Information: () => (
),
};
// --- Method step diagrams ---
Diagram.StepDiagram = {
Visible: () => (
),
Identify: () => (
),
Restore: () => (
),
Anchor: () => (
),
};
window.Diagram = Diagram;