Chevron March

1"use client";
2 
3import type { CSSProperties } from "react";
4 
5import { cx } from "@/components/ui/dotmatrix-core";
6import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core";
7import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core";
8import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core";
9import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core";
10import { getPatternIndexes } from "@/components/ui/dotmatrix-core";
11import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks";
12import { useCyclePhase } from "@/components/ui/dotmatrix-hooks";
13import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
14import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
15 
16export type DotmHex6Props = DotMatrixCommonProps;
17 
18const ROW_COUNTS = [3, 4, 5, 4, 3] as const;
19const BASE_OPACITY = 0.1;
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}
26const BAND_COUNT = 4;
27 
28function clamp01(n: number | undefined) {
29  if (n == null || !Number.isFinite(n)) {
30    return;
31  }
32  return Math.min(1, Math.max(0, n));
33}
34 
35function wrappedDistance(a: number, b: number): number {
36  const diff = Math.abs(a - b) % BAND_COUNT;
37  return Math.min(diff, BAND_COUNT - diff);
38}
39 
40function opacityForCell(row: number, col: number, phase: number): number {
41  const count = ROW_COUNTS[row] ?? 1;
42  const x = col - (count - 1) / 2;
43  const y = row - 2;
44  const downwardChevron = y + Math.abs(x) * 0.92 + 1.55;
45  const upwardChevron = -y + Math.abs(x) * 0.92 + 1.55;
46  const head = phase * BAND_COUNT;
47  const primary = Math.max(0, 1 - wrappedDistance(downwardChevron, head) / 0.78);
48  const secondary = Math.max(0, 1 - wrappedDistance(upwardChevron, head + BAND_COUNT / 2) / 0.92);
49  const centerLift = row === 2 && col === 2 ? 0.18 : 0;
50 
51  return Math.min(HIGH_OPACITY, BASE_OPACITY + primary * 0.78 + secondary * 0.38 + centerLift);
52}
53 
54export function DotmHex6({
55  size = 34,
56  dotSize = 5,
57  color = "currentColor",
58  colorPreset,
59  ariaLabel = "Loading",
60  className,
61  muted = false,
62  bloom = false,
63  halo = 0,
64  dotClassName,
65  dotShape = "circle",
66  speed = 1.55,
67  animated = true,
68  hoverAnimated = false,
69  pattern = "full",
70  cellPadding,
71  boxSize,
72  minSize,
73  opacityBase,
74  opacityMid,
75  opacityPeak
76}: DotmHex6Props) {
77// … truncated