50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 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; } } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://dotmatrix.zzzzshawn.cloud/r/dotm-3x3-12.json","proxyUrl":"https://shadcnregistry.com/r/dotmatrix/dotm-3x3-12","itemId":"@dotmatrix/dotm-3x3-12"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"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/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"}]}]]}],"$L56"]}]

Drop Ripple

Installation

Files

components

lib

Styles