Hole Background

1/* eslint-disable @typescript-eslint/no-explicit-any */
2 
3'use client';
4 
5import * as React from 'react';
6import { motion } from 'motion/react';
7 
8import { cn } from '@/lib/utils';
9 
10type HoleBackgroundProps = React.ComponentProps<'div'> & {
11  strokeColor?: string;
12  numberOfLines?: number;
13  numberOfDiscs?: number;
14  particleRGBColor?: [number, number, number];
15};
16 
17function HoleBackground({
18  strokeColor = '#737373',
19  numberOfLines = 50,
20  numberOfDiscs = 50,
21  particleRGBColor = [255, 255, 255],
22  className,
23  children,
24  ...props
25}: HoleBackgroundProps) {
26  const canvasRef = React.useRef<HTMLCanvasElement>(null);
27  const animationFrameIdRef = React.useRef<number>(0);
28  const stateRef = React.useRef<any>({
29    discs: [] as any[],
30    lines: [] as any[],
31    particles: [] as any[],
32    clip: {},
33    startDisc: {},
34    endDisc: {},
35    rect: { width: 0, height: 0 },
36    render: { width: 0, height: 0, dpi: 1 },
37    particleArea: {},
38    linesCanvas: null,
39  });
40 
41  const linear = (p: number) => p;
42  const easeInExpo = (p: number) => (p === 0 ? 0 : Math.pow(2, 10 * (p - 1)));
43 
44  const tweenValue = React.useCallback(
45    (start: number, end: number, p: number, ease: 'inExpo' | null = null) => {
46      const delta = end - start;
47      const easeFn = ease === 'inExpo' ? easeInExpo : linear;
48      return start + delta * easeFn(p);
49    },
50    [],
51  );
52 
53  const tweenDisc = React.useCallback(
54    (disc: any) => {
55      const { startDisc, endDisc } = stateRef.current;
56      disc.x = tweenValue(startDisc.x, endDisc.x, disc.p);
57      disc.y = tweenValue(startDisc.y, endDisc.y, disc.p, 'inExpo');
58      disc.w = tweenValue(startDisc.w, endDisc.w, disc.p);
59      disc.h = tweenValue(startDisc.h, endDisc.h, disc.p);
60    },
61    [tweenValue],
62  );
63 
64  const setSize = React.useCallback(() => {
65    const canvas = canvasRef.current;
66    if (!canvas) return;
67    const rect = canvas.getBoundingClientRect();
68    stateRef.current.rect = { width: rect.width, height: rect.height };
69    stateRef.current.render = {
70      width: rect.width,
71      height: rect.height,
72      dpi: window.devicePixelRatio || 1,
73    };
74    canvas.width = stateRef.current.render.width * stateRef.current.render.dpi;
75    canvas.height =
76      stateRef.current.render.height * stateRef.current.render.dpi;
77  }, []);
78 
79  const setDiscs = React.useCallback(() => {
80    const { width, height } = stateRef.current.rect;
81    stateRef.current.discs = [];
82    stateRef.current.startDisc = {
83      x: width * 0.5,
84// … truncated