Shelf Descent

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 CellAngle11Props = CellForgeCommonProps;
16 
17const MATRIX_SIZE = 7;
18 
19const BASE_OPACITY = 0.13;
20const MID_OPACITY = 0.36;
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 APEX_ROW = 1;
37const APEX_COL = 3;
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 
47function manhattanFromApex(row: number, col: number): number {
48  return Math.abs(row - APEX_ROW) + Math.abs(col - APEX_COL);
49}
50 
51function smoothstep01(edge0: number, edge1: number, x: number): number {
52  if (edge1 <= edge0) {
53    return x >= edge1 ? 1 : 0;
54  }
55  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
56  return t * t * (3 - 2 * t);
57}
58 
59/**
60 * Bright bands move down the triangle by tier: phase keys on Manhattan distance from the apex,
61 * not the heart cell — reads as stacked horizontal “shelves” lighting in sequence.
62 */
63function opacityForCell(row: number, col: number, phase: number): number {
64  const tier = manhattanFromApex(row, col);
65  const maxTier = 6;
66  const t = phase * Math.PI * 2;
67  const u = (tier / maxTier) * Math.PI * 2 - t;
68  const wave = 0.5 + 0.5 * Math.cos(u);
69  const crest = smoothstep01(0.28, 0.98, wave);
70  let opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY);
71 
72  if (row === 3 && col === 3) {
73    opacity = Math.max(opacity, MID_OPACITY + crest * 0.35);
74  }
75 
76  return Math.min(HIGH_OPACITY, opacity);
77}
78 
79export function CellAngle11({
80  size = 30,
81  dotSize = 6.5,
82  color = "currentColor",
83  colorPreset,
84  ariaLabel = "Loading",
85  className,
86  muted = false,
87  bloom = false,
88// … truncated