Echo Rings

1"use client";
2 
3import type { CSSProperties } from "react";
4 
5import { createDotm3x3Component } from "@/components/ui/dotmatrix-core";
6import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
7 
8export type Dotm3x3_15Props = DotMatrixCommonProps;
9 
10const animationResolver: DotAnimationResolver = ({
11  isActive,
12  manhattanDistance,
13  reducedMotion,
14  phase
15}) => {
16  if (!isActive) {
17    return { className: "dmx-inactive" };
18  }
19 
20  const ring = Math.max(0, Math.min(2, manhattanDistance));
21  const style = {
22    "--dmx-ripple-ring": ring,
23    "--dmx-ripple-parity": ring % 2
24  } as CSSProperties;
25 
26  if (reducedMotion || phase === "idle") {
27    return {
28      style: {
29        ...style,
30        opacity: 0.06 + (1 - ring / 2) * 0.82
31      }
32    };
33  }
34 
35  return { className: "dmx-ripple-echo-3", style };
36};
37 
38export const Dotm3x3_15 = createDotm3x3Component("Dotm3x3_15", animationResolver, 1.75);