Comet Trail

1"use client";
2 
3import { useMemo } from "react";
4 
5import { DotMatrix3Base } from "@/components/ui/dotmatrix-core";
6import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks";
7import { isCenterCell3, outerRingClockwise3OrderValue } from "@/components/ui/dotmatrix-core";
8import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
9import { useSteppedCycle } from "@/components/ui/dotmatrix-hooks";
10import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
11 
12export type Dotm3x3_14Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.06;
15const TAIL_LEVELS = [0.92, 0.52, 0.24] as const;
16const PERIMETER = 8;
17 
18export function Dotm3x3_14({
19  speed = 1.6,
20  pattern = "full",
21  dotShape = "circle",
22  animated = true,
23  hoverAnimated = false,
24  ...rest
25}: Dotm3x3_14Props) {
26  const reducedMotion = usePrefersReducedMotion();
27  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
28    animated: Boolean(animated && !reducedMotion),
29    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
30    speed
31  });
32  const step = useSteppedCycle({
33    active: !reducedMotion && matrixPhase !== "idle",
34    cycleMsBase: 1150,
35    steps: PERIMETER,
36    speed
37  });
38 
39  const animationResolver = useMemo<DotAnimationResolver>(() => {
40    const head = step % PERIMETER;
41 
42    return ({ isActive, index, row, col, reducedMotion: rm, phase }) => {
43      if (!isActive) {
44        return { className: "dmx-inactive" };
45      }
46 
47      if (isCenterCell3(row, col)) {
48        const opacity = rm || phase === "idle" ? 0.18 : 0.1 + (head % 2) * 0.08;
49        return { style: { opacity } };
50      }
51 
52      const order = outerRingClockwise3OrderValue(index);
53      if (order < 0) {
54        return { style: { opacity: BASE_OPACITY } };
55      }
56 
57      const trail = (head - order + PERIMETER) % PERIMETER;
58      let opacity = BASE_OPACITY;
59      for (let i = 0; i < TAIL_LEVELS.length; i += 1) {
60        if (trail === i) {
61          opacity = BASE_OPACITY + TAIL_LEVELS[i]! * 0.82;
62          break;
63        }
64      }
65 
66      if (rm || phase === "idle") {
67        return { style: { opacity } };
68      }
69 
70      return { style: { opacity } };
71    };
72  }, [step]);
73 
74  return (
75    <DotMatrix3Base
76      {...rest}
77      size={rest.size ?? 24}
78      dotSize={rest.dotSize ?? 6}
79      speed={speed}
80      pattern={pattern}
81      dotShape={dotShape}
82      animated={animated}
83      phase={matrixPhase}
84      onMouseEnter={onMouseEnter}
85// … truncated