Plasma Veil

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 { rowMajorIndex } from "@/components/ui/dotmatrix-core";
9import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
10import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks";
11import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
12 
13export type DotmCircular3Props = DotMatrixCommonProps;
14 
15const STEP_COUNT = 24;
16const BASE_OPACITY = 0.08;
17const RING_BASE_OPACITY = 0.2;
18const CORE_OPACITY = 0.16;
19const COMET_TAIL = [1, 0.78, 0.56, 0.36, 0.22] as const;
20const SECONDARY_COMET_SCALE = 0.72;
21 
22const CIRCULAR_RING_PATH: readonly number[] = [
23  rowMajorIndex(0, 1),
24  rowMajorIndex(0, 2),
25  rowMajorIndex(0, 3),
26  rowMajorIndex(1, 4),
27  rowMajorIndex(2, 4),
28  rowMajorIndex(3, 4),
29  rowMajorIndex(4, 3),
30  rowMajorIndex(4, 2),
31  rowMajorIndex(4, 1),
32  rowMajorIndex(3, 0),
33  rowMajorIndex(2, 0),
34  rowMajorIndex(1, 0)
35];
36const LOOP_LEN = CIRCULAR_RING_PATH.length;
37 
38export function DotmCircular3({
39  speed = 1.6,
40  animated = true,
41  hoverAnimated = false,
42  ...rest
43}: DotmCircular3Props) {
44  const reducedMotion = usePrefersReducedMotion();
45  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
46    animated: Boolean(animated && !reducedMotion),
47    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
48    speed
49  });
50  const headStep = useSteppedCycle({
51    active: !reducedMotion && matrixPhase !== "idle",
52    cycleMsBase: 1650,
53    steps: STEP_COUNT,
54    speed,
55    idleStep: 6
56  });
57 
58  const resolver = useMemo<DotAnimationResolver>(() => {
59    return ({ index, row, col, phase }) => {
60      if (!isWithinCircularMask(row, col)) {
61        return { className: "dmx-inactive" };
62      }
63 
64      const pathOrder = CIRCULAR_RING_PATH.indexOf(index);
65      const isCore = row === 2 && col === 2;
66      if (pathOrder === -1) {
67        return { style: { opacity: isCore ? CORE_OPACITY : BASE_OPACITY } };
68      }
69 
70      if (reducedMotion || phase === "idle") {
71        return { style: { opacity: RING_BASE_OPACITY + (pathOrder / (LOOP_LEN - 1)) * 0.56 } };
72      }
73 
74      const leadA = Math.floor((headStep / STEP_COUNT) * LOOP_LEN) % LOOP_LEN;
75      const leadB = (leadA + Math.floor(LOOP_LEN / 2)) % LOOP_LEN;
76      let opacity = BASE_OPACITY;
77// … truncated