Drop Ripple

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_12Props = DotMatrixCommonProps;
9 
10const animationResolver: DotAnimationResolver = ({
11  isActive,
12  distanceFromCenter,
13  reducedMotion,
14  phase
15}) => {
16  if (!isActive) {
17    return { className: "dmx-inactive" };
18  }
19 
20  const ring = Math.max(0, Math.min(2, Math.round(distanceFromCenter)));
21  const style = { "--dmx-distance": distanceFromCenter } as CSSProperties;
22 
23  if (reducedMotion || phase === "idle") {
24    return {
25      style: {
26        ...style,
27        opacity: 0.06 + (1 - ring / 2) * 0.82
28      }
29    };
30  }
31 
32  return { className: "dmx-distance-ripple-3", style };
33};
34 
35export const Dotm3x3_12 = createDotm3x3Component("Dotm3x3_12", animationResolver, 1.75);