Phase Orb

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 DotmCircular6Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.08;
15const ORBIT_OPACITY = 0.96;
16const NEAR_ORBIT_OPACITY = 0.34;
17 
18export function DotmCircular6({
19  speed = 1.6,
20  animated = true,
21  hoverAnimated = false,
22  ...rest
23}: DotmCircular6Props) {
24  const reducedMotion = usePrefersReducedMotion();
25  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
26    animated: Boolean(animated && !reducedMotion),
27    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
28    speed
29  });
30  const phase = useCyclePhase({
31    active: !reducedMotion && matrixPhase !== "idle",
32    cycleMsBase: 1700,
33    speed
34  });
35 
36  const resolver = useMemo<DotAnimationResolver>(() => {
37    return ({ row, col, phase: p }) => {
38      if (!isWithinCircularMask(row, col)) {
39        return { className: "dmx-inactive" };
40      }
41 
42      const x = col - 2;
43      const y = row - 2;
44      const t = reducedMotion || p === "idle" ? 0 : (phase) * Math.PI * 2;
45      const angle = Math.atan2(y, x);
46      const ring = Math.sqrt(x * x + y * y);
47 
48      const angularPhase = ((angle - t * 0.95 + Math.PI * 4) % (Math.PI * 2)) / ((Math.PI * 2) / 3);
49      const sectorPos = angularPhase - Math.floor(angularPhase);
50      const sectorPulse = Math.max(0, 1 - Math.abs(sectorPos - 0.5) * 2);
51      const ringPhase = 0.5 + 0.5 * Math.cos(ring * 3.2 + t * 1.7);
52      const score = 0.74 * sectorPulse + 0.26 * ringPhase;
53 
54      let opacity = BASE_OPACITY;
55      if (score > 0.84) {
56        opacity = ORBIT_OPACITY;
57      } else if (score > 0.63) {
58        opacity = 0.62;
59      } else if (score > 0.44) {
60        opacity = NEAR_ORBIT_OPACITY;
61      }
62 
63      if (x === 0 && y === 0) {
64        return { style: { opacity: Math.max(opacity, NEAR_ORBIT_OPACITY) } };
65      }
66      return { style: { opacity } };
67    };
68  }, [reducedMotion, phase]);
69 
70  return (
71    <DotMatrixBase
72      {...rest}
73      size={rest.size ?? 36}
74      dotSize={rest.dotSize ?? 5}
75      speed={speed}
76      pattern="full"
77// … truncated