Frame Chase

1"use client";
2 
3import type { CSSProperties } from "react";
4 
5import { createDotm3x3Component } from "@/components/ui/dotmatrix-core";
6import {
7  isCenterCell3,
8  outerRingClockwise3NormFromIndex,
9  outerRingClockwise3OrderValue,
10  wave3PathOpacityFromNorm
11} from "@/components/ui/dotmatrix-core";
12import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
13 
14export type Dotm3x3_10Props = DotMatrixCommonProps;
15 
16const animationResolver: DotAnimationResolver = ({
17  isActive,
18  index,
19  row,
20  col,
21  reducedMotion,
22  phase
23}) => {
24  if (!isActive) {
25    return { className: "dmx-inactive" };
26  }
27 
28  if (isCenterCell3(row, col)) {
29    if (reducedMotion || phase === "idle") {
30      return { style: { opacity: 0.2 } };
31    }
32    return { className: "dmx-core-pulse-3" };
33  }
34 
35  const order = outerRingClockwise3OrderValue(index);
36  const path = outerRingClockwise3NormFromIndex(index);
37  const style = {
38    "--dmx-frame-order": order,
39    "--dmx-path": path
40  } as CSSProperties;
41 
42  if (reducedMotion || phase === "idle") {
43    return {
44      style: {
45        ...style,
46        opacity: wave3PathOpacityFromNorm(path)
47      }
48    };
49  }
50 
51  return { className: "dmx-frame-chase-3", style };
52};
53 
54export const Dotm3x3_10 = createDotm3x3Component("Dotm3x3_10", animationResolver, 1.75);