@arolariu/components 0.1.1 → 0.2.0

package/src/components/ui/hole-background.tsx

@@ -1,361 +1,326 @@
-"use client";
-
-import * as React from "react";
-import { motion } from "motion/react";
-
-import { cn } from "@/lib/utils";
-
-interface HoleBackgroundProps extends React.HTMLAttributes<HTMLCanvasElement> {
-  strokeColor?: string;
-  numberOfLines?: number;
-  numberOfDiscs?: number;
-  particleRGBColor?: [number, number, number];
-}
-
-const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
-  (
-    {
-      strokeColor = "#737373",
-      numberOfLines = 50,
-      numberOfDiscs = 50,
-      particleRGBColor = [255, 255, 255],
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const canvasRef = React.useRef<HTMLCanvasElement>(null);
-    React.useImperativeHandle(
-      ref,
-      () => canvasRef.current as HTMLCanvasElement,
-    );
-
-    const animationFrameIdRef = React.useRef<number>(0);
-    const stateRef = React.useRef<any>({
-      discs: [] as any[],
-      lines: [] as any[],
-      particles: [] as any[],
-      clip: {},
-      startDisc: {},
-      endDisc: {},
-      rect: { width: 0, height: 0 },
-      render: { width: 0, height: 0, dpi: 1 },
-      particleArea: {},
-      linesCanvas: null,
-    });
-
-    const linear = (p: number) => p;
-    const easeInExpo = (p: number) => (p === 0 ? 0 : Math.pow(2, 10 * (p - 1)));
-
-    const tweenValue = React.useCallback(
-      (start: number, end: number, p: number, ease: "inExpo" | null = null) => {
-        const delta = end - start;
-        const easeFn = ease === "inExpo" ? easeInExpo : linear;
-        return start + delta * easeFn(p);
-      },
-      [],
-    );
-
-    const tweenDisc = React.useCallback(
-      (disc: any) => {
-        const { startDisc, endDisc } = stateRef.current;
-        disc.x = tweenValue(startDisc.x, endDisc.x, disc.p);
-        disc.y = tweenValue(startDisc.y, endDisc.y, disc.p, "inExpo");
-        disc.w = tweenValue(startDisc.w, endDisc.w, disc.p);
-        disc.h = tweenValue(startDisc.h, endDisc.h, disc.p);
-      },
-      [tweenValue],
-    );
-
-    const setSize = React.useCallback(() => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const rect = canvas.getBoundingClientRect();
-      stateRef.current.rect = { width: rect.width, height: rect.height };
-      stateRef.current.render = {
-        width: rect.width,
-        height: rect.height,
-        dpi: window.devicePixelRatio || 1,
-      };
-      canvas.width =
-        stateRef.current.render.width * stateRef.current.render.dpi;
-      canvas.height =
-        stateRef.current.render.height * stateRef.current.render.dpi;
-    }, []);
-
-    const setDiscs = React.useCallback(() => {
-      const { width, height } = stateRef.current.rect;
-      stateRef.current.discs = [];
-      stateRef.current.startDisc = {
-        x: width * 0.5,
-        y: height * 0.45,
-        w: width * 0.75,
-        h: height * 0.7,
-      };
-      stateRef.current.endDisc = {
-        x: width * 0.5,
-        y: height * 0.95,
-        w: 0,
-        h: 0,
-      };
-      let prevBottom = height;
-      stateRef.current.clip = {};
-      for (let i = 0; i < numberOfDiscs; i++) {
-        const p = i / numberOfDiscs;
-        const disc = { p, x: 0, y: 0, w: 0, h: 0 };
-        tweenDisc(disc);
-        const bottom = disc.y + disc.h;
-        if (bottom <= prevBottom) {
-          stateRef.current.clip = { disc: { ...disc }, i };
-        }
-        prevBottom = bottom;
-        stateRef.current.discs.push(disc);
-      }
-      const clipPath = new Path2D();
-      const disc = stateRef.current.clip.disc;
-      clipPath.ellipse(disc.x, disc.y, disc.w, disc.h, 0, 0, Math.PI * 2);
-      clipPath.rect(disc.x - disc.w, 0, disc.w * 2, disc.y);
-      stateRef.current.clip.path = clipPath;
-    }, [tweenDisc]);
-
-    const setLines = React.useCallback(() => {
-      const { width, height } = stateRef.current.rect;
-      stateRef.current.lines = [];
-      const linesAngle = (Math.PI * 2) / numberOfLines;
-      for (let i = 0; i < numberOfLines; i++) {
-        stateRef.current.lines.push([]);
-      }
-      stateRef.current.discs.forEach((disc: any) => {
-        for (let i = 0; i < numberOfLines; i++) {
-          const angle = i * linesAngle;
-          const p = {
-            x: disc.x + Math.cos(angle) * disc.w,
-            y: disc.y + Math.sin(angle) * disc.h,
-          };
-          stateRef.current.lines[i].push(p);
-        }
-      });
-      const offCanvas = document.createElement("canvas");
-      offCanvas.width = width;
-      offCanvas.height = height;
-      const ctx = offCanvas.getContext("2d");
-      if (!ctx) return;
-      stateRef.current.lines.forEach((line: any) => {
-        ctx.save();
-        let lineIsIn = false;
-        line.forEach((p1: any, j: number) => {
-          if (j === 0) return;
-          const p0 = line[j - 1];
-          if (
-            !lineIsIn &&
-            (ctx.isPointInPath(stateRef.current.clip.path, p1.x, p1.y) ||
-              ctx.isPointInStroke(stateRef.current.clip.path, p1.x, p1.y))
-          ) {
-            lineIsIn = true;
-          } else if (lineIsIn) {
-            ctx.clip(stateRef.current.clip.path);
-          }
-          ctx.beginPath();
-          ctx.moveTo(p0.x, p0.y);
-          ctx.lineTo(p1.x, p1.y);
-          ctx.strokeStyle = strokeColor;
-          ctx.lineWidth = 2;
-          ctx.stroke();
-          ctx.closePath();
-        });
-        ctx.restore();
-      });
-      stateRef.current.linesCanvas = offCanvas;
-    }, [strokeColor]);
-
-    const initParticle = React.useCallback((start: boolean = false) => {
-      const sx =
-        stateRef.current.particleArea.sx +
-        stateRef.current.particleArea.sw * Math.random();
-      const ex =
-        stateRef.current.particleArea.ex +
-        stateRef.current.particleArea.ew * Math.random();
-      const dx = ex - sx;
-      const y = start
-        ? stateRef.current.particleArea.h * Math.random()
-        : stateRef.current.particleArea.h;
-      const r = 0.5 + Math.random() * 4;
-      const vy = 0.5 + Math.random();
-      return {
-        x: sx,
-        sx,
-        dx,
-        y,
-        vy,
-        p: 0,
-        r,
-        c: `rgba(${particleRGBColor[0]}, ${particleRGBColor[1]}, ${
-          particleRGBColor[2]
-        }, ${Math.random()})`,
-      };
-    }, []);
-
-    const setParticles = React.useCallback(() => {
-      const { width, height } = stateRef.current.rect;
-      stateRef.current.particles = [];
-      const disc = stateRef.current.clip.disc;
-      stateRef.current.particleArea = {
-        sw: disc.w * 0.5,
-        ew: disc.w * 2,
-        h: height * 0.85,
-      };
-      stateRef.current.particleArea.sx =
-        (width - stateRef.current.particleArea.sw) / 2;
-      stateRef.current.particleArea.ex =
-        (width - stateRef.current.particleArea.ew) / 2;
-      const totalParticles = 100;
-      for (let i = 0; i < totalParticles; i++) {
-        stateRef.current.particles.push(initParticle(true));
-      }
-    }, [initParticle]);
-
-    const drawDiscs = React.useCallback(
-      (ctx: CanvasRenderingContext2D) => {
-        ctx.strokeStyle = strokeColor;
-        ctx.lineWidth = 2;
-        const outerDisc = stateRef.current.startDisc;
-        ctx.beginPath();
-        ctx.ellipse(
-          outerDisc.x,
-          outerDisc.y,
-          outerDisc.w,
-          outerDisc.h,
-          0,
-          0,
-          Math.PI * 2,
-        );
-        ctx.stroke();
-        ctx.closePath();
-        stateRef.current.discs.forEach((disc: any, i: number) => {
-          if (i % 5 !== 0) return;
-          if (disc.w < stateRef.current.clip.disc.w - 5) {
-            ctx.save();
-            ctx.clip(stateRef.current.clip.path);
-          }
-          ctx.beginPath();
-          ctx.ellipse(disc.x, disc.y, disc.w, disc.h, 0, 0, Math.PI * 2);
-          ctx.stroke();
-          ctx.closePath();
-          if (disc.w < stateRef.current.clip.disc.w - 5) {
-            ctx.restore();
-          }
-        });
-      },
-      [strokeColor],
-    );
-
-    const drawLines = React.useCallback((ctx: CanvasRenderingContext2D) => {
-      if (stateRef.current.linesCanvas) {
-        ctx.drawImage(stateRef.current.linesCanvas, 0, 0);
-      }
-    }, []);
-
-    const drawParticles = React.useCallback((ctx: CanvasRenderingContext2D) => {
-      ctx.save();
-      ctx.clip(stateRef.current.clip.path);
-      stateRef.current.particles.forEach((particle: any) => {
-        ctx.fillStyle = particle.c;
-        ctx.beginPath();
-        ctx.rect(particle.x, particle.y, particle.r, particle.r);
-        ctx.closePath();
-        ctx.fill();
-      });
-      ctx.restore();
-    }, []);
-
-    const moveDiscs = React.useCallback(() => {
-      stateRef.current.discs.forEach((disc: any) => {
-        disc.p = (disc.p + 0.001) % 1;
-        tweenDisc(disc);
-      });
-    }, [tweenDisc]);
-
-    const moveParticles = React.useCallback(() => {
-      stateRef.current.particles.forEach((particle: any, idx: number) => {
-        particle.p = 1 - particle.y / stateRef.current.particleArea.h;
-        particle.x = particle.sx + particle.dx * particle.p;
-        particle.y -= particle.vy;
-        if (particle.y < 0) {
-          stateRef.current.particles[idx] = initParticle();
-        }
-      });
-    }, [initParticle]);
-
-    const tick = React.useCallback(() => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.save();
-      ctx.scale(stateRef.current.render.dpi, stateRef.current.render.dpi);
-      moveDiscs();
-      moveParticles();
-      drawDiscs(ctx);
-      drawLines(ctx);
-      drawParticles(ctx);
-      ctx.restore();
-      animationFrameIdRef.current = requestAnimationFrame(tick);
-    }, [moveDiscs, moveParticles, drawDiscs, drawLines, drawParticles]);
-
-    const init = React.useCallback(() => {
-      setSize();
-      setDiscs();
-      setLines();
-      setParticles();
-    }, [setSize, setDiscs, setLines, setParticles]);
-
-    React.useEffect(() => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      init();
-      tick();
-      const handleResize = () => {
-        setSize();
-        setDiscs();
-        setLines();
-        setParticles();
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        cancelAnimationFrame(animationFrameIdRef.current);
-      };
-    }, [init, tick, setSize, setDiscs, setLines, setParticles]);
-
-    return (
-      <div
-        className={cn(
-          "relative size-full overflow-hidden",
-          'before:content-[""] before:absolute before:top-1/2 before:left-1/2 before:block before:size-[140%] dark:before:[background:radial-gradient(ellipse_at_50%_55%,transparent_10%,black_50%)] before:[background:radial-gradient(ellipse_at_50%_55%,transparent_10%,white_50%)] before:[transform:translate3d(-50%,-50%,0)]',
-          'after:content-[""] after:absolute after:z-[5] after:top-1/2 after:left-1/2 after:block after:size-full after:[background:radial-gradient(ellipse_at_50%_75%,#a900ff_20%,transparent_75%)] after:[transform:translate3d(-50%,-50%,0)] after:mix-blend-overlay',
-          className,
-        )}
-      >
-        {children}
-        <canvas
-          ref={canvasRef}
-          className="absolute inset-0 block size-full dark:opacity-20 opacity-10"
-          {...props}
-        />
-        <motion.div
-          className={cn(
-            "absolute top-[-71.5%] left-1/2 z-[3] w-[30%] h-[140%] rounded-b-full blur-3xl opacity-75 dark:mix-blend-plus-lighter mix-blend-plus-darker [transform:translate3d(-50%,0,0)] [background-position:0%_100%] [background-size:100%_200%]",
-            "dark:[background:linear-gradient(20deg,#00f8f1,#ffbd1e20_16.5%,#fe848f_33%,#fe848f20_49.5%,#00f8f1_66%,#00f8f160_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%] [background:linear-gradient(20deg,#00f8f1,#ffbd1e40_16.5%,#fe848f_33%,#fe848f40_49.5%,#00f8f1_66%,#00f8f180_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%]",
-          )}
-          animate={{ backgroundPosition: "0% 300%" }}
-          transition={{ duration: 5, ease: "linear", repeat: Infinity }}
-        />
-        <div className="absolute top-0 left-0 z-[7] size-full dark:[background:repeating-linear-gradient(transparent,transparent_1px,white_1px,white_2px)] mix-blend-overlay opacity-50" />
-      </div>
-    );
-  },
-);
-
-export { HoleBackground, type HoleBackgroundProps };
+"use client";
+
+import {motion} from "motion/react";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+interface HoleBackgroundProps extends React.HTMLAttributes<HTMLCanvasElement> {
+  strokeColor?: string;
+  numberOfLines?: number;
+  numberOfDiscs?: number;
+  particleRGBColor?: [number, number, number];
+}
+
+const linear = (p: number) => p;
+const easeInExpo = (p: number) => (p === 0 ? 0 : 2 ** (10 * (p - 1)));
+
+const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
+  (
+    {strokeColor = "#737373", numberOfLines = 50, numberOfDiscs = 50, particleRGBColor = [255, 255, 255], className, children, ...props},
+    ref,
+  ) => {
+    const canvasRef = React.useRef<HTMLCanvasElement>(null);
+    React.useImperativeHandle(ref, () => canvasRef.current as HTMLCanvasElement);
+
+    const animationFrameIdRef = React.useRef<number>(0);
+    const stateRef = React.useRef<any>({
+      discs: [] as any[],
+      lines: [] as any[],
+      particles: [] as any[],
+      clip: {},
+      startDisc: {},
+      endDisc: {},
+      rect: {width: 0, height: 0},
+      render: {width: 0, height: 0, dpi: 1},
+      particleArea: {},
+      linesCanvas: null,
+    });
+
+    const tweenValue = React.useCallback((start: number, end: number, p: number, ease: "inExpo" | null = null) => {
+      const delta = end - start;
+      const easeFn = ease === "inExpo" ? easeInExpo : linear;
+      return start + delta * easeFn(p);
+    }, []);
+
+    const tweenDisc = React.useCallback(
+      (disc: any) => {
+        const {startDisc, endDisc} = stateRef.current;
+        disc.x = tweenValue(startDisc.x, endDisc.x, disc.p);
+        disc.y = tweenValue(startDisc.y, endDisc.y, disc.p, "inExpo");
+        disc.w = tweenValue(startDisc.w, endDisc.w, disc.p);
+        disc.h = tweenValue(startDisc.h, endDisc.h, disc.p);
+      },
+      [tweenValue],
+    );
+
+    const setSize = React.useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      stateRef.current.rect = {width: rect.width, height: rect.height};
+      stateRef.current.render = {
+        width: rect.width,
+        height: rect.height,
+        dpi: window.devicePixelRatio || 1,
+      };
+      canvas.width = stateRef.current.render.width * stateRef.current.render.dpi;
+      canvas.height = stateRef.current.render.height * stateRef.current.render.dpi;
+    }, []);
+
+    const setDiscs = React.useCallback(() => {
+      const {width, height} = stateRef.current.rect;
+      stateRef.current.discs = [];
+      stateRef.current.startDisc = {
+        x: width * 0.5,
+        y: height * 0.45,
+        w: width * 0.75,
+        h: height * 0.7,
+      };
+      stateRef.current.endDisc = {
+        x: width * 0.5,
+        y: height * 0.95,
+        w: 0,
+        h: 0,
+      };
+      let prevBottom = height;
+      stateRef.current.clip = {};
+      for (let i = 0; i < numberOfDiscs; i++) {
+        const p = i / numberOfDiscs;
+        const disc = {p, x: 0, y: 0, w: 0, h: 0};
+        tweenDisc(disc);
+        const bottom = disc.y + disc.h;
+        if (bottom <= prevBottom) {
+          stateRef.current.clip = {disc: {...disc}, i};
+        }
+        prevBottom = bottom;
+        stateRef.current.discs.push(disc);
+      }
+      const clipPath = new Path2D();
+      const {disc} = stateRef.current.clip;
+      clipPath.ellipse(disc.x, disc.y, disc.w, disc.h, 0, 0, Math.PI * 2);
+      clipPath.rect(disc.x - disc.w, 0, disc.w * 2, disc.y);
+      stateRef.current.clip.path = clipPath;
+    }, [tweenDisc]);
+
+    const setLines = React.useCallback(() => {
+      const {width, height} = stateRef.current.rect;
+      stateRef.current.lines = [];
+      const linesAngle = (Math.PI * 2) / numberOfLines;
+      for (let i = 0; i < numberOfLines; i++) {
+        stateRef.current.lines.push([]);
+      }
+      stateRef.current.discs.forEach((disc: any) => {
+        for (let i = 0; i < numberOfLines; i++) {
+          const angle = i * linesAngle;
+          const p = {
+            x: disc.x + Math.cos(angle) * disc.w,
+            y: disc.y + Math.sin(angle) * disc.h,
+          };
+          stateRef.current.lines[i].push(p);
+        }
+      });
+      const offCanvas = document.createElement("canvas");
+      offCanvas.width = width;
+      offCanvas.height = height;
+      const ctx = offCanvas.getContext("2d");
+      if (!ctx) return;
+      stateRef.current.lines.forEach((line: any) => {
+        ctx.save();
+        let lineIsIn = false;
+        line.forEach((p1: any, j: number) => {
+          if (j === 0) return;
+          const p0 = line[j - 1];
+          if (
+            !lineIsIn
+            && (ctx.isPointInPath(stateRef.current.clip.path, p1.x, p1.y) || ctx.isPointInStroke(stateRef.current.clip.path, p1.x, p1.y))
+          ) {
+            lineIsIn = true;
+          } else if (lineIsIn) {
+            ctx.clip(stateRef.current.clip.path);
+          }
+          ctx.beginPath();
+          ctx.moveTo(p0.x, p0.y);
+          ctx.lineTo(p1.x, p1.y);
+          ctx.strokeStyle = strokeColor;
+          ctx.lineWidth = 2;
+          ctx.stroke();
+          ctx.closePath();
+        });
+        ctx.restore();
+      });
+      stateRef.current.linesCanvas = offCanvas;
+    }, [strokeColor]);
+
+    const initParticle = React.useCallback((start: boolean = false) => {
+      const sx = stateRef.current.particleArea.sx + stateRef.current.particleArea.sw * Math.random();
+      const ex = stateRef.current.particleArea.ex + stateRef.current.particleArea.ew * Math.random();
+      const dx = ex - sx;
+      const y = start ? stateRef.current.particleArea.h * Math.random() : stateRef.current.particleArea.h;
+      const r = 0.5 + Math.random() * 4;
+      const vy = 0.5 + Math.random();
+      return {
+        x: sx,
+        sx,
+        dx,
+        y,
+        vy,
+        p: 0,
+        r,
+        c: `rgba(${particleRGBColor[0]}, ${particleRGBColor[1]}, ${particleRGBColor[2]}, ${Math.random()})`,
+      };
+    }, []);
+
+    const setParticles = React.useCallback(() => {
+      const {width, height} = stateRef.current.rect;
+      stateRef.current.particles = [];
+      const {disc} = stateRef.current.clip;
+      stateRef.current.particleArea = {
+        sw: disc.w * 0.5,
+        ew: disc.w * 2,
+        h: height * 0.85,
+      };
+      stateRef.current.particleArea.sx = (width - stateRef.current.particleArea.sw) / 2;
+      stateRef.current.particleArea.ex = (width - stateRef.current.particleArea.ew) / 2;
+      const totalParticles = 100;
+      for (let i = 0; i < totalParticles; i++) {
+        stateRef.current.particles.push(initParticle(true));
+      }
+    }, [initParticle]);
+
+    const drawDiscs = React.useCallback(
+      (ctx: CanvasRenderingContext2D) => {
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = 2;
+        const outerDisc = stateRef.current.startDisc;
+        ctx.beginPath();
+        ctx.ellipse(outerDisc.x, outerDisc.y, outerDisc.w, outerDisc.h, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.closePath();
+        stateRef.current.discs.forEach((disc: any, i: number) => {
+          if (i % 5 !== 0) return;
+          if (disc.w < stateRef.current.clip.disc.w - 5) {
+            ctx.save();
+            ctx.clip(stateRef.current.clip.path);
+          }
+          ctx.beginPath();
+          ctx.ellipse(disc.x, disc.y, disc.w, disc.h, 0, 0, Math.PI * 2);
+          ctx.stroke();
+          ctx.closePath();
+          if (disc.w < stateRef.current.clip.disc.w - 5) {
+            ctx.restore();
+          }
+        });
+      },
+      [strokeColor],
+    );
+
+    const drawLines = React.useCallback((ctx: CanvasRenderingContext2D) => {
+      if (stateRef.current.linesCanvas) {
+        ctx.drawImage(stateRef.current.linesCanvas, 0, 0);
+      }
+    }, []);
+
+    const drawParticles = React.useCallback((ctx: CanvasRenderingContext2D) => {
+      ctx.save();
+      ctx.clip(stateRef.current.clip.path);
+      stateRef.current.particles.forEach((particle: any) => {
+        ctx.fillStyle = particle.c;
+        ctx.beginPath();
+        ctx.rect(particle.x, particle.y, particle.r, particle.r);
+        ctx.closePath();
+        ctx.fill();
+      });
+      ctx.restore();
+    }, []);
+
+    const moveDiscs = React.useCallback(() => {
+      stateRef.current.discs.forEach((disc: any) => {
+        disc.p = (disc.p + 0.001) % 1;
+        tweenDisc(disc);
+      });
+    }, [tweenDisc]);
+
+    const moveParticles = React.useCallback(() => {
+      stateRef.current.particles.forEach((particle: any, idx: number) => {
+        particle.p = 1 - particle.y / stateRef.current.particleArea.h;
+        particle.x = particle.sx + particle.dx * particle.p;
+        particle.y -= particle.vy;
+        if (particle.y < 0) {
+          stateRef.current.particles[idx] = initParticle();
+        }
+      });
+    }, [initParticle]);
+
+    const tick = React.useCallback(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.save();
+      ctx.scale(stateRef.current.render.dpi, stateRef.current.render.dpi);
+      moveDiscs();
+      moveParticles();
+      drawDiscs(ctx);
+      drawLines(ctx);
+      drawParticles(ctx);
+      ctx.restore();
+      animationFrameIdRef.current = requestAnimationFrame(tick);
+    }, [moveDiscs, moveParticles, drawDiscs, drawLines, drawParticles]);
+
+    const init = React.useCallback(() => {
+      setSize();
+      setDiscs();
+      setLines();
+      setParticles();
+    }, [setSize, setDiscs, setLines, setParticles]);
+
+    React.useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      init();
+      tick();
+      const handleResize = () => {
+        setSize();
+        setDiscs();
+        setLines();
+        setParticles();
+      };
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        cancelAnimationFrame(animationFrameIdRef.current);
+      };
+    }, [init, tick, setSize, setDiscs, setLines, setParticles]);
+
+    return (
+      <div
+        className={cn(
+          "relative size-full overflow-hidden",
+          'before:absolute before:top-1/2 before:left-1/2 before:block before:size-[140%] before:[transform:translate3d(-50%,-50%,0)] before:content-[""] before:[background:radial-gradient(ellipse_at_50%_55%,transparent_10%,white_50%)] dark:before:[background:radial-gradient(ellipse_at_50%_55%,transparent_10%,black_50%)]',
+          'after:absolute after:top-1/2 after:left-1/2 after:z-[5] after:block after:size-full after:[transform:translate3d(-50%,-50%,0)] after:mix-blend-overlay after:content-[""] after:[background:radial-gradient(ellipse_at_50%_75%,#a900ff_20%,transparent_75%)]',
+          className,
+        )}>
+        {children}
+        <canvas
+          ref={canvasRef}
+          className='absolute inset-0 block size-full opacity-10 dark:opacity-20'
+          {...props}
+        />
+        <motion.div
+          className={cn(
+            "absolute top-[-71.5%] left-1/2 z-[3] h-[140%] w-[30%] [transform:translate3d(-50%,0,0)] rounded-b-full [background-size:100%_200%] [background-position:0%_100%] opacity-75 mix-blend-plus-darker blur-3xl dark:mix-blend-plus-lighter",
+            "[background:linear-gradient(20deg,#00f8f1,#ffbd1e40_16.5%,#fe848f_33%,#fe848f40_49.5%,#00f8f1_66%,#00f8f180_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%] dark:[background:linear-gradient(20deg,#00f8f1,#ffbd1e20_16.5%,#fe848f_33%,#fe848f20_49.5%,#00f8f1_66%,#00f8f160_85.5%,#ffbd1e_100%)_0_100%_/_100%_200%]",
+          )}
+          animate={{backgroundPosition: "0% 300%"}}
+          transition={{duration: 5, ease: "linear", repeat: Infinity}}
+        />
+        <div className='absolute top-0 left-0 z-[7] size-full opacity-50 mix-blend-overlay dark:[background:repeating-linear-gradient(transparent,transparent_1px,white_1px,white_2px)]' />
+      </div>
+    );
+  },
+);
+
+HoleBackground.displayName = "HoleBackground";
+export {HoleBackground, type HoleBackgroundProps};