51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T779,"use client"; import type { CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { trBlPathNormFromIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver } from "@/components/ui/dotmatrix-core"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare1Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, index, row, col, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const path = trBlPathNormFromIndex(index); const slice = row + (4 - col); const parity = slice % 2; const style = { "--dmx-path": path, "--dmx-diagonal-parity": parity } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: parity === 0 ? 0.88 : 0.14 } }; } return { className: "dmx-diagonal-alt-sweep", style }; }; export function DotmSquare1({ speed = 1.1, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare1Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } 53:Tb540,"use client"; import type { CSSProperties } from "react"; import "@/components/dotmatrix-loader.css"; import type { ReactNode } from "react"; import { useEffect, useMemo, useRef } from "react"; import { useDotMatrixPhases, usePrefersReducedMotion, useCyclePhase } from "@/components/ui/dotmatrix-hooks"; export type MatrixPattern = "diamond" | "full" | "outline" | "rose" | "cross" | "rings"; export type DotShape = "circle" | "square" | "diamond" | "hearts"; export type DotMatrixPhase = "idle" | "collapse" | "hoverRipple" | "loadingRipple"; export type DotMatrixColorPreset = | "solid-theme" | "solid-mint" | "grad-sunset" | "grad-ocean" | "grad-neon" | "grad-aurora" | "grad-fire" | "grad-prism"; const DOT_MATRIX_COLOR_PRESETS: Record< DotMatrixColorPreset, { fill: string; glow: string; } > = { "solid-theme": { fill: "var(--color-dot-on)", glow: "var(--color-dot-on)" }, "solid-mint": { fill: "#34d399", glow: "#34d399" }, "grad-sunset": { fill: "linear-gradient(135deg, #ff5f6d 0%, #ffc371 52%, #ffe29a 100%)", glow: "#ff8b73" }, "grad-ocean": { fill: "linear-gradient(140deg, #00c6ff 0%, #0072ff 48%, #4facfe 100%)", glow: "#2f8fff" }, "grad-neon": { fill: "linear-gradient(145deg, #b4ff39 0%, #39ffb6 46%, #00d4ff 100%)", glow: "#59ffc8" }, "grad-aurora": { fill: "linear-gradient(145deg, #ff3cac 0%, #784ba0 45%, #2b86c5 100%)", glow: "#9c64bf" }, "grad-fire": { fill: "linear-gradient(145deg, #ff512f 0%, #dd2476 45%, #ffb347 100%)", glow: "#f96a5f" }, "grad-prism": { fill: "linear-gradient(145deg, #12c2e9 0%, #c471ed 45%, #f64f59 100%)", glow: "#9e7de8" } }; export function resolveDmxColorTokens(color: string, colorPreset?: DotMatrixColorPreset): { resolvedColor: string; dotFill: string; } { if (!colorPreset) { return { resolvedColor: color, dotFill: color }; } const preset = DOT_MATRIX_COLOR_PRESETS[colorPreset]; if (!preset) { return { resolvedColor: color, dotFill: color }; } return { resolvedColor: preset.glow, dotFill: preset.fill }; } export interface DotMatrixCommonProps { size?: number; dotSize?: number; color?: string; colorPreset?: DotMatrixColorPreset; speed?: number; ariaLabel?: string; className?: string; pattern?: MatrixPattern; muted?: boolean; /** * Adds a glow on dots from opacity 0.6 (weakest) through 1 (strongest), after remapping. */ bloom?: boolean; /** Uniform glow on every active dot (0…1); slightly wider falloff than selective `bloom`. */ halo?: number; animated?: boolean; hoverAnimated?: boolean; dotClassName?: string; dotShape?: DotShape; opacityBase?: number; opacityMid?: number; opacityPeak?: number; cellPadding?: number; boxSize?: number; minSize?: number; } export interface DotAnimationContext { index: number; row: number; col: number; distanceFromCenter: number; angleFromCenter: number; radiusNormalized: number; manhattanDistance: number; phase: DotMatrixPhase; isActive: boolean; reducedMotion: boolean; } export interface DotAnimationState { className?: string; style?: CSSProperties; } export type DotAnimationResolver = (ctx: DotAnimationContext) => DotAnimationState; export function cx(...values: Array): string { return values.filter(Boolean).join(" "); } export const MATRIX_SIZE = 5; const CENTER = Math.floor(MATRIX_SIZE / 2); const RANGE = Array.from({ length: MATRIX_SIZE }, (_, index) => index); const MAX_RADIUS = Math.hypot(CENTER, CENTER); export const FULL_INDEXES = RANGE.flatMap((row) => RANGE.map((col) => rowMajorIndex(row, col))); export const DIAMOND_INDEXES = FULL_INDEXES.filter((index) => { const { row, col } = indexToCoord(index); return Math.abs(row - CENTER) + Math.abs(col - CENTER) <= 2; }); export const OUTLINE_INDEXES = FULL_INDEXES.filter((index) => { const { row, col } = indexToCoord(index); return row === 0 || row === MATRIX_SIZE - 1 || col === 0 || col === MATRIX_SIZE - 1; }); export const CROSS_INDEXES = FULL_INDEXES.filter((index) => { const { row, col } = indexToCoord(index); return row === CENTER || col === CENTER; }); export const RINGS_INDEXES = FULL_INDEXES.filter((index) => { const { row, col } = indexToCoord(index); const radius = Math.hypot(row - CENTER, col - CENTER); return Math.round(radius) === 1 || Math.round(radius) === 2; }); export const ROSE_INDEXES = FULL_INDEXES.filter((index) => { const { row, col } = indexToCoord(index); const dx = col - CENTER; const dy = row - CENTER; const angle = Math.atan2(dy, dx); const radius = Math.hypot(dx, dy); const rose = Math.abs(Math.sin(3 * angle)); return rose > 0.6 && radius >= 1; }); const PATTERN_INDEXES: Record = { diamond: DIAMOND_INDEXES, full: FULL_INDEXES, outline: OUTLINE_INDEXES, rose: ROSE_INDEXES, cross: CROSS_INDEXES, rings: RINGS_INDEXES }; export function getPatternIndexes(pattern: MatrixPattern = "diamond"): number[] { return PATTERN_INDEXES[pattern]; } export function rowMajorIndex(row: number, col: number): number { return row * MATRIX_SIZE + col; } export function indexToCoord(index: number): { row: number; col: number } { return { row: Math.floor(index / MATRIX_SIZE), col: index % MATRIX_SIZE }; } export function distanceFromCenter(index: number): number { const { row, col } = indexToCoord(index); return Math.hypot(row - CENTER, col - CENTER); } export function rowDistance(index: number): number { const { row } = indexToCoord(index); return Math.abs(row - CENTER); } export function polarAngle(index: number): number { const { row, col } = indexToCoord(index); return Math.atan2(row - CENTER, col - CENTER); } export function normalizedRadius(index: number): number { const { row, col } = indexToCoord(index); return Math.hypot(row - CENTER, col - CENTER) / MAX_RADIUS; } export function manhattanDistance(index: number): number { const { row, col } = indexToCoord(index); return Math.abs(row - CENTER) + Math.abs(col - CENTER); } export function harmonicPhase(row: number, col: number, a: number, b: number): number { return Math.sin((row + 1) * a + (col + 1) * b); } export function lissajousOffset( row: number, col: number, amplitude = 2.25 ): { x: number; y: number; phase: number } { const x = Math.sin((row + 1) * 1.15 + (col + 1) * 2.2) * amplitude; const y = Math.cos((row + 1) * 2.45 + (col + 1) * 0.95) * amplitude; const phase = Math.abs(Math.sin((row + 1) * 0.7 + (col + 1) * 1.1)); return { x, y, phase }; } export function spiralOffset( angle: number, radiusNormalizedValue: number, amplitude = 2.8 ): { x: number; y: number; phase: number } { const spin = angle + radiusNormalizedValue * Math.PI * 2.1; const radius = radiusNormalizedValue * amplitude; const x = Math.cos(spin) * radius; const y = Math.sin(spin) * radius; const phase = Math.abs(Math.sin(spin * 0.5)); return { x, y, phase }; } export function isPrime(value: number): boolean { if (value <= 1) { return false; } if (value === 2) { return true; } if (value % 2 === 0) { return false; } const limit = Math.floor(Math.sqrt(value)); for (let divisor = 3; divisor <= limit; divisor += 2) { if (value % divisor === 0) { return false; } } return true; } const N = MATRIX_SIZE; const C = Math.floor(MATRIX_SIZE / 2); const CELLS = N * N; const MAX_TRBL = (N - 1) * 2; export function trBlPathNormFromIndex(index: number): number { const { row, col } = indexToCoord(index); return (row + (N - 1 - col)) / MAX_TRBL; } function buildSnakeOrderToIndexMap(): number[] { const pathOrder = new Array(CELLS); const key = (row: number, col: number) => rowMajorIndex(row, col); let t = 0; for (let row = 0; row < N; row += 1) { if (row % 2 === 0) { for (let col = 0; col < N; col += 1) { pathOrder[key(row, col)] = t; t += 1; } } else { for (let col = N - 1; col >= 0; col -= 1) { pathOrder[key(row, col)] = t; t += 1; } } } return pathOrder; } const SNAKE_ORDER: readonly number[] = buildSnakeOrderToIndexMap(); export function snakePathNormFromIndex(index: number): number { return SNAKE_ORDER[index]! / (CELLS - 1); } export function snakePathOrderValue(index: number): number { return SNAKE_ORDER[index]!; } function buildSpiralInwardOrderToIndexMap(): number[] { const order = new Array(CELLS); let top = 0; let bottom = N - 1; let left = 0; let right = N - 1; let t = 0; while (top <= bottom && left <= right) { for (let col = left; col <= right; col += 1) { order[rowMajorIndex(top, col)] = t; t += 1; } for (let row = top + 1; row <= bottom; row += 1) { order[rowMajorIndex(row, right)] = t; t += 1; } if (top < bottom) { for (let col = right - 1; col >= left; col -= 1) { order[rowMajorIndex(bottom, col)] = t; t += 1; } } if (left < right) { for (let row = bottom - 1; row > top; row -= 1) { order[rowMajorIndex(row, left)] = t; t += 1; } } top += 1; bottom -= 1; left += 1; right -= 1; } return order; } const SPIRAL_INWARD_ORDER: readonly number[] = buildSpiralInwardOrderToIndexMap(); export function spiralInwardNormFromIndex(index: number): number { return SPIRAL_INWARD_ORDER[index]! / (CELLS - 1); } export function spiralInwardOrderValue(index: number): number { return SPIRAL_INWARD_ORDER[index]!; } function buildOuterRingClockwiseOrderToIndexMap(): number[] { const order = new Array(CELLS).fill(-1); const coords: Array<[number, number]> = [ [0, 0], [0, 1], [0, 2], [0, 3], [0, 4], [1, 4], [2, 4], [3, 4], [4, 4], [4, 3], [4, 2], [4, 1], [4, 0], [3, 0], [2, 0], [1, 0] ]; for (let t = 0; t < coords.length; t += 1) { const [row, col] = coords[t]!; order[rowMajorIndex(row, col)] = t; } return order; } function buildMiddleRingAntiClockwiseOrderToIndexMap(): number[] { const order = new Array(CELLS).fill(-1); const coords: Array<[number, number]> = [ [1, 1], [2, 1], [3, 1], [3, 2], [3, 3], [2, 3], [1, 3], [1, 2] ]; for (let t = 0; t < coords.length; t += 1) { const [row, col] = coords[t]!; order[rowMajorIndex(row, col)] = t; } return order; } const OUTER_RING_CLOCKWISE_ORDER: readonly number[] = buildOuterRingClockwiseOrderToIndexMap(); const MIDDLE_RING_ANTI_CLOCKWISE_ORDER: readonly number[] = buildMiddleRingAntiClockwiseOrderToIndexMap(); export function outerRingClockwiseOrderValue(index: number): number { return OUTER_RING_CLOCKWISE_ORDER[index]!; } export function outerRingClockwiseNormFromIndex(index: number): number { const order = outerRingClockwiseOrderValue(index); return order >= 0 ? order / 15 : 0; } export function middleRingAntiClockwiseOrderValue(index: number): number { return MIDDLE_RING_ANTI_CLOCKWISE_ORDER[index]!; } export function middleRingAntiClockwiseNormFromIndex(index: number): number { const order = middleRingAntiClockwiseOrderValue(index); return order >= 0 ? order / 7 : 0; } function buildDiagonalSnakeOrderToIndexMap(): number[] { const order = new Array(CELLS); let t = 0; for (let diagonal = 0; diagonal <= (N - 1) * 2; diagonal += 1) { const rowStart = Math.max(0, diagonal - (N - 1)); const rowEnd = Math.min(N - 1, diagonal); if (diagonal % 2 === 0) { for (let row = rowEnd; row >= rowStart; row -= 1) { const col = diagonal - row; order[rowMajorIndex(row, col)] = t; t += 1; } } else { for (let row = rowStart; row <= rowEnd; row += 1) { const col = diagonal - row; order[rowMajorIndex(row, col)] = t; t += 1; } } } return order; } const DIAGONAL_SNAKE_ORDER: readonly number[] = buildDiagonalSnakeOrderToIndexMap(); export function diagonalSnakeOrderValue(index: number): number { return DIAGONAL_SNAKE_ORDER[index]!; } export function diagonalSnakeNormFromIndex(index: number): number { return DIAGONAL_SNAKE_ORDER[index]! / (CELLS - 1); } function buildRowWaveSnakeOrderToIndexMap(): number[] { const order = new Array(CELLS); const route: Array<{ col: number; dir: "up" | "down" }> = [ { col: 0, dir: "up" }, { col: 2, dir: "down" }, { col: 1, dir: "up" }, { col: 3, dir: "down" }, { col: 2, dir: "up" }, { col: 4, dir: "down" } ]; let t = 0; for (const step of route) { if (step.dir === "up") { for (let row = N - 1; row >= 0; row -= 1) { order[rowMajorIndex(row, step.col)] = t; t += 1; } } else { for (let row = 0; row < N; row += 1) { order[rowMajorIndex(row, step.col)] = t; t += 1; } } } return order; } const ROW_WAVE_SNAKE_ORDER: readonly number[] = buildRowWaveSnakeOrderToIndexMap(); const ROW_WAVE_SNAKE_MAX_ORDER = Math.max(...ROW_WAVE_SNAKE_ORDER); export function rowWaveOrderValue(index: number): number { return ROW_WAVE_SNAKE_ORDER[index]!; } export function rowWaveNormFromIndex(index: number): number { return ROW_WAVE_SNAKE_MAX_ORDER > 0 ? rowWaveOrderValue(index) / ROW_WAVE_SNAKE_MAX_ORDER : 0; } export function colWaveNormFromIndex(index: number): number { const { col } = indexToCoord(index); return N > 1 ? col / (N - 1) : 0; } export function concentricRingNormFromIndex(index: number): number { const { row, col } = indexToCoord(index); return Math.max(Math.abs(row - C), Math.abs(col - C)) / C; } const CORNER_COORDS = new Set(["0,0", "0,4", "4,0", "4,4"]); export function isWithinCircularMask(row: number, col: number): boolean { return !CORNER_COORDS.has(`${row},${col}`); } export function stylePx(n: number): string { return `${n}px`; } export function styleOpacity(opacity: number): number { return Math.round(opacity * 1e6) / 1e6; } const SOURCE_BASE_OPACITY = 0.08; const SOURCE_MID_OPACITY = 0.34; const SOURCE_PEAK_OPACITY = 0.94; function lerpDmx(start: number, end: number, progress: number): number { return start + (end - start) * progress; } function normalizeProgressDmx(value: number, start: number, end: number): number { const span = end - start; if (Math.abs(span) < Number.EPSILON) { return 0; } return Math.min(1, Math.max(0, (value - start) / span)); } function coerceOpacityDmx(value: number | undefined): number | undefined { if (value == null || !Number.isFinite(value)) { return undefined; } return Math.min(1, Math.max(0, value)); } export function remapOpacityToTriplet( opacity: number, opacityBase: number | undefined, opacityMid: number | undefined, opacityPeak: number | undefined ): number { if (!Number.isFinite(opacity)) { return opacity; } const hasOverrides = opacityBase !== undefined || opacityMid !== undefined || opacityPeak !== undefined; const safeOpacity = Math.min(1, Math.max(0, opacity)); if (!hasOverrides) { return safeOpacity; } const targetBase = coerceOpacityDmx(opacityBase) ?? SOURCE_BASE_OPACITY; const targetMid = coerceOpacityDmx(opacityMid) ?? SOURCE_MID_OPACITY; const targetPeak = coerceOpacityDmx(opacityPeak) ?? SOURCE_PEAK_OPACITY; if (safeOpacity <= SOURCE_BASE_OPACITY) { const progress = normalizeProgressDmx(safeOpacity, 0, SOURCE_BASE_OPACITY); return Math.min(1, Math.max(0, lerpDmx(0, targetBase, progress))); } if (safeOpacity <= SOURCE_MID_OPACITY) { const progress = normalizeProgressDmx(safeOpacity, SOURCE_BASE_OPACITY, SOURCE_MID_OPACITY); return Math.min(1, Math.max(0, lerpDmx(targetBase, targetMid, progress))); } if (safeOpacity <= SOURCE_PEAK_OPACITY) { const progress = normalizeProgressDmx(safeOpacity, SOURCE_MID_OPACITY, SOURCE_PEAK_OPACITY); return Math.min(1, Math.max(0, lerpDmx(targetMid, targetPeak, progress))); } const progress = normalizeProgressDmx(safeOpacity, SOURCE_PEAK_OPACITY, 1); return Math.min(1, Math.max(0, lerpDmx(targetPeak, 1, progress))); } /** Remapped opacity where bloom begins (weakest glow); scales linearly to full bloom at 1. */ export const DMX_BLOOM_OPACITY_MIN = 0.6; export function opacityToBloomLevel(remappedOpacity: number): number { return Math.max(0, Math.min(1, (remappedOpacity - DMX_BLOOM_OPACITY_MIN) / (1 - DMX_BLOOM_OPACITY_MIN))); } export function remappedOpacityQualifiesForBloom(remappedOpacity: number): boolean { return remappedOpacity >= DMX_BLOOM_OPACITY_MIN; } function clampHalo(value: number | undefined): number { if (value == null || !Number.isFinite(value)) { return 0; } return Math.min(1, Math.max(0, value)); } export function dmxBloomRootActive(bloom: boolean, halo: number | undefined): boolean { return bloom || clampHalo(halo) > 0; } /** Root class when `halo` > 0 — CSS widens drop-shadow falloff for a softer, more diffuse glow. */ export function dmxBloomHaloSpreadClass(halo: number | undefined): "dmx-bloom-halo" | false { return clampHalo(halo) > 0 ? "dmx-bloom-halo" : false; } /** * Bloom level and dot class for one cell. `curveOpacity` is the loader’s logical opacity **before** * `remapOpacityToTriplet` (same as `bloom` uses today). */ export function dmxDotBloomParts( isActive: boolean, curveOpacity: number, bloom: boolean, halo: number | undefined, ob: number | undefined, om: number | undefined, op: number | undefined ): { level: number; bloomDot: boolean } { const haloN = clampHalo(halo); if (!isActive) { return { level: 0, bloomDot: false }; } const remapped = remapOpacityToTriplet(curveOpacity, ob, om, op); const fromBloom = bloom ? opacityToBloomLevel(remapped) : 0; return { level: fromBloom, bloomDot: haloN > 0 || (bloom && remappedOpacityQualifiesForBloom(remapped)) }; } function getMatrix5Layout( size: number, dotSize: number, cellPadding?: number ): { gap: number; matrixSpan: number } { const n = MATRIX_SIZE; if (cellPadding != null) { const g = Math.max(0, cellPadding); const matrixSpan = dotSize * n + g * (n - 1); return { gap: g, matrixSpan }; } const g = Math.max(1, Math.floor((size - dotSize * n) / (n - 1))); return { gap: g, matrixSpan: size }; } function resolveDmxBoxOuterDim( options: { boxSize?: number; minSize?: number } | null | undefined ): { outerDim: number; useWrapper: boolean } { const b = options?.boxSize; const hasBox = b != null && b > 0 && Number.isFinite(b); if (!hasBox) { return { outerDim: 0, useWrapper: false }; } const m = options?.minSize; if (m != null && m > 0 && Number.isFinite(m)) { return { outerDim: Math.max(b, m), useWrapper: true }; } return { outerDim: b, useWrapper: true }; } function clamp01Dmx(n: number | undefined) { if (n == null) { return; } if (!Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } interface DotMatrixBaseProps extends DotMatrixCommonProps { phase: DotMatrixPhase; reducedMotion?: boolean; onMouseEnter?: () => void; onMouseLeave?: () => void; animationResolver?: DotAnimationResolver; } export function DotMatrixBase({ size = 24, dotSize = 3, color = "currentColor", colorPreset, speed = 1, ariaLabel = "Loading", className, pattern = "diamond", dotShape = "circle", muted = false, bloom = false, halo = 0, dotClassName, phase, reducedMotion = false, onMouseEnter, onMouseLeave, animationResolver, opacityBase, opacityMid, opacityPeak, cellPadding, boxSize, minSize }: DotMatrixBaseProps) { const patternIndexes = new Set(getPatternIndexes(pattern)); const safeSpeed = speed > 0 ? speed : 1; const speedScale = 1 / safeSpeed; const { gap, matrixSpan } = getMatrix5Layout(size, dotSize, cellPadding); const { outerDim, useWrapper } = resolveDmxBoxOuterDim({ boxSize, minSize }); const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const center = Math.floor(MATRIX_SIZE / 2); const ob = clamp01Dmx(opacityBase); const om = clamp01Dmx(opacityMid); const op = clamp01Dmx(opacityPeak); const unit = dotSize + gap; const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const dmxVarStyle = { width: matrixSpan, height: matrixSpan, "--dmx-speed": speedScale, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const dots = Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const { row, col } = indexToCoord(index); const isActive = patternIndexes.has(index); const distance = distanceFromCenter(index); const angle = polarAngle(index); const radiusNormalizedValue = normalizedRadius(index); const manhattan = manhattanDistance(index); const deltaX = (col - center) * unit; const deltaY = (row - center) * unit; const animationState = animationResolver ? animationResolver({ index, row, col, distanceFromCenter: distance, angleFromCenter: angle, radiusNormalized: radiusNormalizedValue, manhattanDistance: manhattan, phase, isActive, reducedMotion }) : {}; const resolvedAnimationStyle = animationState.style ? { ...animationState.style } : undefined; let isBloomDot = false; let stylePatch: CSSProperties | undefined = resolvedAnimationStyle; if (isActive) { const rawOpacity = stylePatch?.opacity; if (stylePatch != null && typeof rawOpacity === "number") { const remappedOpacity = remapOpacityToTriplet(rawOpacity, ob, om, op); stylePatch = { ...stylePatch, opacity: remappedOpacity }; const parts = dmxDotBloomParts(true, rawOpacity, bloom, halo, ob, om, op); (stylePatch as CSSProperties & { "--dmx-bloom-level"?: number })["--dmx-bloom-level"] = parts.level; isBloomDot = parts.bloomDot; } else { const parts = dmxDotBloomParts(true, 0, bloom, halo, ob, om, op); if (parts.level > 0) { stylePatch = { ...(stylePatch ?? {}), ["--dmx-bloom-level" as const]: parts.level } as CSSProperties & { "--dmx-bloom-level"?: number }; } isBloomDot = parts.bloomDot; } } const dotStyle = { width: dotSize, height: dotSize, "--dmx-distance": distance, "--dmx-row": row, "--dmx-col": col, "--dmx-x": `${deltaX}px`, "--dmx-y": `${deltaY}px`, "--dmx-angle": angle, "--dmx-radius": radiusNormalizedValue, "--dmx-manhattan": manhattan, ...stylePatch, ...(!isActive ? { opacity: 0, visibility: "hidden" as const, pointerEvents: "none" as const, animation: "none" } : {}) } as CSSProperties; return ( ); }); const matrix = (

{dots}

); if (useWrapper) { return (

{matrix}

); } return (

{dots}

); } export const MATRIX_SIZE_3 = 3; const CENTER_3 = Math.floor(MATRIX_SIZE_3 / 2); const RANGE_3 = Array.from({ length: MATRIX_SIZE_3 }, (_, index) => index); const MAX_RADIUS_3 = Math.hypot(CENTER_3, CENTER_3); export const FULL_INDEXES_3 = RANGE_3.flatMap((row) => RANGE_3.map((col) => rowMajorIndex3(row, col)) ); export const OUTLINE_INDEXES_3 = FULL_INDEXES_3.filter((index) => { const { row, col } = indexToCoord3(index); return row === 0 || row === MATRIX_SIZE_3 - 1 || col === 0 || col === MATRIX_SIZE_3 - 1; }); export const DIAMOND_INDEXES_3 = FULL_INDEXES_3.filter((index) => { const { row, col } = indexToCoord3(index); return Math.abs(row - CENTER_3) + Math.abs(col - CENTER_3) <= 1; }); export const CROSS_INDEXES_3 = FULL_INDEXES_3.filter((index) => { const { row, col } = indexToCoord3(index); return row === CENTER_3 || col === CENTER_3; }); export const RINGS_INDEXES_3 = FULL_INDEXES_3.filter((index) => { const { row, col } = indexToCoord3(index); return Math.round(Math.hypot(row - CENTER_3, col - CENTER_3)) === 1; }); export const ROSE_INDEXES_3 = FULL_INDEXES_3.filter((index) => { const { row, col } = indexToCoord3(index); const dx = col - CENTER_3; const dy = row - CENTER_3; const angle = Math.atan2(dy, dx); const radius = Math.hypot(dx, dy); const rose = Math.abs(Math.sin(3 * angle)); return rose > 0.55 && radius >= 0.75; }); const PATTERN_INDEXES_3: Record = { diamond: DIAMOND_INDEXES_3, full: FULL_INDEXES_3, outline: OUTLINE_INDEXES_3, rose: ROSE_INDEXES_3, cross: CROSS_INDEXES_3, rings: RINGS_INDEXES_3 }; export function getPattern3Indexes(pattern: MatrixPattern = "full"): number[] { return PATTERN_INDEXES_3[pattern]; } export function rowMajorIndex3(row: number, col: number): number { return row * MATRIX_SIZE_3 + col; } export function indexToCoord3(index: number): { row: number; col: number } { return { row: Math.floor(index / MATRIX_SIZE_3), col: index % MATRIX_SIZE_3 }; } export function distanceFromCenter3(index: number): number { const { row, col } = indexToCoord3(index); return Math.hypot(row - CENTER_3, col - CENTER_3); } export function manhattanDistance3(index: number): number { const { row, col } = indexToCoord3(index); return Math.abs(row - CENTER_3) + Math.abs(col - CENTER_3); } const MAX_DIAGONAL_3 = (MATRIX_SIZE_3 - 1) * 2; export type DiagonalWave3Direction = "tr-bl" | "tl-br" | "br-tl" | "bl-tr"; export function trBlPath3NormFromIndex(index: number): number { const { row, col } = indexToCoord3(index); return (row + (MATRIX_SIZE_3 - 1 - col)) / MAX_DIAGONAL_3; } export function tlBrPath3NormFromIndex(index: number): number { const { row, col } = indexToCoord3(index); return (row + col) / MAX_DIAGONAL_3; } export function brTlPath3NormFromIndex(index: number): number { const { row, col } = indexToCoord3(index); return (MAX_DIAGONAL_3 - row - col) / MAX_DIAGONAL_3; } export function blTrPath3NormFromIndex(index: number): number { const { row, col } = indexToCoord3(index); return (MAX_DIAGONAL_3 - row - (MATRIX_SIZE_3 - 1 - col)) / MAX_DIAGONAL_3; } const DIAGONAL_PATH_3: Record number> = { "tr-bl": trBlPath3NormFromIndex, "tl-br": tlBrPath3NormFromIndex, "br-tl": brTlPath3NormFromIndex, "bl-tr": blTrPath3NormFromIndex }; export function diagonalWave3PathNormFromIndex( index: number, direction: DiagonalWave3Direction ): number { return DIAGONAL_PATH_3[direction](index); } export function diagonalWave3BandIndex( row: number, col: number, direction: DiagonalWave3Direction ): number { if (direction === "tr-bl" || direction === "bl-tr") { return row + (MATRIX_SIZE_3 - 1 - col); } return row + col; } function buildSpiralInwardOrderToIndexMap3(): number[] { const N = MATRIX_SIZE_3; const CELLS = N * N; const order = new Array(CELLS); let top = 0; let bottom = N - 1; let left = 0; let right = N - 1; let t = 0; while (top <= bottom && left <= right) { for (let col = left; col <= right; col += 1) { order[rowMajorIndex3(top, col)] = t; t += 1; } for (let row = top + 1; row <= bottom; row += 1) { order[rowMajorIndex3(row, right)] = t; t += 1; } if (top < bottom) { for (let col = right - 1; col >= left; col -= 1) { order[rowMajorIndex3(bottom, col)] = t; t += 1; } } if (left < right) { for (let row = bottom - 1; row > top; row -= 1) { order[rowMajorIndex3(row, left)] = t; t += 1; } } top += 1; bottom -= 1; left += 1; right -= 1; } return order; } const SPIRAL_INWARD_ORDER_3: readonly number[] = buildSpiralInwardOrderToIndexMap3(); export function spiralInward3NormFromIndex(index: number): number { return SPIRAL_INWARD_ORDER_3[index]! / (MATRIX_SIZE_3 * MATRIX_SIZE_3 - 1); } export function spiralInward3OrderValue(index: number): number { return SPIRAL_INWARD_ORDER_3[index]!; } function buildOuterRingClockwiseOrder3(): number[] { const order = new Array(MATRIX_SIZE_3 * MATRIX_SIZE_3).fill(-1); const path: ReadonlyArray = [ [0, 0], [0, 1], [0, 2], [1, 2], [2, 2], [2, 1], [2, 0], [1, 0] ]; path.forEach(([row, col], step) => { order[rowMajorIndex3(row, col)] = step; }); return order; } const OUTER_RING_CLOCKWISE_ORDER_3: readonly number[] = buildOuterRingClockwiseOrder3(); export function outerRingClockwise3OrderValue(index: number): number { return OUTER_RING_CLOCKWISE_ORDER_3[index]!; } export function outerRingClockwise3NormFromIndex(index: number): number { const order = OUTER_RING_CLOCKWISE_ORDER_3[index]!; if (order < 0) { return 0; } return order / 7; } export function isCenterCell3(row: number, col: number): boolean { const center = Math.floor(MATRIX_SIZE_3 / 2); return row === center && col === center; } export function rowWave3NormFromRow(row: number): number { return row / (MATRIX_SIZE_3 - 1); } export function colWave3NormFromCol(col: number): number { return col / (MATRIX_SIZE_3 - 1); } export function colWave3NormFromColReverse(col: number): number { return (MATRIX_SIZE_3 - 1 - col) / (MATRIX_SIZE_3 - 1); } export function wave3PathOpacityFromNorm( norm: number, base = 0.06, mid = 0.38, peak = 0.88 ): number { const t = Math.min(1, Math.max(0, norm)); if (t <= 0.5) { return base + (t / 0.5) * (mid - base); } return mid + ((t - 0.5) / 0.5) * (peak - mid); } function getMatrix3Layout( size: number, dotSize: number, cellPadding?: number ): { gap: number; matrixSpan: number } { const n = MATRIX_SIZE_3; if (cellPadding != null) { const g = Math.max(0, cellPadding); const matrixSpan = dotSize * n + g * (n - 1); return { gap: g, matrixSpan }; } const g = Math.max(0, Math.floor((size - dotSize * n) / (n - 1))); return { gap: g, matrixSpan: size }; } interface DotMatrix3BaseProps extends DotMatrixCommonProps { phase: DotMatrixPhase; reducedMotion?: boolean; onMouseEnter?: () => void; onMouseLeave?: () => void; animationResolver?: DotAnimationResolver; } export function DotMatrix3Base({ size = 24, dotSize = 3, color = "currentColor", colorPreset, speed = 1, ariaLabel = "Loading", className, pattern = "full", dotShape = "circle", muted = false, bloom = false, halo = 0, dotClassName, phase, reducedMotion = false, onMouseEnter, onMouseLeave, animationResolver, opacityBase = 0.06, opacityMid, opacityPeak, cellPadding = 1, boxSize, minSize }: DotMatrix3BaseProps) { const patternIndexes = new Set(getPattern3Indexes(pattern)); const safeSpeed = speed > 0 ? speed : 1; const speedScale = 1 / safeSpeed; const { gap, matrixSpan } = getMatrix3Layout(size, dotSize, cellPadding); const { outerDim, useWrapper } = resolveDmxBoxOuterDim({ boxSize, minSize }); const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const center = CENTER_3; const ob = clamp01Dmx(opacityBase); const om = clamp01Dmx(opacityMid); const op = clamp01Dmx(opacityPeak); const unit = dotSize + gap; const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const dmxVarStyle = { width: matrixSpan, height: matrixSpan, "--dmx-speed": speedScale, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const gridStyle = { gap, gridTemplateColumns: `repeat(${MATRIX_SIZE_3}, minmax(0, 1fr))`, gridTemplateRows: `repeat(${MATRIX_SIZE_3}, minmax(0, 1fr))` }; const dots = Array.from({ length: MATRIX_SIZE_3 * MATRIX_SIZE_3 }).map((_, index) => { const { row, col } = indexToCoord3(index); const isActive = patternIndexes.has(index); const distance = distanceFromCenter3(index); const angle = Math.atan2(row - center, col - center); const radiusNormalizedValue = Math.hypot(row - center, col - center) / MAX_RADIUS_3; const manhattan = manhattanDistance3(index); const deltaX = (col - center) * unit; const deltaY = (row - center) * unit; const animationState = animationResolver ? animationResolver({ index, row, col, distanceFromCenter: distance, angleFromCenter: angle, radiusNormalized: radiusNormalizedValue, manhattanDistance: manhattan, phase, isActive, reducedMotion }) : {}; const resolvedAnimationStyle = animationState.style ? { ...animationState.style } : undefined; let isBloomDot = false; let stylePatch: CSSProperties | undefined = resolvedAnimationStyle; if (isActive) { const rawOpacity = stylePatch?.opacity; if (stylePatch != null && typeof rawOpacity === "number") { const remappedOpacity = remapOpacityToTriplet(rawOpacity, ob, om, op); stylePatch = { ...stylePatch, opacity: remappedOpacity }; const parts = dmxDotBloomParts(true, rawOpacity, bloom, halo, ob, om, op); (stylePatch as CSSProperties & { "--dmx-bloom-level"?: number })["--dmx-bloom-level"] = parts.level; isBloomDot = parts.bloomDot; } else { const parts = dmxDotBloomParts(true, 0, bloom, halo, ob, om, op); if (parts.level > 0) { stylePatch = { ...(stylePatch ?? {}), ["--dmx-bloom-level" as const]: parts.level } as CSSProperties & { "--dmx-bloom-level"?: number }; } isBloomDot = parts.bloomDot; } } const dotStyle = { width: dotSize, height: dotSize, "--dmx-distance": distance, "--dmx-row": row, "--dmx-col": col, "--dmx-x": `${deltaX}px`, "--dmx-y": `${deltaY}px`, "--dmx-angle": angle, "--dmx-radius": radiusNormalizedValue, "--dmx-manhattan": manhattan, ...stylePatch, ...(!isActive ? { opacity: 0, visibility: "hidden" as const, pointerEvents: "none" as const, animation: "none" } : {}) } as CSSProperties; return ( ); }); const matrix = (

{dots}

); if (useWrapper) { return (

{matrix}

); } return (

{dots}

); } type NormFn = (ctx: Pick) => number; export function createPathWaveResolver(getPathNorm: NormFn): DotAnimationResolver { return ({ isActive, row, col, index, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const path = getPathNorm({ row, col, index }); const style = { "--dmx-path": path } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: 0.12 + path * 0.72 } }; } return { className: "dmx-path", style }; }; } type PathWaveComponentProps = DotMatrixCommonProps; export function createPathWaveComponent(displayName: string, getPathNorm: NormFn) { const resolve = createPathWaveResolver(getPathNorm); function PathWaveComponent({ pattern = "full", animated = true, hoverAnimated = false, speed = 1, ...rest }: PathWaveComponentProps) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } PathWaveComponent.displayName = displayName; return PathWaveComponent; } export function createDiagonalWave3Resolver(direction: DiagonalWave3Direction): DotAnimationResolver { return ({ isActive, index, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const path = diagonalWave3PathNormFromIndex(index, direction); const style = { "--dmx-path": path } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: path * 0.88 } }; } return { className: "dmx-path-3", style }; }; } type DiagonalWave3ComponentProps = DotMatrixCommonProps; export function createDiagonalWave3Component( displayName: string, direction: DiagonalWave3Direction ) { const resolve = createDiagonalWave3Resolver(direction); function DiagonalWave3Component({ pattern = "full", animated = true, hoverAnimated = false, speed = 1.15, ...rest }: DiagonalWave3ComponentProps) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } DiagonalWave3Component.displayName = displayName; return DiagonalWave3Component; } type Dotm3x3ComponentProps = DotMatrixCommonProps; export function createDotm3x3Component( displayName: string, animationResolver: DotAnimationResolver, defaultSpeed = 1.15 ) { function Dotm3x3Component({ pattern = "full", dotShape = "circle", animated = true, hoverAnimated = false, speed = defaultSpeed, ...rest }: Dotm3x3ComponentProps) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } Dotm3x3Component.displayName = displayName; return Dotm3x3Component; } const GLYPH_SPIN_BASE_OPACITY = 0.09; const GLYPH_SPIN_PEAK_OPACITY = 0.88; const GLYPH_SPIN_STEP_MS = 180; const GLYPH_SPIN_ROTATION_STEPS = 4; const GLYPH_SPIN_CYCLE_MS_BASE = GLYPH_SPIN_STEP_MS * GLYPH_SPIN_ROTATION_STEPS; function glyphSpinSmoothstep(value: number): number { const t = Math.min(1, Math.max(0, value)); return t * t * (3 - 2 * t); } export function rotate3x3(pattern: readonly number[], turns: number): readonly number[] { const t = ((turns % GLYPH_SPIN_ROTATION_STEPS) + GLYPH_SPIN_ROTATION_STEPS) % GLYPH_SPIN_ROTATION_STEPS; if (t === 0) { return pattern; } let out = [...pattern]; for (let k = 0; k < t; k += 1) { const next = new Array(9).fill(0); for (let i = 0; i < 9; i += 1) { const r = Math.floor(i / 3); const c = i % 3; const nr = c; const nc = 2 - r; next[nr * 3 + nc] = out[i]!; } out = next; } return out; } function glyphSpinOpacity(current: readonly number[], next: readonly number[], index: number, t: number): number { const weight = (current[index] ?? 0) * (1 - t) + (next[index] ?? 0) * t; return GLYPH_SPIN_BASE_OPACITY + weight * (GLYPH_SPIN_PEAK_OPACITY - GLYPH_SPIN_BASE_OPACITY); } type GlyphSpin3ComponentProps = DotMatrixCommonProps; export function createGlyphSpin3Component( displayName: string, glyph: readonly number[], defaultSpeed = 1 ) { function GlyphSpin3Component({ speed = defaultSpeed, pattern = "full", dotShape = "circle", animated = true, hoverAnimated = false, ...rest }: GlyphSpin3ComponentProps) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: GLYPH_SPIN_CYCLE_MS_BASE, speed }); const animationResolver = useMemo(() => { const scaledPhase = cyclePhase * GLYPH_SPIN_ROTATION_STEPS; const turns = Math.floor(scaledPhase) % GLYPH_SPIN_ROTATION_STEPS; const segmentT = glyphSpinSmoothstep(scaledPhase - Math.floor(scaledPhase)); const current = rotate3x3(glyph, turns); const next = rotate3x3(glyph, turns + 1); return ({ isActive, index, reducedMotion: rm, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } if (rm || phase === "idle") { return { style: { opacity: glyphSpinOpacity(glyph, glyph, index, 0) } }; } return { style: { opacity: glyphSpinOpacity(current, next, index, segmentT) } }; }; }, [cyclePhase]); return ( ); } GlyphSpin3Component.displayName = displayName; return GlyphSpin3Component; } 54:T15f4,"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { DotMatrixPhase } from "@/components/ui/dotmatrix-core"; export function usePrefersReducedMotion(): boolean { const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => { setPrefersReducedMotion(query.matches); }; update(); query.addEventListener("change", update); return () => { query.removeEventListener("change", update); }; }, []); return prefersReducedMotion; } export interface UseCyclePhaseOptions { active: boolean; cycleMsBase: number; speed?: number; } export function useCyclePhase({ active, cycleMsBase, speed = 1 }: UseCyclePhaseOptions): number { const [phase, setPhase] = useState(0); useEffect(() => { if (!active) { setPhase(0); return; } const safeSpeed = speed > 0 ? speed : 1; const raw = cycleMsBase / safeSpeed; const cycleMs = raw > 0 && Number.isFinite(raw) ? raw : 1000; const start = performance.now(); let rafId = 0; const tick = (now: number) => { const elapsed = ((now - start) % cycleMs + cycleMs) % cycleMs; setPhase(elapsed / cycleMs); rafId = requestAnimationFrame(tick); }; rafId = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafId); }, [active, cycleMsBase, speed]); return phase; } interface UseSteppedCycleOptions { active: boolean; cycleMsBase: number; steps: number; speed?: number; idleStep?: number; } type FrameListener = (now: number) => void; const listeners = new Set(); let rafId: number | null = null; function emit(now: number) { listeners.forEach((listener) => { listener(now); }); } function tick(now: number) { emit(now); if (listeners.size > 0) { rafId = window.requestAnimationFrame(tick); } else { rafId = null; } } function subscribeFrame(listener: FrameListener) { listeners.add(listener); if (rafId === null) { rafId = window.requestAnimationFrame(tick); } return () => { listeners.delete(listener); if (listeners.size === 0 && rafId !== null) { window.cancelAnimationFrame(rafId); rafId = null; } }; } export function useSteppedCycle({ active, cycleMsBase, steps, speed = 1, idleStep = 0 }: UseSteppedCycleOptions): number { const safeSteps = Math.max(1, Math.floor(steps)); const safeSpeed = speed > 0 ? speed : 1; const rawCycleMs = cycleMsBase / safeSpeed; const rawStepMs = rawCycleMs / safeSteps; const stepMs = rawStepMs > 0 && Number.isFinite(rawStepMs) ? rawStepMs : 1; const cycleMs = stepMs * safeSteps; const [step, setStep] = useState(() => (active ? 0 : idleStep)); const startMsRef = useRef(0); const activeRef = useRef(false); const currentStepRef = useRef(idleStep); useEffect(() => { if (!active) { activeRef.current = false; currentStepRef.current = idleStep; setStep(idleStep); return; } const updateStep = (now: number) => { if (!activeRef.current) { startMsRef.current = now; activeRef.current = true; } const elapsed = Math.max(0, now - startMsRef.current); const nextStep = Math.floor((elapsed % cycleMs) / stepMs) % safeSteps; if (nextStep !== currentStepRef.current) { currentStepRef.current = nextStep; setStep(nextStep); } }; updateStep(performance.now()); return subscribeFrame(updateStep); }, [active, cycleMs, idleStep, safeSteps, stepMs]); return active ? step : idleStep; } interface UseDotMatrixPhasesOptions { animated?: boolean; hoverAnimated?: boolean; speed?: number; } interface DotMatrixPhasesResult { phase: DotMatrixPhase; onMouseEnter: () => void; onMouseLeave: () => void; } export function useDotMatrixPhases({ animated = false, hoverAnimated = false, speed = 1 }: UseDotMatrixPhasesOptions): DotMatrixPhasesResult { const safeSpeed = speed > 0 ? speed : 1; const autoRun = Boolean(animated && !hoverAnimated); const [hoverPhase, setHoverPhase] = useState("idle"); const timeouts = useRef([]); const hoverGen = useRef(0); const clearTimers = useCallback(() => { for (let i = 0; i < timeouts.current.length; i += 1) { window.clearTimeout(timeouts.current[i]!); } timeouts.current = []; }, []); useEffect(() => { hoverGen.current += 1; clearTimers(); return clearTimers; }, [autoRun, hoverAnimated, clearTimers]); const onMouseEnter = useCallback(() => { if (!hoverAnimated || autoRun) { return; } clearTimers(); const gen = ++hoverGen.current; setHoverPhase("collapse"); const collapseMs = Math.max(1, Math.round(300 / safeSpeed)); const id = window.setTimeout(() => { if (hoverGen.current !== gen) { return; } setHoverPhase("hoverRipple"); }, collapseMs); timeouts.current.push(id); }, [hoverAnimated, autoRun, safeSpeed, clearTimers]); const onMouseLeave = useCallback(() => { if (!hoverAnimated || autoRun) { return; } hoverGen.current += 1; clearTimers(); setHoverPhase("idle"); }, [hoverAnimated, autoRun, clearTimers]); const phase: DotMatrixPhase = autoRun ? "loadingRipple" : hoverAnimated ? hoverPhase : "idle"; return useMemo( () => ({ phase, onMouseEnter, onMouseLeave }), [phase, onMouseEnter, onMouseLeave] ); } 55:T6572,.dmx-root { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; /* One base loop at speed=1; --dmx-speed from JS scales inversely with the speed prop */ --dmx-cycle: 1500ms; /* Rest / mid / bright — override via opacityBase, opacityMid, opacityPeak on the component */ --dmx-opacity-base: 0.16; --dmx-opacity-mid: 0.32; --dmx-opacity-peak: 1; --dmx-halo-level: 0; } .dmx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); } .dmx-dot { border-radius: 999px; clip-path: none; display: block; background: var(--dmx-dot-fill, currentColor); /* Matches prior 0.24 with default base/mid */ opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid))); --dmx-bloom-level: 0; transform-origin: center; transform: none; will-change: opacity; } .dmx-root.dmx-dot-shape-circle .dmx-dot { border-radius: 999px; clip-path: none; -webkit-mask: none; mask: none; } .dmx-root.dmx-dot-shape-square .dmx-dot { border-radius: 0; clip-path: none; -webkit-mask: none; mask: none; } .dmx-root.dmx-dot-shape-diamond .dmx-dot { border-radius: 0; clip-path: none; -webkit-mask: none; mask: none; transform: rotate(45deg) scale(0.7071067812); } .dmx-root.dmx-dot-shape-hearts .dmx-dot { position: relative; border-radius: 0; clip-path: none; transform: none; background: none; -webkit-mask: none; mask: none; } .dmx-root.dmx-dot-shape-hearts .dmx-dot::before { content: ""; position: absolute; inset: 0; background: var(--dmx-dot-fill, currentColor); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='m8.593.827c-1.008.012-1.953.464-2.593,1.227-.641-.762-1.586-1.214-2.598-1.227C1.519.839-.007,2.378,0,4.257,0,8.362,4.201,10.875,5.488,11.547h0c.16.084.336.125.511.125s.352-.042.511-.125c1.287-.672,5.489-3.184,5.489-7.289.007-1.88-1.519-3.42-3.407-3.431Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='m8.593.827c-1.008.012-1.953.464-2.593,1.227-.641-.762-1.586-1.214-2.598-1.227C1.519.839-.007,2.378,0,4.257,0,8.362,4.201,10.875,5.488,11.547h0c.16.084.336.125.511.125s.352-.042.511-.125c1.287-.672,5.489-3.184,5.489-7.289.007-1.88-1.519-3.42-3.407-3.431Z'/%3E%3C/svg%3E"); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .dmx-bloom .dmx-dot { filter: drop-shadow( 0 0 calc( var(--dmx-dot-size, 3px) * 0.75 * max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0)) ) currentColor ) drop-shadow( 0 0 calc( var(--dmx-dot-size, 3px) * 1.35 * max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0)) ) currentColor ); will-change: opacity, filter; } /* Halo: modestly wider falloff than selective bloom (same --dmx-bloom-level on each dot). */ .dmx-root.dmx-bloom-halo.dmx-bloom .dmx-dot { filter: drop-shadow( 0 0 calc( var(--dmx-dot-size, 3px) * 0.92 * max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0)) ) currentColor ) drop-shadow( 0 0 calc( var(--dmx-dot-size, 3px) * 1.62 * max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0)) ) currentColor ) drop-shadow( 0 0 calc( var(--dmx-dot-size, 3px) * 2.55 * max(var(--dmx-bloom-level, 0), var(--dmx-halo-level, 0)) ) currentColor ); will-change: opacity, filter; } /* Bloom strength comes from inline --dmx-bloom-level (see opacityToBloomLevel). */ .dmx-muted .dmx-dot { opacity: calc(0.44 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0; } /* Inactive off-cells (Base also sets inline opacity/animation:none so keyframes cannot win). */ .dmx-dot.dmx-inactive { opacity: 0 !important; --dmx-bloom-level: 0; animation: none !important; visibility: hidden; pointer-events: none; will-change: auto; filter: none; } .dmx-ripple { animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite; animation-delay: calc(var(--dmx-ripple-ring, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-ripple-echo { animation: dmx-ripple-echo calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite; animation-delay: calc( (var(--dmx-ripple-ring, 0) * 0.14 + var(--dmx-ripple-parity, 0) * 0.03) * var(--dmx-cycle) * var(--dmx-speed, 1) ); will-change: opacity; } .dmx-center-origin-ripple { animation: dmx-center-origin-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite; animation-delay: calc( var(--dmx-center-ripple-ring, 0) * 0.16 * var(--dmx-cycle) * var(--dmx-speed, 1) ); will-change: opacity; } .dmx-collapse { animation: dmx-collapse calc(var(--dmx-cycle) * 0.2 * var(--dmx-speed, 1)) ease-in forwards; animation-delay: calc( (4 - var(--dmx-manhattan, 0)) * 0.032 * var(--dmx-cycle) * var(--dmx-speed, 1) ); } .dmx-hover-ripple { animation: dmx-hover-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite; animation-delay: calc(var(--dmx-distance, 0) * 0.127 * var(--dmx-cycle) * var(--dmx-speed, 1)); } .dmx-path { animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite; animation-delay: calc(var(--dmx-path, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-root.dmx-matrix-3 { --dmx-cycle: 1500ms; } .dmx-path-3 { animation: dmx-ripple-3 calc(0.68 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite; animation-delay: calc(var(--dmx-path, 0) * 0.19 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-diagonal-alt-sweep { animation: dmx-diagonal-alt-sweep calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite; animation-delay: calc( (var(--dmx-path, 0) * 0.2 + var(--dmx-diagonal-parity, 0) * 0.5) * var(--dmx-cycle) * var(--dmx-speed, 1) ); will-change: opacity; } .dmx-spiral-snake { animation: dmx-spiral-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite; animation-delay: calc(var(--dmx-spiral-order, 0) * 0.04 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-spiral-snake-3 { animation: dmx-spiral-snake calc(0.78 * var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite; animation-delay: calc(var(--dmx-spiral-order, 0) * 0.038 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-center-ripple-3 { animation: dmx-center-origin-ripple calc(0.82 * var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite; animation-delay: calc( var(--dmx-center-ripple-ring, 0) * 0.11 * var(--dmx-cycle) * var(--dmx-speed, 1) ); will-change: opacity; } .dmx-snake-path-3 { animation: dmx-ripple-3 calc(1.04 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite; animation-delay: calc(var(--dmx-snake-order, 0) * 0.085 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-frame-chase-3 { animation: dmx-ripple-3 calc(0.98 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite; animation-delay: calc(var(--dmx-frame-order, 0) * 0.09 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-core-pulse-3 { animation: dmx-ripple-3 calc(0.46 * var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite; will-change: opacity; } .dmx-distance-ripple-3 { animation: dmx-ripple-3 calc(1.3 * var(--dmx-cycle) * var(--dmx-speed, 1)) ease-out infinite; animation-delay: calc(var(--dmx-distance, 0) * 0.13 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-ripple-echo-3 { animation: dmx-ripple-echo calc(1.06 * var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite; animation-delay: calc( (var(--dmx-ripple-ring, 0) * 0.1 + var(--dmx-ripple-parity, 0) * 0.02) * var(--dmx-cycle) * var(--dmx-speed, 1) ); will-change: opacity; } .dmx-diagonal-snake { animation: dmx-diagonal-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite; animation-delay: calc( var(--dmx-diagonal-snake-order, 0) * 0.04 * var(--dmx-cycle) * var(--dmx-speed, 1) ); will-change: opacity; } .dmx-outer-snake { animation: dmx-ring-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite; animation-delay: calc(var(--dmx-outer-order, 0) * 0.0625 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } .dmx-middle-snake { animation: dmx-ring-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite; animation-delay: calc(var(--dmx-middle-order, 0) * 0.125 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } @keyframes dmx-ripple { 0%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 50% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } } @keyframes dmx-ripple-3 { 0%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 3% { opacity: calc(0.62 * var(--dmx-opacity-mid) + 0.38 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 6% { opacity: calc(0.35 * var(--dmx-opacity-peak) + 0.65 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0.35; } 10% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 14% { opacity: calc(0.35 * var(--dmx-opacity-peak) + 0.65 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0.35; } 17% { opacity: calc(0.62 * var(--dmx-opacity-mid) + 0.38 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 20% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } @keyframes dmx-ripple-echo { 0%, 100% { opacity: calc(0.625 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 28% { opacity: calc(0.98 * var(--dmx-opacity-peak)); --dmx-bloom-level: 0.9; } 56% { opacity: var(--dmx-opacity-mid); --dmx-bloom-level: 0; } 78% { opacity: calc(0.68 * var(--dmx-opacity-peak) + 0.32 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0; } } @keyframes dmx-center-origin-ripple { 0%, 100% { opacity: calc(0.625 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 34% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 60% { opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid))); --dmx-bloom-level: 0; } } @keyframes dmx-collapse { 0% { opacity: calc(0.95 * var(--dmx-opacity-peak) + 0.05 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0.75; } 100% { opacity: calc(0.375 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } } @keyframes dmx-hover-ripple { 0% { opacity: calc(0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 45% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } @keyframes dmx-diagonal-alt-sweep { 0%, 100% { opacity: calc(0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 14% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 30% { opacity: calc(0.75 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } } @keyframes dmx-spiral-snake { 0%, 100% { opacity: calc(0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 8% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 16% { opacity: calc(0.5 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 24% { opacity: calc(0.25 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.3 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 32% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 40% { opacity: calc(0.75 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } } @keyframes dmx-diagonal-snake { 0%, 100% { opacity: calc(0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 8% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 16% { opacity: calc(0.5 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 24% { opacity: calc(0.25 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.3 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 32% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 40% { opacity: calc(0.75 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } } @keyframes dmx-ring-snake { 0%, 100% { opacity: calc(0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 10% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 20% { opacity: calc(0.45 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 30% { opacity: calc(0.2 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.4 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 40% { opacity: calc(0.875 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } } .dmx-square9-bit { animation-duration: calc(5200ms * var(--dmx-speed, 1)); animation-timing-function: steps(52, end); animation-iteration-count: infinite; will-change: opacity; } .dmx-square9-d1 { animation-name: dmx-square9-d1; } .dmx-square9-d2 { animation-name: dmx-square9-d2; } .dmx-square9-d3 { animation-name: dmx-square9-d3; } .dmx-square9-d4 { animation-name: dmx-square9-d4; } .dmx-square9-d5 { animation-name: dmx-square9-d5; } .dmx-square9-d6 { animation-name: dmx-square9-d6; } @keyframes dmx-square9-d1 { 0%, 3.846154% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 3.846154%, 30.769231% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 30.769231%, 46.153846% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 46.153846%, 50% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 50%, 53.846154% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 53.846154%, 57.692308% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 57.692308%, 65.384615% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 65.384615%, 71.153846% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 71.153846%, 80.769231% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 80.769231%, 84.615385% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 84.615385%, 88.461538% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 88.461538%, 92.307692% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 92.307692%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } @keyframes dmx-square9-d2 { 0%, 5.769231% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 5.769231%, 25% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 25%, 30.769231% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 30.769231%, 36.538462% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 36.538462%, 50% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 50%, 53.846154% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 53.846154%, 57.692308% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 57.692308%, 61.538462% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 61.538462%, 65.384615% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 65.384615%, 76.923077% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 76.923077%, 80.769231% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 80.769231%, 84.615385% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 84.615385%, 88.461538% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 88.461538%, 92.307692% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 92.307692%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } @keyframes dmx-square9-d3 { 0%, 7.692308% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 7.692308%, 25% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 25%, 36.538462% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 36.538462%, 42.307692% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 42.307692%, 46.153846% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 46.153846%, 50% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 50%, 53.846154% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 53.846154%, 57.692308% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 57.692308%, 71.153846% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 71.153846%, 76.923077% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 76.923077%, 80.769231% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 80.769231%, 84.615385% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 84.615385%, 88.461538% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 88.461538%, 92.307692% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 92.307692%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } @keyframes dmx-square9-d4 { 0%, 13.461538% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 13.461538%, 30.769231% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 30.769231%, 50% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 50%, 53.846154% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 53.846154%, 57.692308% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 57.692308%, 61.538462% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 61.538462%, 65.384615% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 65.384615%, 71.153846% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 71.153846%, 84.615385% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 84.615385%, 88.461538% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 88.461538%, 92.307692% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 92.307692%, 96.153846% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 96.153846%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } @keyframes dmx-square9-d5 { 0%, 15.384615% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 15.384615%, 25% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 25%, 30.769231% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 30.769231%, 36.538462% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 36.538462%, 46.153846% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 46.153846%, 50% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 50%, 53.846154% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 53.846154%, 57.692308% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 57.692308%, 65.384615% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 65.384615%, 76.923077% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 76.923077%, 84.615385% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 84.615385%, 88.461538% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 88.461538%, 92.307692% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 92.307692%, 96.153846% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 96.153846%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } @keyframes dmx-square9-d6 { 0%, 17.307692% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 17.307692%, 25% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 25%, 36.538462% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 36.538462%, 42.307692% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 42.307692%, 50% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 50%, 53.846154% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 53.846154%, 57.692308% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 57.692308%, 61.538462% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 61.538462%, 71.153846% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 71.153846%, 76.923077% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 76.923077%, 84.615385% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 84.615385%, 88.461538% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 88.461538%, 92.307692% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } 92.307692%, 96.153846% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 96.153846%, 100% { opacity: var(--dmx-opacity-base); --dmx-bloom-level: 0; } } .dmx-square6-col-snake { animation: dmx-square6-col-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) steps(5, end) infinite; animation-delay: calc(var(--dmx-col-pos, 0) * 0.2 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } @keyframes dmx-square6-col-snake { 0%, 20% { opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.25 * var(--dmx-opacity-mid) + 0.15 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 20%, 40% { opacity: calc(0.3 * var(--dmx-opacity-peak) + 0.5 * var(--dmx-opacity-mid) + 0.2 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 40%, 60% { opacity: calc(0.6 * var(--dmx-opacity-mid) + 0.4 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 60%, 80% { opacity: calc(0.2 * var(--dmx-opacity-mid) + 0.8 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 80%, 100% { opacity: calc(0.625 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } } .dmx-circular2-ring { animation: dmx-circular2-ring calc(var(--dmx-cycle) * var(--dmx-speed, 1)) steps(12, end) infinite; animation-delay: calc(var(--dmx-ring-order, 0) * 0.0833333333 * var(--dmx-cycle) * var(--dmx-speed, 1)); will-change: opacity; } @keyframes dmx-circular2-ring { 0%, 8.333333% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 8.333333%, 16.666667% { opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0; } 16.666667%, 25% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 25%, 33.333333% { opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 33.333333%, 41.666667% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 41.666667%, 50% { opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0; } 50%, 58.333333% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 58.333333%, 66.666667% { opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 66.666667%, 75% { opacity: var(--dmx-opacity-peak); --dmx-bloom-level: 1; } 75%, 83.333333% { opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid)); --dmx-bloom-level: 0; } 83.333333%, 91.666667% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } 91.666667%, 100% { opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base)); --dmx-bloom-level: 0; } } @media (prefers-reduced-motion: reduce) { .dmx-dot, .dmx-ripple, .dmx-ripple-echo, .dmx-center-origin-ripple, .dmx-collapse, .dmx-hover-ripple, .dmx-path, .dmx-path-3, .dmx-diagonal-alt-sweep, .dmx-spiral-snake, .dmx-spiral-snake-3, .dmx-center-ripple-3, .dmx-snake-path-3, .dmx-frame-chase-3, .dmx-core-pulse-3, .dmx-distance-ripple-3, .dmx-ripple-echo-3, .dmx-diagonal-snake, .dmx-outer-snake, .dmx-middle-snake, .dmx-square9-bit, .dmx-square6-col-snake, .dmx-circular2-ring { animation: none !important; transition: none !important; } } 56:Te04,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { rowMajorIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare2Props = DotMatrixCommonProps; const SNAKE_TAIL = [1, 0.82, 0.68, 0.54, 0.42, 0.31, 0.22, 0.14] as const; const BASE_OPACITY = 0.08; function buildRowCyclePath(): number[] { const path: number[] = []; const push = (row: number, col: number) => path.push(rowMajorIndex(row, col)); // 1st col: bottom -> top for (let row = 4; row >= 0; row -= 1) push(row, 0); // top to 3rd col push(0, 1); push(0, 2); // 3rd col: top -> bottom for (let row = 1; row <= 4; row += 1) push(row, 2); // bottom left to 2nd col push(4, 1); // 2nd col: bottom -> top for (let row = 3; row >= 0; row -= 1) push(row, 1); // top right to 4th col push(0, 2); push(0, 3); // 4th col: top -> bottom for (let row = 1; row <= 4; row += 1) push(row, 3); // bottom left to 3rd col push(4, 2); // 3rd col: bottom -> top for (let row = 3; row >= 0; row -= 1) push(row, 2); // top right to 5th col push(0, 3); push(0, 4); // 5th col: top -> bottom for (let row = 1; row <= 4; row += 1) push(row, 4); return path; } export function DotmSquare2({ speed = 1.15, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare2Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const route = useMemo(() => buildRowCyclePath(), []); const routeLen = route.length; const head = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle" && routeLen > 0, cycleMsBase: 1500, steps: routeLen, speed, }); const visitsByIndex = useMemo(() => { const visits = new Map(); for (let step = 0; step < routeLen; step += 1) { const index = route[step]!; const list = visits.get(index) ?? []; list.push(step); visits.set(index, list); } return visits; }, [route, routeLen]); const animationResolver = useMemo(() => { return ({ isActive, index }) => { if (!isActive) { return { className: "dmx-inactive" }; } if (routeLen <= 0) { return { style: { opacity: BASE_OPACITY } }; } const visits = visitsByIndex.get(index) ?? []; let opacity = BASE_OPACITY; for (const stepIndex of visits) { const distance = (head - stepIndex + routeLen) % routeLen; if (distance >= 0 && distance < SNAKE_TAIL.length) { opacity = Math.max(opacity, SNAKE_TAIL[distance]!); } } return { style: { opacity } }; }; }, [head, routeLen, visitsByIndex]); return ( ); } 57:T724,"use client"; import type { CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { spiralInwardNormFromIndex, spiralInwardOrderValue } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare3Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const order = spiralInwardOrderValue(index); const pathNorm = spiralInwardNormFromIndex(index); const style = { "--dmx-spiral-order": order } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: 0.16 + pathNorm * 0.78 } }; } return { className: "dmx-spiral-snake", style }; }; export function DotmSquare3({ speed = 1.35, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare3Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } 58:T9d1,"use client"; import type { CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { middleRingAntiClockwiseNormFromIndex, middleRingAntiClockwiseOrderValue, outerRingClockwiseNormFromIndex, outerRingClockwiseOrderValue } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare4Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, index, row, col, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const isCenter = row === 2 && col === 2; if (isCenter) { return { className: "dmx-inactive" }; } const outerOrder = outerRingClockwiseOrderValue(index); if (outerOrder >= 0) { const outerNorm = outerRingClockwiseNormFromIndex(index); const style = { "--dmx-outer-order": outerOrder } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: 0.2 + outerNorm * 0.72 } }; } return { className: "dmx-outer-snake", style }; } const middleOrder = middleRingAntiClockwiseOrderValue(index); const middleNorm = middleRingAntiClockwiseNormFromIndex(index); const style = { "--dmx-middle-order": middleOrder } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: 0.2 + middleNorm * 0.72 } }; } return { className: "dmx-middle-snake", style }; }; export function DotmSquare4({ speed = 1.35, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare4Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } 59:T732,"use client"; import type { CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { diagonalSnakeNormFromIndex, diagonalSnakeOrderValue } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare5Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const order = diagonalSnakeOrderValue(index); const pathNorm = diagonalSnakeNormFromIndex(index); const style = { "--dmx-diagonal-snake-order": order } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: 0.16 + pathNorm * 0.78 } }; } return { className: "dmx-diagonal-snake", style }; }; export function DotmSquare5({ speed = 1.35, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare5Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } 5a:T720,"use client"; import { useMemo, type CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare6Props = DotMatrixCommonProps; const COLUMN_HEIGHT = 5; export function DotmSquare6({ speed = 2.2, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare6Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animationResolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const goesUp = col % 2 === 0; const position = goesUp ? COLUMN_HEIGHT - 1 - row : row; if (reducedMotion || phase === "idle") { return { style: { opacity: 0.22 + (position / (COLUMN_HEIGHT - 1)) * 0.66 } }; } return { className: "dmx-square6-col-snake", style: { "--dmx-col-pos": position } as CSSProperties }; }; }, [reducedMotion]); return ( ); } 5b:Tc6c,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { rowMajorIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare7Props = DotMatrixCommonProps; type FrameCell = "." | "o" | "x" | "c"; const BASE_OPACITY = 0.08; const SETTLED_OPACITY = 0.42; const ACTIVE_OPACITY = 1; const CLEAR_OPACITY = 0.88; const IDLE_STEP = 10; const FRAME_MASKS: readonly string[] = [ "....." + "....." + "....." + "....." + "ooooo", "....." + "....." + "....." + "ooooo" + "ooooo", "....." + "....." + "ooooo" + "ooooo" + "ooooo", "....." + "ooooo" + "ooooo" + "ooooo" + "ooooo", "ooooo" + "ooooo" + "ooooo" + "ooooo" + "ooooo", "ccccc" + "ccccc" + "ccccc" + "ccccc" + "ccccc", "....." + "....." + "....." + "....." + ".....", "ccccc" + "ccccc" + "ccccc" + "ccccc" + "ccccc", "....." + "....." + "....." + "....." + ".....", "....." + "....." + "....." + "....." + "....." ]; const FRAME_SEQUENCE: readonly number[] = [0, 1, 2, 3, 4, 4, 5, 6, 7, 8, 9]; function maskCell(mask: string, row: number, col: number): FrameCell { return (mask[rowMajorIndex(row, col)] as FrameCell | undefined) ?? "."; } export function DotmSquare7({ speed = 1.35, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare7Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const sequenceLength = FRAME_SEQUENCE.length; const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle" && sequenceLength > 0, cycleMsBase: 1900, steps: sequenceLength, speed, idleStep: Math.min(IDLE_STEP, sequenceLength - 1) }); const frame = FRAME_SEQUENCE[step] ?? FRAME_SEQUENCE[0] ?? 0; const resolver = useMemo(() => { return ({ isActive, row, col }) => { if (!isActive) { return { className: "dmx-inactive" }; } const cell = maskCell(FRAME_MASKS[frame]!, row, col); if (cell === "x") { return { style: { opacity: ACTIVE_OPACITY } }; } if (cell === "o") { return { style: { opacity: SETTLED_OPACITY } }; } if (cell === "c") { return { style: { opacity: CLEAR_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [frame]); return ( ); } 5c:Tdd6,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { MATRIX_SIZE } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare8Props = DotMatrixCommonProps; const ROWS = MATRIX_SIZE; const COLS = MATRIX_SIZE; /** Steps 0..FILL_LAST: column `c` gains one row from the bottom each tick, delayed by `c` (col 0 full at `ROWS`, last col at `ROWS + COLS - 1`). */ const FILL_LAST = ROWS + COLS - 1; const BLINK_STEPS = 4; const BLINK_OPACITIES = [0.38, 1, 0.38, 1] as const; const DRAIN_LAST = FILL_LAST; /** fillTick 0..FILL_LAST → drainTick 0..DRAIN_LAST → + blink in between */ const SEQUENCE_LEN = FILL_LAST + 1 + BLINK_STEPS + DRAIN_LAST + 1; const BASE_OPACITY = 0.08; const SETTLED_OPACITY = 0.52; const CAP_OPACITY = 1; function fillHeight(col: number, fillTick: number): number { return Math.max(0, Math.min(ROWS, fillTick - col)); } function drainHeight(col: number, drainTick: number): number { return Math.max(0, Math.min(ROWS, ROWS - Math.max(0, drainTick - col))); } export function DotmSquare8({ speed = 1.4, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare8Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle" && SEQUENCE_LEN > 0, cycleMsBase: 2000, steps: SEQUENCE_LEN, speed, }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } if (reducedMotion || phase === "idle") { return { style: { opacity: BASE_OPACITY } }; } let height = 0; let blinkOpacity: number | null = null; if (step <= FILL_LAST) { height = fillHeight(col, step); } else if (step < FILL_LAST + 1 + BLINK_STEPS) { height = ROWS; blinkOpacity = BLINK_OPACITIES[step - (FILL_LAST + 1)] ?? 1; } else { const drainTick = step - (FILL_LAST + 1 + BLINK_STEPS); height = drainHeight(col, drainTick); } const bottomRow = ROWS - 1; const topLitRow = ROWS - height; const isLit = height > 0 && row >= topLitRow && row <= bottomRow; if (!isLit) { return { style: { opacity: BASE_OPACITY } }; } if (blinkOpacity !== null) { return { style: { opacity: blinkOpacity } }; } const isCap = row === topLitRow && height > 0 && height < ROWS; return { style: { opacity: isCap ? CAP_OPACITY : SETTLED_OPACITY } }; }; }, [reducedMotion, step]); return ( ); } 5d:Te86,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare9Props = DotMatrixCommonProps; /** * Dots 1–6 in Unicode / ISO braille numbering (matches U+2800 + mask): * 1·4 * 2·5 * 3·6 */ const D1 = 0x01; const D2 = 0x02; const D3 = 0x04; const D4 = 0x08; const D5 = 0x10; const D6 = 0x20; /** Left column “odd” / right column “even” — classic 2×3 checkerboard. */ const CHECK_A = D1 | D3 | D5; const BASE_OPACITY = 0.08; const MID_OPACITY = 0.26; const GAP_OPACITY = 0.12; const CELL_ROW_START = 1; const LEFT_COL = 0; const RIGHT_CELL_COL = 3; function brailleBitForCell(row: number, col: number, cellColStart: number): number | null { if (row < CELL_ROW_START || row > CELL_ROW_START + 2) { return null; } const dr = row - CELL_ROW_START; if (col === cellColStart) { return D1 << dr; } if (col === cellColStart + 1) { return D4 << dr; } return null; } function resolveBraille(row: number, col: number): { bit: number } | null { const left = brailleBitForCell(row, col, LEFT_COL); if (left !== null) { return { bit: left }; } const right = brailleBitForCell(row, col, RIGHT_CELL_COL); if (right !== null) { return { bit: right }; } return null; } export function DotmSquare9({ speed = 1.5, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare9Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const braille = resolveBraille(row, col); if (reducedMotion || phase === "idle") { if (braille) { const mask = CHECK_A; const on = (mask & braille.bit) !== 0; return { style: { opacity: on ? MID_OPACITY : BASE_OPACITY } }; } if (row >= CELL_ROW_START && row <= CELL_ROW_START + 2 && col === 2) { return { style: { opacity: GAP_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; } if (row >= CELL_ROW_START && row <= CELL_ROW_START + 2 && col === 2) { return { style: { opacity: GAP_OPACITY } }; } if (!braille) { return { style: { opacity: BASE_OPACITY } }; } let bitClass = "dmx-square9-d1"; if (braille.bit === D2) { bitClass = "dmx-square9-d2"; } else if (braille.bit === D3) { bitClass = "dmx-square9-d3"; } else if (braille.bit === D4) { bitClass = "dmx-square9-d4"; } else if (braille.bit === D5) { bitClass = "dmx-square9-d5"; } else if (braille.bit === D6) { bitClass = "dmx-square9-d6"; } return { className: `dmx-square9-bit ${bitClass}` }; }; }, [reducedMotion]); return ( ); } 5e:T955,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { MATRIX_SIZE } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare10Props = DotMatrixCommonProps; const ROWS = MATRIX_SIZE; const BASE_OPACITY = 0.08; const PEAK_OPACITY = 1; const DECAY = 0.72; const COL_WARP = 0.07; export function DotmSquare10({ speed = 2.5, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare10Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const scanRow = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1500, steps: ROWS, speed, }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } if (reducedMotion || phase === "idle") { const falloff = (ROWS - 1 - row) / Math.max(1, ROWS - 1); return { style: { opacity: BASE_OPACITY + falloff * 0.38 } }; } const colGain = 1 + COL_WARP * Math.sin(col * 1.72 + scanRow * 0.61); if (row > scanRow) { return { style: { opacity: BASE_OPACITY } }; } const age = scanRow - row; const trail = Math.exp(-age * DECAY); const opacity = BASE_OPACITY + (PEAK_OPACITY - BASE_OPACITY) * trail * colGain; return { style: { opacity: Math.min(PEAK_OPACITY, opacity) } }; }; }, [reducedMotion, scanRow]); return ( ); } 5f:T6d4,"use client"; import type { CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare11Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, manhattanDistance, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const ring = Math.max(0, Math.min(4, manhattanDistance)); const style = { "--dmx-ripple-ring": ring, "--dmx-ripple-parity": ring % 2 } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: 0.2 + (1 - ring / 4) * 0.72 } }; } return { className: "dmx-ripple-echo", style }; }; export function DotmSquare11({ speed = 1.25, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare11Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } 60:T7a8,"use client"; import type { CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare12Props = DotMatrixCommonProps; // User-defined origin is cell (2,2) in a 1-based 5x5 grid => (row=1,col=1) in zero-based coords. const ORIGIN_ROW = 1; const ORIGIN_COL = 1; const MAX_MANHATTAN = 6; const animationResolver: DotAnimationResolver = ({ isActive, row, col, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const ring = Math.max( 0, Math.min(MAX_MANHATTAN, Math.abs(row - ORIGIN_ROW) + Math.abs(col - ORIGIN_COL)) ); const style = { "--dmx-center-ripple-ring": ring } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: 0.2 + (1 - ring / MAX_MANHATTAN) * 0.75 } }; } return { className: "dmx-center-origin-ripple", style }; }; export function DotmSquare12({ speed = 1.35, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare12Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } 61:Tb9f,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { rowMajorIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare13Props = DotMatrixCommonProps; type FrameCell = "." | "o" | "x"; const BASE_OPACITY = 0.08; const ON_OPACITY = 0.56; const PEAK_OPACITY = 1; const FRAME_MASKS: readonly string[] = [ // N "..x.." + "..x.." + "..o.." + "....." + ".....", // NE "....x" + "...x." + "..o.." + "....." + ".....", // E "....." + "....." + "..oxx" + "....." + ".....", // SE "....." + "....." + "..o.." + "...x." + "....x", // S "....." + "....." + "..o.." + "..x.." + "..x..", // SW "....." + "....." + "..o.." + ".x..." + "x....", // W "....." + "....." + "xxo.." + "....." + ".....", // NW "x...." + ".x..." + "..o.." + "....." + "....." ]; const FRAME_SEQUENCE: readonly number[] = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7]; function maskCell(mask: string, row: number, col: number): FrameCell { return (mask[rowMajorIndex(row, col)] as FrameCell | undefined) ?? "."; } export function DotmSquare13({ speed = 1.85, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare13Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const sequenceLength = FRAME_SEQUENCE.length; const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle" && sequenceLength > 0, cycleMsBase: 1550, steps: sequenceLength, speed, }); const resolver = useMemo(() => { const frameIndex = FRAME_SEQUENCE[step] ?? 0; const mask = FRAME_MASKS[frameIndex] ?? FRAME_MASKS[0]!; return ({ isActive, row, col }) => { if (!isActive) { return { className: "dmx-inactive" }; } const cell = maskCell(mask, row, col); if (cell === "x") { return { style: { opacity: PEAK_OPACITY } }; } if (cell === "o") { return { style: { opacity: ON_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [step]); return ( ); } 62:Tb6b,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { rowMajorIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare14Props = DotMatrixCommonProps; type FrameCell = "." | "o" | "x"; const BASE_OPACITY = 0.08; const MID_OPACITY = 0.52; const PEAK_OPACITY = 1; const SMOOTH_TRANSITION = "opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)"; const FRAME_MASKS: readonly string[] = [ // Diagonal star "x...x" + ".x.x." + "..o.." + ".x.x." + "x...x", // Diamond bloom "..x.." + ".oxo." + "xooox" + ".oxo." + "..x..", // Petal ring ".x.x." + "x.o.x" + "..o.." + "x.o.x" + ".x.x.", // Crossed lattice "x.x.x" + ".o.o." + "x.o.x" + ".o.o." + "x.x.x" ]; const FRAME_SEQUENCE: readonly number[] = [0, 1, 2, 3, 2, 1]; function maskCell(mask: string, row: number, col: number): FrameCell { return (mask[rowMajorIndex(row, col)] as FrameCell | undefined) ?? "."; } export function DotmSquare14({ speed = 1.25, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare14Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const sequenceLength = FRAME_SEQUENCE.length; const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle" && sequenceLength > 0, cycleMsBase: 1700, steps: sequenceLength, speed, }); const resolver = useMemo(() => { const frameIndex = FRAME_SEQUENCE[step] ?? 0; const mask = FRAME_MASKS[frameIndex] ?? FRAME_MASKS[0]!; return ({ isActive, row, col }) => { if (!isActive) { return { className: "dmx-inactive" }; } const cell = maskCell(mask, row, col); if (cell === "x") { return { style: { opacity: PEAK_OPACITY, transition: SMOOTH_TRANSITION } }; } if (cell === "o") { return { style: { opacity: MID_OPACITY, transition: SMOOTH_TRANSITION } }; } return { style: { opacity: BASE_OPACITY, transition: SMOOTH_TRANSITION } }; }; }, [step]); return ( ); } 63:T9d3,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare15Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const STRAND_OPACITY = 1; const BRIDGE_OPACITY = 0.58; const NEAR_STRAND_OPACITY = 0.24; /** Integer full sin periods per matrix cycle so phase 0 ≡ phase 1 (no wrap glitch). */ const STRAND_LOOPS = 2; export function DotmSquare15({ speed = 1.25, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare15Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1600, speed }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const u = reducedMotion || phase === "idle" ? 0 : animPhase; const rowPhase = u * STRAND_LOOPS * 2 * Math.PI + row * 1.24; const left = Math.round(1 + Math.sin(rowPhase)); const right = 4 - left; const bridgeOn = Math.cos(rowPhase * 2) > 0.82; if (col === left || col === right) { return { style: { opacity: STRAND_OPACITY } }; } if (bridgeOn && col > left && col < right) { return { style: { opacity: BRIDGE_OPACITY } }; } if (Math.abs(col - left) === 1 || Math.abs(col - right) === 1) { return { style: { opacity: NEAR_STRAND_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [reducedMotion, animPhase]); return ( ); } 64:Ta45,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare16Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const STRAND_OPACITY = 1; const BRIDGE_OPACITY = 0.58; const NEAR_STRAND_OPACITY = 0.24; const STEP_COUNT = 20; const HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1); export function DotmSquare16({ speed = 2.5, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare16Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1400, speed }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const t = reducedMotion || phase === "idle" ? 0 : animPhase * STEP_COUNT; // Make first and last discrete frames identical to avoid loop jank. const rowPhase = t * HELIX_LOOP_RADIANS + row * 1.24; // Tighter center-band helix (3-column footprint). const left = Math.round(1.5 + 0.5 * Math.sin(rowPhase)); const right = 4 - left; const bridgeOn = Math.cos(rowPhase * 2) > 0.82; if (col === left || col === right) { return { style: { opacity: STRAND_OPACITY } }; } if (bridgeOn && col > left && col < right) { return { style: { opacity: BRIDGE_OPACITY } }; } if (Math.abs(col - left) === 1 || Math.abs(col - right) === 1) { return { style: { opacity: NEAR_STRAND_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [reducedMotion, animPhase]); return ( ); } 65:T948,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare17Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const STRAND_OPACITY = 1; const NEAR_STRAND_OPACITY = 0.24; const STEP_COUNT = 20; const HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1); export function DotmSquare17({ speed = 2.5, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare17Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1600, speed }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const t = reducedMotion || phase === "idle" ? 0 : animPhase * STEP_COUNT; // Make first and last discrete frames identical to avoid loop jank. const rowPhase = t * HELIX_LOOP_RADIANS + row * 1.24; // One helix strand only, sweeping across full 5-column width. const strandCol = Math.round(2 + 2 * Math.sin(rowPhase)); if (col === strandCol) { return { style: { opacity: STRAND_OPACITY } }; } if (Math.abs(col - strandCol) === 1) { return { style: { opacity: NEAR_STRAND_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [reducedMotion, animPhase]); return ( ); } 66:T90a,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare18Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const LIT_OPACITY = 0.94; const CAP_OPACITY = 1; const STEP_COUNT = 24; const MAX_LEVEL = 5; function clampLevel(value: number): number { return Math.max(1, Math.min(MAX_LEVEL, Math.round(value))); } export function DotmSquare18({ speed = 1.35, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare18Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1750, speed }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const t = reducedMotion || phase === "idle" ? 0 : animPhase * STEP_COUNT; const colPhase = t * 0.52 + col * 1.15; const level = clampLevel(1 + ((Math.sin(colPhase) + 1) / 2) * (MAX_LEVEL - 1)); const topLitRow = MAX_LEVEL - level; if (row > topLitRow) { return { style: { opacity: LIT_OPACITY } }; } if (row === topLitRow) { return { style: { opacity: CAP_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [reducedMotion, animPhase]); return ( ); } 67:Tf3c,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare19Props = DotMatrixCommonProps; const STEP_COUNT = 48; const BASE_OPACITY = 0.08; const SECONDARY_TRAIL_OPACITY = 0.32; const PRIMARY_TRAIL_OPACITY = 0.62; const PEAK_OPACITY = 1; const CURVE_OPACITY = 0.2; interface Point { x: number; y: number; } const CURVE_SAMPLES: readonly Point[] = Array.from({ length: 96 }, (_, index) => { const t = (index / 96) * Math.PI * 2; return { x: Math.sin(t), y: 0.58 * Math.sin(2 * t) }; }); function gridPoint(row: number, col: number): Point { return { x: (col - 2) / 2, y: (2 - row) / 2 }; } function loopPoint(step: number): Point { const t = ((step % STEP_COUNT) / STEP_COUNT) * Math.PI * 2; return { x: Math.sin(t), y: 0.58 * Math.sin(2 * t) }; } function squaredDistance(a: Point, b: Point): number { const dx = a.x - b.x; const dy = a.y - b.y; return dx * dx + dy * dy; } function minCurveDistanceSq(point: Point): number { let min = Number.POSITIVE_INFINITY; for (const sample of CURVE_SAMPLES) { min = Math.min(min, squaredDistance(point, sample)); } return min; } function headInfluence(dot: Point, head: Point): number { const distSq = squaredDistance(dot, head); return Math.exp(-distSq / 0.19); } export function DotmSquare19({ speed = 1.45, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare19Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1700, steps: STEP_COUNT, speed, }); const resolver = useMemo(() => { return ({ isActive, row, col, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const dot = gridPoint(row, col); if (reducedMotion || phase === "idle") { const curveGlow = Math.exp(-minCurveDistanceSq(dot) / 0.2); const centerBoost = Math.exp(-(dot.x * dot.x + dot.y * dot.y) / 0.06); return { style: { opacity: Math.min(PEAK_OPACITY, BASE_OPACITY + curveGlow * CURVE_OPACITY + centerBoost * 0.18) } }; } const headA = loopPoint(step); const headB = loopPoint(step + STEP_COUNT / 2); const trailA = loopPoint(step - 4); const trailB = loopPoint(step + STEP_COUNT / 2 - 4); const lead = Math.max(headInfluence(dot, headA), headInfluence(dot, headB)); const trail = Math.max(headInfluence(dot, trailA), headInfluence(dot, trailB)); const centerPulse = Math.exp(-(dot.x * dot.x + dot.y * dot.y) / 0.05) * (0.45 + 0.55 * lead); const opacity = BASE_OPACITY + SECONDARY_TRAIL_OPACITY * trail + PRIMARY_TRAIL_OPACITY * lead + 0.16 * centerPulse; return { style: { opacity: Math.min(PEAK_OPACITY, opacity) } }; }; }, [reducedMotion, step]); return ( ); } 68:T1083,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { rowMajorIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmSquare20Props = DotMatrixCommonProps; /** Clockwise perimeter: one closed loop you can trace with your eye. */ const PERIMETER_PATH: readonly number[] = [ rowMajorIndex(0, 0), rowMajorIndex(0, 1), rowMajorIndex(0, 2), rowMajorIndex(0, 3), rowMajorIndex(0, 4), rowMajorIndex(1, 4), rowMajorIndex(2, 4), rowMajorIndex(3, 4), rowMajorIndex(4, 4), rowMajorIndex(4, 3), rowMajorIndex(4, 2), rowMajorIndex(4, 1), rowMajorIndex(4, 0), rowMajorIndex(3, 0), rowMajorIndex(2, 0), rowMajorIndex(1, 0) ]; const LOOP_LEN = PERIMETER_PATH.length; const TAIL_BRIGHT = [1, 0.82, 0.64, 0.46, 0.3, 0.18] as const; const BACK_TAIL_BRIGHT = [0.38, 0.3, 0.22, 0.14] as const; const BASE_OPACITY = 0.08; const TWIST_INNER_OPACITY = 0.52; const SEAM_PULSE_OPACITY = 0.55; const IDLE_RING_OPACITY = 0.48; /** Corner steps on the loop → one cell “inside” the strip at the fold (half-twist cue). */ const TWIST_INNER_BY_HEAD_STEP: ReadonlyMap = new Map([ [0, rowMajorIndex(1, 1)], [4, rowMajorIndex(1, 3)], [8, rowMajorIndex(3, 3)], [12, rowMajorIndex(3, 1)] ]); function pathStepForCellIndex(cellIndex: number): number { const step = PERIMETER_PATH.indexOf(cellIndex); return step; } function opacityFromTail(distance: number, tail: readonly number[]): number { if (distance < 0 || distance >= tail.length) { return 0; } return tail[distance]!; } export function DotmSquare20({ speed = 1.45, pattern = "full", animated = true, hoverAnimated = false, ...rest }: DotmSquare20Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const headStep = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1600, steps: LOOP_LEN, speed, }); const resolver = useMemo(() => { return ({ isActive, index, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const onLoop = pathStepForCellIndex(index); const backHead = (headStep + Math.floor(LOOP_LEN / 2)) % LOOP_LEN; if (reducedMotion || phase === "idle") { if (onLoop >= 0) { return { style: { opacity: IDLE_RING_OPACITY } }; } if (index === rowMajorIndex(2, 2)) { return { style: { opacity: 0.22 } }; } return { style: { opacity: BASE_OPACITY } }; } let opacity = BASE_OPACITY; if (onLoop >= 0) { const forward = (headStep - onLoop + LOOP_LEN) % LOOP_LEN; const alongBack = (backHead - onLoop + LOOP_LEN) % LOOP_LEN; opacity = Math.max( opacity, opacityFromTail(forward, TAIL_BRIGHT), opacityFromTail(alongBack, BACK_TAIL_BRIGHT) ); } const twistInner = TWIST_INNER_BY_HEAD_STEP.get(headStep); if (twistInner === index) { opacity = Math.max(opacity, TWIST_INNER_OPACITY); } const seam = rowMajorIndex(2, 2); if (index === seam && headStep % 4 === 0) { opacity = Math.max(opacity, SEAM_PULSE_OPACITY); } return { style: { opacity: Math.min(1, opacity) } }; }; }, [headStep, reducedMotion]); return ( ); } 69:T9c3,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular1Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const STRAND_OPACITY = 1; const NEAR_STRAND_OPACITY = 0.24; const STEP_COUNT = 20; const HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1); export function DotmCircular1({ speed = 2.5, animated = true, hoverAnimated = false, ...rest }: DotmCircular1Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1700, speed }); const animationResolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const t = reducedMotion || phase === "idle" ? 0 : animPhase * STEP_COUNT; const diagonalAxis = row + col; const phaseOffset = t * HELIX_LOOP_RADIANS + diagonalAxis * 0.82; const strandPerpendicular = Math.round(2 * Math.sin(phaseOffset)); const cellPerpendicular = col - row; const distanceFromStrand = Math.abs(cellPerpendicular - strandPerpendicular); if (distanceFromStrand === 0) { return { style: { opacity: STRAND_OPACITY } }; } if (distanceFromStrand === 1) { return { style: { opacity: NEAR_STRAND_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [reducedMotion, animPhase]); return ( ); } 6a:T8db,"use client"; import type { CSSProperties } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { rowMajorIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular2Props = DotMatrixCommonProps; const RING_PATH: readonly number[] = [ rowMajorIndex(0, 1), rowMajorIndex(0, 2), rowMajorIndex(0, 3), rowMajorIndex(1, 4), rowMajorIndex(2, 4), rowMajorIndex(3, 4), rowMajorIndex(4, 3), rowMajorIndex(4, 2), rowMajorIndex(4, 1), rowMajorIndex(3, 0), rowMajorIndex(2, 0), rowMajorIndex(1, 0) ]; const LOOP_LEN = RING_PATH.length; const BASE_OPACITY = 0.08; export function DotmCircular2({ speed = 1.8, animated = true, hoverAnimated = false, ...rest }: DotmCircular2Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const resolver: DotAnimationResolver = ({ index, row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const onRing = RING_PATH.indexOf(index); if (onRing === -1) { return { style: { opacity: row === 2 && col === 2 ? 0.18 : BASE_OPACITY } }; } if (reducedMotion || phase === "idle") { return { style: { opacity: 0.28 + (onRing / (LOOP_LEN - 1)) * 0.58 } }; } return { className: "dmx-circular2-ring", style: { "--dmx-ring-order": onRing } as CSSProperties }; }; return ( ); } 6b:Td39,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { rowMajorIndex } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular3Props = DotMatrixCommonProps; const STEP_COUNT = 24; const BASE_OPACITY = 0.08; const RING_BASE_OPACITY = 0.2; const CORE_OPACITY = 0.16; const COMET_TAIL = [1, 0.78, 0.56, 0.36, 0.22] as const; const SECONDARY_COMET_SCALE = 0.72; const CIRCULAR_RING_PATH: readonly number[] = [ rowMajorIndex(0, 1), rowMajorIndex(0, 2), rowMajorIndex(0, 3), rowMajorIndex(1, 4), rowMajorIndex(2, 4), rowMajorIndex(3, 4), rowMajorIndex(4, 3), rowMajorIndex(4, 2), rowMajorIndex(4, 1), rowMajorIndex(3, 0), rowMajorIndex(2, 0), rowMajorIndex(1, 0) ]; const LOOP_LEN = CIRCULAR_RING_PATH.length; export function DotmCircular3({ speed = 1.6, animated = true, hoverAnimated = false, ...rest }: DotmCircular3Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const headStep = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1650, steps: STEP_COUNT, speed, idleStep: 6 }); const resolver = useMemo(() => { return ({ index, row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const pathOrder = CIRCULAR_RING_PATH.indexOf(index); const isCore = row === 2 && col === 2; if (pathOrder === -1) { return { style: { opacity: isCore ? CORE_OPACITY : BASE_OPACITY } }; } if (reducedMotion || phase === "idle") { return { style: { opacity: RING_BASE_OPACITY + (pathOrder / (LOOP_LEN - 1)) * 0.56 } }; } const leadA = Math.floor((headStep / STEP_COUNT) * LOOP_LEN) % LOOP_LEN; const leadB = (leadA + Math.floor(LOOP_LEN / 2)) % LOOP_LEN; let opacity = BASE_OPACITY; for (let i = 0; i < COMET_TAIL.length; i += 1) { const weight = COMET_TAIL[i] ?? 0; const tailA = (leadA - i + LOOP_LEN) % LOOP_LEN; const tailB = (leadB - i + LOOP_LEN) % LOOP_LEN; if (pathOrder === tailA) { opacity = Math.max(opacity, weight); } if (pathOrder === tailB) { opacity = Math.max(opacity, weight * SECONDARY_COMET_SCALE); } } return { style: { opacity: Math.min(1, opacity) } }; }; }, [headStep, reducedMotion]); return ( ); } 6c:Ta68,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular4Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const SWEEP_OPACITY = 0.96; const NEAR_SWEEP_OPACITY = 0.36; const RING_OPACITY = 0.22; export function DotmCircular4({ speed = 1.55, animated = true, hoverAnimated = false, ...rest }: DotmCircular4Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const phase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1800, speed }); const resolver = useMemo(() => { return ({ row, col, phase: p }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const centerRow = row - 2; const centerCol = col - 2; const radius = Math.hypot(centerRow, centerCol); const theta = (reducedMotion || p === "idle" ? 0 : phase) * Math.PI * 2; const sweepX = Math.cos(theta); const sweepY = Math.sin(theta); const projection = centerCol * sweepX + centerRow * sweepY; const perpendicular = Math.abs(centerCol * sweepY - centerRow * sweepX); if (radius < 0.5) { return { style: { opacity: 0.62 } }; } if (projection > 0.3 && perpendicular < 0.55) { return { style: { opacity: SWEEP_OPACITY } }; } if (projection > 0 && perpendicular < 1.15) { return { style: { opacity: NEAR_SWEEP_OPACITY } }; } if (radius > 1.6 && radius < 2.3) { return { style: { opacity: RING_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [reducedMotion, phase]); return ( ); } 6d:T960,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular5Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const BLADE_OPACITY = 0.94; const HALO_OPACITY = 0.34; export function DotmCircular5({ speed = 1.7, animated = true, hoverAnimated = false, ...rest }: DotmCircular5Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const phase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1650, speed }); const resolver = useMemo(() => { return ({ row, col, phase: p }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const radius = Math.hypot(x, y); const angle = Math.atan2(y, x); const theta = (reducedMotion || p === "idle" ? 0 : phase) * Math.PI * 2; const pinwheel = Math.cos(angle * 4 - theta * 2.2); const radialGate = Math.sin(radius * 2.1 - theta * 1.25); if (radius < 0.6) { return { style: { opacity: 0.66 } }; } if (pinwheel > 0.48 && radialGate > -0.25) { return { style: { opacity: BLADE_OPACITY } }; } if (pinwheel > 0.1) { return { style: { opacity: HALO_OPACITY } }; } return { style: { opacity: BASE_OPACITY } }; }; }, [reducedMotion, phase]); return ( ); } 6e:Ta90,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular6Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const ORBIT_OPACITY = 0.96; const NEAR_ORBIT_OPACITY = 0.34; export function DotmCircular6({ speed = 1.6, animated = true, hoverAnimated = false, ...rest }: DotmCircular6Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const phase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1700, speed }); const resolver = useMemo(() => { return ({ row, col, phase: p }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const t = reducedMotion || p === "idle" ? 0 : (phase) * Math.PI * 2; const angle = Math.atan2(y, x); const ring = Math.sqrt(x * x + y * y); const angularPhase = ((angle - t * 0.95 + Math.PI * 4) % (Math.PI * 2)) / ((Math.PI * 2) / 3); const sectorPos = angularPhase - Math.floor(angularPhase); const sectorPulse = Math.max(0, 1 - Math.abs(sectorPos - 0.5) * 2); const ringPhase = 0.5 + 0.5 * Math.cos(ring * 3.2 + t * 1.7); const score = 0.74 * sectorPulse + 0.26 * ringPhase; let opacity = BASE_OPACITY; if (score > 0.84) { opacity = ORBIT_OPACITY; } else if (score > 0.63) { opacity = 0.62; } else if (score > 0.44) { opacity = NEAR_ORBIT_OPACITY; } if (x === 0 && y === 0) { return { style: { opacity: Math.max(opacity, NEAR_ORBIT_OPACITY) } }; } return { style: { opacity } }; }; }, [reducedMotion, phase]); return ( ); } 6f:T97d,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular7Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const GATE_OPACITY = 0.92; export function DotmCircular7({ speed = 1.8, animated = true, hoverAnimated = false, ...rest }: DotmCircular7Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const phase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1600, speed }); const resolver = useMemo(() => { return ({ row, col, phase: p }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const t = reducedMotion || p === "idle" ? 0 : (phase) * Math.PI * 2; const ring = Math.sqrt(x * x + y * y); const angle = Math.atan2(y, x); const petalWave = 0.5 + 0.5 * Math.cos(5 * angle - t * 1.7); const ringWave = 0.5 + 0.5 * Math.cos(ring * 3.3 - t * 1.2); const chordWave = 0.5 + 0.5 * Math.cos((x + y) * 1.6 + t * 1.35); // Sharpen contrast so lit cells form clear, visible groups. const petalGate = Math.pow(petalWave, 2.2); const blend = 0.68 * petalGate + 0.22 * ringWave + 0.1 * chordWave; const opacity = BASE_OPACITY + (GATE_OPACITY - BASE_OPACITY) * blend; return { style: { opacity } }; }; }, [reducedMotion, phase]); return ( ); } 70:T92b,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular8Props = DotMatrixCommonProps; const BASE_OPACITY = 0.08; const PULSE_CORE = 0.95; const PULSE_RING = 0.44; export function DotmCircular8({ speed = 1.95, animated = true, hoverAnimated = false, ...rest }: DotmCircular8Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const phase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1400, speed }); const resolver = useMemo(() => { return ({ row, col, phase: p }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const radius = Math.hypot(x, y); const beat = reducedMotion || p === "idle" ? 0 : Math.sin((phase) * Math.PI * 2); const spike = reducedMotion || p === "idle" ? 0 : Math.sin((phase) * Math.PI * 4); const pulse = Math.max(0, beat) + Math.max(0, spike) * 0.55; if (radius < 0.55) { return { style: { opacity: Math.min(1, 0.35 + pulse * PULSE_CORE) } }; } if (radius < 1.65) { return { style: { opacity: 0.16 + pulse * PULSE_RING } }; } return { style: { opacity: BASE_OPACITY + pulse * 0.08 } }; }; }, [reducedMotion, phase]); return ( ); } 71:Tc18,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular9Props = DotMatrixCommonProps; const STEP_COUNT = 36; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.28; const STAR_OPACITY = 0.96; export function DotmCircular9({ speed = 5.55, animated = true, hoverAnimated = false, ...rest }: DotmCircular9Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1900, steps: STEP_COUNT, speed, }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const ring = Math.sqrt(x * x + y * y); const angle = Math.atan2(y, x); const t = reducedMotion || phase === "idle" ? 0 : (step / STEP_COUNT) * Math.PI * 2; const cardinalCenters = [0, Math.PI / 2, Math.PI, -Math.PI / 2]; const beaconIndex = Math.floor((step / STEP_COUNT) * cardinalCenters.length) % cardinalCenters.length; const activeCenter = cardinalCenters[beaconIndex]!; const oppositeCenter = cardinalCenters[(beaconIndex + 2) % cardinalCenters.length]!; const distanceToActive = Math.acos(Math.cos(angle - activeCenter)); const distanceToOpposite = Math.acos(Math.cos(angle - oppositeCenter)); const activeBeam = Math.max(0, 1 - distanceToActive / 0.5); const oppositeBeam = Math.max(0, 1 - distanceToOpposite / 0.65); const ringTier = Math.round(ring); let opacity = BASE_OPACITY; if (activeBeam > 0.8 && ringTier >= 2) { opacity = STAR_OPACITY; } else if (activeBeam > 0.45 && ringTier >= 1) { opacity = 0.62; } else if (oppositeBeam > 0.5 && ringTier >= 1) { opacity = MID_OPACITY; } if (x === 0 && y === 0) { return { style: { opacity: Math.max(opacity, 0.24) } }; } return { style: { opacity } }; }; }, [reducedMotion, step]); return ( ); } 72:Ta6e,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular10Props = DotMatrixCommonProps; const STEP_COUNT = 30; const BASE_OPACITY = 0.06; const LOW_OPACITY = 0.2; const MID_OPACITY = 0.48; const HIGH_OPACITY = 0.94; function moduloDistance(a: number, b: number, mod: number): number { const raw = Math.abs(a - b); return Math.min(raw, mod - raw); } export function DotmCircular10({ speed = 1.75, animated = true, hoverAnimated = false, ...rest }: DotmCircular10Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1600, speed }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const ring = Math.round(Math.sqrt(x * x + y * y)); const tick = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * 10); const cellCode = (row * 3 + col * 5 + ring * 2) % 10; const d = moduloDistance(cellCode, tick, 10); const parityGate = (row + col + tick) % 2 === 0; let opacity = BASE_OPACITY; if (d === 0) { opacity = HIGH_OPACITY; } else if (d === 1) { opacity = MID_OPACITY; } else if (d === 2 || parityGate) { opacity = LOW_OPACITY; } if (x === 0 && y === 0) { return { style: { opacity: Math.max(opacity, MID_OPACITY) } }; } return { style: { opacity } }; }; }, [reducedMotion, animPhase]); return ( ); } 73:Tac3,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular11Props = DotMatrixCommonProps; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.3; const HIGH_OPACITY = 0.95; export function DotmCircular11({ speed = 1.65, animated = true, hoverAnimated = false, ...rest }: DotmCircular11Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const phase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1850, speed }); const resolver = useMemo(() => { return ({ row, col, phase: p }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const ring = Math.sqrt(x * x + y * y); const t = reducedMotion || p === "idle" ? 0 : (phase) * Math.PI * 2; const angle = Math.atan2(y, x); const moonCenterX = Math.cos(t) * 0.7; const moonCenterY = Math.sin(t) * 0.7; const body = Math.hypot(x - moonCenterX, y - moonCenterY); const cutCenterX = moonCenterX + Math.cos(t) * 0.82; const cutCenterY = moonCenterY + Math.sin(t) * 0.82; const cut = Math.hypot(x - cutCenterX, y - cutCenterY); const rim = Math.max(0, 1 - Math.abs(body - 1.55) / 0.35); const halo = Math.max(0, 1 - Math.acos(Math.cos(angle - t)) / 0.9); let opacity = BASE_OPACITY; if (body < 1.55 && cut > 1.05) { opacity = HIGH_OPACITY; } else if (rim > 0.5) { opacity = MID_OPACITY + rim * 0.22; } else if (halo > 0.68 && ring > 1.2) { opacity = MID_OPACITY; } return { style: { opacity: Math.min(HIGH_OPACITY, opacity) } }; }; }, [reducedMotion, phase]); return ( ); } 74:Tba2,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular12Props = DotMatrixCommonProps; const STEP_COUNT = 36; const BASE_OPACITY = 0.06; const MID_OPACITY = 0.3; const ARC_OPACITY = 0.96; export function DotmCircular12({ speed = 1.7, animated = true, hoverAnimated = false, ...rest }: DotmCircular12Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1700, steps: STEP_COUNT, speed, }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const ring = Math.sqrt(x * x + y * y); const angle = Math.atan2(y, x); const t = reducedMotion || phase === "idle" ? 0 : (step / STEP_COUNT) * Math.PI * 2; const stepBand = Math.floor((step / STEP_COUNT) * 8) % 8; const targetAngle = stepBand * (Math.PI / 4); const angleDelta = Math.acos(Math.cos(angle - targetAngle)); const beam = Math.max(0, 1 - angleDelta / 0.42); const oppositeBeam = Math.max(0, 1 - Math.acos(Math.cos(angle - (targetAngle + Math.PI))) / 0.62); const spokePulse = Math.max(0, 1 - Math.abs(Math.abs(x) - Math.abs(y)) / 0.35); const ringTier = ring < 1 ? 0 : ring < 2 ? 1 : 2; let opacity = BASE_OPACITY; if (beam > 0.78 && ringTier >= 1) { opacity = ARC_OPACITY; } else if (beam > 0.48) { opacity = 0.62; } else if (oppositeBeam > 0.52 && ringTier === 2) { opacity = MID_OPACITY; } else if (spokePulse > 0.9 && ringTier > 0) { opacity = MID_OPACITY; } if (x === 0 && y === 0) { return { style: { opacity: Math.max(opacity, 0.26) } }; } return { style: { opacity } }; }; }, [reducedMotion, step]); return ( ); } 75:Tacc,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular13Props = DotMatrixCommonProps; const STEP_COUNT = 28; const BASE_OPACITY = 0.07; const STRAND_OPACITY = 0.95; const NEAR_STRAND_OPACITY = 0.5; const BRIDGE_OPACITY = 0.3; export function DotmCircular13({ speed = 1.55, animated = true, hoverAnimated = false, ...rest }: DotmCircular13Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1750, steps: STEP_COUNT, speed, }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const t = reducedMotion || phase === "idle" ? 0 : (step / STEP_COUNT) * Math.PI * 2; const strandOffset = Math.sin(y * 1.35 + t * 1.3) * 1.15; const leftStrand = -strandOffset; const rightStrand = strandOffset; const leftDistance = Math.abs(x - leftStrand); const rightDistance = Math.abs(x - rightStrand); const strandDistance = Math.min(leftDistance, rightDistance); const bridgeOn = Math.cos(y * 2 + t * 2.1) > 0.55; const isBetweenStrands = x > Math.min(leftStrand, rightStrand) && x < Math.max(leftStrand, rightStrand); let opacity = BASE_OPACITY; if (strandDistance < 0.34) { opacity = STRAND_OPACITY; } else if (strandDistance < 0.8) { opacity = NEAR_STRAND_OPACITY; } else if (bridgeOn && isBetweenStrands) { opacity = BRIDGE_OPACITY; } return { style: { opacity } }; }; }, [reducedMotion, step]); return ( ); } 76:Tac1,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular14Props = DotMatrixCommonProps; const STEP_COUNT = 30; const BASE_OPACITY = 0.07; const RUNG_OPACITY = 0.95; const SIDE_OPACITY = 0.56; const GHOST_OPACITY = 0.28; export function DotmCircular14({ speed = 1.75, animated = true, hoverAnimated = false, ...rest }: DotmCircular14Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1650, speed }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const phaseStep = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * 10); const activeRow = (phaseStep + 5) % 5; const rowDistance = Math.abs(row - activeRow); const swing = Math.sin((phaseStep / 10) * Math.PI * 2 + y * 0.9); const leftAnchor = Math.round(1 + swing); const rightAnchor = 4 - leftAnchor; let opacity = BASE_OPACITY; if (row === activeRow && col >= leftAnchor && col <= rightAnchor) { opacity = RUNG_OPACITY; } else if ((col === leftAnchor || col === rightAnchor) && rowDistance <= 1) { opacity = SIDE_OPACITY; } else if ((col === leftAnchor || col === rightAnchor) && rowDistance === 2) { opacity = GHOST_OPACITY; } if (x === 0 && y === 0 && rowDistance <= 1) { return { style: { opacity: Math.max(opacity, SIDE_OPACITY) } }; } return { style: { opacity } }; }; }, [reducedMotion, animPhase]); return ( ); } 77:Tc9d,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular15Props = DotMatrixCommonProps; const STEP_COUNT = 24; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.34; const HIGH_OPACITY = 0.95; const BRAILLE_PHASES: ReadonlyArray> = [ new Set(["1,1", "2,1", "3,1", "1,3", "2,3", "3,3"]), // rails new Set(["1,1", "2,1", "3,1", "2,2", "1,3", "2,3", "3,3"]), // center bridge new Set(["1,1", "1,2", "1,3", "2,1", "2,3", "3,1", "3,2", "3,3"]), // top+bottom bars new Set(["1,1", "3,1", "2,2", "1,3", "3,3"]), // X-cross new Set(["2,1", "1,2", "3,2", "2,3"]), // plus motif new Set(["1,1", "2,1", "2,2", "2,3", "3,3"]) // diagonal sweep ]; export function DotmCircular15({ speed = 1.65, animated = true, hoverAnimated = false, ...rest }: DotmCircular15Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1680, speed }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const x = col - 2; const y = row - 2; const ring = Math.sqrt(x * x + y * y); const count = BRAILLE_PHASES.length; const phaseIndex = reducedMotion || phase === "idle" ? 0 : (() => { const t = Number.isFinite(animPhase) ? animPhase : 0; const raw = Math.floor(t * count); return ((raw % count) + count) % count; })(); const activePattern = BRAILLE_PHASES[phaseIndex]!; const key = `${row},${col}`; const inPattern = activePattern.has(key); const previousIndex = (phaseIndex + BRAILLE_PHASES.length - 1) % BRAILLE_PHASES.length; const inPrevPattern = BRAILLE_PHASES[previousIndex]!.has(key); let opacity = BASE_OPACITY; if (inPattern) { opacity = HIGH_OPACITY; } else if (inPrevPattern) { opacity = MID_OPACITY; } else if (ring < 1.1) { opacity = 0.2; } return { style: { opacity } }; }; }, [reducedMotion, animPhase]); return ( ); } 78:Ta75,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular16Props = DotMatrixCommonProps; const STEP_COUNT = 25; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.32; const HIGH_OPACITY = 0.95; export function DotmCircular16({ speed = 1.1, animated = true, hoverAnimated = false, ...rest }: DotmCircular16Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1700, speed }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } // Discrete steps: animPhase is continuous in [0, 1); fractional `t` breaks row === checks. const t = reducedMotion || phase === "idle" ? 0 : Math.floor(animPhase * STEP_COUNT) % STEP_COUNT; const activeRow = t % 5; const activeBrailleCol = Math.floor((t / 5) * 2) % 2; // left or right cell rail const railCol = activeBrailleCol === 0 ? 1 : 3; const nearCol = activeBrailleCol === 0 ? 2 : 2; const rowDistance = Math.abs(row - activeRow); let opacity = BASE_OPACITY; if (col === railCol && rowDistance === 0) { opacity = HIGH_OPACITY; } else if (col === railCol && rowDistance === 1) { opacity = MID_OPACITY; } else if (col === nearCol && rowDistance === 0) { opacity = 0.52; } else if ((col === 1 || col === 3) && rowDistance === 2) { opacity = 0.24; } return { style: { opacity } }; }; }, [reducedMotion, animPhase]); return ( ); } 79:T99b,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular17Props = DotMatrixCommonProps; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.34; const HIGH_OPACITY = 0.95; /** Discrete checker frames per loop (must stay integer for `(row + col + t) % 2`). */ const CHECKER_STEPS = 4; export function DotmCircular17({ speed = 1.55, animated = true, hoverAnimated = false, ...rest }: DotmCircular17Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1500, speed }); const resolver = useMemo(() => { return ({ row, col, phase: dmxPhase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const holdStill = reducedMotion || dmxPhase === "idle"; const t = holdStill ? 0 : Math.floor(animPhase * CHECKER_STEPS) % CHECKER_STEPS; const parity = (row + col + t) % 2; const brailleBias = col === 1 || col === 3; const centerBias = row === 2 || col === 2; let opacity = BASE_OPACITY; if (parity === 0 && brailleBias) { opacity = HIGH_OPACITY; } else if (parity === 0 || centerBias) { opacity = MID_OPACITY; } else if (brailleBias) { opacity = 0.24; } return { style: { opacity } }; }; }, [reducedMotion, animPhase]); return ( ); } 7a:T97e,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular18Props = DotMatrixCommonProps; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.33; const HIGH_OPACITY = 0.95; export function DotmCircular18({ speed = 1.75, animated = true, hoverAnimated = false, ...rest }: DotmCircular18Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1550, speed }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const t = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * 6); const pulseRow = t % 3; // 0..2 const topRow = pulseRow; const bottomRow = 4 - pulseRow; const pairCols = [1, 3]; let opacity = BASE_OPACITY; if ((row === topRow || row === bottomRow) && pairCols.includes(col)) { opacity = HIGH_OPACITY; } else if ((row === topRow || row === bottomRow) && col === 2) { opacity = 0.58; } else if ((row === 2 || col === 2) && pairCols.includes(col) === false) { opacity = MID_OPACITY; } else if (pairCols.includes(col)) { opacity = 0.22; } return { style: { opacity } }; }; }, [reducedMotion, animPhase]); return ( ); } 7b:Ta44,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular19Props = DotMatrixCommonProps; const STEP_COUNT = 24; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.34; const HIGH_OPACITY = 0.95; const ORBIT_POINTS: ReadonlyArray = [ [1, 1], [1, 2], [1, 3], [2, 3], [3, 3], [3, 2], [3, 1], [2, 1] ]; export function DotmCircular19({ speed = 1.6, animated = true, hoverAnimated = false, ...rest }: DotmCircular19Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const phase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1280, speed }); const resolver = useMemo(() => { return ({ row, col, phase: p }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const t = reducedMotion || p === "idle" ? 0 : Math.floor((phase) * ORBIT_POINTS.length) % ORBIT_POINTS.length; const [headRow, headCol] = ORBIT_POINTS[t]!; const [tailRow, tailCol] = ORBIT_POINTS[(t + ORBIT_POINTS.length - 1) % ORBIT_POINTS.length]!; let opacity = BASE_OPACITY; if (row === headRow && col === headCol) { opacity = HIGH_OPACITY; } else if (row === tailRow && col === tailCol) { opacity = 0.62; } else if ((col === 1 || col === 3) && (row === 1 || row === 2 || row === 3)) { opacity = MID_OPACITY; } else if (row === 2 && col === 2) { opacity = 0.2; } return { style: { opacity } }; }; }, [reducedMotion, phase]); return ( ); } 7c:Ta88,"use client"; import { useMemo } from "react"; import { DotMatrixBase } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isWithinCircularMask } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmCircular20Props = DotMatrixCommonProps; const STEP_COUNT = 30; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.34; const HIGH_OPACITY = 0.95; const GLYPHS: ReadonlyArray> = [ new Set(["1,1", "2,1", "3,1", "1,3", "2,3", "3,3"]), new Set(["1,1", "2,1", "3,1", "2,2", "1,3", "3,3"]), new Set(["1,1", "1,2", "1,3", "3,1", "3,2", "3,3"]), new Set(["1,1", "2,1", "3,1", "1,3", "2,2", "3,3"]), new Set(["1,1", "2,2", "3,3", "1,3", "3,1"]), new Set(["2,1", "1,2", "2,2", "3,2", "2,3"]) ]; export function DotmCircular20({ speed = 1.5, animated = true, hoverAnimated = false, ...rest }: DotmCircular20Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const animPhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1500, speed }); const resolver = useMemo(() => { return ({ row, col, phase }) => { if (!isWithinCircularMask(row, col)) { return { className: "dmx-inactive" }; } const t = reducedMotion || phase === "idle" ? 0 : Math.floor((animPhase) * GLYPHS.length) % GLYPHS.length; const active = GLYPHS[t]!; const previous = GLYPHS[(t + GLYPHS.length - 1) % GLYPHS.length]!; const key = `${row},${col}`; let opacity = BASE_OPACITY; if (active.has(key)) { opacity = HIGH_OPACITY; } else if (previous.has(key)) { opacity = MID_OPACITY; } else if (row === 2 && col === 2) { opacity = 0.2; } return { style: { opacity } }; }; }, [reducedMotion, animPhase]); return ( ); } 7d:T14b8,"use client"; import type { CSSProperties } from "react"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle1Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const STEP_COUNT = 30; const BASE_OPACITY = 0.08; const CENTER_OPACITY = 0.24; const TAIL_LEVELS = [0.96, 0.72, 0.52, 0.34, 0.2] as const; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); const CENTER_ROW = 3; const CENTER_COL = 3; const PERIMETER_PATH: ReadonlyArray = [ [1, 3], [2, 2], [3, 1], [4, 0], [4, 2], [4, 4], [4, 6], [3, 5], [2, 4] ]; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } // Staggered 1-2-3-4 triangle (base has exactly 4 cells), matching reference silhouette. return TRIANGLE_CELLS.has(`${row},${col}`); } export function DotmTriangle1({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 5, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle1Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1650, steps: STEP_COUNT, speed, }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); let opacity = 0; if (isActive) { const frame = reducedMotion || matrixPhase === "idle" ? 0 : step; opacity = BASE_OPACITY; if (row === CENTER_ROW && col === CENTER_COL) { opacity = CENTER_OPACITY; } const head = Math.floor((frame / STEP_COUNT) * PERIMETER_PATH.length) % PERIMETER_PATH.length; for (let trail = 0; trail < TAIL_LEVELS.length; trail += 1) { const idx = (head - trail + PERIMETER_PATH.length) % PERIMETER_PATH.length; const [pathRow, pathCol] = PERIMETER_PATH[idx]!; if (row === pathRow && col === pathCol) { opacity = Math.max(opacity, TAIL_LEVELS[trail]!); break; } } } const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 7e:T130f,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle2Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const STEP_COUNT = 36; const BASE_OPACITY = 0.08; const MID_OPACITY = 0.34; const HIGH_OPACITY = 0.94; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } export function DotmTriangle2({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.5, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle2Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1550, steps: STEP_COUNT, speed, }); const frame = reducedMotion || matrixPhase === "idle" ? 0 : step; const progress = frame / STEP_COUNT; const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); let opacity = 0; if (isActive) { const rowPhase = (4 - row) * 0.13; const pulse = 0.5 - 0.5 * Math.cos((progress + rowPhase) * Math.PI * 2); const crest = pulse * pulse; const altitudeWeight = 0.58 + (4 - row) * 0.16; const centerWeight = col === 3 ? 0.16 : 0; opacity = BASE_OPACITY + pulse * (MID_OPACITY - BASE_OPACITY) + crest * (altitudeWeight + centerWeight) * (HIGH_OPACITY - MID_OPACITY); opacity = Math.min(HIGH_OPACITY, opacity); } const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 7f:T1601,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle3Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const STEP_COUNT = 36; const BASE_OPACITY = 0.03; const MID_OPACITY = 0.07; const HIGH_OPACITY = 0.94; const FAR_OPACITY = 0.15; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } export function DotmTriangle3({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.45, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle3Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1650, steps: STEP_COUNT, speed, }); const frame = reducedMotion || matrixPhase === "idle" ? 0 : step; const theta = (frame / STEP_COUNT) * Math.PI * 2; const sweepX = Math.cos(theta); const sweepY = Math.sin(theta); const ambientPulse = 0.5 - 0.5 * Math.cos(theta); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); let opacity = 0; if (isActive) { const centerRow = row - 3; const centerCol = col - 3; const radius = Math.hypot(centerRow, centerCol); const projection = centerCol * sweepX + centerRow * sweepY; const perpendicular = Math.abs(centerCol * sweepY - centerRow * sweepX); const ahead = Math.max(0, projection); const beamCore = Math.max(0, 1 - perpendicular / 0.45); const beamHalo = Math.max(0, 1 - perpendicular / 1.15); const rangeFade = Math.max(0.25, 1 - radius / 3.6); const trail = beamHalo * Math.max(0, 1 - ahead / 3.6); opacity = BASE_OPACITY + ambientPulse * (MID_OPACITY - BASE_OPACITY) * rangeFade; // Crisp radar beam with a soft trailing glow behind it. opacity = Math.max(opacity, MID_OPACITY + beamCore * (HIGH_OPACITY - MID_OPACITY)); opacity = Math.max(opacity, FAR_OPACITY + trail * (MID_OPACITY - FAR_OPACITY)); if (row === 3 && col === 3) { opacity = Math.max(opacity, 0.56); } opacity = Math.min(HIGH_OPACITY, opacity); } const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 80:T14de,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle4Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const STEP_COUNT = 28; const BASE_OPACITY = 0.0; const MID_OPACITY = 0.0; const HIGH_OPACITY = 0.96; const TRAIL_LEVELS = [HIGH_OPACITY, 0.52, 0.3] as const; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); const PERIMETER_PATH: ReadonlyArray = [ [1, 3], [2, 2], [3, 1], [4, 0], [4, 2], [4, 4], [4, 6], [3, 5], [2, 4] ]; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } export function DotmTriangle4({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.5, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle4Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1450, steps: STEP_COUNT, speed, }); const frame = reducedMotion || matrixPhase === "idle" ? 0 : step; const segmentLength = Math.max(1, Math.floor(STEP_COUNT / 3)); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); let opacity = 0; if (isActive) { opacity = row === 3 && col === 3 ? MID_OPACITY : BASE_OPACITY; for (let headOffset = 0; headOffset < 3; headOffset += 1) { const spokeFrame = (frame + headOffset * segmentLength) % STEP_COUNT; const head = Math.floor((spokeFrame / STEP_COUNT) * PERIMETER_PATH.length); for (let trail = 0; trail < TRAIL_LEVELS.length; trail += 1) { const idx = (head - trail + PERIMETER_PATH.length) % PERIMETER_PATH.length; const [pathRow, pathCol] = PERIMETER_PATH[idx]!; if (row === pathRow && col === pathCol) { opacity = Math.max(opacity, TRAIL_LEVELS[trail]!); break; } } } } const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 81:T138a,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle5Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const STEP_COUNT = 42; const BASE_OPACITY = 0.06; const MID_OPACITY = 0.3; const HIGH_OPACITY = 0.92; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } export function DotmTriangle5({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.8, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle5Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1700, steps: STEP_COUNT, speed, }); const frame = reducedMotion || matrixPhase === "idle" ? 0 : step; const progress = frame / STEP_COUNT; const pingPong = 0.5 - 0.5 * Math.cos(progress * Math.PI * 2); const scanRow = 1 + pingPong * 3; const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); let opacity = 0; if (isActive) { const distance = Math.abs(row - scanRow); const beam = Math.max(0, 1 - distance / 2.2); const easedBeam = beam * beam; opacity = BASE_OPACITY + easedBeam * (HIGH_OPACITY - BASE_OPACITY); if (distance > 1.3) { opacity = Math.max(opacity, MID_OPACITY - Math.min(0.18, (distance - 1.3) * 0.12)); } // Keep the center consistently readable while rows scan. if (row === 3 && col === 3) { opacity = Math.max(opacity, 0.42); } } const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 82:T1fd0,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle6Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; /** Unicode / ISO braille dot numbering (same as `DotmSquare9`). */ const D1 = 0x01; const D2 = 0x02; const D3 = 0x04; const D4 = 0x08; const D5 = 0x10; const D6 = 0x20; const LOW_OPACITY = 0.07; const MID_OPACITY = 0.36; const HIGH_OPACITY = 0.96; /** Half-width of the traveling ramp (larger = softer, more “gradient” overlap). */ const WAVE_HALF = 0.82; /** Phase splits (must sum to 1): smooth intro wave, blink, fade reset. */ const INTRO_PHASE = 0.52; const BLINK_PHASE = 0.36; const RESET_PHASE = 0.12; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** Six fills (D1..D6 order) from a single traveling wave front. */ function waveFills(introT: number): number[] { const waveCenter = -WAVE_HALF + introT * (5 + 2 * WAVE_HALF); return [0, 1, 2, 3, 4, 5].map((i) => smoothstep01(i - WAVE_HALF, i + WAVE_HALF, waveCenter) ); } function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } /** Map triangle cell → braille bit (ISO 2×3), or null for accent cells. */ function brailleBitForTriangle(row: number, col: number): number | null { if (row === 2 && col === 2) { return D1; } if (row === 3 && col === 1) { return D2; } if (row === 4 && col === 0) { return D3; } if (row === 2 && col === 4) { return D4; } if (row === 3 && col === 5) { return D5; } if (row === 4 && col === 6) { return D6; } return null; } const BIT_TO_FILL_INDEX: Record = { [D1]: 0, [D2]: 1, [D3]: 2, [D4]: 3, [D5]: 4, [D6]: 5 }; function meanFills(indices: readonly number[], fills: readonly number[]): number { let s = 0; for (const i of indices) { s += fills[i] ?? 0; } return s / indices.length; } function opacityForCell( row: number, col: number, fills: readonly number[], blinkMul: number, resetMul: number ): number { const lift = (base: number) => LOW_OPACITY + (base - LOW_OPACITY) * blinkMul * resetMul; const bit = brailleBitForTriangle(row, col); if (bit !== null) { const idx = BIT_TO_FILL_INDEX[bit] ?? 0; const raw = LOW_OPACITY + (HIGH_OPACITY - LOW_OPACITY) * (fills[idx] ?? 0); return lift(raw); } if (row === 1 && col === 3) { const m = meanFills([0, 3], fills); const raw = LOW_OPACITY + (HIGH_OPACITY - LOW_OPACITY) * m * 0.92 + (MID_OPACITY - LOW_OPACITY) * (1 - m) * 0.35; return lift(Math.min(HIGH_OPACITY, raw)); } if (row === 3 && col === 3) { const m = meanFills([0, 1, 2, 3, 4, 5], fills); const raw = LOW_OPACITY + (HIGH_OPACITY - LOW_OPACITY) * m * 0.88 + (MID_OPACITY - LOW_OPACITY) * (1 - m) * 0.4; return lift(Math.min(HIGH_OPACITY, raw)); } if (row === 4 && col === 2) { const m = meanFills([1, 2], fills); const raw = LOW_OPACITY + (MID_OPACITY + 0.28 - LOW_OPACITY) * m; return lift(raw); } if (row === 4 && col === 4) { const m = meanFills([4, 5], fills); const raw = LOW_OPACITY + (MID_OPACITY + 0.28 - LOW_OPACITY) * m; return lift(raw); } return LOW_OPACITY; } function cycleParams(phase: number): { fills: number[]; blinkMul: number; resetMul: number; } { if (phase < INTRO_PHASE) { const introT = phase / INTRO_PHASE; return { fills: waveFills(introT), blinkMul: 1, resetMul: 1 }; } if (phase < INTRO_PHASE + BLINK_PHASE) { const bt = (phase - INTRO_PHASE) / BLINK_PHASE; const on = Math.floor(bt * 4) % 2 === 0; return { fills: [1, 1, 1, 1, 1, 1], blinkMul: on ? 1 : 0.08, resetMul: 1 }; } const rt = (phase - INTRO_PHASE - BLINK_PHASE) / RESET_PHASE; const resetMul = 1 - smoothstep01(0, 1, rt); return { fills: [1, 1, 1, 1, 1, 1], blinkMul: 1, resetMul }; } export function DotmTriangle6({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 2.2, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle6Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 3000, speed }); const { fills, blinkMul, resetMul } = reducedMotion || matrixPhase === "idle" ? { fills: [0.55, 0.55, 0.55, 0.55, 0.55, 0.55] as number[], blinkMul: 1, resetMul: 1 } : cycleParams(cyclePhase); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const opacity = isActive ? opacityForCell(row, col, fills, blinkMul, resetMul) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 83:T1355,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle7Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.06; const MID_OPACITY = 0.38; const HIGH_OPACITY = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } /** Sliding diagonal bands: same `row + col` share a phase so stripes read as continuous diagonals. */ function opacityForCell(row: number, col: number, phase: number): number { const diag = row + col; const t = phase * Math.PI * 2; const u = diag * 0.55 - t * 1.35; const primary = 0.5 + 0.5 * Math.cos(u); const harmonic = 0.5 + 0.5 * Math.cos(u * 2 + 0.4); const crest = primary * primary * 0.92 + Math.max(0, harmonic - 0.35) * 0.28; let opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY); if (row === 3 && col === 3) { opacity = Math.max(opacity, MID_OPACITY + (crest - 0.25) * 0.35); } return Math.min(HIGH_OPACITY, opacity); } export function DotmTriangle7({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.65, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle7Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 2200, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.22 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 84:T171f,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle8Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.05; const MID_OPACITY = 0.42; const HIGH_OPACITY = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); const LEFT_WING = new Set(["2,2", "3,1", "4,0", "4,2"]); const RIGHT_WING = new Set(["2,4", "3,5", "4,4", "4,6"]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } type Sector = "left" | "right" | "spine" | "none"; function sectorForCell(row: number, col: number): Sector { const key = `${row},${col}`; if (row === 1 && col === 3) { return "spine"; } if (row === 3 && col === 3) { return "spine"; } if (LEFT_WING.has(key)) { return "left"; } if (RIGHT_WING.has(key)) { return "right"; } return "none"; } /** * Alternating emphasis on the two lower wings (split by the apex column), with the apex and * heart dot brightest when energy crosses the middle (both sides briefly equal). */ function opacityForCell(row: number, col: number, phase: number): number { const p = 0.5 - 0.5 * Math.cos(phase * Math.PI * 2); const leftLift = p * p; const rightLift = (1 - p) * (1 - p); const crossover = Math.max(0, 1 - 4 * (p - 0.5) * (p - 0.5)); const sector = sectorForCell(row, col); if (sector === "none") { return 0; } if (sector === "spine") { if (row === 1 && col === 3) { const apex = MID_OPACITY + crossover * (HIGH_OPACITY - MID_OPACITY) * 0.95; return Math.min(HIGH_OPACITY, apex); } const hub = BASE_OPACITY + crossover * 0.55 * (HIGH_OPACITY - BASE_OPACITY) + leftLift * 0.08 + rightLift * 0.08; return Math.min(HIGH_OPACITY, hub); } if (sector === "left") { const wing = BASE_OPACITY + leftLift * (HIGH_OPACITY - BASE_OPACITY); return Math.min(HIGH_OPACITY, wing); } const wing = BASE_OPACITY + rightLift * (HIGH_OPACITY - BASE_OPACITY); return Math.min(HIGH_OPACITY, wing); } export function DotmTriangle8({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.55, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle8Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1500, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.25 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 85:T179d,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle9Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.14; const HIGH_OPACITY = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); const DELTAS_8: ReadonlyArray = [ [-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1] ]; function buildBfsRingFromCenter(): Map { const dist = new Map(); const start = "3,3"; if (!TRIANGLE_CELLS.has(start)) { return dist; } const queue: [number, number][] = [[3, 3]]; dist.set(start, 0); let head = 0; while (head < queue.length) { const [r, c] = queue[head]!; head += 1; const d = dist.get(`${r},${c}`)!; for (const [dr, dc] of DELTAS_8) { const nr = r + dr; const nc = c + dc; const key = `${nr},${nc}`; if (TRIANGLE_CELLS.has(key) && !dist.has(key)) { dist.set(key, d + 1); queue.push([nr, nc]); } } } return dist; } const BFS_RING = buildBfsRingFromCenter(); const MAX_RING = Math.max(0, ...BFS_RING.values()); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * Concentric tiers from the heart (8-connected). One soft bright band travels outward/inward; * smoothstep softens the cosine so ring-to-ring steps do not read as harsh pops between discrete phase steps. */ function opacityForCell(row: number, col: number, phase: number): number { const ring = BFS_RING.get(`${row},${col}`) ?? 0; const span = Math.max(1, MAX_RING); const t = phase * Math.PI * 2; const u = (ring / span) * Math.PI * 2 - t; const wave = 0.5 + 0.5 * Math.cos(u); const crest = smoothstep01(0.35, 1, wave); const opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY); return Math.min(HIGH_OPACITY, opacity); } export function DotmTriangle9({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.5, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle9Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1800, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.18 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 86:T13f2,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle10Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const STEP_COUNT = 36; const BASE_OPACITY = 0.07; const TAIL_LEVELS = [0.94, 0.68, 0.42, 0.24] as const; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); /** Bottom-to-top within each column, columns 0→6 — only triangle cells appear in the path. */ const COLUMN_RAKE_PATH: ReadonlyArray = [ [4, 0], [3, 1], [4, 2], [2, 2], [3, 3], [1, 3], [4, 4], [2, 4], [4, 6], [3, 5] ]; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } export function DotmTriangle10({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.8, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle10Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1750, steps: STEP_COUNT, speed, }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; const pathLen = COLUMN_RAKE_PATH.length; const frame = reducedMotion || matrixPhase === "idle" ? 0 : step; const head = Math.floor((frame / STEP_COUNT) * pathLen) % pathLen; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); let opacity = 0; if (isActive) { opacity = BASE_OPACITY; for (let trail = 0; trail < TAIL_LEVELS.length; trail += 1) { const idx = (head - trail + pathLen) % pathLen; const [pathRow, pathCol] = COLUMN_RAKE_PATH[idx]!; if (row === pathRow && col === pathCol) { opacity = Math.max(opacity, TAIL_LEVELS[trail]!); break; } } } const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 87:T1517,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle11Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.13; const MID_OPACITY = 0.36; const HIGH_OPACITY = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); const APEX_ROW = 1; const APEX_COL = 3; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function manhattanFromApex(row: number, col: number): number { return Math.abs(row - APEX_ROW) + Math.abs(col - APEX_COL); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * Bright bands move down the triangle by tier: phase keys on Manhattan distance from the apex, * not the heart cell — reads as stacked horizontal “shelves” lighting in sequence. */ function opacityForCell(row: number, col: number, phase: number): number { const tier = manhattanFromApex(row, col); const maxTier = 6; const t = phase * Math.PI * 2; const u = (tier / maxTier) * Math.PI * 2 - t; const wave = 0.5 + 0.5 * Math.cos(u); const crest = smoothstep01(0.28, 0.98, wave); let opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY); if (row === 3 && col === 3) { opacity = Math.max(opacity, MID_OPACITY + crest * 0.35); } return Math.min(HIGH_OPACITY, opacity); } export function DotmTriangle11({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.75, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle11Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1400, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.18 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 88:T14da,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle12Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.06; const MID_OPACITY = 0.34; const HIGH_OPACITY = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * Anti-diagonal harmonics on `row - col`: bands glide along NE–SW lines through the mask, * opposite oblique motion to loaders keyed on `row + col`. */ function opacityForCell(row: number, col: number, phase: number): number { const skew = row - col; const t = phase * Math.PI * 2; const u = skew * 0.62 - t * 1.45; const primary = 0.5 + 0.5 * Math.cos(u); const harmonic = 0.5 + 0.5 * Math.cos(u * 2 - 0.55); const pSoft = smoothstep01(0.12, 0.95, primary); const hSoft = smoothstep01(0.38, 0.92, harmonic); const crest = pSoft * pSoft * 0.88 + Math.max(0, hSoft - 0.42) * 0.32; let opacity = BASE_OPACITY + crest * (HIGH_OPACITY - BASE_OPACITY); if (row === 3 && col === 3) { opacity = Math.max(opacity, MID_OPACITY + (crest - 0.22) * 0.4); } return Math.min(HIGH_OPACITY, opacity); } export function DotmTriangle12({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.5, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle12Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 2300, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.2 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 89:T1609,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle13Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.13; const HIGH_OPACITY = 0.95; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); /** Row serpent: base row left→right, row 3 right→left, mid rows alternate — reads as a zigzag zip. */ const SERPENT_PATH: ReadonlyArray = [ [4, 0], [4, 2], [4, 4], [4, 6], [3, 5], [3, 3], [3, 1], [2, 2], [2, 4], [1, 3] ]; const PATH_LEN = SERPENT_PATH.length; /** Soft tail length in path units (Braille-style ramp, not discrete steps). */ const TRAIL_SPAN = 4.25; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function pathIndex(row: number, col: number): number | null { for (let i = 0; i < PATH_LEN; i += 1) { const [pr, pc] = SERPENT_PATH[i]!; if (pr === row && pc === col) { return i; } } return null; } function modF(n: number, m: number): number { return ((n % m) + m) % m; } function behindAlongPath(s: number, i: number, L: number): number { return modF(s - i, L); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } function opacityForCell(row: number, col: number, phase: number): number { const idx = pathIndex(row, col); if (idx === null) { return 0; } const s = phase * PATH_LEN; const d = behindAlongPath(s, idx, PATH_LEN); const g = 1 - smoothstep01(0, TRAIL_SPAN, d); return BASE_OPACITY + g * (HIGH_OPACITY - BASE_OPACITY); } export function DotmTriangle13({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.65, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle13Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1400, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.14 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 8a:T145d,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle14Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.07; const MID_OPACITY = 0.32; const HIGH_OPACITY = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * A soft vertical “pillar” of brightness sweeps column 0→6; only masked dots respond, * so the triangle appears to light one vertical slice at a time (not a cell path). */ function opacityForCell(row: number, col: number, phase: number): number { const beamCenter = phase * 7.2 - 0.35; const dist = Math.abs(col - beamCenter); const core = 1 - smoothstep01(0, 0.62, dist); const halo = 1 - smoothstep01(0.35, 1.42, dist); const eased = core * 0.92 + halo * 0.22; let opacity = BASE_OPACITY + eased * (HIGH_OPACITY - BASE_OPACITY); if (row === 3 && col === 3) { opacity = Math.max(opacity, MID_OPACITY + eased * 0.28); } return Math.min(HIGH_OPACITY, opacity); } export function DotmTriangle14({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.45, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle14Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1500, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.12 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 8b:T174a,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle15Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.08; const MID_OPACITY = 0.38; const HIGH_OPACITY = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); /** Apex and the two base corners — the three natural vertices of the silhouette. */ const HUBS: ReadonlyArray = [ [1, 3], [4, 0], [4, 6] ]; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function manhattan(aRow: number, aCol: number, bRow: number, bCol: number): number { return Math.abs(aRow - bRow) + Math.abs(aCol - bCol); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } function falloffFromHub(row: number, col: number, hub: readonly [number, number]): number { const d = manhattan(row, col, hub[0], hub[1]); return 1 - smoothstep01(0, 5.4, d); } /** * Energy orbits the three triangle vertices (apex → left base → right base) on a continuous phase, * with soft Manhattan falloff — no lattice mod groups. */ function opacityForCell(row: number, col: number, phase: number): number { const t = phase * Math.PI * 2; const sharp = 4; const u0 = Math.max(0, Math.cos(t)) ** sharp; const u1 = Math.max(0, Math.cos(t - (Math.PI * 2) / 3)) ** sharp; const u2 = Math.max(0, Math.cos(t - (Math.PI * 4) / 3)) ** sharp; const sum = u0 + u1 + u2 + 1e-4; const glowA = falloffFromHub(row, col, HUBS[0]!); const glowB = falloffFromHub(row, col, HUBS[1]!); const glowC = falloffFromHub(row, col, HUBS[2]!); const glow = (glowA * u0 + glowB * u1 + glowC * u2) / sum; let opacity = BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY); if (row === 3 && col === 3) { opacity = Math.max(opacity, MID_OPACITY + glow * 0.32); } return Math.min(HIGH_OPACITY, opacity); } export function DotmTriangle15({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.8, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle15Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1100, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.15 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 8c:T15d3,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle16Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.1; const MID_OPACITY = 0.36; const HIGH_OPACITY = 0.96; /** * Inverted-V coordinate: same row is lower on the left/right flanks than in the center column, * so a moving front forms a V rising toward the apex (not a flat row band like Row Sweep). */ const WING = 0.52; const FRONT_SIGMA = 0.88; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * Brightness peaks along a V-shaped isopleth: `row - wing * |col - 3|`. * The "front" oscillates in that space, so the highlight rides up the two lower legs * and meets at the top — convective lift, not a horizontal scanline. */ function opacityForCell(row: number, col: number, phase: number): number { const t = phase * Math.PI * 2; const v = row - WING * Math.abs(col - 3); const front = 1.85 + 1.4 * Math.sin(t); const d = Math.abs(v - front); const glowRaw = Math.exp(-(d * d) / (FRONT_SIGMA * FRONT_SIGMA)); const glow = smoothstep01(0.04, 0.98, glowRaw); let opacity = BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY); if (row === 3 && col === 3) { opacity = Math.max(opacity, MID_OPACITY * 0.58 + glow * (HIGH_OPACITY - MID_OPACITY) * 0.48); } return Math.min(HIGH_OPACITY, opacity); } export function DotmTriangle16({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.55, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle16Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 2400, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.12 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 8d:T1618,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle17Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.06; const HIGH_OPACITY = 0.95; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); /** * Visits every triangle cell once per lap: up the left rim to the apex, down the right rim, * then cuts through (4,4) → center → (4,2) — reads as a crossing “∞” on the silhouette. */ const INFINITY_PATH: ReadonlyArray = [ [4, 0], [3, 1], [2, 2], [1, 3], [2, 4], [3, 5], [4, 6], [4, 4], [3, 3], [4, 2] ]; const PATH_LEN = INFINITY_PATH.length; const TRAIL_SPAN = 4.35; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function pathIndex(row: number, col: number): number | null { for (let i = 0; i < PATH_LEN; i += 1) { const [pr, pc] = INFINITY_PATH[i]!; if (pr === row && pc === col) { return i; } } return null; } function modF(n: number, m: number): number { return ((n % m) + m) % m; } function behindAlongPath(s: number, i: number, L: number): number { return modF(s - i, L); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } function opacityForCell(row: number, col: number, phase: number): number { const idx = pathIndex(row, col); if (idx === null) { return 0; } const s = phase * PATH_LEN; const d = behindAlongPath(s, idx, PATH_LEN); const g = 1 - smoothstep01(0, TRAIL_SPAN, d); return BASE_OPACITY + g * (HIGH_OPACITY - BASE_OPACITY); } export function DotmTriangle17({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.8, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle17Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1500, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.12 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 8e:T1342,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle18Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const CORE_DIM = 0.1; const SHELL_LOW = 0.22; const SHELL_HIGH = 0.96; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * Heart cell stays dim while the outer shell breathes in sync — inverted emphasis vs center-led * corona loaders. */ function opacityForCell(row: number, col: number, phase: number): number { if (row === 3 && col === 3) { return CORE_DIM; } const breathe = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2); const crest = smoothstep01(0.2, 0.94, breathe); return SHELL_LOW + crest * (SHELL_HIGH - SHELL_LOW); } export function DotmTriangle18({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.6, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle18Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1600, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.2 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 8f:T1681,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle19Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.08; const MID_OPACITY = 0.38; const HIGH_OPACITY = 0.96; const CENTER_ROW = 3; const CENTER_COL = 3; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); /** Wider wedge core (radians) for smoother rotation like Braille ramps. */ const BEAM_SIGMA = 0.58; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function angleDiff(a: number, b: number): number { let d = a - b; while (d > Math.PI) { d -= Math.PI * 2; } while (d < -Math.PI) { d += Math.PI * 2; } return d; } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * A soft **rotating wedge** from the heart cell: brightness peaks where polar angle matches the * spinning phase — reads as a searchlight pivot, not a cosine product field. */ function opacityForCell(row: number, col: number, phase: number): number { if (row === CENTER_ROW && col === CENTER_COL) { const hub = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2); const hubSoft = smoothstep01(0.12, 0.9, hub); return MID_OPACITY + hubSoft * 0.22; } const t = phase * Math.PI * 2; const ang = Math.atan2(row - CENTER_ROW, col - CENTER_COL); const d = angleDiff(ang, t); const beamRaw = Math.exp(-(d * d) / (BEAM_SIGMA * BEAM_SIGMA)); const beam = smoothstep01(0.05, 0.98, beamRaw); const rim = 0.5 + 0.5 * Math.cos(ang * 2 - t * 1.15); const accent = smoothstep01(0.45, 0.92, rim) * 0.18; return Math.min(HIGH_OPACITY, BASE_OPACITY + (beam + accent) * (HIGH_OPACITY - BASE_OPACITY)); } export function DotmTriangle19({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.5, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle19Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1400, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.12 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 90:T1779,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmTriangle20Props = DotMatrixCommonProps; const MATRIX_SIZE = 7; const BASE_OPACITY = 0.08; const HIGH_OPACITY = 0.94; const CENTER_DIM = 0.2; const TRIANGLE_CELLS = new Set([ "1,3", "2,2", "2,4", "3,1", "3,3", "3,5", "4,0", "4,2", "4,4", "4,6" ]); /** Same perimeter ring as DotmTriangle1 — center is not on this loop. */ const PERIMETER_PATH: ReadonlyArray = [ [1, 3], [2, 2], [3, 1], [4, 0], [4, 2], [4, 4], [4, 6], [3, 5], [2, 4] ]; const PATH_LEN = PERIMETER_PATH.length; const TRAIL_SPAN = 3.35; const HALF = PATH_LEN / 2; function isWithinTriangleMask(row: number, col: number): boolean { if (row < 0 || row >= MATRIX_SIZE || col < 0 || col >= MATRIX_SIZE) { return false; } return TRIANGLE_CELLS.has(`${row},${col}`); } function pathIndex(row: number, col: number): number | null { for (let i = 0; i < PATH_LEN; i += 1) { const [pr, pc] = PERIMETER_PATH[i]!; if (pr === row && pc === col) { return i; } } return null; } function modF(n: number, m: number): number { return ((n % m) + m) % m; } function behindAlongPath(s: number, i: number, L: number): number { return modF(s - i, L); } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } function glowAlongPath(s: number, idx: number | null, L: number): number { if (idx === null) { return BASE_OPACITY; } const d = behindAlongPath(s, idx, L); const g = 1 - smoothstep01(0, TRAIL_SPAN, d); return BASE_OPACITY + g * (HIGH_OPACITY - BASE_OPACITY); } /** * Two heads chase the perimeter **half a lap apart**, each with its own soft tail — center stays dim. */ function opacityForCell(row: number, col: number, phase: number): number { if (row === 3 && col === 3) { return CENTER_DIM; } const idx = pathIndex(row, col); const s1 = phase * PATH_LEN; const s2 = modF(s1 + HALF, PATH_LEN); const a = glowAlongPath(s1, idx, PATH_LEN); const b = glowAlongPath(s2, idx, PATH_LEN); return Math.min(HIGH_OPACITY, Math.max(a, b)); } export function DotmTriangle20({ size = 30, dotSize = 6.5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.7, animated = true, hoverAnimated = false, cellPadding, opacityBase, opacityMid, opacityPeak }: DotmTriangle20Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cycleActive = !reducedMotion && matrixPhase !== "idle"; const cyclePhase = useCyclePhase({ active: cycleActive, cycleMsBase: 1800, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * MATRIX_SIZE) / (MATRIX_SIZE - 1))); const matrixSize = dotSize * MATRIX_SIZE + gap * (MATRIX_SIZE - 1); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const rootStyle = { width: stylePx(cellPadding == null ? size : matrixSize), height: stylePx(cellPadding == null ? size : matrixSize), ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor } as CSSProperties; return (

{Array.from({ length: MATRIX_SIZE * MATRIX_SIZE }).map((_, index) => { const row = Math.floor(index / MATRIX_SIZE); const col = index % MATRIX_SIZE; const isActive = isWithinTriangleMask(row, col); const phase = reducedMotion || matrixPhase === "idle" ? 0.1 : cyclePhase; const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, opacityBase, opacityMid, opacityPeak); return (

); } 91:T1f4a,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex1Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.1; const MID_OPACITY = 0.2; const HIGH_OPACITY = 0.96; const CENTER_OPACITY = 0.1; const TRAIL_SPAN = 5; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const PERIMETER_PATH = [ "0,0", "0,1", "0,2", "1,3", "2,4", "3,3", "4,2", "4,1", "4,0", "3,0", "2,0", "1,0" ] as const; const PATH_LEN = PERIMETER_PATH.length; const HALF_PATH = PATH_LEN / 2; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function modF(n: number, m: number): number { return ((n % m) + m) % m; } function smoothstep01(edge0: number, edge1: number, x: number): number { if (edge1 <= edge0) { return x >= edge1 ? 1 : 0; } const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } function glowAlongPath(head: number, pathIndex: number | null): number { if (pathIndex === null) { return BASE_OPACITY; } const distance = modF(head - pathIndex, PATH_LEN); const glow = 1 - smoothstep01(0, TRAIL_SPAN, distance); return BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY); } function opacityForCell(id: string, phase: number): number { if (id === "2,2") { return CENTER_OPACITY; } const pathIndex = PERIMETER_PATH.indexOf(id as (typeof PERIMETER_PATH)[number]); const normalizedPathIndex = pathIndex === -1 ? null : pathIndex; const headA = phase * PATH_LEN; const headB = modF(headA + HALF_PATH, PATH_LEN); const perimeterGlow = Math.max( glowAlongPath(headA, normalizedPathIndex), glowAlongPath(headB, normalizedPathIndex) * 0.74 ); if (normalizedPathIndex !== null) { return Math.min(HIGH_OPACITY, perimeterGlow); } const [, col] = id.split(",").map(Number); const centerFalloff = col === 2 ? MID_OPACITY : 0.18; return Math.max(BASE_OPACITY, centerFalloff); } export function DotmHex1({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.6, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex1Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1500, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const colPitch = dotSize + gap; const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const phase = reducedMotion || matrixPhase === "idle" ? 0.08 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

{Array.from({ length: count }).map((_, col) => { const id = `${row},${col}`; const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col)); const opacity = isActive ? opacityForCell(id, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op); return (

))}

); if (useWrapper) { return (

{matrix}

); } return matrix; } 92:T1de9,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex2Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.08; const MID_OPACITY = 0.44; const HIGH_OPACITY = 0.98; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const SPOKE_WIDTH = 0.34; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function angularDistance(a: number, b: number): number { const diff = Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b))); return Math.min(diff, Math.PI * 2 - diff); } function pointForCell(row: number, col: number): { angle: number; radius: number } { const count = ROW_COUNTS[row] ?? 1; const x = col - (count - 1) / 2; const y = (row - 2) * HEX_ROW_PITCH_RATIO; const radius = Math.sqrt(x * x + y * y); return { angle: Math.atan2(y, x), radius }; } function opacityForCell(row: number, col: number, phase: number): number { const { angle, radius } = pointForCell(row, col); if (radius < 0.01) { return MID_OPACITY + Math.sin(phase * Math.PI * 2) * 0.18; } const rotation = phase * Math.PI * 2; const spokeA = angularDistance(angle, rotation); const spokeB = angularDistance(angle, rotation + (Math.PI * 2) / 3); const spokeC = angularDistance(angle, rotation + (Math.PI * 4) / 3); const nearestSpoke = Math.min(spokeA, spokeB, spokeC); const spokeGlow = Math.max(0, 1 - nearestSpoke / SPOKE_WIDTH); const outerPulse = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2 - radius * 2.2); const shellLift = radius > 1.7 ? outerPulse * 0.24 : 0; return Math.min(HIGH_OPACITY, BASE_OPACITY + spokeGlow * 0.78 + shellLift); } export function DotmHex2({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.7, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex2Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1500, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const colPitch = dotSize + gap; const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const phase = reducedMotion || matrixPhase === "idle" ? 0.06 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

{Array.from({ length: count }).map((_, col) => { const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col)); const opacity = isActive ? opacityForCell(row, col, phase) : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op); return (

))}

); if (useWrapper) { return (

{matrix}

); } return matrix; } 93:T1d26,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex3Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.08; const HIGH_OPACITY = 0.96; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const BAND_WIDTH = 0.55; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function pointForCell(row: number, col: number): { x: number; y: number } { const count = ROW_COUNTS[row] ?? 1; return { x: col - (count - 1) / 2, y: (row - 2) * HEX_ROW_PITCH_RATIO }; } function triangularWave(n: number): number { const wrapped = ((n % 1) + 1) % 1; return 1 - Math.abs(wrapped * 2 - 1); } function bandGlow(distance: number): number { return Math.max(0, 1 - Math.abs(distance) / BAND_WIDTH); } function opacityForCell(row: number, col: number, phase: number): number { const { x, y } = pointForCell(row, col); const sweep = triangularWave(phase) * 3.9 - 1.95; const diagA = x * 0.86 + y * 0.5; const diagB = x * -0.86 + y * 0.5; const gateA = bandGlow(diagA - sweep); const gateB = bandGlow(diagB + sweep); const centerDistance = Math.sqrt(x * x + y * y); const centerFlash = Math.max(0, 1 - Math.abs(sweep) / 0.68) * Math.max(0, 1 - centerDistance / 1.9); const wake = 0.16 * Math.max(0, 1 - Math.abs(y - sweep * 0.22) / 1.2); return Math.min(HIGH_OPACITY, BASE_OPACITY + gateA * 0.7 + gateB * 0.7 + centerFlash * 0.42 + wake); } export function DotmHex3({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.45, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex3Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1850, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const colPitch = dotSize + gap; const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const phase = reducedMotion || matrixPhase === "idle" ? 0.12 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

))}

); if (useWrapper) { return (

{matrix}

); } return matrix; } 94:T200c,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex4Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.08; const MID_OPACITY = 0.36; const HIGH_OPACITY = 0.98; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const TRAIL_SPAN = 2.2; const VERTEX_PATH = [ "0,2", "1,3", "2,4", "3,3", "4,2", "3,0", "2,0", "1,0", "0,0" ] as const; const ECHO_BY_VERTEX: Readonly> = { "0,2": ["0,1", "1,2"], "1,3": ["1,2", "2,3"], "2,4": ["2,3", "2,2"], "3,3": ["3,2", "2,3"], "4,2": ["4,1", "3,2"], "3,0": ["3,1", "2,1"], "2,0": ["2,1", "2,2"], "1,0": ["1,1", "2,1"], "0,0": ["0,1", "1,1"] }; const PATH_LEN = VERTEX_PATH.length; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function pointForCell(row: number, col: number): { x: number; y: number } { const count = ROW_COUNTS[row] ?? 1; return { x: col - (count - 1) / 2, y: (row - 2) * HEX_ROW_PITCH_RATIO }; } function modF(n: number, m: number): number { return ((n % m) + m) % m; } function opacityForCell(row: number, col: number, phase: number): number { const id = `${row},${col}`; const head = phase * PATH_LEN; const vertexIndex = VERTEX_PATH.indexOf(id as (typeof VERTEX_PATH)[number]); let opacity = BASE_OPACITY; if (vertexIndex >= 0) { const distance = modF(head - vertexIndex, PATH_LEN); const glow = Math.max(0, 1 - distance / TRAIL_SPAN); opacity = Math.max(opacity, BASE_OPACITY + glow * (HIGH_OPACITY - BASE_OPACITY)); } for (let i = 0; i < PATH_LEN; i += 1) { const vertex = VERTEX_PATH[i]!; if (!ECHO_BY_VERTEX[vertex].includes(id)) { continue; } const distance = modF(head - i, PATH_LEN); const echo = Math.max(0, 1 - Math.abs(distance - 0.55) / 1.45); opacity = Math.max(opacity, BASE_OPACITY + echo * 0.52); } if (id === "2,2") { const centerBeat = 0.5 + 0.5 * Math.sin(phase * Math.PI * PATH_LEN); opacity = Math.max(opacity, MID_OPACITY + centerBeat * 0.22); } const { x, y } = pointForCell(row, col); const softFill = Math.max(0, 1 - Math.sqrt(x * x + y * y) / 2.35) * 0.1; return Math.min(HIGH_OPACITY, opacity + softFill); } export function DotmHex4({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.5, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex4Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1650, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const colPitch = dotSize + gap; const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const phase = reducedMotion || matrixPhase === "idle" ? 0.12 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

))}

); if (useWrapper) { return (

{matrix}

); } return matrix; } 95:T1c16,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex5Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.08; const HIGH_OPACITY = 0.96; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function pointForCell(row: number, col: number): { angle: number; radius: number } { const count = ROW_COUNTS[row] ?? 1; const x = col - (count - 1) / 2; const y = (row - 2) * HEX_ROW_PITCH_RATIO; return { angle: Math.atan2(y, x), radius: Math.sqrt(x * x + y * y) }; } function wavePeak(value: number): number { const wrapped = ((value % 1) + 1) % 1; return Math.max(0, 1 - Math.abs(wrapped * 2 - 1) / 0.55); } function opacityForCell(row: number, col: number, phase: number): number { const { angle, radius } = pointForCell(row, col); const spiral = phase + radius * 0.18 + angle / (Math.PI * 2); const counterSpiral = phase * 0.72 - radius * 0.16 - angle / (Math.PI * 2); const a = wavePeak(spiral); const b = wavePeak(counterSpiral) * 0.55; const core = radius < 0.1 ? 0.54 + Math.sin(phase * Math.PI * 4) * 0.26 : 0; return Math.min(HIGH_OPACITY, BASE_OPACITY + a * 0.7 + b * 0.42 + core); } export function DotmHex5({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.75, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex5Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1450, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const colPitch = dotSize + gap; const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const phase = reducedMotion || matrixPhase === "idle" ? 0.18 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

))}

); if (useWrapper) { return (

{matrix}

); } return matrix; } 96:T1b6d,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex6Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.1; const HIGH_OPACITY = 0.98; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const BAND_COUNT = 4; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function wrappedDistance(a: number, b: number): number { const diff = Math.abs(a - b) % BAND_COUNT; return Math.min(diff, BAND_COUNT - diff); } function opacityForCell(row: number, col: number, phase: number): number { const count = ROW_COUNTS[row] ?? 1; const x = col - (count - 1) / 2; const y = row - 2; const downwardChevron = y + Math.abs(x) * 0.92 + 1.55; const upwardChevron = -y + Math.abs(x) * 0.92 + 1.55; const head = phase * BAND_COUNT; const primary = Math.max(0, 1 - wrappedDistance(downwardChevron, head) / 0.78); const secondary = Math.max(0, 1 - wrappedDistance(upwardChevron, head + BAND_COUNT / 2) / 0.92); const centerLift = row === 2 && col === 2 ? 0.18 : 0; return Math.min(HIGH_OPACITY, BASE_OPACITY + primary * 0.78 + secondary * 0.38 + centerLift); } export function DotmHex6({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.55, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex6Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1260, speed }); const phase = reducedMotion || matrixPhase === "idle" ? 0.12 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

))}

); if (useWrapper) { return (

{matrix}

); } return matrix; } 97:T1c2b,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex7Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.2; const MID_OPACITY = 0.32; const HIGH_OPACITY = 0.98; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const FRAMES: readonly Readonly>[] = [ { "0,0": "x", "0,1": "x", "0,2": "x", "1,1": "o", "1,2": "o", "2,2": "x", "3,1": "o", "3,2": "o", "4,0": "x", "4,1": "x", "4,2": "x" }, { "0,1": "o", "1,0": "x", "1,1": "x", "1,2": "x", "1,3": "x", "2,2": "o", "3,0": "x", "3,1": "x", "3,2": "x", "3,3": "x", "4,1": "o" }, { "0,1": "x", "1,1": "x", "1,2": "x", "2,0": "o", "2,1": "x", "2,2": "x", "2,3": "x", "2,4": "o", "3,1": "x", "3,2": "x", "4,1": "x" }, { "0,0": "o", "0,2": "o", "1,0": "x", "1,3": "x", "2,1": "x", "2,2": "o", "2,3": "x", "3,0": "x", "3,3": "x", "4,0": "o", "4,2": "o" } ]; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } export function DotmHex7({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.9, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex7Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1520, steps: FRAMES.length, speed }); const frame = FRAMES[reducedMotion || matrixPhase === "idle" ? 0 : step] ?? FRAMES[0]!; const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

{Array.from({ length: count }).map((_, col) => { const tone = frame[`${row},${col}`]; const isActive = activePatternIndexes.includes(hexPatternIndex(row, count, col)); const opacity = isActive ? tone === "x" ? HIGH_OPACITY : tone === "o" ? MID_OPACITY : BASE_OPACITY : 0; const dmxBloom = dmxDotBloomParts(isActive, opacity, bloom, halo, ob, om, op); return (

))}

); if (useWrapper) { return (

{matrix}

); } return matrix; } 98:T1906,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex8Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.2; const MID_OPACITY = 0.46; const HIGH_OPACITY = 0.98; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const FRAMES: readonly Readonly>[] = [ { "0,1": "x", "1,1": "o", "1,2": "o", "2,0": "x", "2,2": "x", "2,4": "x", "3,1": "o", "3,2": "o", "4,1": "x" }, { "0,0": "x", "0,2": "x", "1,0": "o", "1,3": "o", "2,1": "x", "2,2": "o", "2,3": "x", "3,0": "o", "3,3": "o", "4,0": "x", "4,2": "x" }, { "0,1": "o", "1,0": "x", "1,3": "x", "2,0": "o", "2,2": "x", "2,4": "o", "3,0": "x", "3,3": "x", "4,1": "o" }, { "0,0": "o", "0,2": "o", "1,1": "x", "1,2": "x", "2,1": "o", "2,3": "o", "3,1": "x", "3,2": "x", "4,0": "o", "4,2": "o" } ]; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) return; return Math.min(1, Math.max(0, n)); } export function DotmHex8({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.35, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex8Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1400, steps: FRAMES.length, speed }); const frame = FRAMES[reducedMotion || matrixPhase === "idle" ? 0 : step] ?? FRAMES[0]!; const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const colPitch = dotSize + gap; const rowGap = Math.max(1, colPitch * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

))}

); if (useWrapper) { return

{matrix}

; } return matrix; } 99:T1bd9,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex9Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.15; const HIGH_OPACITY = 0.98; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } const PETAL_WIDTH = 0.42; function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function pointForCell(row: number, col: number): { angle: number; radius: number } { const count = ROW_COUNTS[row] ?? 1; const x = col - (count - 1) / 2; const y = (row - 2) * HEX_ROW_PITCH_RATIO; return { angle: Math.atan2(y, x), radius: Math.sqrt(x * x + y * y) }; } function angularDistance(a: number, b: number): number { return Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b))); } function opacityForCell(row: number, col: number, phase: number): number { const { angle, radius } = pointForCell(row, col); if (radius < 0.1) { return 0.42 + Math.sin(phase * Math.PI * 2) * 0.2; } const rotation = phase * Math.PI * 2; const petalA = Math.max(0, 1 - angularDistance(angle, rotation) / PETAL_WIDTH); const petalB = Math.max(0, 1 - angularDistance(angle, rotation + Math.PI) / PETAL_WIDTH); const crossA = Math.max(0, 1 - angularDistance(angle, rotation + Math.PI / 2) / 0.52) * 0.46; const crossB = Math.max(0, 1 - angularDistance(angle, rotation + Math.PI * 1.5) / 0.52) * 0.46; const ring = (0.5 + 0.5 * Math.sin(phase * Math.PI * 2 - radius * 2.7)) * (radius > 1.3 ? 0.22 : 0.1); const petalPeak = Math.max(petalA, petalB); if (petalPeak > 0.92) { return HIGH_OPACITY; } return Math.min(HIGH_OPACITY, BASE_OPACITY + petalPeak * 0.82 + crossA + crossB + ring); } export function DotmHex9({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.8, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex9Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1650, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const phase = reducedMotion || matrixPhase === "idle" ? 0.1 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

))}

); if (useWrapper) { return

{matrix}

; } return matrix; } 9a:T1c25,"use client"; import type { CSSProperties } from "react"; import { cx } from "@/components/ui/dotmatrix-core"; import { resolveDmxColorTokens } from "@/components/ui/dotmatrix-core"; import { styleOpacity, stylePx } from "@/components/ui/dotmatrix-core"; import { remapOpacityToTriplet } from "@/components/ui/dotmatrix-core"; import { dmxBloomHaloSpreadClass, dmxBloomRootActive, dmxDotBloomParts } from "@/components/ui/dotmatrix-core"; import { getPatternIndexes } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type DotmHex10Props = DotMatrixCommonProps; const ROW_COUNTS = [3, 4, 5, 4, 3] as const; const BASE_OPACITY = 0.09; const HIGH_OPACITY = 0.98; const HEX_ROW_PITCH_RATIO = Math.sqrt(3) / 2; function hexPatternIndex(row: number, rowCount: number, col: number): number { return row * ROW_COUNTS[2] + Math.floor((ROW_COUNTS[2] - rowCount) / 2) + col; } function clamp01(n: number | undefined) { if (n == null || !Number.isFinite(n)) { return; } return Math.min(1, Math.max(0, n)); } function pointForCell(row: number, col: number): { x: number; y: number; angle: number; radius: number } { const count = ROW_COUNTS[row] ?? 1; const x = col - (count - 1) / 2; const y = (row - 2) * HEX_ROW_PITCH_RATIO; return { x, y, angle: Math.atan2(y, x), radius: Math.sqrt(x * x + y * y) }; } function ripple(value: number, width: number): number { const wrapped = ((value % 1) + 1) % 1; const distance = Math.min(wrapped, 1 - wrapped); return Math.max(0, 1 - distance / width); } function opacityForCell(row: number, col: number, phase: number): number { const { x, y, radius } = pointForCell(row, col); const lensCenter = Math.sin(phase * Math.PI * 2) * 1.15; const lensDistance = Math.abs(lensCenter - x * 0.88 - y * 0.16); const liquidLens = Math.max(0, 1 - lensDistance / 0.78); const wakeFront = ripple(phase + x * 0.12 - y * 0.045 + radius * 0.07, 0.16); const wakeBack = ripple(phase + 0.34 + x * 0.09 + y * 0.035 + radius * 0.05, 0.2) * 0.34; const verticalCompression = Math.max(0, 1 - Math.abs(Math.cos(phase * Math.PI * 2) * 1.18 - y * 1.25) / 1.1) * 0.18; const shellSheen = (0.5 + 0.5 * Math.sin(phase * Math.PI * 2 - radius * 1.9)) * (radius > 1.35 ? 0.16 : 0.06); const core = radius < 0.1 ? 0.34 + Math.sin(phase * Math.PI * 2) * 0.1 : 0; return Math.min( HIGH_OPACITY, BASE_OPACITY + liquidLens * 0.72 + wakeFront * 0.38 + wakeBack + verticalCompression + shellSheen + core ); } export function DotmHex10({ size = 34, dotSize = 5, color = "currentColor", colorPreset, ariaLabel = "Loading", className, muted = false, bloom = false, halo = 0, dotClassName, dotShape = "circle", speed = 1.55, animated = true, hoverAnimated = false, pattern = "full", cellPadding, boxSize, minSize, opacityBase, opacityMid, opacityPeak }: DotmHex10Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1850, speed }); const gap = cellPadding ?? Math.max(1, Math.floor((size - dotSize * ROW_COUNTS[2]) / (ROW_COUNTS[2] - 1))); const rowGap = Math.max(1, (dotSize + gap) * HEX_ROW_PITCH_RATIO - dotSize); const matrixWidth = dotSize * ROW_COUNTS[2] + gap * (ROW_COUNTS[2] - 1); const matrixHeight = dotSize * ROW_COUNTS.length + rowGap * (ROW_COUNTS.length - 1); const matrixSpan = Math.max(matrixWidth, matrixHeight); const outerDim = Math.max(boxSize ?? matrixSpan, minSize ?? 0); const useWrapper = boxSize != null || minSize != null; const scale = useWrapper && matrixSpan > 0 ? outerDim / matrixSpan : 1; const ob = clamp01(opacityBase); const om = clamp01(opacityMid); const op = clamp01(opacityPeak); const phase = reducedMotion || matrixPhase === "idle" ? 0.14 : cyclePhase; const activePatternIndexes = getPatternIndexes(pattern); const { resolvedColor, dotFill } = resolveDmxColorTokens(color, colorPreset); const matrixStyle = { width: stylePx(matrixWidth), height: stylePx(matrixHeight), ["--dmx-dot-fill" as const]: dotFill, color: resolvedColor, ["--dmx-dot-size" as const]: `${dotSize}px`, ["--dmx-halo-level" as const]: halo, ...(ob !== undefined && { ["--dmx-opacity-base" as const]: ob }), ...(om !== undefined && { ["--dmx-opacity-mid" as const]: om }), ...(op !== undefined && { ["--dmx-opacity-peak" as const]: op }), ...(useWrapper ? { transform: `scale(${scale})`, transformOrigin: "center center" as const } : { minWidth: minSize, minHeight: minSize }) } as unknown as CSSProperties; const matrix = (

{ROW_COUNTS.map((count, row) => (

))}

); if (useWrapper) { return

{matrix}

; } return matrix; } 9b:T77d,"use client"; import type { CSSProperties } from "react"; import { DotMatrix3Base } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { spiralInward3NormFromIndex, spiralInward3OrderValue, wave3PathOpacityFromNorm } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type Dotm3x3_1Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const order = spiralInward3OrderValue(index); const pathNorm = spiralInward3NormFromIndex(index); const style = { "--dmx-spiral-order": order } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: wave3PathOpacityFromNorm(pathNorm) } }; } return { className: "dmx-spiral-snake-3", style }; }; export function Dotm3x3_1({ speed = 1.15, pattern = "full", dotShape = "circle", animated = true, hoverAnimated = false, ...rest }: Dotm3x3_1Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); return ( ); } 9c:T420,"use client"; import type { CSSProperties } from "react"; import { createDotm3x3Component } from "@/components/ui/dotmatrix-core"; import { snakePath3NormFromIndex, snakePath3OrderValue, wave3PathOpacityFromNorm } from "@/components/ui/dotmatrix-core"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type Dotm3x3_9Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const order = snakePath3OrderValue(index); const path = snakePath3NormFromIndex(index); const style = { "--dmx-snake-order": order, "--dmx-path": path } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: wave3PathOpacityFromNorm(path) } }; } return { className: "dmx-snake-path-3", style }; }; export const Dotm3x3_9 = createDotm3x3Component("Dotm3x3_9", animationResolver, 1.75); 9d:T526,"use client"; import type { CSSProperties } from "react"; import { createDotm3x3Component } from "@/components/ui/dotmatrix-core"; import { isCenterCell3, outerRingClockwise3NormFromIndex, outerRingClockwise3OrderValue, wave3PathOpacityFromNorm } from "@/components/ui/dotmatrix-core"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type Dotm3x3_10Props = DotMatrixCommonProps; const animationResolver: DotAnimationResolver = ({ isActive, index, row, col, reducedMotion, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } if (isCenterCell3(row, col)) { if (reducedMotion || phase === "idle") { return { style: { opacity: 0.2 } }; } return { className: "dmx-core-pulse-3" }; } const order = outerRingClockwise3OrderValue(index); const path = outerRingClockwise3NormFromIndex(index); const style = { "--dmx-frame-order": order, "--dmx-path": path } as CSSProperties; if (reducedMotion || phase === "idle") { return { style: { ...style, opacity: wave3PathOpacityFromNorm(path) } }; } return { className: "dmx-frame-chase-3", style }; }; export const Dotm3x3_10 = createDotm3x3Component("Dotm3x3_10", animationResolver, 1.75); 9e:T1252,"use client"; import { useMemo } from "react"; import { DotMatrix3Base } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { rowMajorIndex3 } from "@/components/ui/dotmatrix-core"; import { useCyclePhase } from "@/components/ui/dotmatrix-hooks"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type Dotm3x3_11Props = DotMatrixCommonProps; const BASE_OPACITY = 0.06; const PEAK_OPACITY = 0.88; const CYCLE_MS_BASE = 2700; const HOLD_RATIO = 0.52; const MORPH_RATIO = 0.34; const SMOOTH_TRANSITION = "opacity 120ms linear"; function smoothstep(value: number): number { const t = Math.min(1, Math.max(0, value)); return t * t * (3 - 2 * t); } function patternWeight(pattern: ReadonlySet, index: number): number { return pattern.has(index) ? 1 : 0; } /** Distinct 3×3 motifs that morph in sequence — corners, cross, full, center, ring, X, rails. */ const GLYPH_PATTERNS: readonly ReadonlySet[] = [ new Set([rowMajorIndex3(0, 0), rowMajorIndex3(0, 2), rowMajorIndex3(2, 0), rowMajorIndex3(2, 2)]), new Set([ rowMajorIndex3(0, 1), rowMajorIndex3(1, 0), rowMajorIndex3(1, 1), rowMajorIndex3(1, 2), rowMajorIndex3(2, 1) ]), new Set(Array.from({ length: 9 }, (_, index) => index)), new Set([rowMajorIndex3(1, 1)]), new Set([ rowMajorIndex3(0, 0), rowMajorIndex3(0, 1), rowMajorIndex3(0, 2), rowMajorIndex3(1, 0), rowMajorIndex3(1, 2), rowMajorIndex3(2, 0), rowMajorIndex3(2, 1), rowMajorIndex3(2, 2) ]), new Set([ rowMajorIndex3(0, 0), rowMajorIndex3(0, 2), rowMajorIndex3(1, 1), rowMajorIndex3(2, 0), rowMajorIndex3(2, 2) ]), new Set([ rowMajorIndex3(0, 1), rowMajorIndex3(1, 0), rowMajorIndex3(1, 2), rowMajorIndex3(2, 1) ]) ]; function glyphMorphProgress(segmentPhase: number, stagger: number): number { const morphStart = HOLD_RATIO; const morphEnd = HOLD_RATIO + MORPH_RATIO; if (segmentPhase < morphStart + stagger * MORPH_RATIO) { return 0; } if (segmentPhase >= morphEnd) { return 1; } const localSpan = morphEnd - morphStart; const localPhase = (segmentPhase - morphStart - stagger * MORPH_RATIO) / (localSpan * (1 - stagger * 0.85)); return smoothstep(localPhase); } export function Dotm3x3_11({ speed = 1.25, pattern = "full", dotShape = "circle", animated = true, hoverAnimated = false, ...rest }: Dotm3x3_11Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const cyclePhase = useCyclePhase({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: CYCLE_MS_BASE, speed }); const animationResolver = useMemo(() => { const patternCount = GLYPH_PATTERNS.length; const scaledPhase = cyclePhase * patternCount; const patternIndex = Math.floor(scaledPhase) % patternCount; const nextPatternIndex = (patternIndex + 1) % patternCount; const segmentPhase = scaledPhase - Math.floor(scaledPhase); const currentPattern = GLYPH_PATTERNS[patternIndex]!; const nextPattern = GLYPH_PATTERNS[nextPatternIndex]!; return ({ isActive, index, row, col, reducedMotion: rm, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } const stagger = (row + col) / 4; const morphT = glyphMorphProgress(segmentPhase, stagger); let weight = patternWeight(currentPattern, index) * (1 - morphT) + patternWeight(nextPattern, index) * morphT; if (segmentPhase < HOLD_RATIO && weight > 0.01) { const breathe = 0.78 + 0.22 * Math.sin((segmentPhase / HOLD_RATIO) * Math.PI); weight *= breathe; } const opacity = BASE_OPACITY + weight * (PEAK_OPACITY - BASE_OPACITY); if (rm || phase === "idle") { return { style: { opacity } }; } return { style: { opacity, transition: SMOOTH_TRANSITION } }; }; }, [cyclePhase]); return ( ); } 9f:Ta38,"use client"; import { useMemo } from "react"; import { DotMatrix3Base } from "@/components/ui/dotmatrix-core"; import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks"; import { isCenterCell3, outerRingClockwise3OrderValue } from "@/components/ui/dotmatrix-core"; import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks"; import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks"; import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core"; export type Dotm3x3_14Props = DotMatrixCommonProps; const BASE_OPACITY = 0.06; const TAIL_LEVELS = [0.92, 0.52, 0.24] as const; const PERIMETER = 8; export function Dotm3x3_14({ speed = 1.6, pattern = "full", dotShape = "circle", animated = true, hoverAnimated = false, ...rest }: Dotm3x3_14Props) { const reducedMotion = usePrefersReducedMotion(); const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({ animated: Boolean(animated && !reducedMotion), hoverAnimated: Boolean(hoverAnimated && !reducedMotion), speed }); const step = useSteppedCycle({ active: !reducedMotion && matrixPhase !== "idle", cycleMsBase: 1150, steps: PERIMETER, speed }); const animationResolver = useMemo(() => { const head = step % PERIMETER; return ({ isActive, index, row, col, reducedMotion: rm, phase }) => { if (!isActive) { return { className: "dmx-inactive" }; } if (isCenterCell3(row, col)) { const opacity = rm || phase === "idle" ? 0.18 : 0.1 + (head % 2) * 0.08; return { style: { opacity } }; } const order = outerRingClockwise3OrderValue(index); if (order < 0) { return { style: { opacity: BASE_OPACITY } }; } const trail = (head - order + PERIMETER) % PERIMETER; let opacity = BASE_OPACITY; for (let i = 0; i < TAIL_LEVELS.length; i += 1) { if (trail === i) { opacity = BASE_OPACITY + TAIL_LEVELS[i]! * 0.82; break; } } if (rm || phase === "idle") { return { style: { opacity } }; } return { style: { opacity } }; }; }, [step]); return ( ); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"components/ui/dotm-square-1.tsx","content":"$52","type":"registry:ui"},{"path":"components/ui/dotmatrix-core.tsx","content":"$53","type":"registry:lib"},{"path":"components/ui/dotmatrix-hooks.ts","content":"$54","type":"registry:lib"},{"path":"components/dotmatrix-loader.css","content":"$55","type":"registry:style"},{"path":"components/ui/dotm-square-2.tsx","content":"$56","type":"registry:ui"},{"path":"components/ui/dotm-square-3.tsx","content":"$57","type":"registry:ui"},{"path":"components/ui/dotm-square-4.tsx","content":"$58","type":"registry:ui"},{"path":"components/ui/dotm-square-5.tsx","content":"$59","type":"registry:ui"},{"path":"components/ui/dotm-square-6.tsx","content":"$5a","type":"registry:ui"},{"path":"components/ui/dotm-square-7.tsx","content":"$5b","type":"registry:ui"},{"path":"components/ui/dotm-square-8.tsx","content":"$5c","type":"registry:ui"},{"path":"components/ui/dotm-square-9.tsx","content":"$5d","type":"registry:ui"},{"path":"components/ui/dotm-square-10.tsx","content":"$5e","type":"registry:ui"},{"path":"components/ui/dotm-square-11.tsx","content":"$5f","type":"registry:ui"},{"path":"components/ui/dotm-square-12.tsx","content":"$60","type":"registry:ui"},{"path":"components/ui/dotm-square-13.tsx","content":"$61","type":"registry:ui"},{"path":"components/ui/dotm-square-14.tsx","content":"$62","type":"registry:ui"},{"path":"components/ui/dotm-square-15.tsx","content":"$63","type":"registry:ui"},{"path":"components/ui/dotm-square-16.tsx","content":"$64","type":"registry:ui"},{"path":"components/ui/dotm-square-17.tsx","content":"$65","type":"registry:ui"},{"path":"components/ui/dotm-square-18.tsx","content":"$66","type":"registry:ui"},{"path":"components/ui/dotm-square-19.tsx","content":"$67","type":"registry:ui"},{"path":"components/ui/dotm-square-20.tsx","content":"$68","type":"registry:ui"},{"path":"components/ui/dotm-circular-1.tsx","content":"$69","type":"registry:ui"},{"path":"components/ui/dotm-circular-2.tsx","content":"$6a","type":"registry:ui"},{"path":"components/ui/dotm-circular-3.tsx","content":"$6b","type":"registry:ui"},{"path":"components/ui/dotm-circular-4.tsx","content":"$6c","type":"registry:ui"},{"path":"components/ui/dotm-circular-5.tsx","content":"$6d","type":"registry:ui"},{"path":"components/ui/dotm-circular-6.tsx","content":"$6e","type":"registry:ui"},{"path":"components/ui/dotm-circular-7.tsx","content":"$6f","type":"registry:ui"},{"path":"components/ui/dotm-circular-8.tsx","content":"$70","type":"registry:ui"},{"path":"components/ui/dotm-circular-9.tsx","content":"$71","type":"registry:ui"},{"path":"components/ui/dotm-circular-10.tsx","content":"$72","type":"registry:ui"},{"path":"components/ui/dotm-circular-11.tsx","content":"$73","type":"registry:ui"},{"path":"components/ui/dotm-circular-12.tsx","content":"$74","type":"registry:ui"},{"path":"components/ui/dotm-circular-13.tsx","content":"$75","type":"registry:ui"},{"path":"components/ui/dotm-circular-14.tsx","content":"$76","type":"registry:ui"},{"path":"components/ui/dotm-circular-15.tsx","content":"$77","type":"registry:ui"},{"path":"components/ui/dotm-circular-16.tsx","content":"$78","type":"registry:ui"},{"path":"components/ui/dotm-circular-17.tsx","content":"$79","type":"registry:ui"},{"path":"components/ui/dotm-circular-18.tsx","content":"$7a","type":"registry:ui"},{"path":"components/ui/dotm-circular-19.tsx","content":"$7b","type":"registry:ui"},{"path":"components/ui/dotm-circular-20.tsx","content":"$7c","type":"registry:ui"},{"path":"components/ui/dotm-triangle-1.tsx","content":"$7d","type":"registry:ui"},{"path":"components/ui/dotm-triangle-2.tsx","content":"$7e","type":"registry:ui"},{"path":"components/ui/dotm-triangle-3.tsx","content":"$7f","type":"registry:ui"},{"path":"components/ui/dotm-triangle-4.tsx","content":"$80","type":"registry:ui"},{"path":"components/ui/dotm-triangle-5.tsx","content":"$81","type":"registry:ui"},{"path":"components/ui/dotm-triangle-6.tsx","content":"$82","type":"registry:ui"},{"path":"components/ui/dotm-triangle-7.tsx","content":"$83","type":"registry:ui"},{"path":"components/ui/dotm-triangle-8.tsx","content":"$84","type":"registry:ui"},{"path":"components/ui/dotm-triangle-9.tsx","content":"$85","type":"registry:ui"},{"path":"components/ui/dotm-triangle-10.tsx","content":"$86","type":"registry:ui"},{"path":"components/ui/dotm-triangle-11.tsx","content":"$87","type":"registry:ui"},{"path":"components/ui/dotm-triangle-12.tsx","content":"$88","type":"registry:ui"},{"path":"components/ui/dotm-triangle-13.tsx","content":"$89","type":"registry:ui"},{"path":"components/ui/dotm-triangle-14.tsx","content":"$8a","type":"registry:ui"},{"path":"components/ui/dotm-triangle-15.tsx","content":"$8b","type":"registry:ui"},{"path":"components/ui/dotm-triangle-16.tsx","content":"$8c","type":"registry:ui"},{"path":"components/ui/dotm-triangle-17.tsx","content":"$8d","type":"registry:ui"},{"path":"components/ui/dotm-triangle-18.tsx","content":"$8e","type":"registry:ui"},{"path":"components/ui/dotm-triangle-19.tsx","content":"$8f","type":"registry:ui"},{"path":"components/ui/dotm-triangle-20.tsx","content":"$90","type":"registry:ui"},{"path":"components/ui/dotm-hex-1.tsx","content":"$91","type":"registry:ui"},{"path":"components/ui/dotm-hex-2.tsx","content":"$92","type":"registry:ui"},{"path":"components/ui/dotm-hex-3.tsx","content":"$93","type":"registry:ui"},{"path":"components/ui/dotm-hex-4.tsx","content":"$94","type":"registry:ui"},{"path":"components/ui/dotm-hex-5.tsx","content":"$95","type":"registry:ui"},{"path":"components/ui/dotm-hex-6.tsx","content":"$96","type":"registry:ui"},{"path":"components/ui/dotm-hex-7.tsx","content":"$97","type":"registry:ui"},{"path":"components/ui/dotm-hex-8.tsx","content":"$98","type":"registry:ui"},{"path":"components/ui/dotm-hex-9.tsx","content":"$99","type":"registry:ui"},{"path":"components/ui/dotm-hex-10.tsx","content":"$9a","type":"registry:ui"},{"path":"components/ui/dotm-3x3-1.tsx","content":"$9b","type":"registry:ui"},{"path":"components/ui/dotm-3x3-2.tsx","content":"\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_2Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_2 = createDiagonalWave3Component(\"Dotm3x3_2\", \"tr-bl\");\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-3.tsx","content":"\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_3Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_3 = createDiagonalWave3Component(\"Dotm3x3_3\", \"tl-br\");\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-4.tsx","content":"\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_4Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_4 = createDiagonalWave3Component(\"Dotm3x3_4\", \"br-tl\");\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-5.tsx","content":"\"use client\";\n\nimport { createDiagonalWave3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_5Props = DotMatrixCommonProps;\n\nexport const Dotm3x3_5 = createDiagonalWave3Component(\"Dotm3x3_5\", \"bl-tr\");\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-6.tsx","content":"\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_6Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({\n isActive,\n manhattanDistance,\n reducedMotion,\n phase\n}) => {\n if (!isActive) {\n return { className: \"dmx-inactive\" };\n }\n\n const ring = Math.max(0, Math.min(2, manhattanDistance));\n const style = { \"--dmx-center-ripple-ring\": ring } as CSSProperties;\n\n if (reducedMotion || phase === \"idle\") {\n return {\n style: {\n ...style,\n opacity: 0.06 + (1 - ring / 2) * 0.82\n }\n };\n }\n\n return { className: \"dmx-center-ripple-3\", style };\n};\n\nexport const Dotm3x3_6 = createDotm3x3Component(\"Dotm3x3_6\", animationResolver, 1.75);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-7.tsx","content":"\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport { colWave3NormFromCol, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_7Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, col, reducedMotion, phase }) => {\n if (!isActive) {\n return { className: \"dmx-inactive\" };\n }\n\n const path = colWave3NormFromCol(col);\n const style = { \"--dmx-path\": path } as CSSProperties;\n\n if (reducedMotion || phase === \"idle\") {\n return {\n style: {\n ...style,\n opacity: wave3PathOpacityFromNorm(path)\n }\n };\n }\n\n return { className: \"dmx-path-3\", style };\n};\n\nexport const Dotm3x3_7 = createDotm3x3Component(\"Dotm3x3_7\", animationResolver, 1.75);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-8.tsx","content":"\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport { rowWave3NormFromRow, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_8Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, row, reducedMotion, phase }) => {\n if (!isActive) {\n return { className: \"dmx-inactive\" };\n }\n\n const path = rowWave3NormFromRow(row);\n const style = { \"--dmx-path\": path } as CSSProperties;\n\n if (reducedMotion || phase === \"idle\") {\n return {\n style: {\n ...style,\n opacity: wave3PathOpacityFromNorm(path)\n }\n };\n }\n\n return { className: \"dmx-path-3\", style };\n};\n\nexport const Dotm3x3_8 = createDotm3x3Component(\"Dotm3x3_8\", animationResolver, 1.75);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-9.tsx","content":"$9c","type":"registry:ui"},{"path":"components/ui/dotm-3x3-10.tsx","content":"$9d","type":"registry:ui"},{"path":"components/ui/dotm-3x3-11.tsx","content":"$9e","type":"registry:ui"},{"path":"components/ui/dotm-3x3-12.tsx","content":"\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_12Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({\n isActive,\n distanceFromCenter,\n reducedMotion,\n phase\n}) => {\n if (!isActive) {\n return { className: \"dmx-inactive\" };\n }\n\n const ring = Math.max(0, Math.min(2, Math.round(distanceFromCenter)));\n const style = { \"--dmx-distance\": distanceFromCenter } as CSSProperties;\n\n if (reducedMotion || phase === \"idle\") {\n return {\n style: {\n ...style,\n opacity: 0.06 + (1 - ring / 2) * 0.82\n }\n };\n }\n\n return { className: \"dmx-distance-ripple-3\", style };\n};\n\nexport const Dotm3x3_12 = createDotm3x3Component(\"Dotm3x3_12\", animationResolver, 1.75);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-13.tsx","content":"\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport { colWave3NormFromColReverse, wave3PathOpacityFromNorm } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_13Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({ isActive, col, reducedMotion, phase }) => {\n if (!isActive) {\n return { className: \"dmx-inactive\" };\n }\n\n const path = colWave3NormFromColReverse(col);\n const style = { \"--dmx-path\": path } as CSSProperties;\n\n if (reducedMotion || phase === \"idle\") {\n return {\n style: {\n ...style,\n opacity: wave3PathOpacityFromNorm(path)\n }\n };\n }\n\n return { className: \"dmx-path-3\", style };\n};\n\nexport const Dotm3x3_13 = createDotm3x3Component(\"Dotm3x3_13\", animationResolver, 1.75);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-14.tsx","content":"$9f","type":"registry:ui"},{"path":"components/ui/dotm-3x3-15.tsx","content":"\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { createDotm3x3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotAnimationResolver, DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_15Props = DotMatrixCommonProps;\n\nconst animationResolver: DotAnimationResolver = ({\n isActive,\n manhattanDistance,\n reducedMotion,\n phase\n}) => {\n if (!isActive) {\n return { className: \"dmx-inactive\" };\n }\n\n const ring = Math.max(0, Math.min(2, manhattanDistance));\n const style = {\n \"--dmx-ripple-ring\": ring,\n \"--dmx-ripple-parity\": ring % 2\n } as CSSProperties;\n\n if (reducedMotion || phase === \"idle\") {\n return {\n style: {\n ...style,\n opacity: 0.06 + (1 - ring / 2) * 0.82\n }\n };\n }\n\n return { className: \"dmx-ripple-echo-3\", style };\n};\n\nexport const Dotm3x3_15 = createDotm3x3Component(\"Dotm3x3_15\", animationResolver, 1.75);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-16.tsx","content":"\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_16Props = DotMatrixCommonProps;\n\n/** Smiley — eyes and mouth in row-major 0/1 form. */\nconst SMILEY_GLYPH = [1, 0, 1, 0, 0, 0, 0, 1, 0] as const;\n\nexport const Dotm3x3_16 = createGlyphSpin3Component(\"Dotm3x3_16\", SMILEY_GLYPH);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-18.tsx","content":"\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_18Props = DotMatrixCommonProps;\n\n/** Checkmark — row-major 0/1 form. */\nconst CHECK_GLYPH = [0, 0, 1, 0, 1, 0, 1, 0, 0] as const;\n\nexport const Dotm3x3_18 = createGlyphSpin3Component(\"Dotm3x3_18\", CHECK_GLYPH);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-19.tsx","content":"\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_19Props = DotMatrixCommonProps;\n\n/** Right arrow — row-major 0/1 form. */\nconst ARROW_GLYPH = [0, 1, 0, 0, 1, 1, 0, 1, 0] as const;\n\nexport const Dotm3x3_19 = createGlyphSpin3Component(\"Dotm3x3_19\", ARROW_GLYPH);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-20.tsx","content":"\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_20Props = DotMatrixCommonProps;\n\n/** L-shaped corner — row-major 0/1 form. */\nconst CORNER_GLYPH = [1, 1, 0, 1, 0, 0, 1, 0, 0] as const;\n\nexport const Dotm3x3_20 = createGlyphSpin3Component(\"Dotm3x3_20\", CORNER_GLYPH);\n","type":"registry:ui"},{"path":"components/ui/dotm-3x3-21.tsx","content":"\"use client\";\n\nimport { createGlyphSpin3Component } from \"@/components/ui/dotmatrix-core\";\nimport type { DotMatrixCommonProps } from \"@/components/ui/dotmatrix-core\";\n\nexport type Dotm3x3_21Props = DotMatrixCommonProps;\n\n/** Play triangle — row-major 0/1 form. */\nconst PLAY_GLYPH = [1, 0, 0, 1, 1, 0, 1, 0, 0] as const;\n\nexport const Dotm3x3_21 = createGlyphSpin3Component(\"Dotm3x3_21\", PLAY_GLYPH);\n","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]