Updraft

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 CellAngle16Props = CellForgeCommonProps;
16 
17const MATRIX_SIZE = 7;
18 
19const BASE_OPACITY = 0.1;
20const MID_OPACITY = 0.36;
21const HIGH_OPACITY = 0.96;
22/**
23 * Inverted-V coordinate: same row is lower on the left/right flanks than in the center column,
24 * so a moving front forms a V rising toward the apex (not a flat row band like Row Sweep).
25 */
26const WING = 0.52;
27const FRONT_SIGMA = 0.88;
28 
29const TRIANGLE_CELLS = new Set([
30  "1,3",
31  "2,2",
32  "2,4",
33  "3,1",
34  "3,3",
35  "3,5",
36  "4,0",
37  "4,2",
38  "4,4",
39  "4,6"
40]);
41 
42function isWithinTriangleMask(row: number, col: number): boolean {
43  if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) {
44    return false;
45  }
46 
47  return TRIANGLE_CELLS.has(`${row},${col}`);
48}
49 
50function smoothstep01(edge0: number, edge1: number, x: number): number {
51  if (edge1 <= edge0) {
52    return x >= edge1 ? 1 : 0;
53  }
54  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
55  return t * t * (3 - 2 * t);
56}
57 
58/**
59 * Brightness peaks along a V-shaped isopleth: `row - wing * |col - 3|`.
60 * The "front" oscillates in that space, so the highlight rides up the two lower legs
61 * and meets at the top — convective lift, not a horizontal scanline.
62 */
63function opacityForCell(row: number, col: number, phase: number): number {
64  const t = phase * Math.PI * 2;
65  const v = row - WING * Math.abs(col - 3);
66  const front = 1.85 + 1.4 * Math.sin(t);
67  const d = Math.abs(v - front);
68  const glowRaw = Math.exp(-(d * d) / (FRONT_SIGMA * FRONT_SIGMA));
69  const glow = smoothstep01(0.04, 0.98, glowRaw);
70  let opacity = BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY);
71 
72  if (row === 3 && col === 3) {
73    opacity = Math.max(opacity, MID_OPACITY * 0.58 + glow * (HIGH_OPACITY - MID_OPACITY) * 0.48);
74  }
75 
76// … truncated