Rung 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 DotmCircular14Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 30;
15const BASE_OPACITY = 0.07;
16const RUNG_OPACITY = 0.95;
17const SIDE_OPACITY = 0.56;
18const GHOST_OPACITY = 0.28;
19 
20export function DotmCircular14({
21  speed = 1.75,
22  animated = true,
23  hoverAnimated = false,
24  ...rest
25}: DotmCircular14Props) {
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: 1650,
35    speed
36  });
37 
38  const resolver = useMemo<DotAnimationResolver>(() => {
39    return ({ row, col, phase }) => {
40      if (!isWithinCircularMask(row, col)) {
41        return { className: "dmx-inactive" };
42      }
43 
44      const x = col - 2;
45      const y = row - 2;
46      const phaseStep = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * 10);
47      const activeRow = (phaseStep + 5) % 5;
48      const rowDistance = Math.abs(row - activeRow);
49      const swing = Math.sin((phaseStep / 10) * Math.PI * 2 + y * 0.9);
50      const leftAnchor = Math.round(1 + swing);
51      const rightAnchor = 4 - leftAnchor;
52 
53      let opacity = BASE_OPACITY;
54      if (row === activeRow && col >= leftAnchor && col <= rightAnchor) {
55        opacity = RUNG_OPACITY;
56      } else if ((col === leftAnchor || col === rightAnchor) && rowDistance <= 1) {
57        opacity = SIDE_OPACITY;
58      } else if ((col === leftAnchor || col === rightAnchor) && rowDistance === 2) {
59        opacity = GHOST_OPACITY;
60      }
61 
62      if (x === 0 && y === 0 && rowDistance <= 1) {
63        return { style: { opacity: Math.max(opacity, SIDE_OPACITY) } };
64      }
65 
66      return { style: { opacity } };
67    };
68  }, [reducedMotion, animPhase]);
69 
70  return (
71    <DotMatrixBase
72      {...rest}
73      size={rest.size ?? 36}
74// … truncated