Rung Shift

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 CellOrbit14Props = CellForgeCommonProps;
13 
14const BASE_OPACITY = 0.07;
15const RUNG_OPACITY = 0.95;
16const SIDE_OPACITY = 0.56;
17const GHOST_OPACITY = 0.28;
18 
19export function CellOrbit14({
20  speed = 1.75,
21  animated = true,
22  hoverAnimated = false,
23  ...rest
24}: CellOrbit14Props) {
25  const reducedMotion = usePrefersReducedMotion();
26  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useCellForgePhases({
27    animated: Boolean(animated && !reducedMotion),
28    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
29    speed
30  });
31  const animPhase = useCyclePhase({
32    active: !reducedMotion && matrixPhase !== "idle",
33    cycleMsBase: 1650,
34    speed
35  });
36 
37  const resolver = useMemo<DotAnimationResolver>(() => {
38    return ({ row, col, phase }) => {
39      if (!isWithinCircularMask(row, col)) {
40        return { className: "dmx-inactive" };
41      }
42 
43      const x = col - 2;
44      const y = row - 2;
45      const phaseStep = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * 10);
46      const activeRow = (phaseStep + 5) % 5;
47      const rowDistance = Math.abs(row - activeRow);
48      const swing = Math.sin((phaseStep / 10) * Math.PI * 2 + y * 0.9);
49      const leftAnchor = Math.round(1 + swing);
50      const rightAnchor = 4 - leftAnchor;
51 
52      let opacity = BASE_OPACITY;
53      if (row === activeRow && col >= leftAnchor && col <= rightAnchor) {
54        opacity = RUNG_OPACITY;
55      } else if ((col === leftAnchor || col === rightAnchor) && rowDistance <= 1) {
56        opacity = SIDE_OPACITY;
57      } else if ((col === leftAnchor || col === rightAnchor) && rowDistance === 2) {
58        opacity = GHOST_OPACITY;
59      }
60 
61      if (x === 0 && y === 0 && rowDistance <= 1) {
62        return { style: { opacity: Math.max(opacity, SIDE_OPACITY) } };
63      }
64 
65      return { style: { opacity } };
66    };
67  }, [reducedMotion, animPhase]);
68 
69  return (
70    <CellForgeBase
71      {...rest}
72      size={rest.size ?? 36}
73      dotSize={rest.dotSize ?? 5}
74      speed={speed}
75// … truncated