Tri Orbit

1"use client";
2 
3import type { CSSProperties } 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 { rowMajorIndex } from "@/components/ui/dotmatrix-core";
9import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
10import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
11 
12export type DotmCircular2Props = DotMatrixCommonProps;
13 
14const RING_PATH: readonly number[] = [
15  rowMajorIndex(0, 1),
16  rowMajorIndex(0, 2),
17  rowMajorIndex(0, 3),
18  rowMajorIndex(1, 4),
19  rowMajorIndex(2, 4),
20  rowMajorIndex(3, 4),
21  rowMajorIndex(4, 3),
22  rowMajorIndex(4, 2),
23  rowMajorIndex(4, 1),
24  rowMajorIndex(3, 0),
25  rowMajorIndex(2, 0),
26  rowMajorIndex(1, 0)
27];
28 
29const LOOP_LEN = RING_PATH.length;
30const BASE_OPACITY = 0.08;
31 
32export function DotmCircular2({
33  speed = 1.8,
34  animated = true,
35  hoverAnimated = false,
36  ...rest
37}: DotmCircular2Props) {
38  const reducedMotion = usePrefersReducedMotion();
39  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
40    animated: Boolean(animated && !reducedMotion),
41    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
42    speed
43  });
44  const resolver: DotAnimationResolver = ({ index, row, col, phase }) => {
45    if (!isWithinCircularMask(row, col)) {
46      return { className: "dmx-inactive" };
47    }
48 
49    const onRing = RING_PATH.indexOf(index);
50    if (onRing === -1) {
51      return { style: { opacity: row === 2 && col === 2 ? 0.18 : BASE_OPACITY } };
52    }
53 
54    if (reducedMotion || phase === "idle") {
55      return { style: { opacity: 0.28 + (onRing / (LOOP_LEN - 1)) * 0.58 } };
56    }
57 
58    return {
59      className: "dmx-circular2-ring",
60      style: { "--dmx-ring-order": onRing } as CSSProperties
61    };
62  };
63 
64  return (
65    <DotMatrixBase
66      {...rest}
67      size={rest.size ?? 36}
68      dotSize={rest.dotSize ?? 5}
69      speed={speed}
70      pattern="full"
71      animated={animated}
72      phase={matrixPhase}
73      onMouseEnter={onMouseEnter}
74      onMouseLeave={onMouseLeave}
75      reducedMotion={reducedMotion}
76      animationResolver={resolver}
77    />
78  );
79}