Binary Bloom

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