Rail Scan

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 DotmCircular16Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 25;
15const BASE_OPACITY = 0.07;
16const MID_OPACITY = 0.32;
17const HIGH_OPACITY = 0.95;
18 
19export function DotmCircular16({
20  speed = 1.1,
21  animated = true,
22  hoverAnimated = false,
23  ...rest
24}: DotmCircular16Props) {
25  const reducedMotion = usePrefersReducedMotion();
26  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
27    animated: Boolean(animated && !reducedMotion),
28    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
29    speed
30  });
31  const animPhase = useCyclePhase({
32    active: !reducedMotion && matrixPhase !== "idle",
33    cycleMsBase: 1700,
34    speed
35  });
36 
37  const resolver = useMemo<DotAnimationResolver>(() => {
38    return ({ row, col, phase }) => {
39      if (!isWithinCircularMask(row, col)) {
40        return { className: "dmx-inactive" };
41      }
42 
43      // Discrete steps: animPhase is continuous in [0, 1); fractional `t` breaks row === checks.
44      const t =
45        reducedMotion || phase === "idle" ? 0 : Math.floor(animPhase * STEP_COUNT) % STEP_COUNT;
46      const activeRow = t % 5;
47      const activeBrailleCol = Math.floor((t / 5) * 2) % 2; // left or right cell rail
48      const railCol = activeBrailleCol === 0 ? 1 : 3;
49      const nearCol = activeBrailleCol === 0 ? 2 : 2;
50      const rowDistance = Math.abs(row - activeRow);
51 
52      let opacity = BASE_OPACITY;
53      if (col === railCol && rowDistance === 0) {
54        opacity = HIGH_OPACITY;
55      } else if (col === railCol && rowDistance === 1) {
56        opacity = MID_OPACITY;
57      } else if (col === nearCol && rowDistance === 0) {
58        opacity = 0.52;
59      } else if ((col === 1 || col === 3) && rowDistance === 2) {
60        opacity = 0.24;
61      }
62 
63      return { style: { opacity } };
64    };
65  }, [reducedMotion, animPhase]);
66 
67  return (
68    <DotMatrixBase
69      {...rest}
70      size={rest.size ?? 36}
71      dotSize={rest.dotSize ?? 5}
72      speed={speed}
73      pattern="full"
74      animated={animated}
75// … truncated