Wing Metronome

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 { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/cellforge-core";
11import { useCyclePhase } from "@/components/ui/cellforge-hooks";
12import { usePrefersReducedMotion } from "@/components/ui/cellforge-hooks";
13import type { CellForgeCommonProps } from "@/components/ui/cellforge-core";
14 
15export type CellAngle8Props = CellForgeCommonProps;
16 
17const MATRIX_SIZE = 7;
18 
19const BASE_OPACITY = 0.05;
20const MID_OPACITY = 0.42;
21const HIGH_OPACITY = 0.96;
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 
36const LEFT_WING = new Set(["2,2", "3,1", "4,0", "4,2"]);
37const RIGHT_WING = new Set(["2,4", "3,5", "4,4", "4,6"]);
38 
39function isWithinTriangleMask(row: number, col: number): boolean {
40  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {
41    return false;
42  }
43 
44  return TRIANGLE_CELLS.has(`${row},${col}`);
45}
46 
47type Sector = "left" | "right" | "spine" | "none";
48 
49function sectorForCell(row: number, col: number): Sector {
50  const key = `${row},${col}`;
51  if (row === 1 && col === 3) {
52    return "spine";
53  }
54  if (row === 3 && col === 3) {
55    return "spine";
56  }
57  if (LEFT_WING.has(key)) {
58    return "left";
59  }
60  if (RIGHT_WING.has(key)) {
61    return "right";
62  }
63  return "none";
64}
65 
66/**
67 * Alternating emphasis on the two lower wings (split by the apex column), with the apex and
68 * heart dot brightest when energy crosses the middle (both sides briefly equal).
69 */
70function opacityForCell(row: number, col: number, phase: number): number {
71  const p = 0.5 - 0.5 * Math.cos(phase * Math.PI * 2);
72  const leftLift = p * p;
73  const rightLift = (1 - p) * (1 - p);
74  const crossover = Math.max(0, 1 - 4 * (p - 0.5) * (p - 0.5));
75 
76  const sector = sectorForCell(row, col);
77  if (sector === "none") {
78    return 0;
79  }
80 
81  if (sector === "spine") {
82    if (row === 1 && col === 3) {
83      const apex = MID_OPACITY + crossover * (HIGH_OPACITY - MID_OPACITY) * 0.95;
84      return Math.min(HIGH_OPACITY, apex);
85    }
86// … truncated