Lunar Breathe

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 DotmCircular11Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.07;
15const MID_OPACITY = 0.3;
16const HIGH_OPACITY = 0.95;
17 
18export function DotmCircular11({
19  speed = 1.65,
20  animated = true,
21  hoverAnimated = false,
22  ...rest
23}: DotmCircular11Props) {
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: 1850,
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 ring = Math.sqrt(x * x + y * y);
45      const t = reducedMotion || p === "idle" ? 0 : (phase) * Math.PI * 2;
46      const angle = Math.atan2(y, x);
47      const moonCenterX = Math.cos(t) * 0.7;
48      const moonCenterY = Math.sin(t) * 0.7;
49      const body = Math.hypot(x - moonCenterX, y - moonCenterY);
50      const cutCenterX = moonCenterX + Math.cos(t) * 0.82;
51      const cutCenterY = moonCenterY + Math.sin(t) * 0.82;
52      const cut = Math.hypot(x - cutCenterX, y - cutCenterY);
53      const rim = Math.max(0, 1 - Math.abs(body - 1.55) / 0.35);
54      const halo = Math.max(0, 1 - Math.acos(Math.cos(angle - t)) / 0.9);
55 
56      let opacity = BASE_OPACITY;
57      if (body < 1.55 && cut > 1.05) {
58        opacity = HIGH_OPACITY;
59      } else if (rim > 0.5) {
60        opacity = MID_OPACITY + rim * 0.22;
61      } else if (halo > 0.68 && ring > 1.2) {
62        opacity = MID_OPACITY;
63      }
64 
65      return { style: { opacity: Math.min(HIGH_OPACITY, opacity) } };
66    };
67  }, [reducedMotion, phase]);
68 
69  return (
70    <DotMatrixBase
71      {...rest}
72      size={rest.size ?? 36}
73// … truncated