Halo Drift

1"use client";
2 
3import { useMemo } from "react";
4 
5import { DotMatrixBase } from "@/components/ui/dotmatrix-core";
6import { useDotMatrixPhases } from "@/components/ui/dotmatrix-hooks";
7import { isWithinCircularMask } from "@/components/ui/dotmatrix-core";
8import { useCyclePhase } from "@/components/ui/dotmatrix-hooks";
9import { usePrefersReducedMotion } from "@/components/ui/dotmatrix-hooks";
10import type { DotAnimationResolver, DotMatrixCommonProps } from "@/components/ui/dotmatrix-core";
11 
12export type DotmCircular1Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.08;
15const STRAND_OPACITY = 1;
16const NEAR_STRAND_OPACITY = 0.24;
17const STEP_COUNT = 20;
18const HELIX_LOOP_RADIANS = (Math.PI * 2) / (STEP_COUNT - 1);
19 
20export function DotmCircular1({
21  speed = 2.5,
22  animated = true,
23  hoverAnimated = false,
24  ...rest
25}: DotmCircular1Props) {
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 animPhase = useCyclePhase({
33    active: !reducedMotion && matrixPhase !== "idle",
34    cycleMsBase: 1700,
35    speed
36  });
37 
38  const animationResolver = useMemo<DotAnimationResolver>(() => {
39    return ({ row, col, phase }) => {
40      if (!isWithinCircularMask(row, col)) {
41        return { className: "dmx-inactive" };
42      }
43 
44      const t = reducedMotion || phase === "idle" ? 0 : animPhase * STEP_COUNT;
45      const diagonalAxis = row + col;
46      const phaseOffset = t * HELIX_LOOP_RADIANS + diagonalAxis * 0.82;
47      const strandPerpendicular = Math.round(2 * Math.sin(phaseOffset));
48      const cellPerpendicular = col - row;
49      const distanceFromStrand = Math.abs(cellPerpendicular - strandPerpendicular);
50 
51      if (distanceFromStrand === 0) {
52        return { style: { opacity: STRAND_OPACITY } };
53      }
54 
55      if (distanceFromStrand === 1) {
56        return { style: { opacity: NEAR_STRAND_OPACITY } };
57      }
58 
59      return { style: { opacity: BASE_OPACITY } };
60    };
61  }, [reducedMotion, animPhase]);
62 
63  return (
64    <DotMatrixBase
65      {...rest}
66      size={rest.size ?? 36}
67      dotSize={rest.dotSize ?? 5}
68      speed={speed}
69      pattern="full"
70      animated={animated}
71      phase={matrixPhase}
72      onMouseEnter={onMouseEnter}
73      onMouseLeave={onMouseLeave}
74      reducedMotion={reducedMotion}
75      animationResolver={animationResolver}
76    />
77  );
78}