Glyph Pulse

1"use client";
2 
3import { useMemo } from "react";
4 
5import { DotMatrix3Base } from "@/components/ui/dotmatrix-core";
6import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks";
7import { rowMajorIndex3 } from "@/components/ui/dotmatrix-core";
8import { useCyclePhase } from "@/components/ui/dotmatrix-hooks";
9import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
10import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
11 
12export type Dotm3x3_11Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.06;
15const PEAK_OPACITY = 0.88;
16const CYCLE_MS_BASE = 2700;
17const HOLD_RATIO = 0.52;
18const MORPH_RATIO = 0.34;
19const SMOOTH_TRANSITION = "opacity 120ms linear";
20 
21function smoothstep(value: number): number {
22  const t = Math.min(1, Math.max(0, value));
23  return t * t * (3 - 2 * t);
24}
25 
26function patternWeight(pattern: ReadonlySet<number>, index: number): number {
27  return pattern.has(index) ? 1 : 0;
28}
29 
30/** Distinct 3×3 motifs that morph in sequence — corners, cross, full, center, ring, X, rails. */
31const GLYPH_PATTERNS: readonly ReadonlySet<number>[] = [
32  new Set([rowMajorIndex3(0, 0), rowMajorIndex3(0, 2), rowMajorIndex3(2, 0), rowMajorIndex3(2, 2)]),
33  new Set([
34    rowMajorIndex3(0, 1),
35    rowMajorIndex3(1, 0),
36    rowMajorIndex3(1, 1),
37    rowMajorIndex3(1, 2),
38    rowMajorIndex3(2, 1)
39  ]),
40  new Set(Array.from({ length: 9 }, (_, index) => index)),
41  new Set([rowMajorIndex3(1, 1)]),
42  new Set([
43    rowMajorIndex3(0, 0),
44    rowMajorIndex3(0, 1),
45    rowMajorIndex3(0, 2),
46    rowMajorIndex3(1, 0),
47    rowMajorIndex3(1, 2),
48    rowMajorIndex3(2, 0),
49    rowMajorIndex3(2, 1),
50    rowMajorIndex3(2, 2)
51  ]),
52  new Set([
53    rowMajorIndex3(0, 0),
54    rowMajorIndex3(0, 2),
55    rowMajorIndex3(1, 1),
56    rowMajorIndex3(2, 0),
57    rowMajorIndex3(2, 2)
58  ]),
59  new Set([
60    rowMajorIndex3(0, 1),
61    rowMajorIndex3(1, 0),
62    rowMajorIndex3(1, 2),
63    rowMajorIndex3(2, 1)
64  ])
65];
66 
67function glyphMorphProgress(segmentPhase: number, stagger: number): number {
68  const morphStart = HOLD_RATIO;
69  const morphEnd = HOLD_RATIO + MORPH_RATIO;
70  if (segmentPhase < morphStart + stagger * MORPH_RATIO) {
71    return 0;
72  }
73  if (segmentPhase >= morphEnd) {
74    return 1;
75  }
76 
77  const localSpan = morphEnd - morphStart;
78  const localPhase = (segmentPhase - morphStart - stagger * MORPH_RATIO) / (localSpan * (1 - stagger * 0.85));
79  return smoothstep(localPhase);
80}
81 
82export function Dotm3x3_11({
83  speed = 1.25,
84// … truncated