Glyph Cluster

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