@moontra/moonui-pro 3.4.5 → 3.4.6

package/dist/index.d.ts

@@ -7348,11 +7348,29 @@ interface MagneticElementsProps {
 declare const MagneticElements: React__default.FC<MagneticElementsProps>;
 
 /**
- * ScrollReveal Component
+ * ScrollReveal Pro Component
+ *
+ * Advanced scroll-triggered animations with professional features
+ * Guarantees children rendering even when animations are disabled
+ *
+ * Pro Features:
+ * - 7 animation types (fade, slide, zoom, flip, bounce, rotate, blur)
+ * - Parallax scrolling effects with optimized performance
+ * - Cascade/stagger animations for multiple children
+ * - Custom animation keyframes support
+ * - Mobile/desktop specific animations
+ * - Debug mode for testing
+ * - Lifecycle callbacks (onReveal, onComplete)
+ * - RequestAnimationFrame optimizations for 60fps
+ *
+ * Performance Optimizations:
+ * - Batched state updates
+ * - RAF-based parallax calculations
+ * - Proper cleanup to prevent memory leaks
+ * - Children always render (animations are visual only)
  *
- * Reveals content with animations when scrolling into view
  * Derived from React Bits (https://github.com/DavidHDev/react-bits)
- * Adapted for MoonUI Pro with TypeScript and enhanced features
+ * Enhanced for MoonUI Pro with TypeScript and performance improvements
  *
  * @author MoonUI Team
  * @license MIT

package/dist/index.mjs

@@ -96614,7 +96614,8 @@ var ScrollRevealInternal = ({
   duration = 600,
   delay = 0,
   easing = "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-  threshold = 0.1,
+  threshold = 0.3,
+  // Increased from 0.1 for better visibility (aligned with Free version)
   once = true,
   initialOpacity = 0,
   initialScale = 0.9,
@@ -96652,8 +96653,13 @@ var ScrollRevealInternal = ({
     return true;
   };
   const getAnimationStyles = useCallback(() => {
-    if (!shouldAnimate())
-      return {};
+    if (!shouldAnimate()) {
+      return {
+        opacity: 1,
+        transform: "none",
+        filter: "none"
+      };
+    }
     const baseStyles = {
       transition: `all ${duration}ms ${easing} ${delay}ms`,
       willChange: "transform, opacity"
@@ -96747,36 +96753,46 @@ var ScrollRevealInternal = ({
     parallax,
     parallaxOffset
   ]);
+  const rafRef = useRef(void 0);
   const handleParallax = useCallback(() => {
     if (!parallax || !elementRef.current)
       return;
-    const element = elementRef.current;
-    const rect = element.getBoundingClientRect();
-    const windowHeight = window.innerHeight;
-    const elementTop = rect.top;
-    const elementHeight = rect.height;
-    const scrollProgress = (windowHeight - elementTop) / (windowHeight + elementHeight);
-    const offset5 = scrollProgress * 100 * parallaxSpeed;
-    setParallaxOffset(offset5);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = requestAnimationFrame(() => {
+      if (!elementRef.current)
+        return;
+      const element = elementRef.current;
+      const rect = element.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const elementTop = rect.top;
+      const elementHeight = rect.height;
+      const scrollProgress = (windowHeight - elementTop) / (windowHeight + elementHeight);
+      const offset5 = scrollProgress * 100 * parallaxSpeed;
+      setParallaxOffset(offset5);
+    });
   }, [parallax, parallaxSpeed]);
   const handleIntersection = useCallback((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        if (!hasAnimated || !once) {
-          setIsVisible(true);
-          setHasAnimated(true);
-          onReveal?.();
-          if (onComplete) {
-            setTimeout(() => {
-              animationCompleteRef.current = true;
-              onComplete();
-            }, duration + delay);
+    requestAnimationFrame(() => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (!hasAnimated || !once) {
+            setIsVisible(true);
+            setHasAnimated(true);
+            onReveal?.();
+            if (onComplete) {
+              setTimeout(() => {
+                animationCompleteRef.current = true;
+                onComplete();
+              }, duration + delay);
+            }
           }
+        } else if (!once) {
+          setIsVisible(false);
+          animationCompleteRef.current = false;
         }
-      } else if (!once) {
-        setIsVisible(false);
-        animationCompleteRef.current = false;
-      }
+      });
     });
   }, [hasAnimated, once, onReveal, onComplete, duration, delay]);
   useEffect(() => {
@@ -96798,6 +96814,9 @@ var ScrollRevealInternal = ({
       if (parallax) {
         window.removeEventListener("scroll", handleParallax);
       }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
     };
   }, [threshold, offset4, handleIntersection, parallax, handleParallax]);
   const processChildren = () => {
@@ -96900,14 +96919,17 @@ var ScrollRevealInternal = ({
 var ScrollReveal = (props) => {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(
-      ProLockScreen,
-      {
-        componentName: "ScrollReveal",
-        compact: true,
-        className: "inline-block"
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(ScrollRevealInternal, { ...props }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none bg-background/80 backdrop-blur-sm flex items-center justify-center z-50", children: /* @__PURE__ */ jsx(
+        ProLockScreen,
+        {
+          componentName: "ScrollReveal",
+          compact: true,
+          className: "inline-block pointer-events-auto"
+        }
+      ) })
+    ] });
   }
   return /* @__PURE__ */ jsx(ScrollRevealInternal, { ...props });
 };
@@ -100810,11 +100832,29 @@ FocusTransitions.displayName = "FocusTransitions";
  * @license Commercial
  */
 /**
- * ScrollReveal Component
+ * ScrollReveal Pro Component
+ *
+ * Advanced scroll-triggered animations with professional features
+ * Guarantees children rendering even when animations are disabled
+ *
+ * Pro Features:
+ * - 7 animation types (fade, slide, zoom, flip, bounce, rotate, blur)
+ * - Parallax scrolling effects with optimized performance
+ * - Cascade/stagger animations for multiple children
+ * - Custom animation keyframes support
+ * - Mobile/desktop specific animations
+ * - Debug mode for testing
+ * - Lifecycle callbacks (onReveal, onComplete)
+ * - RequestAnimationFrame optimizations for 60fps
+ *
+ * Performance Optimizations:
+ * - Batched state updates
+ * - RAF-based parallax calculations
+ * - Proper cleanup to prevent memory leaks
+ * - Children always render (animations are visual only)
  *
- * Reveals content with animations when scrolling into view
  * Derived from React Bits (https://github.com/DavidHDev/react-bits)
- * Adapted for MoonUI Pro with TypeScript and enhanced features
+ * Enhanced for MoonUI Pro with TypeScript and performance improvements
  *
  * @author MoonUI Team
  * @license MIT

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "3.4.5",
+    "version": "3.4.6",
     "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",