Serpent

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