Arc Beacon

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 { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
9import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks";
10import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
11 
12export type DotmCircular12Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 36;
15const BASE_OPACITY = 0.06;
16const MID_OPACITY = 0.3;
17const ARC_OPACITY = 0.96;
18 
19export function DotmCircular12({
20  speed = 1.7,
21  animated = true,
22  hoverAnimated = false,
23  ...rest
24}: DotmCircular12Props) {
25  const reducedMotion = usePrefersReducedMotion();
26  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
27    animated: Boolean(animated && !reducedMotion),
28    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
29    speed
30  });
31  const step = useSteppedCycle({
32    active: !reducedMotion && matrixPhase !== "idle",
33    cycleMsBase: 1700,
34    steps: STEP_COUNT,
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 ring = Math.sqrt(x * x + y * y);
47      const angle = Math.atan2(y, x);
48      const t = reducedMotion || phase === "idle" ? 0 : (step / STEP_COUNT) * Math.PI * 2;
49      const stepBand = Math.floor((step / STEP_COUNT) * 8) % 8;
50      const targetAngle = stepBand * (Math.PI / 4);
51      const angleDelta = Math.acos(Math.cos(angle - targetAngle));
52      const beam = Math.max(0, 1 - angleDelta / 0.42);
53      const oppositeBeam = Math.max(0, 1 - Math.acos(Math.cos(angle - (targetAngle + Math.PI))) / 0.62);
54      const spokePulse = Math.max(0, 1 - Math.abs(Math.abs(x) - Math.abs(y)) / 0.35);
55      const ringTier = ring < 1 ? 0 : ring < 2 ? 1 : 2;
56 
57      let opacity = BASE_OPACITY;
58      if (beam > 0.78 && ringTier >= 1) {
59        opacity = ARC_OPACITY;
60      } else if (beam > 0.48) {
61        opacity = 0.62;
62      } else if (oppositeBeam > 0.52 && ringTier === 2) {
63        opacity = MID_OPACITY;
64      } else if (spokePulse > 0.9 && ringTier > 0) {
65        opacity = MID_OPACITY;
66      }
67 
68      if (x === 0 && y === 0) {
69// … truncated