Pulse Pair

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 DotmCircular18Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.07;
15const MID_OPACITY = 0.33;
16const HIGH_OPACITY = 0.95;
17 
18export function DotmCircular18({
19  speed = 1.75,
20  animated = true,
21  hoverAnimated = false,
22  ...rest
23}: DotmCircular18Props) {
24  const reducedMotion = usePrefersReducedMotion();
25  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
26    animated: Boolean(animated && !reducedMotion),
27    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
28    speed
29  });
30  const animPhase = useCyclePhase({
31    active: !reducedMotion && matrixPhase !== "idle",
32    cycleMsBase: 1550,
33    speed
34  });
35 
36  const resolver = useMemo<DotAnimationResolver>(() => {
37    return ({ row, col, phase }) => {
38      if (!isWithinCircularMask(row, col)) {
39        return { className: "dmx-inactive" };
40      }
41 
42      const t = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * 6);
43      const pulseRow = t % 3; // 0..2
44      const topRow = pulseRow;
45      const bottomRow = 4 - pulseRow;
46      const pairCols = [1, 3];
47 
48      let opacity = BASE_OPACITY;
49      if ((row === topRow || row === bottomRow) && pairCols.includes(col)) {
50        opacity = HIGH_OPACITY;
51      } else if ((row === topRow || row === bottomRow) && col === 2) {
52        opacity = 0.58;
53      } else if ((row === 2 || col === 2) && pairCols.includes(col) === false) {
54        opacity = MID_OPACITY;
55      } else if (pairCols.includes(col)) {
56        opacity = 0.22;
57      }
58 
59      return { style: { opacity } };
60    };
61  }, [reducedMotion, animPhase]);
62 
63  return (
64    <DotMatrixBase
65      {...rest}
66      size={rest.size ?? 36}
67      dotSize={rest.dotSize ?? 5}
68      speed={speed}
69      pattern="full"
70      animated={animated}
71      phase={matrixPhase}
72      onMouseEnter={onMouseEnter}
73      onMouseLeave={onMouseLeave}
74      reducedMotion={reducedMotion}
75      animationResolver={resolver}
76    />
77  );
78}