Orbit Cell

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 DotmCircular19Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 24;
15const BASE_OPACITY = 0.07;
16const MID_OPACITY = 0.34;
17const HIGH_OPACITY = 0.95;
18 
19const ORBIT_POINTS: ReadonlyArray<readonly [number, number]> = [
20  [1, 1],
21  [1, 2],
22  [1, 3],
23  [2, 3],
24  [3, 3],
25  [3, 2],
26  [3, 1],
27  [2, 1]
28];
29 
30export function DotmCircular19({
31  speed = 1.6,
32  animated = true,
33  hoverAnimated = false,
34  ...rest
35}: DotmCircular19Props) {
36  const reducedMotion = usePrefersReducedMotion();
37  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
38    animated: Boolean(animated && !reducedMotion),
39    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
40    speed
41  });
42  const phase = useCyclePhase({
43    active: !reducedMotion && matrixPhase !== "idle",
44    cycleMsBase: 1280,
45    speed
46  });
47 
48  const resolver = useMemo<DotAnimationResolver>(() => {
49    return ({ row, col, phase: p }) => {
50      if (!isWithinCircularMask(row, col)) {
51        return { className: "dmx-inactive" };
52      }
53 
54      const t =
55        reducedMotion || p === "idle"
56          ? 0
57          : Math.floor((phase) * ORBIT_POINTS.length) % ORBIT_POINTS.length;
58      const [headRow, headCol] = ORBIT_POINTS[t]!;
59      const [tailRow, tailCol] = ORBIT_POINTS[(t + ORBIT_POINTS.length - 1) % ORBIT_POINTS.length]!;
60 
61      let opacity = BASE_OPACITY;
62      if (row === headRow && col === headCol) {
63        opacity = HIGH_OPACITY;
64      } else if (row === tailRow && col === tailCol) {
65        opacity = 0.62;
66      } else if ((col === 1 || col === 3) && (row === 1 || row === 2 || row === 3)) {
67        opacity = MID_OPACITY;
68      } else if (row === 2 && col === 2) {
69        opacity = 0.2;
70      }
71 
72      return { style: { opacity } };
73    };
74  }, [reducedMotion, phase]);
75 
76  return (
77    <DotMatrixBase
78      {...rest}
79      size={rest.size ?? 36}
80      dotSize={rest.dotSize ?? 5}
81      speed={speed}
82      pattern="full"
83      animated={animated}
84      phase={matrixPhase}
85// … truncated