Star Compass

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 DotmCircular9Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 36;
15const BASE_OPACITY = 0.07;
16const MID_OPACITY = 0.28;
17const STAR_OPACITY = 0.96;
18 
19export function DotmCircular9({
20  speed = 5.55,
21  animated = true,
22  hoverAnimated = false,
23  ...rest
24}: DotmCircular9Props) {
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: 1900,
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 cardinalCenters = [0, Math.PI / 2, Math.PI, -Math.PI / 2];
50      const beaconIndex = Math.floor((step / STEP_COUNT) * cardinalCenters.length) % cardinalCenters.length;
51      const activeCenter = cardinalCenters[beaconIndex]!;
52      const oppositeCenter = cardinalCenters[(beaconIndex + 2) % cardinalCenters.length]!;
53 
54      const distanceToActive = Math.acos(Math.cos(angle - activeCenter));
55      const distanceToOpposite = Math.acos(Math.cos(angle - oppositeCenter));
56      const activeBeam = Math.max(0, 1 - distanceToActive / 0.5);
57      const oppositeBeam = Math.max(0, 1 - distanceToOpposite / 0.65);
58      const ringTier = Math.round(ring);
59 
60      let opacity = BASE_OPACITY;
61      if (activeBeam > 0.8 && ringTier >= 2) {
62        opacity = STAR_OPACITY;
63      } else if (activeBeam > 0.45 && ringTier >= 1) {
64        opacity = 0.62;
65// … truncated