@nikitph/flux-ui 0.3.3 → 0.3.5

package/dist/index.js

@@ -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)
@@ -298,7 +299,7 @@ var Presence = ({
 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 MotionSlot2 = motion3.create(Slot);
 var Stagger = forwardRef3(
   ({
     children,
@@ -366,7 +367,7 @@ var Stagger = forwardRef3(
         }
       }
       return /* @__PURE__ */ jsx5(
-        MotionSlot,
+        MotionSlot2,
         {
           initial,
           animate: shouldAnimate ? target : initial,
@@ -574,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
@@ -670,7 +671,8 @@ var FlipCard = forwardRef7(
                 width: "100%",
                 height: "100%",
                 backfaceVisibility: "hidden",
-                transformStyle: "preserve-3d"
+                transformStyle: "preserve-3d",
+                willChange: "transform"
               },
               children: front
             }
@@ -686,7 +688,8 @@ var FlipCard = forwardRef7(
                 width: "100%",
                 height: "100%",
                 backfaceVisibility: "hidden",
-                transformStyle: "preserve-3d"
+                transformStyle: "preserve-3d",
+                willChange: "transform"
               },
               children: back
             }
@@ -1703,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(
@@ -1738,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;
@@ -1747,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 = () => {
@@ -1770,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]);
@@ -1802,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 },
@@ -1863,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(
@@ -1880,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) {
@@ -2132,7 +2149,7 @@ function AnimatedListComponent({
 var AnimatedList = forwardRef23(AnimatedListComponent);
 
 // src/primitives/24-marquee.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect18, useMemo as useMemo3, 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(
   ({
@@ -2151,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);
@@ -2259,7 +2276,7 @@ var Marquee = forwardRef24(
 Marquee.displayName = "Marquee";
 
 // src/primitives/25-dock.tsx
-import React26, { forwardRef as forwardRef25, useCallback as useCallback6, useMemo as useMemo4, useRef as useRef11 } from "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({
@@ -2285,12 +2302,12 @@ 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 = useRef11(0);
-    const latestEvent = useRef11(null);
+    const rafId = useRef12(0);
+    const latestEvent = useRef12(null);
     const processMouseMove = useCallback6(() => {
       rafId.current = 0;
       const e = latestEvent.current;
@@ -2343,10 +2360,10 @@ 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 rectRef = useRef11(null);
+    const rectRef = useRef12(null);
     React26.useEffect(() => {
       const el = itemRef.current;
       if (!el) return;
@@ -2425,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,
@@ -2444,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(() => {
@@ -2491,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(
@@ -2509,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
@@ -2570,7 +2587,7 @@ var ScrollProgress = forwardRef27(
 ScrollProgress.displayName = "ScrollProgress";
 
 // src/primitives/28-parallax.tsx
-import { forwardRef as forwardRef28, useRef as useRef14 } from "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(
@@ -2585,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,
@@ -2618,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(
@@ -2632,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({
@@ -2640,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: [
@@ -2688,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
                   }
                 ),
@@ -2720,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(
   ({
@@ -2735,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",
@@ -2780,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(
   ({
@@ -2795,7 +2826,7 @@ 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 gradientString = `linear-gradient(-45deg, ${colors.join(", ")})`;
@@ -2849,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(
   ({
@@ -2861,7 +2892,7 @@ 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 = {
@@ -2918,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(
   ({
@@ -2932,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;
@@ -3117,7 +3148,7 @@ var Noise = forwardRef35(
 Noise.displayName = "Noise";
 
 // src/primitives/36-streaming-text.tsx
-import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef20 } from "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(
   ({
@@ -3133,11 +3164,11 @@ var StreamingText = forwardRef36(
     ...props
   }, ref) => {
     const isReducedMotion = useReducedMotion();
-    const internalRef = useRef20(null);
+    const internalRef = useRef21(null);
     const mergedRef = useMergedRef(ref, internalRef);
-    const textNodeRef = useRef20(null);
-    const cursorRef = useRef20(null);
-    const onCompleteRef = useRef20(onComplete);
+    const textNodeRef = useRef21(null);
+    const cursorRef = useRef21(null);
+    const onCompleteRef = useRef21(onComplete);
     onCompleteRef.current = onComplete;
     useEffect22(() => {
       const el = internalRef.current;
@@ -3401,7 +3432,7 @@ var AIMessage = forwardRef39(
 AIMessage.displayName = "AIMessage";
 
 // src/primitives/40-hero-highlight.tsx
-import React41, { forwardRef as forwardRef40 } from "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(
@@ -3410,7 +3441,6 @@ var HeroHighlight = forwardRef40(
     containerClassName,
     className,
     color = "45, 212, 191",
-    // teal-400 equivalent typically
     disabled = false,
     ...props
   }, ref) => {
@@ -3419,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" }),
@@ -3445,20 +3513,8 @@ var HeroHighlight = forwardRef40(
             {
               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
               }
             }
           ),