Glyph Cycle

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 CellOrbit20Props = CellForgeCommonProps;
13 
14const BASE_OPACITY = 0.07;
15const MID_OPACITY = 0.34;
16const HIGH_OPACITY = 0.95;
17 
18const GLYPHS: ReadonlyArray<ReadonlySet<string>> = [
19  new Set(["1,1", "2,1", "3,1", "1,3", "2,3", "3,3"]),
20  new Set(["1,1", "2,1", "3,1", "2,2", "1,3", "3,3"]),
21  new Set(["1,1", "1,2", "1,3", "3,1", "3,2", "3,3"]),
22  new Set(["1,1", "2,1", "3,1", "1,3", "2,2", "3,3"]),
23  new Set(["1,1", "2,2", "3,3", "1,3", "3,1"]),
24  new Set(["2,1", "1,2", "2,2", "3,2", "2,3"])
25];
26 
27export function CellOrbit20({
28  speed = 1.5,
29  animated = true,
30  hoverAnimated = false,
31  ...rest
32}: CellOrbit20Props) {
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: 1500,
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 t =
52        reducedMotion || phase === "idle"
53          ? 0
54          : Math.floor((animPhase) * GLYPHS.length) % GLYPHS.length;
55      const active = GLYPHS[t]!;
56      const previous = GLYPHS[(t + GLYPHS.length - 1) % GLYPHS.length]!;
57      const key = `${row},${col}`;
58 
59      let opacity = BASE_OPACITY;
60      if (active.has(key)) {
61        opacity = HIGH_OPACITY;
62      } else if (previous.has(key)) {
63        opacity = MID_OPACITY;
64      } else if (row === 2 && col === 2) {
65        opacity = 0.2;
66      }
67 
68      return { style: { opacity } };
69    };
70  }, [reducedMotion, animPhase]);
71 
72  return (
73    <CellForgeBase
74      {...rest}
75      size={rest.size ?? 36}
76      dotSize={rest.dotSize ?? 5}
77      speed={speed}
78      pattern="full"
79      animated={animated}
80// … truncated