Row Sweep

1"use client";
2 
3import type { CSSProperties } from "react";
4 
5import { cx } from "@/components/ui/cellforge-core";
6import { resolveDmxColorTokens } from "@/components/ui/cellforge-core";
7import { useCellForgePhases } from "@/components/ui/cellforge-hooks";
8import { styleOpacity, stylePx } from "@/components/ui/cellforge-core";
9import { remapOpacityToTriplet } from "@/components/ui/cellforge-core";
10import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/cellforge-core";
11import { usePrefersReducedMotion } from "@/components/ui/cellforge-hooks";
12import { useSteppedCycle } from "@/components/ui/cellforge-hooks";
13import type { CellForgeCommonProps } from "@/components/ui/cellforge-core";
14 
15export type CellAngle5Props = CellForgeCommonProps;
16 
17const MATRIX_SIZE = 7;
18const STEP_COUNT = 42;
19const BASE_OPACITY = 0.06;
20const MID_OPACITY = 0.3;
21const HIGH_OPACITY = 0.92;
22 
23const TRIANGLE_CELLS = new Set([
24  "1,3",
25  "2,2",
26  "2,4",
27  "3,1",
28  "3,3",
29  "3,5",
30  "4,0",
31  "4,2",
32  "4,4",
33  "4,6"
34]);
35 
36function isWithinTriangleMask(row: number, col: number): boolean {
37  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {
38    return false;
39  }
40 
41  return TRIANGLE_CELLS.has(`${row},${col}`);
42}
43 
44export function CellAngle5({
45  size = 30,
46  dotSize = 6.5,
47  color = "currentColor",
48  colorPreset,
49  ariaLabel = "Loading",
50  className,
51  muted = false,
52  bloom = false,
53  halo = 0,
54  dotClassName,
55  dotShape = "circle",
56  speed = 1.8,
57  animated = true,
58  hoverAnimated = false,
59  cellPadding,
60  opacityBase,
61  opacityMid,
62  opacityPeak
63}: CellAngle5Props) {
64  const reducedMotion = usePrefersReducedMotion();
65  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useCellForgePhases({
66    animated: Boolean(animated && !reducedMotion),
67    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
68    speed
69  });
70  const step = useSteppedCycle({
71    active: !reducedMotion && matrixPhase !== "idle",
72    cycleMsBase: 1700,
73    steps: STEP_COUNT,
74    speed,
75  });
76 
77  const frame = reducedMotion || matrixPhase === "idle" ? 0 : step;
78  const progress = frame / STEP_COUNT;
79  const pingPong = 0.5 - 0.5 * Math.cos(progress * Math.PI * 2);
80  const scanRow = 1 + pingPong * 3;
81 
82  const gap =
83    cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1)));
84  const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1);
85  const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset);
86// … truncated