Nova Wheel

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 DotmCircular5Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.08;
15const BLADE_OPACITY = 0.94;
16const HALO_OPACITY = 0.34;
17 
18export function DotmCircular5({
19  speed = 1.7,
20  animated = true,
21  hoverAnimated = false,
22  ...rest
23}: DotmCircular5Props) {
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: 1650,
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 radius = Math.hypot(x, y);
45      const angle = Math.atan2(y, x);
46      const theta = (reducedMotion || p === "idle" ? 0 : phase) * Math.PI * 2;
47      const pinwheel = Math.cos(angle * 4 - theta * 2.2);
48      const radialGate = Math.sin(radius * 2.1 - theta * 1.25);
49 
50      if (radius < 0.6) {
51        return { style: { opacity: 0.66 } };
52      }
53 
54      if (pinwheel > 0.48 && radialGate > -0.25) {
55        return { style: { opacity: BLADE_OPACITY } };
56      }
57 
58      if (pinwheel > 0.1) {
59        return { style: { opacity: HALO_OPACITY } };
60      }
61 
62      return { style: { opacity: BASE_OPACITY } };
63    };
64  }, [reducedMotion, phase]);
65 
66  return (
67    <DotMatrixBase
68      {...rest}
69      size={rest.size ?? 36}
70      dotSize={rest.dotSize ?? 5}
71      speed={speed}
72      pattern="full"
73      animated={animated}
74      phase={matrixPhase}
75      onMouseEnter={onMouseEnter}
76      onMouseLeave={onMouseLeave}
77      reducedMotion={reducedMotion}
78      animationResolver={resolver}
79    />
80  );
81}