Heart Pulse

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 DotmCircular8Props = DotMatrixCommonProps;
13 
14const BASE_OPACITY = 0.08;
15const PULSE_CORE = 0.95;
16const PULSE_RING = 0.44;
17 
18export function DotmCircular8({
19  speed = 1.95,
20  animated = true,
21  hoverAnimated = false,
22  ...rest
23}: DotmCircular8Props) {
24  const reducedMotion = usePrefersReducedMotion();
25  const { phase: matrixPhase, onMouseEnter, onMouseLeave } = useDotMatrixPhases({
26    animated: Boolean(animated && !reducedMotion),
27    hoverAnimated: Boolean(hoverAnimated && !reducedMotion),
28    speed
29  });
30  const phase = useCyclePhase({
31    active: !reducedMotion && matrixPhase !== "idle",
32    cycleMsBase: 1400,
33    speed
34  });
35 
36  const resolver = useMemo<DotAnimationResolver>(() => {
37    return ({ row, col, phase: p }) => {
38      if (!isWithinCircularMask(row, col)) {
39        return { className: "dmx-inactive" };
40      }
41 
42      const x = col - 2;
43      const y = row - 2;
44      const radius = Math.hypot(x, y);
45      const beat = reducedMotion || p === "idle" ? 0 : Math.sin((phase) * Math.PI * 2);
46      const spike = reducedMotion || p === "idle" ? 0 : Math.sin((phase) * Math.PI * 4);
47      const pulse = Math.max(0, beat) + Math.max(0, spike) * 0.55;
48 
49      if (radius < 0.55) {
50        return { style: { opacity: Math.min(1, 0.35 + pulse * PULSE_CORE) } };
51      }
52      if (radius < 1.65) {
53        return { style: { opacity: 0.16 + pulse * PULSE_RING } };
54      }
55      return { style: { opacity: BASE_OPACITY + pulse * 0.08 } };
56    };
57  }, [reducedMotion, phase]);
58 
59  return (
60    <DotMatrixBase
61      {...rest}
62      size={rest.size ?? 36}
63      dotSize={rest.dotSize ?? 5}
64      speed={speed}
65      pattern="full"
66      animated={animated}
67      phase={matrixPhase}
68      onMouseEnter={onMouseEnter}
69      onMouseLeave={onMouseLeave}
70      reducedMotion={reducedMotion}
71      animationResolver={resolver}
72    />
73  );
74}