Braille Beat

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 CellAngle6Props = CellForgeCommonProps;
16 
17const MATRIX_SIZE = 7;
18 
19/** Unicode / ISO braille dot numbering (same as `CellSquare9`). */
20const D1 = 0x01;
21const D2 = 0x02;
22const D3 = 0x04;
23const D4 = 0x08;
24const D5 = 0x10;
25const D6 = 0x20;
26 
27const LOW_OPACITY = 0.07;
28const MID_OPACITY = 0.36;
29const HIGH_OPACITY = 0.96;
30 
31/** Half-width of the traveling ramp (larger = softer, more “gradient” overlap). */
32const WAVE_HALF = 0.82;
33 
34/** Phase splits (must sum to 1): smooth intro wave, blink, fade reset. */
35const INTRO_PHASE = 0.52;
36const BLINK_PHASE = 0.36;
37const RESET_PHASE = 0.12;
38 
39const TRIANGLE_CELLS = new Set([
40  "1,3",
41  "2,2",
42  "2,4",
43  "3,1",
44  "3,3",
45  "3,5",
46  "4,0",
47  "4,2",
48  "4,4",
49  "4,6"
50]);
51 
52function smoothstep01(edge0: number, edge1: number, x: number): number {
53  if (edge1 <= edge0) {
54    return x >= edge1 ? 1 : 0;
55  }
56  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
57  return t * t * (3 - 2 * t);
58}
59 
60/** Six fills (D1..D6 order) from a single traveling wave front. */
61function waveFills(introT: number): number[] {
62  const waveCenter = -WAVE_HALF + introT * (5 + 2 * WAVE_HALF);
63  return [0, 1, 2, 3, 4, 5].map((i) =>
64    smoothstep01(i - WAVE_HALF, i + WAVE_HALF, waveCenter)
65  );
66}
67 
68function isWithinTriangleMask(row: number, col: number): boolean {
69  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {
70    return false;
71  }
72 
73  return TRIANGLE_CELLS.has(`${row},${col}`);
74}
75 
76/** Map triangle cell → braille bit (ISO 2×3), or null for accent cells. */
77function brailleBitForTriangle(row: number, col: number): number | null {
78  if (row === 2 && col === 2) {
79    return D1;
80  }
81  if (row === 3 && col === 1) {
82    return D2;
83  }
84  if (row === 4 && col === 0) {
85    return D3;
86  }
87  if (row === 2 && col === 4) {
88// … truncated