Glyph Cluster

1"use client";
2 
3import { useMemo } from "react";
4 
5import { DotMatrixBase } from "@/components/ui/dotmatrix-core";
6import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks";
7import { isWithinCircularMask } 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 DotmCircular15Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 24;
15const BASE_OPACITY = 0.07;
16const MID_OPACITY = 0.34;
17const HIGH_OPACITY = 0.95;
18 
19const BRAILLE_PHASES: ReadonlyArray<ReadonlySet<string>> = [
20  new Set(["1,1", "2,1", "3,1", "1,3", "2,3", "3,3"]), // rails
21  new Set(["1,1", "2,1", "3,1", "2,2", "1,3", "2,3", "3,3"]), // center bridge
22  new Set(["1,1", "1,2", "1,3", "2,1", "2,3", "3,1", "3,2", "3,3"]), // top+bottom bars
23  new Set(["1,1", "3,1", "2,2", "1,3", "3,3"]), // X-cross
24  new Set(["2,1", "1,2", "3,2", "2,3"]), // plus motif
25  new Set(["1,1", "2,1", "2,2", "2,3", "3,3"]) // diagonal sweep
26];
27 
28export function DotmCircular15({
29  speed = 1.65,
30  animated = true,
31  hoverAnimated = false,
32  ...rest
33}: DotmCircular15Props) {
34  const reducedMotion = usePrefersReducedMotion();
35  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
36    animated: Boolean(animated && !reducedMotion),
37    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
38    speed
39  });
40  const animPhase = useCyclePhase({
41    active: !reducedMotion && matrixPhase !== "idle",
42    cycleMsBase: 1680,
43    speed
44  });
45 
46  const resolver = useMemo<DotAnimationResolver>(() => {
47    return ({ row, col, phase }) => {
48      if (!isWithinCircularMask(row, col)) {
49        return { className: "dmx-inactive" };
50      }
51 
52      const x = col - 2;
53      const y = row - 2;
54      const ring = Math.sqrt(x * x + y * y);
55      const count = BRAILLE_PHASES.length;
56      const phaseIndex =
57        reducedMotion || phase === "idle"
58          ? 0
59          : (() => {
60              const t = Number.isFinite(animPhase) ? animPhase : 0;
61              const raw = Math.floor(t * count);
62              return ((raw % count) + count) % count;
63            })();
64      const activePattern = BRAILLE_PHASES[phaseIndex]!;
65      const key = `${row},${col}`;
66      const inPattern = activePattern.has(key);
67 
68// … truncated