Orbit Cell

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 CellOrbit19Props = CellForgeCommonProps;
13 
14const BASE_OPACITY = 0.07;
15const MID_OPACITY = 0.34;
16const HIGH_OPACITY = 0.95;
17 
18const ORBIT_POINTS: ReadonlyArray<readonly [number, number]> = [
19  [1, 1],
20  [1, 2],
21  [1, 3],
22  [2, 3],
23  [3, 3],
24  [3, 2],
25  [3, 1],
26  [2, 1]
27];
28 
29export function CellOrbit19({
30  speed = 1.6,
31  animated = true,
32  hoverAnimated = false,
33  ...rest
34}: CellOrbit19Props) {
35  const reducedMotion = usePrefersReducedMotion();
36  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useCellForgePhases({
37    animated: Boolean(animated && !reducedMotion),
38    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
39    speed
40  });
41  const phase = useCyclePhase({
42    active: !reducedMotion && matrixPhase !== "idle",
43    cycleMsBase: 1280,
44    speed
45  });
46 
47  const resolver = useMemo<DotAnimationResolver>(() => {
48    return ({ row, col, phase: p }) => {
49      if (!isWithinCircularMask(row, col)) {
50        return { className: "dmx-inactive" };
51      }
52 
53      const t =
54        reducedMotion || p === "idle"
55          ? 0
56          : Math.floor((phase) * ORBIT_POINTS.length) % ORBIT_POINTS.length;
57      const [headRow, headCol] = ORBIT_POINTS[t]!;
58      const [tailRow, tailCol] = ORBIT_POINTS[(t + ORBIT_POINTS.length - 1) % ORBIT_POINTS.length]!;
59 
60      let opacity = BASE_OPACITY;
61      if (row === headRow && col === headCol) {
62        opacity = HIGH_OPACITY;
63      } else if (row === tailRow && col === tailCol) {
64        opacity = 0.62;
65      } else if ((col === 1 || col === 3) && (row === 1 || row === 2 || row === 3)) {
66        opacity = MID_OPACITY;
67      } else if (row === 2 && col === 2) {
68        opacity = 0.2;
69      }
70 
71      return { style: { opacity } };
72    };
73  }, [reducedMotion, phase]);
74 
75  return (
76    <CellForgeBase
77      {...rest}
78      size={rest.size ?? 36}
79      dotSize={rest.dotSize ?? 5}
80      speed={speed}
81      pattern="full"
82      animated={animated}
83      phase={matrixPhase}
84      onMouseEnter={onMouseEnter}
85// … truncated