@moontra/moonui-pro 3.3.29 → 3.4.1

package/dist/index.mjs

@@ -86692,7 +86692,7 @@ var Meteors = (props) => {
 Meteors.displayName = "Meteors";
 
 // src/components/backgrounds/aurora-background.css
-styleInject("@keyframes aurora-wave-1 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);\n  }\n  33% {\n    transform: translateX(-45%) translateY(-55%) rotate(60deg) scale(1.1);\n  }\n  66% {\n    transform: translateX(-55%) translateY(-45%) rotate(-60deg) scale(0.9);\n  }\n}\n@keyframes aurora-wave-2 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1.2);\n  }\n  33% {\n    transform: translateX(-55%) translateY(-45%) rotate(105deg) scale(1);\n  }\n  66% {\n    transform: translateX(-45%) translateY(-55%) rotate(-15deg) scale(1.3);\n  }\n}\n@keyframes aurora-wave-3 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(0.8);\n  }\n  33% {\n    transform: translateX(-40%) translateY(-50%) rotate(15deg) scale(1.2);\n  }\n  66% {\n    transform: translateX(-60%) translateY(-50%) rotate(-105deg) scale(1);\n  }\n}\n@keyframes aurora-shimmer {\n  0%, 100% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 0.8;\n  }\n}\n.aurora-layer {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 200%;\n  height: 200%;\n  filter: blur(80px);\n  mix-blend-mode: screen;\n  pointer-events: none;\n}\n.aurora-layer-1 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-1) 0%, transparent 60%);\n  animation: aurora-wave-1 15s ease-in-out infinite;\n}\n.aurora-layer-2 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-2) 0%, transparent 50%);\n  animation: aurora-wave-2 20s ease-in-out infinite;\n}\n.aurora-layer-3 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-3) 0%, transparent 70%);\n  animation: aurora-wave-3 25s ease-in-out infinite;\n}\n.aurora-layer-shimmer {\n  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 60%);\n  animation: aurora-shimmer 3s ease-in-out infinite;\n}\n.aurora-interactive .aurora-layer {\n  transition: transform 0.3s ease-out;\n}\n.aurora-paused .aurora-layer {\n  animation-play-state: paused !important;\n}\n");
+styleInject("@keyframes aurora-wave-1 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);\n  }\n  33% {\n    transform: translateX(-45%) translateY(-55%) rotate(60deg) scale(1.1);\n  }\n  66% {\n    transform: translateX(-55%) translateY(-45%) rotate(-60deg) scale(0.9);\n  }\n}\n@keyframes aurora-wave-2 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1.2);\n  }\n  33% {\n    transform: translateX(-55%) translateY(-45%) rotate(105deg) scale(1);\n  }\n  66% {\n    transform: translateX(-45%) translateY(-55%) rotate(-15deg) scale(1.3);\n  }\n}\n@keyframes aurora-wave-3 {\n  0%, 100% {\n    transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(0.8);\n  }\n  33% {\n    transform: translateX(-40%) translateY(-50%) rotate(15deg) scale(1.2);\n  }\n  66% {\n    transform: translateX(-60%) translateY(-50%) rotate(-105deg) scale(1);\n  }\n}\n@keyframes aurora-shimmer {\n  0%, 100% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 0.8;\n  }\n}\n.aurora-layer {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 200%;\n  height: 200%;\n  filter: blur(80px);\n  mix-blend-mode: screen;\n  pointer-events: none;\n  will-change: transform, opacity;\n  transform: translate3d(0, 0, 0);\n  backface-visibility: hidden;\n}\n.aurora-layer-1 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-1) 0%, transparent 60%);\n  animation: aurora-wave-1 15s ease-in-out infinite;\n}\n.aurora-layer-2 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-2) 0%, transparent 50%);\n  animation: aurora-wave-2 20s ease-in-out infinite;\n}\n.aurora-layer-3 {\n  background: radial-gradient(ellipse at center, var(--aurora-color-3) 0%, transparent 70%);\n  animation: aurora-wave-3 25s ease-in-out infinite;\n}\n.aurora-layer-shimmer {\n  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 60%);\n  animation: aurora-shimmer 3s ease-in-out infinite;\n}\n.aurora-interactive .aurora-layer {\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n}\n.aurora-paused .aurora-layer {\n  opacity: 0;\n  transition: opacity 0.3s ease-out;\n}\n");
 var AuroraBackgroundInternal = ({
   children,
   className,
@@ -86710,12 +86710,13 @@ var AuroraBackgroundInternal = ({
   blendMode = "screen",
   variant = "default",
   fixed = false,
-  pauseWhenHidden = true
+  pauseWhenHidden = false
 }) => {
   const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
   const [isVisible, setIsVisible] = useState(true);
-  const containerRef = React71__default.useRef(null);
-  const getAnimationDuration = () => {
+  const containerRef = useRef(null);
+  const observerTimeoutRef = useRef(null);
+  const duration = useMemo(() => {
     switch (speed) {
       case "slow":
         return { layer1: "30s", layer2: "40s", layer3: "50s" };
@@ -86724,8 +86725,8 @@ var AuroraBackgroundInternal = ({
       default:
         return { layer1: "15s", layer2: "20s", layer3: "25s" };
     }
-  };
-  const getVariantColors = () => {
+  }, [speed]);
+  const variantColors = useMemo(() => {
     switch (variant) {
       case "subtle":
         return {
@@ -86748,17 +86749,15 @@ var AuroraBackgroundInternal = ({
       default:
         return colors;
     }
-  };
-  const handleMouseMove2 = (e) => {
+  }, [variant, colors]);
+  const handleMouseMove2 = useCallback((e) => {
     if (!interactive)
       return;
     const rect = e.currentTarget.getBoundingClientRect();
     const x2 = (e.clientX - rect.left) / rect.width * 100;
     const y = (e.clientY - rect.top) / rect.height * 100;
     setMousePosition({ x: x2, y });
-  };
-  const duration = getAnimationDuration();
-  const variantColors = getVariantColors();
+  }, [interactive]);
   useEffect(() => {
     if (!pauseWhenHidden)
       return;
@@ -86768,19 +86767,60 @@ var AuroraBackgroundInternal = ({
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
-          setIsVisible(entry.isIntersecting);
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
         });
       },
       {
-        threshold: 0.1,
-        rootMargin: "50px"
+        threshold: 0.5
+        // Component must be 50% visible (was 0.1)
+        // Removed rootMargin to prevent premature triggering
       }
     );
     observer.observe(container);
     return () => {
       observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
     };
   }, [pauseWhenHidden]);
+  const containerStyle = useMemo(() => ({
+    "--aurora-color-1": variantColors.primary,
+    "--aurora-color-2": variantColors.secondary,
+    "--aurora-color-3": variantColors.tertiary,
+    "--aurora-opacity": opacity.toString(),
+    "--aurora-blur": `${blur2}px`
+  }), [variantColors, opacity, blur2]);
+  const backgroundStyle = useMemo(() => ({
+    background: variant === "dark" ? "linear-gradient(to bottom, #0f172a, #020617)" : "linear-gradient(to bottom, #ffffff, #f8fafc)"
+  }), [variant]);
+  const layer1Style = useMemo(() => ({
+    animationDuration: duration.layer1,
+    filter: `blur(${blur2}px)`,
+    mixBlendMode: blendMode,
+    transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.1}%) translateY(${-50 + (mousePosition.y - 50) * 0.1}%) rotate(0deg) scale(1)` : void 0
+  }), [duration.layer1, blur2, blendMode, interactive, mousePosition]);
+  const layer2Style = useMemo(() => ({
+    animationDuration: duration.layer2,
+    filter: `blur(${blur2 * 1.2}px)`,
+    mixBlendMode: blendMode,
+    transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.2}%) translateY(${-50 + (mousePosition.y - 50) * 0.2}%) rotate(45deg) scale(1.2)` : void 0
+  }), [duration.layer2, blur2, blendMode, interactive, mousePosition]);
+  const layer3Style = useMemo(() => ({
+    animationDuration: duration.layer3,
+    filter: `blur(${blur2 * 0.8}px)`,
+    mixBlendMode: blendMode,
+    transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.15}%) translateY(${-50 + (mousePosition.y - 50) * 0.15}%) rotate(-45deg) scale(0.8)` : void 0
+  }), [duration.layer3, blur2, blendMode, interactive, mousePosition]);
+  const shimmerStyle = useMemo(() => ({
+    filter: `blur(${blur2 * 0.5}px)`,
+    mixBlendMode: "overlay"
+  }), [blur2]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -86793,70 +86833,14 @@ var AuroraBackgroundInternal = ({
         containerClassName
       ),
       onMouseMove: handleMouseMove2,
-      style: {
-        "--aurora-color-1": variantColors.primary,
-        "--aurora-color-2": variantColors.secondary,
-        "--aurora-color-3": variantColors.tertiary,
-        "--aurora-opacity": opacity.toString(),
-        "--aurora-blur": `${blur2}px`
-      },
+      style: containerStyle,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0",
-            style: {
-              background: variant === "dark" ? "linear-gradient(to bottom, #0f172a, #020617)" : "linear-gradient(to bottom, #ffffff, #f8fafc)"
-            }
-          }
-        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: backgroundStyle }),
         /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", style: { opacity }, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-1",
-              style: {
-                animationDuration: duration.layer1,
-                filter: `blur(${blur2}px)`,
-                mixBlendMode: blendMode,
-                transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.1}%) translateY(${-50 + (mousePosition.y - 50) * 0.1}%) rotate(0deg) scale(1)` : void 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-2",
-              style: {
-                animationDuration: duration.layer2,
-                filter: `blur(${blur2 * 1.2}px)`,
-                mixBlendMode: blendMode,
-                transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.2}%) translateY(${-50 + (mousePosition.y - 50) * 0.2}%) rotate(45deg) scale(1.2)` : void 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-3",
-              style: {
-                animationDuration: duration.layer3,
-                filter: `blur(${blur2 * 0.8}px)`,
-                mixBlendMode: blendMode,
-                transform: interactive ? `translateX(${-50 + (mousePosition.x - 50) * 0.15}%) translateY(${-50 + (mousePosition.y - 50) * 0.15}%) rotate(-45deg) scale(0.8)` : void 0
-              }
-            }
-          ),
-          shimmer && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "aurora-layer aurora-layer-shimmer",
-              style: {
-                filter: `blur(${blur2 * 0.5}px)`,
-                mixBlendMode: "overlay"
-              }
-            }
-          )
+          /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-1", style: layer1Style }),
+          /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-2", style: layer2Style }),
+          /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-3", style: layer3Style }),
+          shimmer && /* @__PURE__ */ jsx("div", { className: "aurora-layer aurora-layer-shimmer", style: shimmerStyle })
         ] }),
         children && /* @__PURE__ */ jsx("div", { className: cn("relative z-10", className), children })
       ]
@@ -86904,15 +86888,19 @@ var ParticlesInternal = ({
   movement = "random",
   gravity = 0.1,
   bounce = true,
-  opacity = { min: 0.3, max: 1 }
+  opacity = { min: 0.3, max: 1 },
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const particlesRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
-  const drawParticle = (ctx, particle) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
+  const drawParticle = useCallback((ctx, particle) => {
     ctx.save();
     ctx.translate(particle.x, particle.y);
     if (particle.angle && shape !== "circle") {
@@ -86967,8 +86955,8 @@ var ParticlesInternal = ({
         break;
     }
     ctx.restore();
-  };
-  const updateParticle = (particle, canvas) => {
+  }, [shape, glow, performanceMode, glowIntensity]);
+  const updateParticle = useCallback((particle, canvas) => {
     switch (movement) {
       case "linear":
         particle.x += particle.vx;
@@ -87031,8 +87019,8 @@ var ParticlesInternal = ({
         particle.life = 0;
       }
     }
-  };
-  const drawConnections = (ctx) => {
+  }, [movement, speed, gravity, shape, interactive, mouseRadius, bounce]);
+  const drawConnections = useCallback((ctx) => {
     const particles = particlesRef.current;
     for (let i = 0; i < particles.length; i++) {
       for (let j = i + 1; j < particles.length; j++) {
@@ -87050,7 +87038,7 @@ var ParticlesInternal = ({
         }
       }
     }
-  };
+  }, [connectDistance, lineOpacity, lineWidth]);
   const animate4 = useCallback((currentTime) => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d", {
@@ -87066,20 +87054,22 @@ var ParticlesInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (blur2 > 0) {
-      ctx.filter = `blur(${blur2}px)`;
-    }
-    if (showConnections && !performanceMode) {
-      drawConnections(ctx);
+    if (!pauseWhenHidden || isVisible) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (blur2 > 0) {
+        ctx.filter = `blur(${blur2}px)`;
+      }
+      if (showConnections && !performanceMode) {
+        drawConnections(ctx);
+      }
+      const particles = particlesRef.current;
+      particles.forEach((particle) => {
+        updateParticle(particle, canvas);
+        drawParticle(ctx, particle);
+      });
     }
-    const particles = particlesRef.current;
-    particles.forEach((particle) => {
-      updateParticle(particle, canvas);
-      drawParticle(ctx, particle);
-    });
     animationRef.current = requestAnimationFrame(animate4);
-  }, [showConnections, connectDistance, lineWidth, lineOpacity, performanceMode, blur2, frameInterval]);
+  }, [showConnections, performanceMode, blur2, frameInterval, drawConnections, updateParticle, drawParticle, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -87116,6 +87106,37 @@ var ParticlesInternal = ({
       y: e.clientY - rect.top
     };
   }, []);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      {
+        threshold: 0.5
+        // Component must be 50% visible
+        // No rootMargin to prevent premature triggering
+      }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) {
@@ -87154,9 +87175,17 @@ var ParticlesInternal = ({
       }
     };
   }, [handleResize, handleMouseMove2, animate4, interactive, count3, size4, colors, speed, opacity]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -87173,9 +87202,7 @@ var ParticlesInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              opacity: 1
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -87238,7 +87265,8 @@ var StarfieldInternal = ({
   const needsSortRef = useRef(true);
   const sortTimeRef = useRef(0);
   const resizeTimeoutRef = useRef(void 0);
-  const isVisibleRef = useRef(true);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const containerRef = useRef(null);
   const starColors = Array.isArray(starColor) ? starColor : [starColor];
   const initializeShootingStars = useCallback(() => {
@@ -87422,7 +87450,7 @@ var StarfieldInternal = ({
     });
   };
   const animate4 = useCallback((currentTime) => {
-    if (!isVisibleRef.current) {
+    if (!isVisible) {
       animationRef.current = requestAnimationFrame(animate4);
       return;
     }
@@ -87539,17 +87567,26 @@ var StarfieldInternal = ({
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
-          isVisibleRef.current = entry.isIntersecting;
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
         });
       },
       {
-        threshold: 0.1,
-        rootMargin: "50px"
+        threshold: 0.5
+        // Component must be 50% visible (was 0.1)
+        // Removed rootMargin to prevent premature triggering
       }
     );
     observer.observe(container);
     return () => {
       observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
     };
   }, []);
   useEffect(() => {
@@ -87594,6 +87631,11 @@ var StarfieldInternal = ({
       }
     };
   }, [handleResize, handleMouseMove2, animate4, mouseParallax, initializeShootingStars, starCount, starSize, starColors, twinkleSpeed]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden"
+  }), []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -87611,7 +87653,8 @@ var StarfieldInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -88051,7 +88094,8 @@ var GridDistortionInternal = ({
   const mouseRef = useRef({ x: -1e3, y: -1e3 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
-  const isVisibleRef = useRef(true);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const frameInterval = 1e3 / fps;
   const initializeGrid = useCallback(() => {
     const points = [];
@@ -88230,7 +88274,7 @@ var GridDistortionInternal = ({
   const animate4 = useCallback((timestamp) => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
-    if (!canvas || !ctx || !isVisibleRef.current) {
+    if (!canvas || !ctx) {
       animationRef.current = requestAnimationFrame(animate4);
       return;
     }
@@ -88240,11 +88284,13 @@ var GridDistortionInternal = ({
       return;
     }
     lastFrameTimeRef.current = timestamp - elapsed % frameInterval;
-    timeRef.current += speed * 0.016;
-    applyDistortion(canvas);
-    drawGrid(ctx, canvas);
+    if (isVisible) {
+      timeRef.current += speed * 0.016;
+      applyDistortion(canvas);
+      drawGrid(ctx, canvas);
+    }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [applyDistortion, drawGrid, speed, frameInterval]);
+  }, [applyDistortion, drawGrid, speed, frameInterval, isVisible]);
   const setupCanvas = useCallback(() => {
     const canvas = canvasRef.current;
     const container = containerRef.current;
@@ -88293,13 +88339,25 @@ var GridDistortionInternal = ({
     if (!container)
       return;
     const intersectionObserver = new IntersectionObserver(
-      ([entry]) => {
-        isVisibleRef.current = entry.isIntersecting;
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
       },
-      { threshold: 0.1 }
+      { threshold: 0.5 }
     );
     intersectionObserver.observe(container);
-    return () => intersectionObserver.disconnect();
+    return () => {
+      intersectionObserver.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
   }, []);
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -88322,6 +88380,14 @@ var GridDistortionInternal = ({
       }
     };
   }, [setupCanvas, handleMouseMove2, handleMouseLeave2, animate4, interactive]);
+  const canvasStyle = useMemo(() => ({
+    imageRendering: "crisp-edges",
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.3s ease-out"
+  }), [isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -88342,9 +88408,7 @@ var GridDistortionInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              imageRendering: "crisp-edges"
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -88388,15 +88452,19 @@ var WavesInternal = ({
   animationType = "continuous",
   interactive = false,
   mouseRadius = 150,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const waveLayersRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const initializeWaves = useCallback(() => {
     const waveLayers = [];
     for (let i = 0; i < layers; i++) {
@@ -88546,20 +88614,22 @@ var WavesInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    if (animationType === "continuous") {
-      timeRef.current += 1;
-    } else if (animationType === "pulse") {
-      timeRef.current += 1 + Math.sin(currentTime * 1e-3) * 0.5;
-    } else if (animationType === "breathe") {
-      timeRef.current += 0.5 + Math.sin(currentTime * 5e-4) * 0.5;
-    }
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    const waveLayers = waveLayersRef.current;
-    for (let i = waveLayers.length - 1; i >= 0; i--) {
-      drawWaveLayer(ctx, waveLayers[i], i, canvas);
+    if (!pauseWhenHidden || isVisible) {
+      if (animationType === "continuous") {
+        timeRef.current += 1;
+      } else if (animationType === "pulse") {
+        timeRef.current += 1 + Math.sin(currentTime * 1e-3) * 0.5;
+      } else if (animationType === "breathe") {
+        timeRef.current += 0.5 + Math.sin(currentTime * 5e-4) * 0.5;
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const waveLayers = waveLayersRef.current;
+      for (let i = waveLayers.length - 1; i >= 0; i--) {
+        drawWaveLayer(ctx, waveLayers[i], i, canvas);
+      }
     }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, animationType]);
+  }, [frameInterval, animationType, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -88600,9 +88670,44 @@ var WavesInternal = ({
       }
     };
   }, [initializeWaves, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -88618,7 +88723,8 @@ var WavesInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -88662,15 +88768,19 @@ var GradientFlowInternal = ({
   scale = 1,
   blendMode = "normal",
   smooth = true,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const gradientPointsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const initializeGradientPoints = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -88844,17 +88954,19 @@ var GradientFlowInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += 1;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (blur2 > 0) {
-      ctx.filter = `blur(${blur2}px)`;
-    }
-    if (type === "mesh") {
-      updateGradientPoints(canvas);
+    if (!pauseWhenHidden || isVisible) {
+      timeRef.current += 1;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (blur2 > 0) {
+        ctx.filter = `blur(${blur2}px)`;
+      }
+      if (type === "mesh") {
+        updateGradientPoints(canvas);
+      }
+      drawGradient(ctx, canvas);
     }
-    drawGradient(ctx, canvas);
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, smooth, blur2, type, updateGradientPoints, drawGradient]);
+  }, [frameInterval, smooth, blur2, type, updateGradientPoints, drawGradient, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -88913,9 +89025,44 @@ var GradientFlowInternal = ({
       }
     };
   }, [type, initializeGradientPoints, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -88928,7 +89075,8 @@ var GradientFlowInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -89006,10 +89154,13 @@ var MeshGradientInternal = ({
   grainOpacity = 0.03,
   saturation = 1,
   brightness = 1,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
   const { theme, resolvedTheme } = z();
   const currentTheme = theme === "system" ? resolvedTheme : theme;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const defaultLightColors = [
     "#fce7f3",
     // Light pink
@@ -89041,6 +89192,7 @@ var MeshGradientInternal = ({
   const finalBlur = blur2 ?? defaultBlur;
   const finalOpacity = opacity ?? defaultOpacity;
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const meshPointsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
@@ -89216,7 +89368,7 @@ var MeshGradientInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    if (animate4) {
+    if (animate4 && (!pauseWhenHidden || isVisible)) {
       timeRef.current += speed * 2.5;
     }
     updateMeshPoints(canvas);
@@ -89242,6 +89394,37 @@ var MeshGradientInternal = ({
       y: e.clientY - rect.top
     };
   }, []);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      {
+        threshold: 0.5
+        // Component must be 50% visible
+        // No rootMargin to prevent premature triggering
+      }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89270,9 +89453,17 @@ var MeshGradientInternal = ({
       }
     };
   }, [initializeMeshPoints, handleResize, handleMouseMove2, animateLoop, drawMeshGradient, interactive, animate4]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -89285,7 +89476,8 @@ var MeshGradientInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
@@ -89328,15 +89520,19 @@ var LiquidBackgroundInternal = ({
   backgroundColor = "transparent",
   animationStyle = "float",
   gradientOverlay = false,
-  fps = 60
+  fps = 60,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const blobsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0, vx: 0, vy: 0 });
   const timeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const initializeBlobs = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89506,11 +89702,13 @@ var LiquidBackgroundInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += 1;
-    updateBlobs(canvas);
-    drawLiquid(ctx, canvas);
+    if (!pauseWhenHidden || isVisible) {
+      timeRef.current += 1;
+      updateBlobs(canvas);
+      drawLiquid(ctx, canvas);
+    }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, updateBlobs, drawLiquid]);
+  }, [frameInterval, updateBlobs, drawLiquid, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89553,9 +89751,44 @@ var LiquidBackgroundInternal = ({
       }
     };
   }, [initializeBlobs, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -89571,7 +89804,8 @@ var LiquidBackgroundInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -89612,14 +89846,18 @@ var MatrixRainInternal = ({
   fadeLength = 20,
   interactive = false,
   mouseRadius = 200,
-  fps = 30
+  fps = 30,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const columnsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
   const lastFrameTimeRef = useRef(0);
   const frameInterval = 1e3 / fps;
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const getCharacterSet = useCallback(() => {
     switch (charSet) {
       case "matrix":
@@ -89749,10 +89987,12 @@ var MatrixRainInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    updateColumns2(canvas);
-    drawMatrix(ctx, canvas);
+    if (!pauseWhenHidden || isVisible) {
+      updateColumns2(canvas);
+      drawMatrix(ctx, canvas);
+    }
     animationRef.current = requestAnimationFrame(animate4);
-  }, [frameInterval, updateColumns2, drawMatrix]);
+  }, [frameInterval, updateColumns2, drawMatrix, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89793,9 +90033,44 @@ var MatrixRainInternal = ({
       }
     };
   }, [initializeColumns, handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: !pauseWhenHidden || isVisible ? backgroundOpacity : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible, backgroundOpacity]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden bg-black",
         containerClassName
@@ -89809,9 +90084,7 @@ var MatrixRainInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              opacity: backgroundOpacity
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -89855,9 +90128,11 @@ var GlitchBackgroundInternal = ({
   speed = 1,
   interactive = false,
   mouseRadius = 200,
-  fps = 30
+  fps = 30,
+  pauseWhenHidden = false
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const animationRef = useRef(void 0);
   const glitchSlicesRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0 });
@@ -89865,6 +90140,8 @@ var GlitchBackgroundInternal = ({
   const frameInterval = 1e3 / fps;
   const timeRef = useRef(0);
   const isGlitchingRef = useRef(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const generateGlitchSlices = useCallback((canvas) => {
     const slices = [];
     const sliceCount = Math.floor(Math.random() * 10 * intensity) + 2;
@@ -89992,31 +90269,33 @@ var GlitchBackgroundInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += speed;
-    const glitchChance = frequency * 0.1;
-    if (!isGlitchingRef.current && Math.random() < glitchChance) {
-      isGlitchingRef.current = true;
-      generateGlitchSlices(canvas);
-      setTimeout(() => {
-        isGlitchingRef.current = false;
-      }, Math.random() * 200 * intensity + 50);
-    }
-    if (interactive) {
-      const dx = canvas.width / 2 - mouseRef.current.x;
-      const dy = canvas.height / 2 - mouseRef.current.y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-      if (distance < mouseRadius && !isGlitchingRef.current) {
-        const triggerChance = (1 - distance / mouseRadius) * frequency;
-        if (Math.random() < triggerChance * 0.05) {
-          isGlitchingRef.current = true;
-          generateGlitchSlices(canvas);
-          setTimeout(() => {
-            isGlitchingRef.current = false;
-          }, Math.random() * 100 + 50);
+    if (!pauseWhenHidden || isVisible) {
+      timeRef.current += speed;
+      const glitchChance = frequency * 0.1;
+      if (!isGlitchingRef.current && Math.random() < glitchChance) {
+        isGlitchingRef.current = true;
+        generateGlitchSlices(canvas);
+        setTimeout(() => {
+          isGlitchingRef.current = false;
+        }, Math.random() * 200 * intensity + 50);
+      }
+      if (interactive) {
+        const dx = canvas.width / 2 - mouseRef.current.x;
+        const dy = canvas.height / 2 - mouseRef.current.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < mouseRadius && !isGlitchingRef.current) {
+          const triggerChance = (1 - distance / mouseRadius) * frequency;
+          if (Math.random() < triggerChance * 0.05) {
+            isGlitchingRef.current = true;
+            generateGlitchSlices(canvas);
+            setTimeout(() => {
+              isGlitchingRef.current = false;
+            }, Math.random() * 100 + 50);
+          }
         }
       }
+      drawGlitch(ctx, canvas);
     }
-    drawGlitch(ctx, canvas);
     animationRef.current = requestAnimationFrame(animate4);
   }, [
     frameInterval,
@@ -90026,7 +90305,9 @@ var GlitchBackgroundInternal = ({
     interactive,
     mouseRadius,
     generateGlitchSlices,
-    drawGlitch
+    drawGlitch,
+    pauseWhenHidden,
+    isVisible
   ]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
@@ -90079,9 +90360,45 @@ var GlitchBackgroundInternal = ({
       }
     };
   }, [handleResize, handleMouseMove2, animate4, interactive]);
+  useEffect(() => {
+    if (!pauseWhenHidden)
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, [pauseWhenHidden]);
+  const canvasStyle = useMemo(() => ({
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    zIndex: 1,
+    opacity: !pauseWhenHidden || isVisible ? 1 : 0,
+    transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
+  }), [pauseWhenHidden, isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -90098,7 +90415,7 @@ var GlitchBackgroundInternal = ({
               "absolute inset-0 w-full h-full pointer-events-none",
               className
             ),
-            style: { zIndex: 1 }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -90413,7 +90730,12 @@ var FloatingElementsInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: {
+              willChange: "transform",
+              transform: "translate3d(0, 0, 0)",
+              backfaceVisibility: "hidden"
+            }
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -90489,6 +90811,7 @@ var BubbleBackgroundInternal = ({
   mergeDistance = 30
 }) => {
   const canvasRef = useRef(null);
+  const containerRef = useRef(null);
   const offscreenCanvasRef = useRef(null);
   const animationRef = useRef(void 0);
   const bubblesRef = useRef([]);
@@ -90498,6 +90821,8 @@ var BubbleBackgroundInternal = ({
   const timeRef = useRef(0);
   const gradientCacheRef = useRef(/* @__PURE__ */ new Map());
   const performanceConfigRef = useRef(PERFORMANCE_PRESETS.medium);
+  const [isVisible, setIsVisible] = useState(true);
+  const observerTimeoutRef = useRef(null);
   const detectPerformance = useCallback(() => {
     const devicePixelRatio = window.devicePixelRatio || 1;
     const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -90768,37 +91093,39 @@ var BubbleBackgroundInternal = ({
       return;
     }
     lastFrameTimeRef.current = currentTime;
-    timeRef.current += 1;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (backgroundColor !== "transparent") {
-      ctx.fillStyle = backgroundColor;
-      ctx.globalAlpha = backgroundOpacity;
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.globalAlpha = 1;
-    }
-    updateBubbles(canvas, deltaTime);
-    if (glow && performanceConfigRef.current.glow) {
-      ctx.shadowBlur = 20 * glowIntensity;
-      ctx.shadowColor = colors[0];
-    }
-    if (blur2 && performanceConfigRef.current.blur && offscreenCanvasRef.current) {
-      const offCtx = offscreenCanvasRef.current.getContext("2d");
-      if (offCtx) {
-        offCtx.filter = `blur(${blurAmount}px)`;
-        offCtx.clearRect(0, 0, canvas.width, canvas.height);
-        bubblesRef.current.forEach((bubble) => {
-          drawBubble(offCtx, bubble);
+    if (isVisible) {
+      timeRef.current += 1;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (backgroundColor !== "transparent") {
+        ctx.fillStyle = backgroundColor;
+        ctx.globalAlpha = backgroundOpacity;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.globalAlpha = 1;
+      }
+      updateBubbles(canvas, deltaTime);
+      if (glow && performanceConfigRef.current.glow) {
+        ctx.shadowBlur = 20 * glowIntensity;
+        ctx.shadowColor = colors[0];
+      }
+      if (blur2 && performanceConfigRef.current.blur && offscreenCanvasRef.current) {
+        const offCtx = offscreenCanvasRef.current.getContext("2d");
+        if (offCtx) {
+          offCtx.filter = `blur(${blurAmount}px)`;
+          offCtx.clearRect(0, 0, canvas.width, canvas.height);
+          bubblesRef.current.forEach((bubble) => {
+            drawBubble(offCtx, bubble);
+          });
+          ctx.drawImage(offscreenCanvasRef.current, 0, 0);
+        }
+      } else {
+        const bubbles = bubblesRef.current;
+        bubbles.forEach((bubble) => {
+          drawBubble(ctx, bubble);
         });
-        ctx.drawImage(offscreenCanvasRef.current, 0, 0);
       }
-    } else {
-      const bubbles = bubblesRef.current;
-      bubbles.forEach((bubble) => {
-        drawBubble(ctx, bubble);
-      });
-    }
-    if (glow && performanceConfigRef.current.glow) {
-      ctx.shadowBlur = 0;
+      if (glow && performanceConfigRef.current.glow) {
+        ctx.shadowBlur = 0;
+      }
     }
     animationRef.current = requestAnimationFrame(animate4);
   }, [
@@ -90811,7 +91138,8 @@ var BubbleBackgroundInternal = ({
     glowIntensity,
     blur2,
     blurAmount,
-    colors
+    colors,
+    isVisible
   ]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
@@ -90845,6 +91173,31 @@ var BubbleBackgroundInternal = ({
       y: e.clientY - rect.top
     };
   }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (observerTimeoutRef.current) {
+            clearTimeout(observerTimeoutRef.current);
+          }
+          observerTimeoutRef.current = setTimeout(() => {
+            setIsVisible(entry.isIntersecting);
+          }, 150);
+        });
+      },
+      { threshold: 0.5 }
+    );
+    intersectionObserver.observe(container);
+    return () => {
+      intersectionObserver.disconnect();
+      if (observerTimeoutRef.current) {
+        clearTimeout(observerTimeoutRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -90885,9 +91238,20 @@ var BubbleBackgroundInternal = ({
       gradientCacheRef.current.clear();
     };
   }, []);
+  const canvasStyle = useMemo(() => ({
+    width: "100%",
+    height: "100%",
+    touchAction: "none",
+    willChange: "transform",
+    transform: "translate3d(0, 0, 0)",
+    backfaceVisibility: "hidden",
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.3s ease-out"
+  }), [isVisible]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       className: cn(
         "relative w-full h-full overflow-hidden",
         containerClassName
@@ -90901,11 +91265,7 @@ var BubbleBackgroundInternal = ({
               "absolute inset-0 w-full h-full",
               className
             ),
-            style: {
-              width: "100%",
-              height: "100%",
-              touchAction: "none"
-            }
+            style: canvasStyle
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
@@ -91560,7 +91920,12 @@ var GeometricPatternsInternal = ({
             className: cn(
               "absolute inset-0 w-full h-full",
               className
-            )
+            ),
+            style: {
+              willChange: "transform",
+              transform: "translate3d(0, 0, 0)",
+              backfaceVisibility: "hidden"
+            }
           }
         ),
         children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })