@nikitph/flux-ui 0.3.2 → 0.3.5

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
       }
@@ -236,6 +236,7 @@ Reveal.displayName = "Reveal";
 import React3 from "react";
 import { AnimatePresence, motion as motion2 } from "motion/react";
 import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+var MotionSlot = motion2.create(Slot);
 var Presence = ({
   children,
   enterFrom = "below",
@@ -279,14 +280,14 @@ var Presence = ({
   const animate = { opacity: 1, x: 0, y: 0, scale: 1 };
   return /* @__PURE__ */ jsx4(AnimatePresence, { mode, onExitComplete, children: React3.Children.map(children, (child) => {
     if (!React3.isValidElement(child)) return child;
-    const MotionChild = motion2.create(Slot);
     return /* @__PURE__ */ jsx4(
-      MotionChild,
+      MotionSlot,
       {
         initial,
         animate,
         exit: { ...exit, transition: exitSpring },
         transition: enterSpring,
+        style: { willChange: "transform, opacity" },
         children: child
       },
       child.key || Math.random().toString(36)
@@ -295,9 +296,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 MotionSlot2 = motion3.create(Slot);
 var Stagger = forwardRef3(
   ({
     children,
@@ -336,8 +338,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 +350,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 +366,13 @@ var Stagger = forwardRef3(
           delay = randomSeed / 233280 * count * interval;
         }
       }
-      const MotionChild = motion3.create(Slot);
       return /* @__PURE__ */ jsx5(
-        MotionChild,
+        MotionSlot2,
         {
           initial,
           animate: shouldAnimate ? target : initial,
           transition: { ...springConfig, delay },
+          style: { willChange: "transform, opacity" },
           children: child
         },
         child.key || i
@@ -573,9 +575,9 @@ var MorphText = forwardRef6(
         /* @__PURE__ */ jsx8(AnimatePresence2, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx8(
           motion6.span,
           {
-            initial: { opacity: 0, filter: "blur(4px)", y: 10 },
-            animate: { opacity: 1, filter: "blur(0px)", y: 0 },
-            exit: { opacity: 0, filter: "blur(4px)", y: -10 },
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: -10 },
             transition: springConfig,
             style: { display: "inline-block" },
             children: currentText
@@ -669,7 +671,8 @@ var FlipCard = forwardRef7(
                 width: "100%",
                 height: "100%",
                 backfaceVisibility: "hidden",
-                transformStyle: "preserve-3d"
+                transformStyle: "preserve-3d",
+                willChange: "transform"
               },
               children: front
             }
@@ -685,7 +688,8 @@ var FlipCard = forwardRef7(
                 width: "100%",
                 height: "100%",
                 backfaceVisibility: "hidden",
-                transformStyle: "preserve-3d"
+                transformStyle: "preserve-3d",
+                willChange: "transform"
               },
               children: back
             }
@@ -797,10 +801,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 +840,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 +863,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 +963,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 +1002,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 +1018,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 +1039,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 +1334,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 +1366,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 +1425,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 +1449,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 +1462,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 +1479,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 +1509,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 +1534,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 +1565,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 +1607,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 +1669,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 +1693,8 @@ var Spotlight = forwardRef17(
                 pointerEvents: "none",
                 borderRadius: "inherit",
                 mixBlendMode: mode === "reveal" ? "overlay" : "normal",
-                filter: `blur(${blur}px)`
+                filter: `blur(${cappedBlur}px)`,
+                willChange: "background"
               }
             }
           )
@@ -1554,7 +1706,7 @@ var Spotlight = forwardRef17(
 Spotlight.displayName = "Spotlight";
 
 // src/primitives/18-follow-cursor.tsx
-import React19, { forwardRef as forwardRef18, useCallback as useCallback5, useEffect as useEffect16, useState as useState11 } from "react";
+import React19, { forwardRef as forwardRef18, useCallback as useCallback5, useEffect as useEffect16, useRef as useRef9, useState as useState11 } from "react";
 import { motion as motion18, useMotionValue as useMotionValue6, useSpring as useSpring7 } from "motion/react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var FollowCursor = forwardRef18(
@@ -1589,6 +1741,7 @@ var FollowCursor = forwardRef18(
     const smoothY = useSpring7(y, isReducedMotion ? { duration: 0 } : springConfig);
     const smoothR = useSpring7(r, isReducedMotion ? { duration: 0 } : springConfig);
     const [isVisible, setIsVisible] = useState11(visible && !hideOnLeave);
+    const prevPos = useRef9({ x: 0, y: 0 });
     const updatePosition = useCallback5((clientX, clientY) => {
       let posX = clientX + offset.x;
       let posY = clientY + offset.y;
@@ -1598,21 +1751,34 @@ var FollowCursor = forwardRef18(
         posY = clientY - parentRect.top + offset.y;
       }
       if (rotate) {
-        const dx = posX - x.get();
-        const dy = posY - y.get();
+        const dx = posX - prevPos.current.x;
+        const dy = posY - prevPos.current.y;
         if (dx !== 0 || dy !== 0) {
           const angle = Math.atan2(dy, dx) * (180 / Math.PI);
           r.set(angle);
         }
       }
+      prevPos.current.x = posX;
+      prevPos.current.y = posY;
       x.set(posX);
       y.set(posY);
     }, [x, y, r, rotate, offset, containTo]);
+    const rafId = useRef9(0);
+    const latestMouse = useRef9(null);
+    const processMouseMove = useCallback5(() => {
+      rafId.current = 0;
+      const e = latestMouse.current;
+      if (!e) return;
+      updatePosition(e.x, e.y);
+    }, [updatePosition]);
     useEffect16(() => {
       if (disabled || isReducedMotion) return;
       const target = containTo === "viewport" ? window : internalRef.current?.parentElement || window;
       const handleMouseMove = (e) => {
-        updatePosition(e.clientX, e.clientY);
+        latestMouse.current = { x: e.clientX, y: e.clientY };
+        if (!rafId.current) {
+          rafId.current = requestAnimationFrame(processMouseMove);
+        }
         if (hideOnLeave && !isVisible) setIsVisible(visible);
       };
       const handleMouseEnter = () => {
@@ -1621,15 +1787,16 @@ var FollowCursor = forwardRef18(
       const handleMouseLeave = () => {
         if (hideOnLeave) setIsVisible(false);
       };
-      target.addEventListener("mousemove", handleMouseMove);
-      target.addEventListener("mouseenter", handleMouseEnter);
-      target.addEventListener("mouseleave", handleMouseLeave);
+      target.addEventListener("mousemove", handleMouseMove, { passive: true });
+      target.addEventListener("mouseenter", handleMouseEnter, { passive: true });
+      target.addEventListener("mouseleave", handleMouseLeave, { passive: true });
       return () => {
         target.removeEventListener("mousemove", handleMouseMove);
         target.removeEventListener("mouseenter", handleMouseEnter);
         target.removeEventListener("mouseleave", handleMouseLeave);
+        if (rafId.current) cancelAnimationFrame(rafId.current);
       };
-    }, [disabled, isReducedMotion, containTo, updatePosition, hideOnLeave, visible, isVisible]);
+    }, [disabled, isReducedMotion, containTo, processMouseMove, hideOnLeave, visible, isVisible]);
     useEffect16(() => {
       setIsVisible(visible);
     }, [visible]);
@@ -1653,9 +1820,8 @@ var FollowCursor = forwardRef18(
           rotate: smoothR,
           opacity: isVisible ? 1 : 0,
           pointerEvents: "none",
-          // Cursor followers typically shouldn't block events
           zIndex: 50,
-          // Usually want cursor follow to be high up
+          willChange: "transform",
           ...style
         },
         animate: { opacity: isVisible ? 1 : 0 },
@@ -1714,7 +1880,7 @@ var Morph = forwardRef19(
 Morph.displayName = "Morph";
 
 // src/primitives/20-fluid-layout.tsx
-import { forwardRef as forwardRef20, useRef as useRef9 } from "react";
+import { forwardRef as forwardRef20, useRef as useRef10 } from "react";
 import { motion as motion20 } from "motion/react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var FluidLayout = forwardRef20(
@@ -1731,7 +1897,7 @@ var FluidLayout = forwardRef20(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef9(null);
+    const internalRef = useRef10(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const springConfig = resolveMotion(physics2, void 0, isReducedMotion);
     if (disabled || isReducedMotion) {
@@ -1983,7 +2149,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 useRef11, useState as useState13 } from "react";
 import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
 var Marquee = forwardRef24(
   ({
@@ -2002,9 +2168,9 @@ var Marquee = forwardRef24(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef10(null);
-    const containerRef = useRef10(null);
-    const contentRef = useRef10(null);
+    const internalRef = useRef11(null);
+    const containerRef = useRef11(null);
+    const contentRef = useRef11(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const [contentSize, setContentSize] = useState13(0);
     const [containerSize, setContainerSize] = useState13(0);
@@ -2014,18 +2180,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 +2207,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 +2241,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 +2276,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 useRef12 } 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,
@@ -2128,14 +2302,41 @@ var DockRoot = forwardRef25(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef11(null);
+    const internalRef = useRef12(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const mouseX = useMotionValue7(Infinity);
     const mouseY = useMotionValue7(Infinity);
+    const rafId = useRef12(0);
+    const latestEvent = useRef12(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 +2348,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
       }
@@ -2165,16 +2360,33 @@ DockRoot.displayName = "Dock";
 var DockItem = forwardRef25(
   ({ children, label, onClick, className, style, ...props }, ref) => {
     const { mouseX, mouseY, distance, magnification, direction, isReducedMotion } = React26.useContext(DockContext);
-    const itemRef = useRef11(null);
+    const itemRef = useRef12(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 = useRef12(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 +2402,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,
@@ -2230,7 +2442,7 @@ DockItem.displayName = "Dock.Item";
 var Dock = Object.assign(DockRoot, { Item: DockItem });
 
 // src/primitives/26-infinite-scroll.tsx
-import { forwardRef as forwardRef26, useEffect as useEffect19, useRef as useRef12, useState as useState14 } from "react";
+import { forwardRef as forwardRef26, useEffect as useEffect19, useRef as useRef13, useState as useState14 } from "react";
 import { jsx as jsx28, jsxs as jsxs9 } from "react/jsx-runtime";
 function InfiniteScrollComponent({
   items,
@@ -2249,9 +2461,9 @@ function InfiniteScrollComponent({
   disabled = false
 }, ref) {
   const isReducedMotion = useReducedMotion();
-  const internalRef = useRef12(null);
-  const scrollRef = useRef12(null);
-  const endMarkerRef = useRef12(null);
+  const internalRef = useRef13(null);
+  const scrollRef = useRef13(null);
+  const endMarkerRef = useRef13(null);
   const mergedRef = useMergedRef(ref, internalRef, scrollRef);
   const [isLoading, setIsLoading] = useState14(false);
   useEffect19(() => {
@@ -2296,7 +2508,7 @@ function InfiniteScrollComponent({
 var InfiniteScroll = forwardRef26(InfiniteScrollComponent);
 
 // src/primitives/27-scroll-progress.tsx
-import { forwardRef as forwardRef27, useRef as useRef13 } from "react";
+import { forwardRef as forwardRef27, useRef as useRef14 } from "react";
 import { motion as motion24, useScroll as useScroll3, useSpring as useSpring9 } from "motion/react";
 import { jsx as jsx29, jsxs as jsxs10 } from "react/jsx-runtime";
 var ScrollProgress = forwardRef27(
@@ -2314,7 +2526,7 @@ var ScrollProgress = forwardRef27(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef13(null);
+    const internalRef = useRef14(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const { scrollYProgress, scrollXProgress } = useScroll3({
       container: container?.current ? container : void 0
@@ -2342,6 +2554,7 @@ var ScrollProgress = forwardRef27(
             ...dimStyles,
             backgroundColor: color,
             zIndex: 9999,
+            willChange: "transform",
             ...style
           },
           ...props
@@ -2363,7 +2576,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"
           }
         }
       )
@@ -2373,8 +2587,8 @@ var ScrollProgress = forwardRef27(
 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 { forwardRef as forwardRef28, useRef as useRef15 } from "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(
   ({
@@ -2388,7 +2602,7 @@ var Parallax = forwardRef28(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef14(null);
+    const internalRef = useRef15(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const { scrollYProgress } = useScroll4({
       target: internalRef,
@@ -2397,7 +2611,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 +2623,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
@@ -2420,7 +2635,7 @@ var Parallax = forwardRef28(
 Parallax.displayName = "Parallax";
 
 // src/primitives/29-sticky-scroll.tsx
-import { forwardRef as forwardRef29, useEffect as useEffect20, useRef as useRef15, useState as useState15 } from "react";
+import { forwardRef as forwardRef29, useEffect as useEffect20, useRef as useRef16, useState as useState15 } from "react";
 import { motion as motion26, useScroll as useScroll5 } from "motion/react";
 import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 var StickyScroll = forwardRef29(
@@ -2434,7 +2649,7 @@ var StickyScroll = forwardRef29(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef15(null);
+    const internalRef = useRef16(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const [activeSection, setActiveSection] = useState15(0);
     const { scrollYProgress } = useScroll5({
@@ -2442,16 +2657,30 @@ var StickyScroll = forwardRef29(
       container: container?.current ? container : void 0,
       offset: ["start start", "end end"]
     });
+    const lastSectionRef = useRef16(0);
     useEffect20(() => {
-      return scrollYProgress.onChange((latest) => {
+      let rafId = 0;
+      const unsubscribe = scrollYProgress.on("change", (latest) => {
         const cardsCount = content.length;
         const progressPerCard = 1 / cardsCount;
         const index = Math.min(
           Math.floor(latest / progressPerCard),
           cardsCount - 1
         );
-        setActiveSection(index);
+        if (index !== lastSectionRef.current) {
+          lastSectionRef.current = index;
+          if (!rafId) {
+            rafId = requestAnimationFrame(() => {
+              rafId = 0;
+              setActiveSection(index);
+            });
+          }
+        }
       });
+      return () => {
+        unsubscribe();
+        if (rafId) cancelAnimationFrame(rafId);
+      };
     }, [scrollYProgress, content.length]);
     if (disabled || isReducedMotion) {
       return /* @__PURE__ */ jsx31("div", { ref: mergedRef, className, style: { display: "flex", flexDirection: "column", gap: "2rem", ...style }, ...props, children: content.map((item, i) => /* @__PURE__ */ jsxs11("div", { children: [
@@ -2490,7 +2719,7 @@ var StickyScroll = forwardRef29(
                   {
                     initial: { opacity: 0, y: 20 },
                     animate: { opacity: activeSection === index ? 1 : 0, y: activeSection === index ? 0 : 20 },
-                    style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "1rem" },
+                    style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "1rem", willChange: "transform, opacity" },
                     children: item.title
                   }
                 ),
@@ -2522,7 +2751,7 @@ var StickyScroll = forwardRef29(
 StickyScroll.displayName = "StickyScroll";
 
 // src/primitives/30-scroll-snap.tsx
-import React31, { forwardRef as forwardRef30, useRef as useRef16 } from "react";
+import React31, { forwardRef as forwardRef30, useRef as useRef17 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var ScrollSnapContainer = forwardRef30(
   ({
@@ -2537,7 +2766,7 @@ var ScrollSnapContainer = forwardRef30(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef16(null);
+    const internalRef = useRef17(null);
     const mergedRef = useMergedRef(ref, internalRef);
     return /* @__PURE__ */ jsx32(SnapContext.Provider, { value: { alignment, disabled: disabled || isReducedMotion }, children: /* @__PURE__ */ jsx32(
       "div",
@@ -2582,7 +2811,7 @@ ScrollSnapItem.displayName = "ScrollSnap.Item";
 var ScrollSnap = Object.assign(ScrollSnapContainer, { Item: ScrollSnapItem });
 
 // src/primitives/31-aurora.tsx
-import { forwardRef as forwardRef31, useRef as useRef17 } from "react";
+import { forwardRef as forwardRef31, useRef as useRef18 } from "react";
 import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 var Aurora = forwardRef31(
   ({
@@ -2597,21 +2826,9 @@ var Aurora = forwardRef31(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef17(null);
+    const internalRef = useRef18(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 +2848,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%; }
             }
           ` })
         ]
@@ -2653,7 +2880,7 @@ var Aurora = forwardRef31(
 Aurora.displayName = "Aurora";
 
 // src/primitives/32-mesh-gradient.tsx
-import { forwardRef as forwardRef32, useRef as useRef18 } from "react";
+import { forwardRef as forwardRef32, useRef as useRef19 } from "react";
 import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 var MeshGradient = forwardRef32(
   ({
@@ -2665,13 +2892,12 @@ var MeshGradient = forwardRef32(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef18(null);
+    const internalRef = useRef19(null);
     const mergedRef = useMergedRef(ref, internalRef);
     if (disabled) return null;
     const baseStyle = {
       position: "absolute",
       inset: -50,
-      // bleed edge to avoid seeing bounds during rotation
       opacity: 0.8,
       filter: "blur(60px)",
       pointerEvents: "none",
@@ -2682,7 +2908,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 +2936,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%; }
             }
           ` })
         ]
@@ -2722,7 +2949,7 @@ var MeshGradient = forwardRef32(
 MeshGradient.displayName = "MeshGradient";
 
 // src/primitives/33-particles.tsx
-import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef19 } from "react";
+import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef20 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var Particles = forwardRef33(
   ({
@@ -2736,13 +2963,13 @@ var Particles = forwardRef33(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef19(null);
+    const internalRef = useRef20(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    const context = useRef19(null);
-    const circles = useRef19([]);
-    const mouse = useRef19({ x: 0, y: 0 });
-    const canvasSize = useRef19({ w: 0, h: 0 });
-    const animationFrameId = useRef19(0);
+    const context = useRef20(null);
+    const circles = useRef20([]);
+    const mouse = useRef20({ x: 0, y: 0 });
+    const canvasSize = useRef20({ w: 0, h: 0 });
+    const animationFrameId = useRef20(0);
     useEffect21(() => {
       if (disabled || isReducedMotion || !internalRef.current) return;
       const canvas = internalRef.current;
@@ -2802,18 +3029,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 +3148,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 useRef21 } from "react";
 import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
 var StreamingText = forwardRef36(
   ({
@@ -2927,43 +3164,71 @@ var StreamingText = forwardRef36(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = React37.useRef(null);
+    const internalRef = useRef21(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    const [displayedText, setDisplayedText] = useState16("");
-    const [isComplete, setIsComplete] = useState16(false);
+    const textNodeRef = useRef21(null);
+    const cursorRef = useRef21(null);
+    const onCompleteRef = useRef21(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 +3236,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 +3266,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 +3290,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 +3335,7 @@ var Skeleton = forwardRef38(
         },
         ...props,
         children: !isReducedMotion && /* @__PURE__ */ jsx40(
-          motion29.div,
+          motion28.div,
           {
             style: {
               position: "absolute",
@@ -3097,7 +3362,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 +3389,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 +3406,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 +3416,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 },
@@ -3167,8 +3432,8 @@ var AIMessage = forwardRef39(
 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 React41, { forwardRef as forwardRef40, useCallback as useCallback7, useEffect as useEffect23, useRef as useRef22 } from "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(
   ({
@@ -3176,7 +3441,6 @@ var HeroHighlight = forwardRef40(
     containerClassName,
     className,
     color = "45, 212, 191",
-    // teal-400 equivalent typically
     disabled = false,
     ...props
   }, ref) => {
@@ -3185,12 +3449,50 @@ var HeroHighlight = forwardRef40(
     const mergedRef = useMergedRef(ref, internalRef);
     const mouseX = useMotionValue8(0);
     const mouseY = useMotionValue8(0);
-    function handleMouseMove({ currentTarget, clientX, clientY }) {
-      if (!currentTarget) return;
-      const { left, top } = currentTarget.getBoundingClientRect();
-      mouseX.set(clientX - left);
-      mouseY.set(clientY - top);
-    }
+    const rectRef = useRef22(null);
+    const updateRect = useCallback7(() => {
+      if (internalRef.current) {
+        rectRef.current = internalRef.current.getBoundingClientRect();
+      }
+    }, []);
+    useEffect23(() => {
+      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 = useRef22(0);
+    const latestEvent = useRef22(null);
+    const processMouseMove = useCallback7(() => {
+      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]);
+    const handleMouseMove = useCallback7((e) => {
+      latestEvent.current = e;
+      if (!rafId.current) {
+        rafId.current = requestAnimationFrame(processMouseMove);
+      }
+    }, [processMouseMove]);
+    useEffect23(() => {
+      return () => {
+        if (rafId.current) cancelAnimationFrame(rafId.current);
+      };
+    }, []);
+    const maskTemplate = useMotionTemplate3`
+            radial-gradient(
+              200px circle at ${mouseX}px ${mouseY}px,
+              black 0%,
+              transparent 100%
+            )
+          `;
     if (disabled || isReducedMotion) {
       return /* @__PURE__ */ jsxs16("div", { ref: mergedRef, className: `relative flex items-center justify-center w-full group ${containerClassName || ""}`, ...props, children: [
         /* @__PURE__ */ jsx42("div", { className: "absolute inset-0 bg-dot-thick-neutral-300 pointer-events-none" }),
@@ -3207,24 +3509,12 @@ 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: {
-                WebkitMaskImage: useMotionTemplate3`
-            radial-gradient(
-              200px circle at ${mouseX}px ${mouseY}px,
-              black 0%,
-              transparent 100%
-            )
-          `,
-                maskImage: useMotionTemplate3`
-            radial-gradient(
-              200px circle at ${mouseX}px ${mouseY}px,
-              black 0%,
-              transparent 100%
-            )
-          `
+                WebkitMaskImage: maskTemplate,
+                maskImage: maskTemplate
               }
             }
           ),
@@ -3241,7 +3531,7 @@ var Highlight = ({
 }) => {
   const isReducedMotion = useReducedMotion();
   return /* @__PURE__ */ jsx42(
-    motion31.span,
+    motion30.span,
     {
       initial: {
         backgroundSize: "0% 100%"