Glyph Cycle

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