Checker Shift

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 DotmCircular17Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.07;
15const MID_OPACITY = 0.34;
16const HIGH_OPACITY = 0.95;
17/** Discrete checker frames per loop (must stay integer for `(row + col + t) % 2`). */
18const CHECKER_STEPS = 4;
19 
20export function DotmCircular17({
21  speed = 1.55,
22  animated = true,
23  hoverAnimated = false,
24  ...rest
25}: DotmCircular17Props) {
26  const reducedMotion = usePrefersReducedMotion();
27  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
28    animated: Boolean(animated && !reducedMotion),
29    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
30    speed
31  });
32  const animPhase = useCyclePhase({
33    active: !reducedMotion && matrixPhase !== "idle",
34    cycleMsBase: 1500,
35    speed
36  });
37 
38  const resolver = useMemo<DotAnimationResolver>(() => {
39    return ({ row, col, phase: dmxPhase }) => {
40      if (!isWithinCircularMask(row, col)) {
41        return { className: "dmx-inactive" };
42      }
43 
44      const holdStill = reducedMotion || dmxPhase === "idle";
45      const t = holdStill
46        ? 0
47        : Math.floor(animPhase * CHECKER_STEPS) % CHECKER_STEPS;
48      const parity = (row + col + t) % 2;
49      const brailleBias = col === 1 || col === 3;
50      const centerBias = row === 2 || col === 2;
51 
52      let opacity = BASE_OPACITY;
53      if (parity === 0 && brailleBias) {
54        opacity = HIGH_OPACITY;
55      } else if (parity === 0 || centerBias) {
56        opacity = MID_OPACITY;
57      } else if (brailleBias) {
58        opacity = 0.24;
59      }
60 
61      return { style: { opacity } };
62    };
63  }, [reducedMotion, animPhase]);
64 
65  return (
66    <DotMatrixBase
67      {...rest}
68      size={rest.size ?? 36}
69      dotSize={rest.dotSize ?? 5}
70      speed={speed}
71      pattern="full"
72      animated={animated}
73      phase={matrixPhase}
74      onMouseEnter={onMouseEnter}
75      onMouseLeave={onMouseLeave}
76      reducedMotion={reducedMotion}
77      animationResolver={resolver}
78    />
79  );
80}