@arolariu/components 0.5.0 → 1.0.0

package/dist/components/ui/highlight-text.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/highlight-text.module.js","sources":["../../../src/components/ui/highlight-text.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./highlight-text_module.css\"\nexport default {\"highlight\":\"highlight-roGyzF\"};"],"names":[],"mappings":";AAEA,8BAAe;IAAC,WAAY;AAAkB"}

package/dist/components/ui/highlight-text_module.css

@@ -0,0 +1,16 @@
+.highlight-roGyzF {
+  border-radius: var(--ac-radius-lg);
+  background-image: linear-gradient(90deg, #dbeafe, #f3e8ff);
+  background-position: 0;
+  background-repeat: no-repeat;
+  padding: .25rem .5rem;
+  display: inline;
+  position: relative;
+}
+
+:is(.dark .highlight-roGyzF, [data-theme=dark] .highlight-roGyzF) {
+  background-image: linear-gradient(90deg,color-mix(in oklch,var(--ac-primary),#fff 35%) 0,oklch(68.2819% .197661 303.901) 100%);
+}
+
+
+/*# sourceMappingURL=highlight-text_module.css.map */

package/dist/components/ui/highlight-text_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/highlight-text.module.css","webpack://./src/components/ui/highlight-text.module.css"],"names":[],"mappings":"AADA;ECEE,kCAAkC;EAClC,0DAA0D;EAC1D,sBAAsB;EACtB,4BAA4B;EAC5B,qBAAqB;EACrB,eAAe;EACf,kBAAkB;AACpB;;AAEA;EACE,8HAA8H;AAChI","sourcesContent":[".highlight{background-image:linear-gradient(90deg,#dbeafe,#f3e8ff);background-position:0;background-repeat:no-repeat;border-radius:var(--ac-radius-lg);display:inline;padding:.25rem .5rem;position:relative}:global(.dark) .highlight,:global([data-theme=dark]) .highlight{background-image:linear-gradient(90deg,color-mix(in oklch,var(--ac-primary),#fff 35%) 0,color-mix(in oklch,#a855f7,#fff 15%) 100%)}",".highlight {\n  border-radius: var(--ac-radius-lg);\n  background-image: linear-gradient(90deg, #dbeafe, #f3e8ff);\n  background-position: 0;\n  background-repeat: no-repeat;\n  padding: .25rem .5rem;\n  display: inline;\n  position: relative;\n}\n\n:is(:global(.dark) .highlight, :global([data-theme=dark]) .highlight) {\n  background-image: linear-gradient(90deg,color-mix(in oklch,var(--ac-primary),#fff 35%) 0,oklch(68.2819% .197661 303.901) 100%);\n}\n"],"sourceRoot":""}

package/dist/components/ui/hole-background.d.ts

@@ -1,10 +1,31 @@
 import * as React from "react";
-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];
 }
+/**
+ * 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
+ */
 declare const HoleBackground: React.ForwardRefExoticComponent<HoleBackgroundProps & React.RefAttributes<HTMLCanvasElement>>;
-export { HoleBackground, type HoleBackgroundProps };
+export { HoleBackground };
 //# sourceMappingURL=hole-background.d.ts.map

package/dist/components/ui/hole-background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hole-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hole-background.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC7C;AAKD,QAAA,MAAM,cAAc,+FAiTnB,CAAC;AAGF,OAAO,EAAC,cAAc,EAAE,KAAK,mBAAmB,EAAC,CAAC"}
+{"version":3,"file":"hole-background.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hole-background.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,gDAAgD;AAChD,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAClF,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC7C;AAkFD;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,cAAc,+FA6UnB,CAAC;AAIF,OAAO,EAAC,cAAc,EAAC,CAAC"}

package/dist/components/ui/hole-background.js

@@ -3,23 +3,34 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import { cn } from "../../lib/utilities.js";
-const linear = (p)=>p;
-const easeInExpo = (p)=>0 === p ? 0 : 2 ** (10 * (p - 1));
-const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numberOfLines = 50, numberOfDiscs = 50, particleRGBColor = [
-    255,
-    255,
-    255
-], className, children, ...props }, ref)=>{
-    const canvasRef = useRef(null);
-    useImperativeHandle(ref, ()=>canvasRef.current);
-    const animationFrameIdRef = useRef(0);
-    const stateRef = useRef({
+import hole_background_module from "./hole-background.module.js";
+const linear = (progress)=>progress;
+const easeInExpo = (progress)=>0 === progress ? 0 : 2 ** (10 * (progress - 1));
+const createEmptyDisc = ()=>({
+        p: 0,
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0
+    });
+const createEmptyParticleArea = ()=>({
+        sx: 0,
+        sw: 0,
+        ex: 0,
+        ew: 0,
+        h: 0
+    });
+const createInitialState = ()=>({
         discs: [],
         lines: [],
         particles: [],
-        clip: {},
-        startDisc: {},
-        endDisc: {},
+        clip: {
+            disc: createEmptyDisc(),
+            i: 0,
+            path: null
+        },
+        startDisc: createEmptyDisc(),
+        endDisc: createEmptyDisc(),
         rect: {
             width: 0,
             height: 0
@@ -29,13 +40,22 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
             height: 0,
             dpi: 1
         },
-        particleArea: {},
+        particleArea: createEmptyParticleArea(),
         linesCanvas: null
     });
-    const tweenValue = useCallback((start, end, p, ease = null)=>{
+const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numberOfLines = 50, numberOfDiscs = 50, particleRGBColor = [
+    255,
+    255,
+    255
+], className, children, ...props }, ref)=>{
+    const canvasRef = useRef(null);
+    const animationFrameIdRef = useRef(0);
+    const stateRef = useRef(createInitialState());
+    useImperativeHandle(ref, ()=>canvasRef.current, []);
+    const tweenValue = useCallback((start, end, progress, ease = null)=>{
         const delta = end - start;
-        const easeFn = "inExpo" === ease ? easeInExpo : linear;
-        return start + delta * easeFn(p);
+        const easeFunction = "inExpo" === ease ? easeInExpo : linear;
+        return start + delta * easeFunction(progress);
     }, []);
     const tweenDisc = useCallback((disc)=>{
         const { startDisc, endDisc } = stateRef.current;
@@ -57,7 +77,7 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
         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;
@@ -69,20 +89,26 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
             x: 0.5 * width,
             y: 0.45 * height,
             w: 0.75 * width,
-            h: 0.7 * height
+            h: 0.7 * height,
+            p: 0
         };
         stateRef.current.endDisc = {
             x: 0.5 * width,
             y: 0.95 * height,
             w: 0,
-            h: 0
+            h: 0,
+            p: 0
         };
-        let prevBottom = height;
-        stateRef.current.clip = {};
-        for(let i = 0; i < numberOfDiscs; i++){
-            const p = i / numberOfDiscs;
+        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 = {
-                p,
+                p: progress,
                 x: 0,
                 y: 0,
                 w: 0,
@@ -90,71 +116,76 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
             };
             tweenDisc(disc);
             const bottom = disc.y + disc.h;
-            if (bottom <= prevBottom) stateRef.current.clip = {
+            if (bottom <= previousBottom) stateRef.current.clip = {
                 disc: {
                     ...disc
                 },
-                i
+                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, 2 * Math.PI);
         clipPath.rect(disc.x - disc.w, 0, 2 * disc.w, disc.y);
         stateRef.current.clip.path = clipPath;
     }, [
+        numberOfDiscs,
         tweenDisc
     ]);
     const setLines = useCallback(()=>{
         const { width, height } = stateRef.current.rect;
         stateRef.current.lines = [];
         const linesAngle = 2 * Math.PI / numberOfLines;
-        for(let i = 0; i < numberOfLines; i++)stateRef.current.lines.push([]);
+        for(let index = 0; index < numberOfLines; index += 1)stateRef.current.lines.push([]);
         stateRef.current.discs.forEach((disc)=>{
-            for(let i = 0; i < numberOfLines; i++){
-                const angle = i * linesAngle;
-                const p = {
+            for(let index = 0; index < numberOfLines; index += 1){
+                const angle = index * linesAngle;
+                const 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;
+        const context = offCanvas.getContext("2d");
+        const clipPath = stateRef.current.clip.path;
+        if (!context || !clipPath) return;
         stateRef.current.lines.forEach((line)=>{
-            ctx.save();
+            context.save();
             let lineIsIn = false;
-            line.forEach((p1, j)=>{
-                if (0 === j) 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();
+            line.forEach((point, lineIndex)=>{
+                if (0 === lineIndex) 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) context.clip(clipPath);
+                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;
     }, [
+        numberOfLines,
         strokeColor
     ]);
     const initParticle = useCallback((start = 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 { 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 ? stateRef.current.particleArea.h * Math.random() : stateRef.current.particleArea.h;
-        const r = 0.5 + 4 * Math.random();
+        const y = start ? particleArea.h * Math.random() : particleArea.h;
+        const radius = 0.5 + 4 * Math.random();
         const vy = 0.5 + Math.random();
         return {
             x: sx,
@@ -163,63 +194,67 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
             y,
             vy,
             p: 0,
-            r,
+            r: radius,
             c: `rgba(${particleRGBColor[0]}, ${particleRGBColor[1]}, ${particleRGBColor[2]}, ${Math.random()})`
         };
-    }, []);
+    }, [
+        particleRGBColor
+    ]);
     const setParticles = useCallback(()=>{
         const { width, height } = stateRef.current.rect;
         stateRef.current.particles = [];
         const { disc } = stateRef.current.clip;
         stateRef.current.particleArea = {
+            sx: (width - 0.5 * disc.w) / 2,
             sw: 0.5 * disc.w,
+            ex: (width - 2 * disc.w) / 2,
             ew: 2 * disc.w,
             h: 0.85 * height
         };
-        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));
+        for(let index = 0; index < 100; index += 1)stateRef.current.particles.push(initParticle(true));
     }, [
         initParticle
     ]);
-    const drawDiscs = useCallback((ctx)=>{
-        ctx.strokeStyle = strokeColor;
-        ctx.lineWidth = 2;
+    const drawDiscs = useCallback((context)=>{
+        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, 2 * Math.PI);
-        ctx.stroke();
-        ctx.closePath();
-        stateRef.current.discs.forEach((disc, i)=>{
-            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, 2 * Math.PI);
+        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, 2 * Math.PI);
-            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, 2 * Math.PI);
+            context.stroke();
+            context.closePath();
+            if (clipPath && disc.w < stateRef.current.clip.disc.w - 5) context.restore();
         });
     }, [
         strokeColor
     ]);
-    const drawLines = useCallback((ctx)=>{
-        if (stateRef.current.linesCanvas) ctx.drawImage(stateRef.current.linesCanvas, 0, 0);
+    const drawLines = useCallback((context)=>{
+        if (stateRef.current.linesCanvas) context.drawImage(stateRef.current.linesCanvas, 0, 0);
     }, []);
-    const drawParticles = useCallback((ctx)=>{
-        ctx.save();
-        ctx.clip(stateRef.current.clip.path);
+    const drawParticles = useCallback((context)=>{
+        const clipPath = stateRef.current.clip.path;
+        if (!clipPath) return;
+        context.save();
+        context.clip(clipPath);
         stateRef.current.particles.forEach((particle)=>{
-            ctx.fillStyle = particle.c;
-            ctx.beginPath();
-            ctx.rect(particle.x, particle.y, particle.r, particle.r);
-            ctx.closePath();
-            ctx.fill();
+            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 = useCallback(()=>{
         stateRef.current.discs.forEach((disc)=>{
@@ -230,11 +265,11 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
         tweenDisc
     ]);
     const moveParticles = useCallback(()=>{
-        stateRef.current.particles.forEach((particle, idx)=>{
-            particle.p = 1 - particle.y / stateRef.current.particleArea.h;
+        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();
+            if (particle.y < 0) stateRef.current.particles[index] = initParticle();
         });
     }, [
         initParticle
@@ -242,24 +277,24 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
     const tick = 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);
+        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);
+        drawDiscs(context);
+        drawLines(context);
+        drawParticles(context);
+        context.restore();
+        animationFrameIdRef.current = globalThis.requestAnimationFrame(tick);
     }, [
-        moveDiscs,
-        moveParticles,
         drawDiscs,
         drawLines,
-        drawParticles
+        drawParticles,
+        moveDiscs,
+        moveParticles
     ]);
     const init = useCallback(()=>{
         setSize();
@@ -267,10 +302,10 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
         setLines();
         setParticles();
     }, [
-        setSize,
         setDiscs,
         setLines,
-        setParticles
+        setParticles,
+        setSize
     ]);
     useEffect(()=>{
         const canvas = canvasRef.current;
@@ -283,30 +318,31 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
             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
+        setParticles,
+        setSize,
+        tick
     ]);
     return /*#__PURE__*/ jsxs("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),
+        className: cn(hole_background_module.root, className),
         children: [
             children,
             /*#__PURE__*/ jsx("canvas", {
                 ref: canvasRef,
-                className: "absolute inset-0 block size-full opacity-10 dark:opacity-20",
+                className: hole_background_module.canvas,
                 ...props
             }),
             /*#__PURE__*/ jsx(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: hole_background_module.glow,
                 animate: {
                     backgroundPosition: "0% 300%"
                 },
@@ -317,7 +353,8 @@ const HoleBackground = /*#__PURE__*/ forwardRef(({ strokeColor = "#737373", numb
                 }
             }),
             /*#__PURE__*/ jsx("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)]"
+                "aria-hidden": "true",
+                className: hole_background_module.scanlines
             })
         ]
     });

package/dist/components/ui/hole-background.js.map

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

package/dist/components/ui/hole-background.module.js

@@ -0,0 +1,10 @@
+import "./hole-background_module.css";
+const hole_background_module = {
+    root: "root-OfHeSV",
+    canvas: "canvas-tTs4tg",
+    glow: "glow-nZsD4t",
+    scanlines: "scanlines-JVTosf"
+};
+export default hole_background_module;
+
+//# sourceMappingURL=hole-background.module.js.map