@arolariu/components 0.4.2 → 1.0.0

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

@@ -4,47 +4,135 @@ import {motion} from "motion/react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./hole-background.module.css";
 
-interface HoleBackgroundProps extends React.HTMLAttributes<HTMLCanvasElement> {
+/** Props accepted by {@link HoleBackground}. */
+export interface HoleBackgroundProps extends React.HTMLAttributes<HTMLCanvasElement> {
+  /** Stroke color used for the wireframe discs and line work. @default "#737373" */
   strokeColor?: string;
+  /** Number of radial line groups drawn through the tunnel. @default 50 */
   numberOfLines?: number;
+  /** Number of animated discs used to build the tunnel depth effect. @default 50 */
   numberOfDiscs?: number;
+  /** RGB tuple used to tint the floating particle field. @default [255, 255, 255] */
   particleRGBColor?: [number, number, number];
 }
 
-const linear = (p: number) => p;
-const easeInExpo = (p: number) => (p === 0 ? 0 : 2 ** (10 * (p - 1)));
+interface Disc {
+  p: number;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface Particle {
+  x: number;
+  sx: number;
+  dx: number;
+  y: number;
+  vy: number;
+  p: number;
+  r: number;
+  c: string;
+}
+
+interface ClipState {
+  disc: Disc;
+  i: number;
+  path: Path2D | null;
+}
+
+interface RectState {
+  width: number;
+  height: number;
+}
+
+interface RenderState {
+  width: number;
+  height: number;
+  dpi: number;
+}
+
+interface ParticleArea {
+  sx: number;
+  sw: number;
+  ex: number;
+  ew: number;
+  h: number;
+}
+
+interface HoleState {
+  discs: Array<Disc>;
+  lines: Array<Array<Point>>;
+  particles: Array<Particle>;
+  clip: ClipState;
+  startDisc: Disc;
+  endDisc: Disc;
+  rect: RectState;
+  render: RenderState;
+  particleArea: ParticleArea;
+  linesCanvas: HTMLCanvasElement | null;
+}
+
+const linear = (progress: number): number => progress;
+const easeInExpo = (progress: number): number => (progress === 0 ? 0 : 2 ** (10 * (progress - 1)));
 
+const createEmptyDisc = (): Disc => ({p: 0, x: 0, y: 0, w: 0, h: 0});
+const createEmptyParticleArea = (): ParticleArea => ({sx: 0, sw: 0, ex: 0, ew: 0, h: 0});
+const createInitialState = (): HoleState => ({
+  discs: [],
+  lines: [],
+  particles: [],
+  clip: {disc: createEmptyDisc(), i: 0, path: null},
+  startDisc: createEmptyDisc(),
+  endDisc: createEmptyDisc(),
+  rect: {width: 0, height: 0},
+  render: {width: 0, height: 0, dpi: 1},
+  particleArea: createEmptyParticleArea(),
+  linesCanvas: null,
+});
+
+/**
+ * Renders a vortex-style tunnel animation with discs, scanlines, and particles.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element containing a `<canvas>`
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <HoleBackground />
+ * ```
+ *
+ * @see {@link HoleBackgroundProps} for available props
+ */
 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 animationFrameIdRef = React.useRef(0);
+    const stateRef = React.useRef<HoleState>(createInitialState());
+
+    React.useImperativeHandle(ref, () => canvasRef.current!, []);
+
+    const tweenValue = React.useCallback((start: number, end: number, progress: number, ease: "inExpo" | null = null): number => {
       const delta = end - start;
-      const easeFn = ease === "inExpo" ? easeInExpo : linear;
-      return start + delta * easeFn(p);
+      const easeFunction = ease === "inExpo" ? easeInExpo : linear;
+      return start + delta * easeFunction(progress);
     }, []);
 
     const tweenDisc = React.useCallback(
-      (disc: any) => {
+      (disc: Disc): void => {
         const {startDisc, endDisc} = stateRef.current;
         disc.x = tweenValue(startDisc.x, endDisc.x, disc.p);
         disc.y = tweenValue(startDisc.y, endDisc.y, disc.p, "inExpo");
@@ -54,21 +142,24 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
       [tweenValue],
     );
 
-    const setSize = React.useCallback(() => {
+    const setSize = React.useCallback((): void => {
       const canvas = canvasRef.current;
-      if (!canvas) return;
+      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,
+        dpi: globalThis.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 setDiscs = React.useCallback((): void => {
       const {width, height} = stateRef.current.rect;
       stateRef.current.discs = [];
       stateRef.current.startDisc = {
@@ -76,251 +167,288 @@ const HoleBackground = React.forwardRef<HTMLCanvasElement, HoleBackgroundProps>(
         y: height * 0.45,
         w: width * 0.75,
         h: height * 0.7,
+        p: 0,
       };
       stateRef.current.endDisc = {
         x: width * 0.5,
         y: height * 0.95,
         w: 0,
         h: 0,
+        p: 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};
+
+      let previousBottom = height;
+      stateRef.current.clip = {disc: createEmptyDisc(), i: 0, path: null};
+
+      for (let index = 0; index < numberOfDiscs; index += 1) {
+        const progress = index / numberOfDiscs;
+        const disc: Disc = {p: progress, 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};
+        if (bottom <= previousBottom) {
+          stateRef.current.clip = {disc: {...disc}, i: index, path: null};
         }
-        prevBottom = bottom;
+        previousBottom = bottom;
         stateRef.current.discs.push(disc);
       }
-      const clipPath = new Path2D();
+
+      const clipPath = new globalThis.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]);
+    }, [numberOfDiscs, tweenDisc]);
 
-    const setLines = React.useCallback(() => {
+    const setLines = React.useCallback((): void => {
       const {width, height} = stateRef.current.rect;
       stateRef.current.lines = [];
       const linesAngle = (Math.PI * 2) / numberOfLines;
-      for (let i = 0; i < numberOfLines; i++) {
+      for (let index = 0; index < numberOfLines; index += 1) {
         stateRef.current.lines.push([]);
       }
-      stateRef.current.discs.forEach((disc: any) => {
-        for (let i = 0; i < numberOfLines; i++) {
-          const angle = i * linesAngle;
-          const p = {
+
+      stateRef.current.discs.forEach((disc) => {
+        for (let index = 0; index < numberOfLines; index += 1) {
+          const angle = index * linesAngle;
+          const point: Point = {
             x: disc.x + Math.cos(angle) * disc.w,
             y: disc.y + Math.sin(angle) * disc.h,
           };
-          stateRef.current.lines[i].push(p);
+          stateRef.current.lines[index]!.push(point);
         }
       });
-      const offCanvas = document.createElement("canvas");
+
+      const offCanvas = globalThis.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();
+      const context = offCanvas.getContext("2d");
+      const clipPath = stateRef.current.clip.path;
+      if (!context || !clipPath) {
+        return;
+      }
+
+      stateRef.current.lines.forEach((line) => {
+        context.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))
-          ) {
+        line.forEach((point, lineIndex) => {
+          if (lineIndex === 0) {
+            return;
+          }
+
+          const previousPoint = line[lineIndex - 1]!;
+          if (!lineIsIn && (context.isPointInPath(clipPath, point.x, point.y) || context.isPointInStroke(clipPath, point.x, point.y))) {
             lineIsIn = true;
           } else if (lineIsIn) {
-            ctx.clip(stateRef.current.clip.path);
+            context.clip(clipPath);
           }
-          ctx.beginPath();
-          ctx.moveTo(p0.x, p0.y);
-          ctx.lineTo(p1.x, p1.y);
-          ctx.strokeStyle = strokeColor;
-          ctx.lineWidth = 2;
-          ctx.stroke();
-          ctx.closePath();
+
+          context.beginPath();
+          context.moveTo(previousPoint.x, previousPoint.y);
+          context.lineTo(point.x, point.y);
+          context.strokeStyle = strokeColor;
+          context.lineWidth = 2;
+          context.stroke();
+          context.closePath();
         });
-        ctx.restore();
+        context.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()})`,
-      };
-    }, []);
+    }, [numberOfLines, strokeColor]);
+
+    const initParticle = React.useCallback(
+      (start = false): Particle => {
+        const {particleArea} = stateRef.current;
+        const sx = particleArea.sx + particleArea.sw * Math.random();
+        const ex = particleArea.ex + particleArea.ew * Math.random();
+        const dx = ex - sx;
+        const y = start ? particleArea.h * Math.random() : particleArea.h;
+        const radius = 0.5 + Math.random() * 4;
+        const vy = 0.5 + Math.random();
 
-    const setParticles = React.useCallback(() => {
+        return {
+          x: sx,
+          sx,
+          dx,
+          y,
+          vy,
+          p: 0,
+          r: radius,
+          c: `rgba(${particleRGBColor[0]}, ${particleRGBColor[1]}, ${particleRGBColor[2]}, ${Math.random()})`,
+        };
+      },
+      [particleRGBColor],
+    );
+
+    const setParticles = React.useCallback((): void => {
       const {width, height} = stateRef.current.rect;
       stateRef.current.particles = [];
       const {disc} = stateRef.current.clip;
       stateRef.current.particleArea = {
+        sx: (width - disc.w * 0.5) / 2,
         sw: disc.w * 0.5,
+        ex: (width - disc.w * 2) / 2,
         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++) {
+
+      for (let index = 0; index < 100; index += 1) {
         stateRef.current.particles.push(initParticle(true));
       }
     }, [initParticle]);
 
     const drawDiscs = React.useCallback(
-      (ctx: CanvasRenderingContext2D) => {
-        ctx.strokeStyle = strokeColor;
-        ctx.lineWidth = 2;
+      (context: CanvasRenderingContext2D): void => {
+        context.strokeStyle = strokeColor;
+        context.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);
+        context.beginPath();
+        context.ellipse(outerDisc.x, outerDisc.y, outerDisc.w, outerDisc.h, 0, 0, Math.PI * 2);
+        context.stroke();
+        context.closePath();
+
+        const clipPath = stateRef.current.clip.path;
+        stateRef.current.discs.forEach((disc, index) => {
+          if (index % 5 !== 0) {
+            return;
+          }
+
+          if (clipPath && disc.w < stateRef.current.clip.disc.w - 5) {
+            context.save();
+            context.clip(clipPath);
           }
-          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();
+
+          context.beginPath();
+          context.ellipse(disc.x, disc.y, disc.w, disc.h, 0, 0, Math.PI * 2);
+          context.stroke();
+          context.closePath();
+
+          if (clipPath && disc.w < stateRef.current.clip.disc.w - 5) {
+            context.restore();
           }
         });
       },
       [strokeColor],
     );
 
-    const drawLines = React.useCallback((ctx: CanvasRenderingContext2D) => {
+    const drawLines = React.useCallback((context: CanvasRenderingContext2D): void => {
       if (stateRef.current.linesCanvas) {
-        ctx.drawImage(stateRef.current.linesCanvas, 0, 0);
+        context.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();
+    const drawParticles = React.useCallback((context: CanvasRenderingContext2D): void => {
+      const clipPath = stateRef.current.clip.path;
+      if (!clipPath) {
+        return;
+      }
+
+      context.save();
+      context.clip(clipPath);
+      stateRef.current.particles.forEach((particle) => {
+        context.fillStyle = particle.c;
+        context.beginPath();
+        context.rect(particle.x, particle.y, particle.r, particle.r);
+        context.closePath();
+        context.fill();
       });
-      ctx.restore();
+      context.restore();
     }, []);
 
-    const moveDiscs = React.useCallback(() => {
-      stateRef.current.discs.forEach((disc: any) => {
+    const moveDiscs = React.useCallback((): void => {
+      stateRef.current.discs.forEach((disc) => {
         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;
+    const moveParticles = React.useCallback((): void => {
+      stateRef.current.particles.forEach((particle, index) => {
+        particle.p = 1 - particle.y / Math.max(stateRef.current.particleArea.h, 1);
         particle.x = particle.sx + particle.dx * particle.p;
         particle.y -= particle.vy;
         if (particle.y < 0) {
-          stateRef.current.particles[idx] = initParticle();
+          stateRef.current.particles[index] = initParticle();
         }
       });
     }, [initParticle]);
 
-    const tick = React.useCallback(() => {
+    const tick = React.useCallback((): void => {
       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);
+      if (!canvas) {
+        return;
+      }
+
+      const context = canvas.getContext("2d");
+      if (!context) {
+        return;
+      }
+
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.save();
+      context.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(() => {
+      drawDiscs(context);
+      drawLines(context);
+      drawParticles(context);
+      context.restore();
+      animationFrameIdRef.current = globalThis.requestAnimationFrame(tick);
+    }, [drawDiscs, drawLines, drawParticles, moveDiscs, moveParticles]);
+
+    const init = React.useCallback((): void => {
       setSize();
       setDiscs();
       setLines();
       setParticles();
-    }, [setSize, setDiscs, setLines, setParticles]);
+    }, [setDiscs, setLines, setParticles, setSize]);
 
     React.useEffect(() => {
       const canvas = canvasRef.current;
-      if (!canvas) return;
+      if (!canvas) {
+        return;
+      }
+
       init();
       tick();
-      const handleResize = () => {
+
+      const handleResize = (): void => {
         setSize();
         setDiscs();
         setLines();
         setParticles();
       };
-      window.addEventListener("resize", handleResize);
+
+      globalThis.window.addEventListener("resize", handleResize);
       return () => {
-        window.removeEventListener("resize", handleResize);
-        cancelAnimationFrame(animationFrameIdRef.current);
+        globalThis.window.removeEventListener("resize", handleResize);
+        globalThis.cancelAnimationFrame(animationFrameIdRef.current);
       };
-    }, [init, tick, setSize, setDiscs, setLines, setParticles]);
+    }, [init, setDiscs, setLines, setParticles, setSize, tick]);
 
     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,
-        )}>
+      <div className={cn(styles.root, className)}>
         {children}
         <canvas
           ref={canvasRef}
-          className='absolute inset-0 block size-full opacity-10 dark:opacity-20'
+          className={styles.canvas}
           {...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%]",
-          )}
+          aria-hidden='true'
+          className={styles.glow}
           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
+          aria-hidden='true'
+          className={styles.scanlines}
+        />
       </div>
     );
   },
 );
 
 HoleBackground.displayName = "HoleBackground";
-export {HoleBackground, type HoleBackgroundProps};
+
+export {HoleBackground};

package/src/components/ui/hover-card.module.css

@@ -0,0 +1,21 @@
+.positioner {
+  z-index: 50;
+}
+
+.popup {
+  width: 16rem;
+  padding: var(--ac-space-4);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-popover);
+  color: var(--ac-popover-foreground);
+  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.3);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+  outline: none;
+}
+
+.popup[data-starting-style],
+.popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}