Column Flux

1"use client";
2 
3import type { CSSProperties } from "react";
4 
5import { createDotm3x3Component } from "@/components/ui/dotmatrix-core";
6import { colWave3NormFromCol, wave3PathOpacityFromNorm } from "@/components/ui/dotmatrix-core";
7import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
8 
9export type Dotm3x3_7Props = DotMatrixCommonProps;
10 
11const animationResolver: DotAnimationResolver = ({ isActive, col, reducedMotion, phase }) => {
12  if (!isActive) {
13    return { className: "dmx-inactive" };
14  }
15 
16  const path = colWave3NormFromCol(col);
17  const style = { "--dmx-path": path } as CSSProperties;
18 
19  if (reducedMotion || phase === "idle") {
20    return {
21      style: {
22        ...style,
23        opacity: wave3PathOpacityFromNorm(path)
24      }
25    };
26  }
27 
28  return { className: "dmx-path-3", style };
29};
30 
31export const Dotm3x3_7 = createDotm3x3Component("Dotm3x3_7", animationResolver, 1.75);