@moontra/moonui-pro 3.4.1 → 3.4.2

package/dist/index.mjs

@@ -89525,6 +89525,8 @@ var LiquidBackgroundInternal = ({
 }) => {
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
+  const offscreenCanvasRef = useRef(null);
+  const offscreenCtxRef = useRef(null);
   const animationRef = useRef(void 0);
   const blobsRef = useRef([]);
   const mouseRef = useRef({ x: 0, y: 0, vx: 0, vy: 0 });
@@ -89533,6 +89535,12 @@ var LiquidBackgroundInternal = ({
   const frameInterval = 1e3 / fps;
   const [isVisible, setIsVisible] = useState(true);
   const observerTimeoutRef = useRef(null);
+  const filterString = useMemo(() => {
+    if (blur2 > 0 && contrast > 0) {
+      return `blur(${blur2}px) contrast(${contrast})`;
+    }
+    return "none";
+  }, [blur2, contrast]);
   const initializeBlobs = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -89637,9 +89645,7 @@ var LiquidBackgroundInternal = ({
   }, [animationStyle, speed, viscosity, tension, sizeRange, interactive, mouseRadius]);
   const drawLiquid = useCallback((ctx, canvas) => {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (blur2 > 0 && contrast > 0) {
-      ctx.filter = `blur(${blur2}px) contrast(${contrast})`;
-    }
+    ctx.filter = filterString;
     ctx.globalAlpha = opacity;
     const blobs = blobsRef.current;
     blobs.forEach((blob) => {
@@ -89685,14 +89691,17 @@ var LiquidBackgroundInternal = ({
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.globalCompositeOperation = "source-over";
     }
-  }, [blur2, contrast, opacity, glow, glowIntensity, gradientOverlay]);
+  }, [filterString, opacity, glow, glowIntensity, gradientOverlay]);
   const animate4 = useCallback((currentTime) => {
     const canvas = canvasRef.current;
-    if (!canvas)
+    const offscreenCanvas = offscreenCanvasRef.current;
+    const offscreenCtx = offscreenCtxRef.current;
+    if (!canvas || !offscreenCanvas || !offscreenCtx)
       return;
     const ctx = canvas.getContext("2d", {
       alpha: true,
-      desynchronized: true
+      desynchronized: true,
+      willReadFrequently: false
     });
     if (!ctx)
       return;
@@ -89704,18 +89713,23 @@ var LiquidBackgroundInternal = ({
     lastFrameTimeRef.current = currentTime;
     if (!pauseWhenHidden || isVisible) {
       timeRef.current += 1;
-      updateBlobs(canvas);
-      drawLiquid(ctx, canvas);
+      updateBlobs(offscreenCanvas);
+      drawLiquid(offscreenCtx, offscreenCanvas);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(offscreenCanvas, 0, 0);
     }
     animationRef.current = requestAnimationFrame(animate4);
   }, [frameInterval, updateBlobs, drawLiquid, pauseWhenHidden, isVisible]);
   const handleResize = useCallback(() => {
     const canvas = canvasRef.current;
-    if (!canvas)
+    const offscreenCanvas = offscreenCanvasRef.current;
+    if (!canvas || !offscreenCanvas)
       return;
     const rect = canvas.getBoundingClientRect();
     canvas.width = rect.width;
     canvas.height = rect.height;
+    offscreenCanvas.width = rect.width;
+    offscreenCanvas.height = rect.height;
     initializeBlobs();
   }, [initializeBlobs]);
   const handleMouseMove2 = useCallback((e) => {
@@ -89734,9 +89748,22 @@ var LiquidBackgroundInternal = ({
     const canvas = canvasRef.current;
     if (!canvas)
       return;
+    timeRef.current = Math.random() * 100;
+    const offscreenCanvas = document.createElement("canvas");
+    const offscreenCtx = offscreenCanvas.getContext("2d", {
+      alpha: true,
+      desynchronized: true,
+      willReadFrequently: false
+    });
+    if (!offscreenCtx)
+      return;
+    offscreenCanvasRef.current = offscreenCanvas;
+    offscreenCtxRef.current = offscreenCtx;
     const rect = canvas.getBoundingClientRect();
     canvas.width = rect.width;
     canvas.height = rect.height;
+    offscreenCanvas.width = rect.width;
+    offscreenCanvas.height = rect.height;
     initializeBlobs();
     window.addEventListener("resize", handleResize);
     if (interactive) {
@@ -89749,6 +89776,8 @@ var LiquidBackgroundInternal = ({
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
       }
+      offscreenCanvasRef.current = null;
+      offscreenCtxRef.current = null;
     };
   }, [initializeBlobs, handleResize, handleMouseMove2, animate4, interactive]);
   useEffect(() => {
@@ -89779,9 +89808,11 @@ var LiquidBackgroundInternal = ({
     };
   }, [pauseWhenHidden]);
   const canvasStyle = useMemo(() => ({
-    willChange: "transform",
+    willChange: "transform, opacity",
     transform: "translate3d(0, 0, 0)",
     backfaceVisibility: "hidden",
+    contain: "paint layout",
+    isolation: "isolate",
     opacity: !pauseWhenHidden || isVisible ? 1 : 0,
     transition: pauseWhenHidden ? "opacity 0.3s ease-out" : "none"
   }), [pauseWhenHidden, isVisible]);
@@ -89794,7 +89825,9 @@ var LiquidBackgroundInternal = ({
         containerClassName
       ),
       style: {
-        backgroundColor
+        backgroundColor,
+        contain: "layout style paint",
+        willChange: "contents"
       },
       children: [
         /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "3.4.1",
+    "version": "3.4.2",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",