Radar Arc

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 DotmCircular4Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.08;
15const SWEEP_OPACITY = 0.96;
16const NEAR_SWEEP_OPACITY = 0.36;
17const RING_OPACITY = 0.22;
18 
19export function DotmCircular4({
20  speed = 1.55,
21  animated = true,
22  hoverAnimated = false,
23  ...rest
24}: DotmCircular4Props) {
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 phase = useCyclePhase({
32    active: !reducedMotion && matrixPhase !== "idle",
33    cycleMsBase: 1800,
34    speed
35  });
36 
37  const resolver = useMemo<DotAnimationResolver>(() => {
38    return ({ row, col, phase: p }) => {
39      if (!isWithinCircularMask(row, col)) {
40        return { className: "dmx-inactive" };
41      }
42 
43      const centerRow = row - 2;
44      const centerCol = col - 2;
45      const radius = Math.hypot(centerRow, centerCol);
46      const theta = (reducedMotion || p === "idle" ? 0 : phase) * Math.PI * 2;
47      const sweepX = Math.cos(theta);
48      const sweepY = Math.sin(theta);
49      const projection = centerCol * sweepX + centerRow * sweepY;
50      const perpendicular = Math.abs(centerCol * sweepY - centerRow * sweepX);
51 
52      if (radius < 0.5) {
53        return { style: { opacity: 0.62 } };
54      }
55 
56      if (projection > 0.3 && perpendicular < 0.55) {
57        return { style: { opacity: SWEEP_OPACITY } };
58      }
59 
60      if (projection > 0 && perpendicular < 1.15) {
61        return { style: { opacity: NEAR_SWEEP_OPACITY } };
62      }
63 
64      if (radius > 1.6 && radius < 2.3) {
65        return { style: { opacity: RING_OPACITY } };
66      }
67 
68      return { style: { opacity: BASE_OPACITY } };
69    };
70  }, [reducedMotion, phase]);
71 
72  return (
73    <DotMatrixBase
74      {...rest}
75      size={rest.size ?? 36}
76      dotSize={rest.dotSize ?? 5}
77      speed={speed}
78      pattern="full"
79      animated={animated}
80// … truncated