Twin Helix

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 { 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 DotmCircular13Props = DotMatrixCommonProps;
13 
14const STEP_COUNT = 28;
15const BASE_OPACITY = 0.07;
16const STRAND_OPACITY = 0.95;
17const NEAR_STRAND_OPACITY = 0.5;
18const BRIDGE_OPACITY = 0.3;
19 
20export function DotmCircular13({
21  speed = 1.55,
22  animated = true,
23  hoverAnimated = false,
24  ...rest
25}: DotmCircular13Props) {
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: 1750,
35    steps: STEP_COUNT,
36    speed,
37  });
38 
39  const resolver = useMemo<DotAnimationResolver>(() => {
40    return ({ row, col, phase }) => {
41      if (!isWithinCircularMask(row, col)) {
42        return { className: "dmx-inactive" };
43      }
44 
45      const x = col - 2;
46      const y = row - 2;
47      const t = reducedMotion || phase === "idle" ? 0 : (step / STEP_COUNT) * Math.PI * 2;
48 
49      const strandOffset = Math.sin(y * 1.35 + t * 1.3) * 1.15;
50      const leftStrand = -strandOffset;
51      const rightStrand = strandOffset;
52      const leftDistance = Math.abs(x - leftStrand);
53      const rightDistance = Math.abs(x - rightStrand);
54      const strandDistance = Math.min(leftDistance, rightDistance);
55      const bridgeOn = Math.cos(y * 2 + t * 2.1) > 0.55;
56      const isBetweenStrands = x > Math.min(leftStrand, rightStrand) && x < Math.max(leftStrand, rightStrand);
57 
58      let opacity = BASE_OPACITY;
59      if (strandDistance < 0.34) {
60        opacity = STRAND_OPACITY;
61      } else if (strandDistance < 0.8) {
62        opacity = NEAR_STRAND_OPACITY;
63      } else if (bridgeOn && isBetweenStrands) {
64        opacity = BRIDGE_OPACITY;
65      }
66 
67      return { style: { opacity } };
68    };
69  }, [reducedMotion, step]);
70 
71  return (
72    <DotMatrixBase
73      {...rest}
74      size={rest.size ?? 36}
75// … truncated