Binary Bloom

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 DotmCircular10Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 30;
15const BASE_OPACITY = 0.06;
16const LOW_OPACITY = 0.2;
17const MID_OPACITY = 0.48;
18const HIGH_OPACITY = 0.94;
19 
20function moduloDistance(a: number, b: number, mod: number): number {
21  const raw = Math.abs(a - b);
22  return Math.min(raw, mod - raw);
23}
24 
25export function DotmCircular10({
26  speed = 1.75,
27  animated = true,
28  hoverAnimated = false,
29  ...rest
30}: DotmCircular10Props) {
31  const reducedMotion = usePrefersReducedMotion();
32  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
33    animated: Boolean(animated && !reducedMotion),
34    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
35    speed
36  });
37  const animPhase = useCyclePhase({
38    active: !reducedMotion && matrixPhase !== "idle",
39    cycleMsBase: 1600,
40    speed
41  });
42 
43  const resolver = useMemo<DotAnimationResolver>(() => {
44    return ({ row, col, phase }) => {
45      if (!isWithinCircularMask(row, col)) {
46        return { className: "dmx-inactive" };
47      }
48 
49      const x = col - 2;
50      const y = row - 2;
51      const ring = Math.round(Math.sqrt(x * x + y * y));
52      const tick = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * 10);
53      const cellCode = (row * 3 + col * 5 + ring * 2) % 10;
54      const d = moduloDistance(cellCode, tick, 10);
55      const parityGate = (row + col + tick) % 2 === 0;
56 
57      let opacity = BASE_OPACITY;
58      if (d === 0) {
59        opacity = HIGH_OPACITY;
60      } else if (d === 1) {
61        opacity = MID_OPACITY;
62      } else if (d === 2 || parityGate) {
63        opacity = LOW_OPACITY;
64      }
65 
66      if (x === 0 && y === 0) {
67        return { style: { opacity: Math.max(opacity, MID_OPACITY) } };
68      }
69 
70      return { style: { opacity } };
71    };
72  }, [reducedMotion, animPhase]);
73 
74  return (
75    <DotMatrixBase
76      {...rest}
77      size={rest.size ?? 36}
78      dotSize={rest.dotSize ?? 5}
79      speed={speed}
80      pattern="full"
81      animated={animated}
82// … truncated