Liquid Vortex

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 { styleOpacity, stylePx } from "@/components/ui/cellforge-core";
8import { remapOpacityToTriplet } from "@/components/ui/cellforge-core";
9import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/cellforge-core";
10import { getPatternIndexes } from "@/components/ui/cellforge-core";
11import { useCellForgePhases } from "@/components/ui/cellforge-hooks";
12import { useCyclePhase } from "@/components/ui/cellforge-hooks";
13import { usePrefersReducedMotion } from "@/components/ui/cellforge-hooks";
14import type { CellForgeCommonProps } from "@/components/ui/cellforge-core";
15 
16export type CellLattice10Props = CellForgeCommonProps;
17 
18const ROW_COUNTS = [3, 4, 5, 4, 3] as const;
19const BASE_OPACITY = 0.09;
20const HIGH_OPACITY = 0.98;
21const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2;
22 
23function hexPatternIndex(row: number, rowCount: number, col: number): number {
24  return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col;
25}
26 
27function clamp01(n: number | undefined) {
28  if (n == null || !Number.isFinite(n)) {
29    return;
30  }
31  return Math.min(1, Math.max(0, n));
32}
33 
34function pointForCell(row: number, col: number): { x: number; y: number; angle: number; radius: number } {
35  const count = ROW_COUNTS[row] ?? 1;
36  const x = col - (count - 1) / 2;
37  const y = (row - 2) * HEX_ROW_PITCH_RATIO;
38  return {
39    x,
40    y,
41    angle: Math.atan2(y, x),
42    radius: Math.sqrt(x * x + y * y)
43  };
44}
45 
46function ripple(value: number, width: number): number {
47  const wrapped = ((value % 1) + 1) % 1;
48  const distance = Math.min(wrapped, 1 - wrapped);
49  return Math.max(0, 1 - distance / width);
50}
51 
52function opacityForCell(row: number, col: number, phase: number): number {
53  const { x, y, radius } = pointForCell(row, col);
54  const lensCenter = Math.sin(phase * Math.PI * 2) * 1.15;
55  const lensDistance = Math.abs(lensCenter - x * 0.88 - y * 0.16);
56  const liquidLens = Math.max(0, 1 - lensDistance / 0.78);
57 
58  const wakeFront = ripple(phase + x * 0.12 - y * 0.045 + radius * 0.07, 0.16);
59  const wakeBack = ripple(phase + 0.34 + x * 0.09 + y * 0.035 + radius * 0.05, 0.2) * 0.34;
60  const verticalCompression =
61    Math.max(0, 1 - Math.abs(Math.cos(phase * Math.PI * 2) * 1.18 - y * 1.25) / 1.1) * 0.18;
62  const shellSheen =
63// … truncated