@nikitph/flux-ui 0.3.2 → 0.3.3

package/dist/index.js

@@ -223,7 +223,7 @@ var Reveal = forwardRef2(
         animate: shouldAnimate ? target : initial,
         transition: { ...springConfig, delay: isReducedMotion ? 0 : delay },
         className,
-        style,
+        style: { ...style, willChange: "transform, opacity" },
         ...props,
         children
       }
@@ -295,9 +295,10 @@ var Presence = ({
 };
 
 // src/primitives/03-stagger.tsx
-import React4, { forwardRef as forwardRef3, useEffect as useEffect6, useState as useState4 } from "react";
+import React4, { forwardRef as forwardRef3, useEffect as useEffect6, useMemo, useState as useState4 } from "react";
 import { motion as motion3, useInView as useInView3 } from "motion/react";
 import { jsx as jsx5 } from "react/jsx-runtime";
+var MotionSlot = motion3.create(Slot);
 var Stagger = forwardRef3(
   ({
     children,
@@ -336,8 +337,7 @@ var Stagger = forwardRef3(
     }, [shouldAnimate, hasRevealed]);
     const childrenArray = React4.Children.toArray(children);
     const count = childrenArray.length;
-    let randomSeed = 0.5;
-    const getInitial = () => {
+    const getInitial = useMemo(() => {
       if (isReducedMotion) return { opacity: 0, x: 0, y: 0, scale: 1 };
       const rFrom = reveal.from || "below";
       const rDist = reveal.distance || motionScale.distance.md;
@@ -349,9 +349,10 @@ var Stagger = forwardRef3(
         x: rFrom === "left" ? -rDist : rFrom === "right" ? rDist : 0,
         scale: rScale !== false ? rScale : 1
       };
-    };
+    }, [isReducedMotion, reveal.from, reveal.distance, reveal.fade, reveal.scale]);
     const target = { opacity: 1, x: 0, y: 0, scale: 1 };
-    const initial = getInitial();
+    const initial = getInitial;
+    let randomSeed = 0.5;
     const renderChildren = childrenArray.map((child, i) => {
       if (!React4.isValidElement(child)) return child;
       let delay = 0;
@@ -364,13 +365,13 @@ var Stagger = forwardRef3(
           delay = randomSeed / 233280 * count * interval;
         }
       }
-      const MotionChild = motion3.create(Slot);
       return /* @__PURE__ */ jsx5(
-        MotionChild,
+        MotionSlot,
         {
           initial,
           animate: shouldAnimate ? target : initial,
           transition: { ...springConfig, delay },
+          style: { willChange: "transform, opacity" },
           children: child
         },
         child.key || i
@@ -797,10 +798,30 @@ var Magnetic = forwardRef9(
     const y = useMotionValue2(0);
     const springX = useSpring2(x, isReducedMotion ? { duration: 0 } : springConfig);
     const springY = useSpring2(y, isReducedMotion ? { duration: 0 } : springConfig);
-    const handleMouseMove = useCallback((e) => {
+    const rectRef = useRef3(null);
+    const updateRect = useCallback(() => {
+      if (internalRef.current) {
+        rectRef.current = internalRef.current.getBoundingClientRect();
+      }
+    }, []);
+    useEffect11(() => {
+      updateRect();
+      window.addEventListener("scroll", updateRect, { passive: true });
+      window.addEventListener("resize", updateRect, { passive: true });
+      return () => {
+        window.removeEventListener("scroll", updateRect);
+        window.removeEventListener("resize", updateRect);
+      };
+    }, [updateRect]);
+    const rafId = useRef3(0);
+    const latestEvent = useRef3(null);
+    const processMouseMove = useCallback(() => {
+      const e = latestEvent.current;
+      rafId.current = 0;
+      if (!e) return;
       if (isReducedMotion || disableOnTouch && isTouchDevice) return;
-      if (!internalRef.current) return;
-      const rect = internalRef.current.getBoundingClientRect();
+      const rect = rectRef.current;
+      if (!rect) return;
       const centerX = rect.left + rect.width / 2;
       const centerY = rect.top + rect.height / 2;
       const deltaX = e.clientX - centerX;
@@ -816,14 +837,21 @@ var Magnetic = forwardRef9(
         y.set(0);
       }
     }, [x, y, radius, maxDisplacement, strength, isTouchDevice, disableOnTouch, isReducedMotion]);
-    const handleMouseLeave = () => {
+    const handleMouseMove = useCallback((e) => {
+      latestEvent.current = e;
+      if (!rafId.current) {
+        rafId.current = requestAnimationFrame(processMouseMove);
+      }
+    }, [processMouseMove]);
+    const handleMouseLeave = useCallback(() => {
       x.set(0);
       y.set(0);
-    };
+    }, [x, y]);
     useEffect11(() => {
-      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mousemove", handleMouseMove, { passive: true });
       return () => {
         window.removeEventListener("mousemove", handleMouseMove);
+        if (rafId.current) cancelAnimationFrame(rafId.current);
       };
     }, [handleMouseMove]);
     const MotionComponent = asChild ? motion9.create(Slot) : motion9.div;
@@ -832,7 +860,7 @@ var Magnetic = forwardRef9(
       {
         ref: mergedRef,
         className,
-        style: { ...style, x: springX, y: springY },
+        style: { ...style, x: springX, y: springY, willChange: "transform" },
         onMouseLeave: handleMouseLeave,
         ...props,
         children
@@ -932,10 +960,29 @@ var Tilt = forwardRef11(
     const scaleVal = useSpring3(s, isReducedMotion ? { duration: 0 } : springConfig);
     const gX = useSpring3(glareX, isReducedMotion ? { duration: 0 } : springConfig);
     const gY = useSpring3(glareY, isReducedMotion ? { duration: 0 } : springConfig);
-    const handleMouseMove = useCallback2((e) => {
-      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
-      if (!internalRef.current) return;
-      const rect = internalRef.current.getBoundingClientRect();
+    const rectRef = useRef4(null);
+    const updateRect = useCallback2(() => {
+      if (internalRef.current) {
+        rectRef.current = internalRef.current.getBoundingClientRect();
+      }
+    }, []);
+    useEffect12(() => {
+      updateRect();
+      window.addEventListener("scroll", updateRect, { passive: true });
+      window.addEventListener("resize", updateRect, { passive: true });
+      return () => {
+        window.removeEventListener("scroll", updateRect);
+        window.removeEventListener("resize", updateRect);
+      };
+    }, [updateRect]);
+    const rafId = useRef4(0);
+    const latestEvent = useRef4(null);
+    const processMouseMove = useCallback2(() => {
+      rafId.current = 0;
+      const e = latestEvent.current;
+      if (!e) return;
+      const rect = rectRef.current;
+      if (!rect) return;
       const centerX = rect.left + rect.width / 2;
       const centerY = rect.top + rect.height / 2;
       const mouseX = (e.clientX - centerX) / rect.width;
@@ -952,7 +999,14 @@ var Tilt = forwardRef11(
         glareX.set((e.clientX - rect.left) / rect.width * 100);
         glareY.set((e.clientY - rect.top) / rect.height * 100);
       }
-    }, [x, y, s, glareX, glareY, maxTilt, reverse, axis, scale, glare, disabled, isReducedMotion, disableOnTouch, isTouchDevice]);
+    }, [x, y, s, glareX, glareY, maxTilt, reverse, axis, scale, glare]);
+    const handleMouseMove = useCallback2((e) => {
+      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
+      latestEvent.current = e;
+      if (!rafId.current) {
+        rafId.current = requestAnimationFrame(processMouseMove);
+      }
+    }, [disabled, isReducedMotion, disableOnTouch, isTouchDevice, processMouseMove]);
     const handleMouseLeave = useCallback2(() => {
       if (disabled || isReducedMotion) return;
       if (resetOnLeave) {
@@ -961,6 +1015,11 @@ var Tilt = forwardRef11(
       }
       s.set(1);
     }, [x, y, s, resetOnLeave, disabled, isReducedMotion]);
+    useEffect12(() => {
+      return () => {
+        if (rafId.current) cancelAnimationFrame(rafId.current);
+      };
+    }, []);
     const glareBackground = useMotionTemplate`radial-gradient(circle at ${gX}% ${gY}%, ${glareColor} 0%, transparent 80%)`;
     if (disabled || isReducedMotion) {
       return /* @__PURE__ */ jsx13("div", { ref: mergedRef, className, style, ...props, children });
@@ -977,7 +1036,15 @@ var Tilt = forwardRef11(
         children: /* @__PURE__ */ jsxs3(
           motion11.div,
           {
-            style: { rotateX, rotateY, scale: scaleVal, transformStyle: "preserve-3d", width: "100%", height: "100%" },
+            style: {
+              rotateX,
+              rotateY,
+              scale: scaleVal,
+              transformStyle: "preserve-3d",
+              width: "100%",
+              height: "100%",
+              willChange: "transform"
+            },
             children: [
               children,
               glare && /* @__PURE__ */ jsx13(
@@ -1264,8 +1331,8 @@ var LongPress = forwardRef14(
 LongPress.displayName = "LongPress";
 
 // src/primitives/15-hover-3d.tsx
-import React16, { createContext as createContext2, forwardRef as forwardRef15, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect13, useRef as useRef6 } from "react";
-import { motion as motion15, useMotionValue as useMotionValue4, useSpring as useSpring4 } from "motion/react";
+import React16, { createContext as createContext2, forwardRef as forwardRef15, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect13, useMemo as useMemo2, useRef as useRef6 } from "react";
+import { motion as motion15, useMotionValue as useMotionValue4, useSpring as useSpring4, useTransform as useTransform2 } from "motion/react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var Hover3DContext = createContext2({
   mouseX: null,
@@ -1296,21 +1363,52 @@ var Hover3DRoot = forwardRef15(
     const y = useMotionValue4(0);
     const mouseX = useSpring4(x, isReducedMotion ? { duration: 0 } : springConfig);
     const mouseY = useSpring4(y, isReducedMotion ? { duration: 0 } : springConfig);
-    const handleMouseMove = useCallback3((e) => {
-      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
-      if (!internalRef.current) return;
-      const rect = internalRef.current.getBoundingClientRect();
+    const rectRef = useRef6(null);
+    const updateRect = useCallback3(() => {
+      if (internalRef.current) {
+        rectRef.current = internalRef.current.getBoundingClientRect();
+      }
+    }, []);
+    useEffect13(() => {
+      updateRect();
+      window.addEventListener("scroll", updateRect, { passive: true });
+      window.addEventListener("resize", updateRect, { passive: true });
+      return () => {
+        window.removeEventListener("scroll", updateRect);
+        window.removeEventListener("resize", updateRect);
+      };
+    }, [updateRect]);
+    const rafId = useRef6(0);
+    const latestEvent = useRef6(null);
+    const processMouseMove = useCallback3(() => {
+      rafId.current = 0;
+      const e = latestEvent.current;
+      if (!e) return;
+      const rect = rectRef.current;
+      if (!rect) return;
       const centerX = rect.left + rect.width / 2;
       const centerY = rect.top + rect.height / 2;
       const offsetX = (e.clientX - centerX) / rect.width;
       const offsetY = (e.clientY - centerY) / rect.height;
       x.set(offsetX * 2);
       y.set(offsetY * 2);
-    }, [x, y, disabled, isReducedMotion, disableOnTouch, isTouchDevice]);
+    }, [x, y]);
+    const handleMouseMove = useCallback3((e) => {
+      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
+      latestEvent.current = e;
+      if (!rafId.current) {
+        rafId.current = requestAnimationFrame(processMouseMove);
+      }
+    }, [disabled, isReducedMotion, disableOnTouch, isTouchDevice, processMouseMove]);
     const handleMouseLeave = useCallback3(() => {
       x.set(0);
       y.set(0);
     }, [x, y]);
+    useEffect13(() => {
+      return () => {
+        if (rafId.current) cancelAnimationFrame(rafId.current);
+      };
+    }, []);
     if (disabled) {
       return /* @__PURE__ */ jsx17("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children });
     }
@@ -1324,7 +1422,13 @@ var Hover3DRoot = forwardRef15(
       }
       return child;
     });
-    return /* @__PURE__ */ jsx17(Hover3DContext.Provider, { value: { mouseX, mouseY, maxMovement, isReducedMotion }, children: /* @__PURE__ */ jsx17(
+    const contextValue = useMemo2(() => ({
+      mouseX,
+      mouseY,
+      maxMovement,
+      isReducedMotion
+    }), [mouseX, mouseY, maxMovement, isReducedMotion]);
+    return /* @__PURE__ */ jsx17(Hover3DContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx17(
       "div",
       {
         ref: mergedRef,
@@ -1342,6 +1446,8 @@ Hover3DRoot.displayName = "Hover3D";
 var Hover3DLayer = forwardRef15(
   ({ children, depth = 0, className, style, ...props }, ref) => {
     const { mouseX, mouseY, maxMovement, isReducedMotion } = useContext2(Hover3DContext);
+    const layerX = useTransform2(mouseX ?? useMotionValue4(0), (val) => val * maxMovement * depth);
+    const layerY = useTransform2(mouseY ?? useMotionValue4(0), (val) => val * maxMovement * depth);
     if (isReducedMotion || mouseX === null) {
       return /* @__PURE__ */ jsx17("div", { ref, className, style: { position: "absolute", inset: 0, ...style }, ...props, children });
     }
@@ -1353,21 +1459,12 @@ var Hover3DLayer = forwardRef15(
         style: {
           position: "absolute",
           inset: 0,
-          x: useMotionValue4(0),
-          // Will be overridden by style calculation
-          y: useMotionValue4(0),
+          x: layerX,
+          y: layerY,
           transformStyle: "preserve-3d",
+          willChange: "transform",
           ...style
         },
-        ...{
-          style: {
-            x: depth > 0 ? mouseX.get() * maxMovement * depth : 0,
-            y: depth > 0 ? mouseY.get() * maxMovement * depth : 0,
-            position: "absolute",
-            inset: 0,
-            ...style
-          }
-        },
         ...props,
         children
       }
@@ -1379,7 +1476,7 @@ var Hover3D = Object.assign(Hover3DRoot, { Layer: Hover3DLayer });
 
 // src/primitives/16-scroll-velocity.tsx
 import React17, { forwardRef as forwardRef16, useEffect as useEffect14, useRef as useRef7 } from "react";
-import { motion as motion16, useScroll as useScroll2, useVelocity, useSpring as useSpring5, useTransform as useTransform2 } from "motion/react";
+import { motion as motion16, useScroll as useScroll2, useVelocity, useSpring as useSpring5, useTransform as useTransform3 } from "motion/react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var ScrollVelocity = forwardRef16(
   ({
@@ -1409,21 +1506,21 @@ var ScrollVelocity = forwardRef16(
       stiffness: 400
     });
     const maxEffectVal = maxEffect ?? (effect === "blur" ? 10 : effect === "stretch" ? 1.5 : effect === "skew" ? 15 : effect === "speed" ? 100 : 1);
-    const filter = useTransform2(smoothedVelocity, (v) => {
+    const filter = useTransform3(smoothedVelocity, (v) => {
       if (effect !== "blur") return "none";
       const val = Math.min(Math.abs(v) * sensitivity * 0.01, maxEffectVal);
       return `blur(${val}px)`;
     });
-    const scaleY = useTransform2(smoothedVelocity, (v) => {
+    const scaleY = useTransform3(smoothedVelocity, (v) => {
       if (effect !== "stretch") return 1;
       const val = Math.min(1 + Math.abs(v) * sensitivity * 1e-3, maxEffectVal);
       return val;
     });
-    const skewY = useTransform2(smoothedVelocity, (v) => {
+    const skewDeg = useTransform3(smoothedVelocity, (v) => {
       if (effect !== "skew") return 0;
       const sign = Math.sign(v);
       const val = Math.min(Math.abs(v) * sensitivity * 0.1, maxEffectVal);
-      return `${sign * val}deg`;
+      return sign * val;
     });
     useEffect14(() => {
       if (effect === "speed" && internalRef.current) {
@@ -1434,10 +1531,26 @@ var ScrollVelocity = forwardRef16(
         });
       }
     }, [effect, smoothedVelocity, sensitivity, maxEffectVal]);
+    useEffect14(() => {
+      if (typeof children === "function") {
+        return smoothedVelocity.on("change", (latest) => {
+          if (internalRef.current) {
+            internalRef.current.dataset.velocity = latest.toString();
+          }
+        });
+      }
+    }, [children, smoothedVelocity]);
     const [currentVelocity, setCurrentVelocity] = React17.useState(0);
+    const lastUpdateRef = useRef7(0);
     useEffect14(() => {
       if (typeof children === "function") {
-        return smoothedVelocity.on("change", setCurrentVelocity);
+        return smoothedVelocity.on("change", (latest) => {
+          const now = performance.now();
+          if (now - lastUpdateRef.current > 33) {
+            lastUpdateRef.current = now;
+            setCurrentVelocity(latest);
+          }
+        });
       }
     }, [children, smoothedVelocity]);
     return /* @__PURE__ */ jsx18(
@@ -1449,10 +1562,10 @@ var ScrollVelocity = forwardRef16(
           ...style,
           filter,
           scaleY,
-          transformOrigin: direction === "y" ? "center" : "left"
-          // Framer doesn't cleanly map skewY string like this, using standard inline style is safer
+          skewY: effect === "skew" ? skewDeg : void 0,
+          transformOrigin: direction === "y" ? "center" : "left",
+          willChange: "transform"
         },
-        animate: effect === "skew" ? { skewY: skewY.get() } : void 0,
         ...props,
         children: typeof children === "function" ? children(currentVelocity) : children
       }
@@ -1491,18 +1604,53 @@ var Spotlight = forwardRef17(
     const mouseY = useMotionValue5(0);
     const x = useSpring6(mouseX, isReducedMotion ? { duration: 0 } : springConfig);
     const y = useSpring6(mouseY, isReducedMotion ? { duration: 0 } : springConfig);
-    const handleMouseMove = useCallback4((e) => {
-      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
-      if (!internalRef.current) return;
-      const rect = internalRef.current.getBoundingClientRect();
+    const rectRef = useRef8(null);
+    const updateRect = useCallback4(() => {
+      if (internalRef.current) {
+        rectRef.current = internalRef.current.getBoundingClientRect();
+      }
+    }, []);
+    useEffect15(() => {
+      updateRect();
+      window.addEventListener("scroll", updateRect, { passive: true });
+      window.addEventListener("resize", updateRect, { passive: true });
+      return () => {
+        window.removeEventListener("scroll", updateRect);
+        window.removeEventListener("resize", updateRect);
+      };
+    }, [updateRect]);
+    const rafId = useRef8(0);
+    const latestEvent = useRef8(null);
+    const processMouseMove = useCallback4(() => {
+      rafId.current = 0;
+      const e = latestEvent.current;
+      if (!e) return;
+      const rect = rectRef.current;
+      if (!rect) return;
       mouseX.set(e.clientX - rect.left);
       mouseY.set(e.clientY - rect.top);
-    }, [mouseX, mouseY, disabled, isReducedMotion, disableOnTouch, isTouchDevice]);
+    }, [mouseX, mouseY]);
+    const handleMouseMove = useCallback4((e) => {
+      if (disabled || isReducedMotion || disableOnTouch && isTouchDevice) return;
+      if (!rectRef.current && internalRef.current) {
+        rectRef.current = internalRef.current.getBoundingClientRect();
+      }
+      latestEvent.current = e;
+      if (!rafId.current) {
+        rafId.current = requestAnimationFrame(processMouseMove);
+      }
+    }, [disabled, isReducedMotion, disableOnTouch, isTouchDevice, processMouseMove]);
+    useEffect15(() => {
+      return () => {
+        if (rafId.current) cancelAnimationFrame(rafId.current);
+      };
+    }, []);
+    const cappedBlur = Math.min(blur, 20);
+    const background = useMotionTemplate2`radial-gradient(${size}px circle at ${x}px ${y}px, ${color}, transparent 100%)`;
+    const borderBackground = borderColor ? useMotionTemplate2`radial-gradient(${size}px circle at ${x}px ${y}px, ${borderColor}, transparent 100%)` : background;
     if (disabled || isReducedMotion) {
       return /* @__PURE__ */ jsx19("div", { ref: mergedRef, className, style: { position: "relative", ...style }, ...props, children });
     }
-    const background = useMotionTemplate2`radial-gradient(${size}px circle at ${x}px ${y}px, ${color}, transparent 100%)`;
-    const borderBackground = borderColor ? useMotionTemplate2`radial-gradient(${size}px circle at ${x}px ${y}px, ${borderColor}, transparent 100%)` : background;
     return /* @__PURE__ */ jsxs6(
       "div",
       {
@@ -1518,14 +1666,14 @@ var Spotlight = forwardRef17(
               style: {
                 position: "absolute",
                 inset: -1,
-                // Adjust based on desired border width
                 background: borderBackground,
                 opacity,
                 zIndex: 0,
                 pointerEvents: "none",
                 borderRadius: "inherit",
                 maskImage: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-                maskComposite: "exclude"
+                maskComposite: "exclude",
+                willChange: "background"
               }
             }
           ),
@@ -1542,7 +1690,8 @@ var Spotlight = forwardRef17(
                 pointerEvents: "none",
                 borderRadius: "inherit",
                 mixBlendMode: mode === "reveal" ? "overlay" : "normal",
-                filter: `blur(${blur}px)`
+                filter: `blur(${cappedBlur}px)`,
+                willChange: "background"
               }
             }
           )
@@ -1983,7 +2132,7 @@ function AnimatedListComponent({
 var AnimatedList = forwardRef23(AnimatedListComponent);
 
 // src/primitives/24-marquee.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect18, useRef as useRef10, useState as useState13 } from "react";
+import { forwardRef as forwardRef24, useEffect as useEffect18, useMemo as useMemo3, useRef as useRef10, useState as useState13 } from "react";
 import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
 var Marquee = forwardRef24(
   ({
@@ -2014,18 +2163,25 @@ var Marquee = forwardRef24(
     const calcDir = dirFactor * revFactor;
     useEffect18(() => {
       if (disabled || isReducedMotion) return;
+      let resizeTimeout;
       const observer = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          if (entry.target === containerRef.current) {
-            setContainerSize(isHorizontal ? entry.contentRect.width : entry.contentRect.height);
-          } else if (entry.target === contentRef.current) {
-            setContentSize(isHorizontal ? entry.contentRect.width : entry.contentRect.height);
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          for (const entry of entries) {
+            if (entry.target === containerRef.current) {
+              setContainerSize(isHorizontal ? entry.contentRect.width : entry.contentRect.height);
+            } else if (entry.target === contentRef.current) {
+              setContentSize(isHorizontal ? entry.contentRect.width : entry.contentRect.height);
+            }
           }
-        }
+        }, 100);
       });
       if (containerRef.current) observer.observe(containerRef.current);
       if (contentRef.current) observer.observe(contentRef.current);
-      return () => observer.disconnect();
+      return () => {
+        clearTimeout(resizeTimeout);
+        observer.disconnect();
+      };
     }, [isHorizontal, disabled, isReducedMotion]);
     if (disabled || isReducedMotion) {
       return /* @__PURE__ */ jsx26("div", { ref: mergedRef, className, style: { display: "flex", flexWrap: "wrap", gap, ...style }, ...props, children });
@@ -2034,12 +2190,12 @@ var Marquee = forwardRef24(
     const duration = (contentSize + gap) / speed;
     const keyframesName = `flux-marquee-${calcDir < 0 ? "negative" : "positive"}-${isHorizontal ? "x" : "y"}`;
     const translateProp = isHorizontal ? "translateX" : "translateY";
-    const cssString = `
+    const cssString = useMemo3(() => `
       @keyframes ${keyframesName} {
         0% { transform: ${translateProp}(${calcDir < 0 ? "0" : `-${contentSize + gap}px`}); }
         100% { transform: ${translateProp}(${calcDir < 0 ? `-${contentSize + gap}px` : "0"}); }
       }
-    `;
+    `, [keyframesName, translateProp, calcDir, contentSize, gap]);
     const gradientMask = gradientWidth > 0 && isHorizontal ? `linear-gradient(to right, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)` : gradientWidth > 0 && !isHorizontal ? `linear-gradient(to bottom, transparent, black ${gradientWidth}px, black calc(100% - ${gradientWidth}px), transparent)` : void 0;
     return /* @__PURE__ */ jsxs7(
       "div",
@@ -2068,7 +2224,8 @@ var Marquee = forwardRef24(
                 width: isHorizontal ? "fit-content" : "100%",
                 height: isHorizontal ? "100%" : "fit-content",
                 animation: `${keyframesName} ${duration}s linear infinite`,
-                animationPlayState: "inherit"
+                animationPlayState: "inherit",
+                willChange: "transform"
               },
               onMouseEnter: (e) => {
                 if (pauseOnHover) e.currentTarget.style.animationPlayState = "paused";
@@ -2102,8 +2259,8 @@ var Marquee = forwardRef24(
 Marquee.displayName = "Marquee";
 
 // src/primitives/25-dock.tsx
-import React26, { forwardRef as forwardRef25, useRef as useRef11 } from "react";
-import { motion as motion23, useMotionValue as useMotionValue7, useSpring as useSpring8, useTransform as useTransform3 } from "motion/react";
+import React26, { forwardRef as forwardRef25, useCallback as useCallback6, useMemo as useMemo4, useRef as useRef11 } from "react";
+import { motion as motion23, useMotionValue as useMotionValue7, useSpring as useSpring8, useTransform as useTransform4 } from "motion/react";
 import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
 var DockContext = React26.createContext({
   mouseX: null,
@@ -2132,10 +2289,37 @@ var DockRoot = forwardRef25(
     const mergedRef = useMergedRef(ref, internalRef);
     const mouseX = useMotionValue7(Infinity);
     const mouseY = useMotionValue7(Infinity);
+    const rafId = useRef11(0);
+    const latestEvent = useRef11(null);
+    const processMouseMove = useCallback6(() => {
+      rafId.current = 0;
+      const e = latestEvent.current;
+      if (!e) return;
+      mouseX.set(e.clientX);
+      mouseY.set(e.clientY);
+    }, [mouseX, mouseY]);
+    const handleMouseMove = useCallback6((e) => {
+      latestEvent.current = { clientX: e.clientX, clientY: e.clientY };
+      if (!rafId.current) {
+        rafId.current = requestAnimationFrame(processMouseMove);
+      }
+    }, [processMouseMove]);
+    const handleMouseLeave = useCallback6(() => {
+      mouseX.set(Infinity);
+      mouseY.set(Infinity);
+    }, [mouseX, mouseY]);
+    const contextValue = useMemo4(() => ({
+      mouseX,
+      mouseY,
+      distance,
+      magnification,
+      direction,
+      isReducedMotion: false
+    }), [mouseX, mouseY, distance, magnification, direction]);
     if (disabled || isReducedMotion) {
       return /* @__PURE__ */ jsx27("div", { ref: mergedRef, className, style: { display: "flex", flexDirection: direction === "horizontal" ? "row" : "column", gap, ...style }, ...props, children });
     }
-    return /* @__PURE__ */ jsx27(DockContext.Provider, { value: { mouseX, mouseY, distance, magnification, direction, isReducedMotion: false }, children: /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx27(DockContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx27(
       motion23.div,
       {
         ref: mergedRef,
@@ -2147,14 +2331,8 @@ var DockRoot = forwardRef25(
           alignItems: "center",
           ...style
         },
-        onMouseMove: (e) => {
-          mouseX.set(e.clientX);
-          mouseY.set(e.clientY);
-        },
-        onMouseLeave: () => {
-          mouseX.set(Infinity);
-          mouseY.set(Infinity);
-        },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
         ...props,
         children
       }
@@ -2168,13 +2346,30 @@ var DockItem = forwardRef25(
     const itemRef = useRef11(null);
     const mergedRef = useMergedRef(ref, itemRef);
     const distVar = direction === "horizontal" ? mouseX : mouseY;
-    const distanceCalc = useTransform3(distVar, (val) => {
-      if (val === Infinity || !itemRef.current) return distance;
-      const bounds = itemRef.current.getBoundingClientRect();
+    const rectRef = useRef11(null);
+    React26.useEffect(() => {
+      const el = itemRef.current;
+      if (!el) return;
+      const updateRect = () => {
+        rectRef.current = el.getBoundingClientRect();
+      };
+      updateRect();
+      const ro = new ResizeObserver(updateRect);
+      ro.observe(el);
+      window.addEventListener("scroll", updateRect, { passive: true });
+      return () => {
+        ro.disconnect();
+        window.removeEventListener("scroll", updateRect);
+      };
+    }, []);
+    const distanceCalc = useTransform4(distVar, (val) => {
+      if (val === Infinity) return distance;
+      const bounds = rectRef.current;
+      if (!bounds) return distance;
       const center = direction === "horizontal" ? bounds.x + bounds.width / 2 : bounds.y + bounds.height / 2;
       return Math.abs(val - center);
     });
-    const scaleRaw = useTransform3(distanceCalc, [0, distance], [magnification, 1]);
+    const scaleRaw = useTransform4(distanceCalc, [0, distance], [magnification, 1]);
     const scale = useSpring8(scaleRaw, { mass: 0.1, stiffness: 300, damping: 20 });
     const [isHovered, setIsHovered] = React26.useState(false);
     if (isReducedMotion) {
@@ -2190,11 +2385,11 @@ var DockItem = forwardRef25(
         style: {
           scale,
           transformOrigin: direction === "horizontal" ? "bottom" : "left",
-          // Common dock origin
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           position: "relative",
+          willChange: "transform",
           ...style
         },
         className,
@@ -2342,6 +2537,7 @@ var ScrollProgress = forwardRef27(
             ...dimStyles,
             backgroundColor: color,
             zIndex: 9999,
+            willChange: "transform",
             ...style
           },
           ...props
@@ -2363,7 +2559,8 @@ var ScrollProgress = forwardRef27(
             scaleX: axis === "x" ? scaleValue : void 0,
             scaleY: axis === "y" ? scaleValue : void 0,
             transformOrigin: "0% 0%",
-            zIndex: -1
+            zIndex: -1,
+            willChange: "transform"
           }
         }
       )
@@ -2374,7 +2571,7 @@ ScrollProgress.displayName = "ScrollProgress";
 
 // src/primitives/28-parallax.tsx
 import { forwardRef as forwardRef28, useRef as useRef14 } from "react";
-import { motion as motion25, useScroll as useScroll4, useTransform as useTransform4 } from "motion/react";
+import { motion as motion25, useScroll as useScroll4, useTransform as useTransform5 } from "motion/react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Parallax = forwardRef28(
   ({
@@ -2397,7 +2594,7 @@ var Parallax = forwardRef28(
     });
     const transformStart = direction === "up" ? offset : direction === "down" ? -offset : direction === "left" ? offset : -offset;
     const transformEnd = direction === "up" ? -offset : direction === "down" ? offset : direction === "left" ? -offset : offset;
-    const translate = useTransform4(scrollYProgress, [0, 1], [transformStart, transformEnd]);
+    const translate = useTransform5(scrollYProgress, [0, 1], [transformStart, transformEnd]);
     if (disabled || isReducedMotion) {
       return /* @__PURE__ */ jsx30("div", { ref: mergedRef, className, style, ...props, children });
     }
@@ -2409,7 +2606,8 @@ var Parallax = forwardRef28(
         style: {
           ...style,
           y: direction === "up" || direction === "down" ? translate : 0,
-          x: direction === "left" || direction === "right" ? translate : 0
+          x: direction === "left" || direction === "right" ? translate : 0,
+          willChange: "transform"
         },
         ...props,
         children
@@ -2600,18 +2798,6 @@ var Aurora = forwardRef31(
     const internalRef = useRef17(null);
     const mergedRef = useMergedRef(ref, internalRef);
     if (disabled) return null;
-    const baseStyle = {
-      position: "absolute",
-      top: "-50%",
-      left: "-50%",
-      width: "200%",
-      height: "200%",
-      opacity,
-      mixBlendMode: blendMode,
-      filter: `blur(${blur}px)`,
-      pointerEvents: "none",
-      zIndex: 0
-    };
     const gradientString = `linear-gradient(-45deg, ${colors.join(", ")})`;
     return /* @__PURE__ */ jsxs12(
       "div",
@@ -2631,18 +2817,28 @@ var Aurora = forwardRef31(
             "div",
             {
               style: {
-                ...baseStyle,
+                position: "absolute",
+                top: "-50%",
+                left: "-50%",
+                width: "200%",
+                height: "200%",
+                opacity,
+                mixBlendMode: blendMode,
+                filter: `blur(${blur}px)`,
+                pointerEvents: "none",
+                zIndex: 0,
                 background: gradientString,
                 backgroundSize: "400% 400%",
+                willChange: "transform",
                 animation: isReducedMotion ? "none" : `flux-aurora ${speed}s ease infinite`
               }
             }
           ),
           /* @__PURE__ */ jsx33("style", { children: `
             @keyframes flux-aurora {
-              0% { background-position: 0% 50%; transform: rotate(0deg); }
-              50% { background-position: 100% 50%; transform: rotate(180deg); }
-              100% { background-position: 0% 50%; transform: rotate(360deg); }
+              0% { transform: rotate(0deg) scale(1); background-position: 0% 50%; }
+              50% { transform: rotate(180deg) scale(1.05); background-position: 100% 50%; }
+              100% { transform: rotate(360deg) scale(1); background-position: 0% 50%; }
             }
           ` })
         ]
@@ -2671,7 +2867,6 @@ var MeshGradient = forwardRef32(
     const baseStyle = {
       position: "absolute",
       inset: -50,
-      // bleed edge to avoid seeing bounds during rotation
       opacity: 0.8,
       filter: "blur(60px)",
       pointerEvents: "none",
@@ -2682,7 +2877,8 @@ var MeshGradient = forwardRef32(
         radial-gradient(circle at 100% 100%, ${colors[2]} 0%, transparent 50%),
         radial-gradient(circle at 0% 0%, ${colors[3]} 0%, transparent 50%)
       `,
-      backgroundSize: "200% 200%"
+      backgroundSize: "200% 200%",
+      willChange: "transform"
     };
     return /* @__PURE__ */ jsxs13(
       "div",
@@ -2709,9 +2905,9 @@ var MeshGradient = forwardRef32(
           ),
           /* @__PURE__ */ jsx34("style", { children: `
             @keyframes flux-mesh {
-              0% { background-position: 0% 0%; transform: scale(1) rotate(0deg); }
-              50% { background-position: 100% 100%; transform: scale(1.1) rotate(5deg); }
-              100% { background-position: 0% 0%; transform: scale(1) rotate(-5deg); }
+              0% { transform: scale(1) rotate(0deg); background-position: 0% 0%; }
+              50% { transform: scale(1.1) rotate(5deg); background-position: 100% 100%; }
+              100% { transform: scale(1) rotate(-5deg); background-position: 0% 0%; }
             }
           ` })
         ]
@@ -2802,18 +2998,29 @@ var Particles = forwardRef33(
       };
       resizeCanvas();
       animate();
-      const handleMouseMove = (e) => {
-        if (!internalRef.current) return;
+      let mouseRafId = 0;
+      let latestMouseEvent = null;
+      const processMouseMove = () => {
+        mouseRafId = 0;
+        const e = latestMouseEvent;
+        if (!e || !internalRef.current) return;
         const rect = internalRef.current.getBoundingClientRect();
         mouse.current.x = e.clientX - rect.left - canvasSize.current.w / 2;
         mouse.current.y = e.clientY - rect.top - canvasSize.current.h / 2;
       };
+      const handleMouseMove = (e) => {
+        latestMouseEvent = e;
+        if (!mouseRafId) {
+          mouseRafId = requestAnimationFrame(processMouseMove);
+        }
+      };
       window.addEventListener("resize", resizeCanvas);
-      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mousemove", handleMouseMove, { passive: true });
       return () => {
         window.removeEventListener("resize", resizeCanvas);
         window.removeEventListener("mousemove", handleMouseMove);
         if (animationFrameId.current) window.cancelAnimationFrame(animationFrameId.current);
+        if (mouseRafId) cancelAnimationFrame(mouseRafId);
       };
     }, [color, quantity, staticity, ease, disabled, isReducedMotion]);
     if (disabled) return null;
@@ -2910,8 +3117,7 @@ var Noise = forwardRef35(
 Noise.displayName = "Noise";
 
 // src/primitives/36-streaming-text.tsx
-import React37, { forwardRef as forwardRef36, useEffect as useEffect22, useState as useState16 } from "react";
-import { motion as motion27 } from "motion/react";
+import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef20 } from "react";
 import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
 var StreamingText = forwardRef36(
   ({
@@ -2927,43 +3133,71 @@ var StreamingText = forwardRef36(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = React37.useRef(null);
+    const internalRef = useRef20(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    const [displayedText, setDisplayedText] = useState16("");
-    const [isComplete, setIsComplete] = useState16(false);
+    const textNodeRef = useRef20(null);
+    const cursorRef = useRef20(null);
+    const onCompleteRef = useRef20(onComplete);
+    onCompleteRef.current = onComplete;
     useEffect22(() => {
+      const el = internalRef.current;
+      if (!el) return;
       if (disabled || isReducedMotion) {
-        setDisplayedText(text);
-        setIsComplete(true);
-        onComplete?.();
+        if (!textNodeRef.current) {
+          textNodeRef.current = document.createTextNode(text);
+          el.insertBefore(textNodeRef.current, el.firstChild);
+        } else {
+          textNodeRef.current.textContent = text;
+        }
+        if (cursorRef.current) {
+          cursorRef.current.style.display = "none";
+        }
+        onCompleteRef.current?.();
         return;
       }
-      setDisplayedText("");
-      setIsComplete(false);
+      if (!textNodeRef.current) {
+        textNodeRef.current = document.createTextNode("");
+        el.insertBefore(textNodeRef.current, el.firstChild);
+      } else {
+        textNodeRef.current.textContent = "";
+      }
+      if (cursorRef.current) {
+        cursorRef.current.style.display = "inline-block";
+      }
       let i = 0;
       const intervalId = setInterval(() => {
-        setDisplayedText(text.slice(0, i + 1));
+        if (textNodeRef.current) {
+          textNodeRef.current.textContent = text.slice(0, i + 1);
+        }
         i++;
         if (i >= text.length) {
           clearInterval(intervalId);
-          setIsComplete(true);
-          onComplete?.();
+          if (cursorRef.current) {
+            cursorRef.current.style.display = "none";
+          }
+          onCompleteRef.current?.();
         }
       }, speed);
       return () => clearInterval(intervalId);
-    }, [text, speed, disabled, isReducedMotion, onComplete]);
+    }, [text, speed, disabled, isReducedMotion]);
     return /* @__PURE__ */ jsxs14("span", { ref: mergedRef, className, style: { whiteSpace: "pre-wrap", ...style }, ...props, children: [
-      displayedText,
-      cursor && (!isComplete || isReducedMotion === false) && /* @__PURE__ */ jsx38(
-        motion27.span,
+      cursor && /* @__PURE__ */ jsx38(
+        "span",
         {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          transition: { repeat: Infinity, duration: 0.8, repeatType: "reverse" },
-          style: { display: "inline-block", marginLeft: "2px", fontWeight: "bold" },
+          ref: cursorRef,
+          style: {
+            display: "inline-block",
+            marginLeft: "2px",
+            fontWeight: "bold",
+            animation: "flux-cursor-blink 0.8s step-end infinite"
+          },
           children: cursorChar
         }
-      )
+      ),
+      /* @__PURE__ */ jsx38("style", { children: `@keyframes flux-cursor-blink {
+                        0%, 100% { opacity: 1; }
+                        50% { opacity: 0; }
+                    }` })
     ] });
   }
 );
@@ -2971,7 +3205,7 @@ StreamingText.displayName = "StreamingText";
 
 // src/primitives/37-typing-indicator.tsx
 import React38, { forwardRef as forwardRef37 } from "react";
-import { motion as motion28 } from "motion/react";
+import { motion as motion27 } from "motion/react";
 import { jsx as jsx39 } from "react/jsx-runtime";
 var TypingIndicator = forwardRef37(
   ({
@@ -3001,7 +3235,7 @@ var TypingIndicator = forwardRef37(
         style: { display: "inline-flex", alignItems: "center", gap: size / 2, ...style },
         ...props,
         children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx39(
-          motion28.div,
+          motion27.div,
           {
             style: dotStyle,
             animate: isReducedMotion ? void 0 : {
@@ -3025,7 +3259,7 @@ TypingIndicator.displayName = "TypingIndicator";
 
 // src/primitives/38-skeleton.tsx
 import React39, { forwardRef as forwardRef38 } from "react";
-import { motion as motion29 } from "motion/react";
+import { motion as motion28 } from "motion/react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var Skeleton = forwardRef38(
   ({
@@ -3070,7 +3304,7 @@ var Skeleton = forwardRef38(
         },
         ...props,
         children: !isReducedMotion && /* @__PURE__ */ jsx40(
-          motion29.div,
+          motion28.div,
           {
             style: {
               position: "absolute",
@@ -3097,7 +3331,7 @@ Skeleton.displayName = "Skeleton";
 
 // src/primitives/39-ai-message.tsx
 import React40, { forwardRef as forwardRef39 } from "react";
-import { motion as motion30 } from "motion/react";
+import { motion as motion29 } from "motion/react";
 import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
 var AIMessage = forwardRef39(
   ({
@@ -3124,7 +3358,7 @@ var AIMessage = forwardRef39(
     const alignment = role === "user" ? "flex-end" : "flex-start";
     const origin = role === "user" ? "bottom right" : "bottom left";
     return /* @__PURE__ */ jsxs15(
-      motion30.div,
+      motion29.div,
       {
         ref: mergedRef,
         className,
@@ -3141,7 +3375,7 @@ var AIMessage = forwardRef39(
         ...props,
         children: [
           role !== "user" && avatar && /* @__PURE__ */ jsx41(
-            motion30.div,
+            motion29.div,
             {
               initial: isReducedMotion ? { opacity: 0 } : { opacity: 0, scale: 0 },
               animate: { opacity: 1, scale: 1 },
@@ -3151,7 +3385,7 @@ var AIMessage = forwardRef39(
           ),
           /* @__PURE__ */ jsx41("div", { style: { flex: 1, maxWidth: "80%" }, children }),
           role === "user" && avatar && /* @__PURE__ */ jsx41(
-            motion30.div,
+            motion29.div,
             {
               initial: isReducedMotion ? { opacity: 0 } : { opacity: 0, scale: 0 },
               animate: { opacity: 1, scale: 1 },
@@ -3168,7 +3402,7 @@ AIMessage.displayName = "AIMessage";
 
 // src/primitives/40-hero-highlight.tsx
 import React41, { forwardRef as forwardRef40 } from "react";
-import { motion as motion31, useMotionTemplate as useMotionTemplate3, useMotionValue as useMotionValue8 } from "motion/react";
+import { motion as motion30, useMotionTemplate as useMotionTemplate3, useMotionValue as useMotionValue8 } from "motion/react";
 import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
 var HeroHighlight = forwardRef40(
   ({
@@ -3207,7 +3441,7 @@ var HeroHighlight = forwardRef40(
         children: [
           /* @__PURE__ */ jsx42("div", { className: "absolute inset-0 bg-dot-thick-neutral-300 dark:bg-dot-thick-neutral-800 pointer-events-none" }),
           /* @__PURE__ */ jsx42(
-            motion31.div,
+            motion30.div,
             {
               className: "absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100 pointer-events-none bg-dot-thick-teal-500",
               style: {
@@ -3241,7 +3475,7 @@ var Highlight = ({
 }) => {
   const isReducedMotion = useReducedMotion();
   return /* @__PURE__ */ jsx42(
-    motion31.span,
+    motion30.span,
     {
       initial: {
         backgroundSize: "0% 100%"