Gate Shift

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 DotmCircular7Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.08;
15const GATE_OPACITY = 0.92;
16 
17export function DotmCircular7({
18  speed = 1.8,
19  animated = true,
20  hoverAnimated = false,
21  ...rest
22}: DotmCircular7Props) {
23  const reducedMotion = usePrefersReducedMotion();
24  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
25    animated: Boolean(animated && !reducedMotion),
26    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
27    speed
28  });
29  const phase = useCyclePhase({
30    active: !reducedMotion && matrixPhase !== "idle",
31    cycleMsBase: 1600,
32    speed
33  });
34 
35  const resolver = useMemo<DotAnimationResolver>(() => {
36    return ({ row, col, phase: p }) => {
37      if (!isWithinCircularMask(row, col)) {
38        return { className: "dmx-inactive" };
39      }
40 
41      const x = col - 2;
42      const y = row - 2;
43      const t = reducedMotion || p === "idle" ? 0 : (phase) * Math.PI * 2;
44      const ring = Math.sqrt(x * x + y * y);
45      const angle = Math.atan2(y, x);
46 
47      const petalWave = 0.5 + 0.5 * Math.cos(5 * angle - t * 1.7);
48      const ringWave = 0.5 + 0.5 * Math.cos(ring * 3.3 - t * 1.2);
49      const chordWave = 0.5 + 0.5 * Math.cos((x + y) * 1.6 + t * 1.35);
50 
51      // Sharpen contrast so lit cells form clear, visible groups.
52      const petalGate = Math.pow(petalWave, 2.2);
53      const blend = 0.68 * petalGate + 0.22 * ringWave + 0.1 * chordWave;
54      const opacity = BASE_OPACITY + (GATE_OPACITY - BASE_OPACITY) * blend;
55 
56      return { style: { opacity } };
57    };
58  }, [reducedMotion, phase]);
59 
60  return (
61    <DotMatrixBase
62      {...rest}
63      size={rest.size ?? 36}
64      dotSize={rest.dotSize ?? 5}
65      speed={speed}
66      pattern="full"
67      animated={animated}
68      phase={matrixPhase}
69      onMouseEnter={onMouseEnter}
70      onMouseLeave={onMouseLeave}
71      reducedMotion={reducedMotion}
72      animationResolver={resolver}
73    />
74  );
75}