Square Spiral

1"use client";
2 
3import type { CSSProperties } from "react";
4 
5import { DotMatrix3Base } from "@/components/ui/dotmatrix-core";
6import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks";
7import { spiralInward3NormFromIndex, spiralInward3OrderValue, wave3PathOpacityFromNorm } from "@/components/ui/dotmatrix-core";
8import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
9import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
10 
11export type Dotm3x3_1Props = DotMatrixCommonProps;
12 
13const animationResolver: DotAnimationResolver = ({ isActive, index, reducedMotion, phase }) => {
14  if (!isActive) {
15    return { className: "dmx-inactive" };
16  }
17 
18  const order = spiralInward3OrderValue(index);
19  const pathNorm = spiralInward3NormFromIndex(index);
20  const style = { "--dmx-spiral-order": order } as CSSProperties;
21 
22  if (reducedMotion || phase === "idle") {
23    return {
24      style: {
25        ...style,
26        opacity: wave3PathOpacityFromNorm(pathNorm)
27      }
28    };
29  }
30 
31  return { className: "dmx-spiral-snake-3", style };
32};
33 
34export function Dotm3x3_1({
35  speed = 1.15,
36  pattern = "full",
37  dotShape = "circle",
38  animated = true,
39  hoverAnimated = false,
40  ...rest
41}: Dotm3x3_1Props) {
42  const reducedMotion = usePrefersReducedMotion();
43  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
44    animated: Boolean(animated && !reducedMotion),
45    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
46    speed
47  });
48 
49  return (
50    <DotMatrix3Base
51      {...rest}
52      size={rest.size ?? 24}
53      dotSize={rest.dotSize ?? 6}
54      speed={speed}
55      pattern={pattern}
56      dotShape={dotShape}
57      animated={animated}
58      phase={matrixPhase}
59      onMouseEnter={onMouseEnter}
60      onMouseLeave={onMouseLeave}
61      reducedMotion={reducedMotion}
62      animationResolver={animationResolver}
63    />
64  );
65}