@stianlarsen/react-light-beam 1.2.0 → 2.1.0

package/dist/index.js

@@ -1,10 +1,49 @@
 "use client";
 'use strict';
 
-var framerMotion = require('framer-motion');
+var gsap2 = require('gsap');
+var ScrollTrigger = require('gsap/ScrollTrigger');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var gsap2__default = /*#__PURE__*/_interopDefault(gsap2);
+
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? react.useLayoutEffect : react.useEffect;
+var isConfig = (value) => value && !Array.isArray(value) && typeof value === "object";
+var emptyArray = [];
+var defaultConfig = {};
+var _gsap = gsap2__default.default;
+var useGSAP = (callback, dependencies = emptyArray) => {
+  let config = defaultConfig;
+  if (isConfig(callback)) {
+    config = callback;
+    callback = null;
+    dependencies = "dependencies" in config ? config.dependencies : emptyArray;
+  } else if (isConfig(dependencies)) {
+    config = dependencies;
+    dependencies = "dependencies" in config ? config.dependencies : emptyArray;
+  }
+  callback && typeof callback !== "function" && console.warn("First parameter must be a function or config object");
+  const { scope, revertOnUpdate } = config, mounted = react.useRef(false), context = react.useRef(_gsap.context(() => {
+  }, scope)), contextSafe = react.useRef((func) => context.current.add(null, func)), deferCleanup = dependencies && dependencies.length && !revertOnUpdate;
+  deferCleanup && useIsomorphicLayoutEffect(() => {
+    mounted.current = true;
+    return () => context.current.revert();
+  }, emptyArray);
+  useIsomorphicLayoutEffect(() => {
+    callback && context.current.add(callback, scope);
+    if (!deferCleanup || !mounted.current) {
+      return () => context.current.revert();
+    }
+  }, dependencies);
+  return { context: context.current, contextSafe: contextSafe.current };
+};
+useGSAP.register = (core) => {
+  _gsap = core;
+};
+useGSAP.headless = true;
 var useIsDarkmode = () => {
   const [isDarkmode, setIsDarkmodeActive] = react.useState(false);
   react.useEffect(() => {
@@ -20,14 +59,21 @@ var useIsDarkmode = () => {
   }, []);
   return { isDarkmode };
 };
+gsap2__default.default.registerPlugin(ScrollTrigger.ScrollTrigger, useGSAP);
 var defaultStyles = {
   height: "var(--react-light-beam-height, 500px)",
   width: "var(--react-light-beam-width, 100vw)",
-  transition: "var(--react-light-beam-transition, all 0.25s ease)",
-  willChange: "all",
+  // CRITICAL: NO transition on GSAP-controlled properties (background, opacity, mask)
+  // Transitions would fight with GSAP's instant updates, causing visual glitches
+  // especially when scroll direction changes
+  transition: "none",
+  willChange: "background, opacity",
+  // Specific properties for better performance
   userSelect: "none",
   pointerEvents: "none",
-  WebkitTransition: "var(--react-light-beam-transition, all 0.25s ease)",
+  contain: "layout style paint",
+  // CSS containment for better performance
+  WebkitTransition: "none",
   WebkitUserSelect: "none",
   MozUserSelect: "none"
 };
@@ -46,97 +92,142 @@ var LightBeam = ({
   disableDefaultStyles = false
 }) => {
   const elementRef = react.useRef(null);
-  const inViewProgress = framerMotion.useMotionValue(0);
-  const opacity = framerMotion.useMotionValue(0.839322);
   const { isDarkmode } = useIsDarkmode();
   const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;
+  const colorRef = react.useRef(chosenColor);
+  const invertRef = react.useRef(invert);
+  const maskByProgressRef = react.useRef(maskLightByProgress);
+  react.useEffect(() => {
+    colorRef.current = chosenColor;
+    invertRef.current = invert;
+    maskByProgressRef.current = maskLightByProgress;
+  }, [chosenColor, colorLightmode, colorDarkmode, invert, maskLightByProgress]);
   react.useEffect(() => {
     onLoaded && onLoaded();
   }, []);
-  react.useEffect(() => {
-    if (typeof window !== "undefined") {
-      const handleScroll = () => {
-        if (elementRef.current) {
-          const rect = elementRef.current.getBoundingClientRect();
-          const windowHeight = window.innerHeight;
-          const adjustedFullWidth = 1 - fullWidth;
-          const progress = invert ? 0 + Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight)) : 1 - Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));
-          inViewProgress.set(progress);
-          opacity.set(0.839322 + (1 - 0.839322) * progress);
+  useGSAP(
+    () => {
+      const element = elementRef.current;
+      if (!element || typeof window === "undefined") return;
+      const opacityMin = 0.839322;
+      const opacityRange = 0.160678;
+      const interpolateBackground = (progress, color) => {
+        const leftPos = 90 - progress * 90;
+        const rightPos = 10 + progress * 90;
+        const leftSize = 150 - progress * 50;
+        return `conic-gradient(from 90deg at ${leftPos}% 0%, ${color}, transparent 180deg) 0% 0% / 50% ${leftSize}% no-repeat, conic-gradient(from 270deg at ${rightPos}% 0%, transparent 180deg, ${color}) 100% 0% / 50% 100% no-repeat`;
+      };
+      const interpolateMask = (progress, color) => {
+        if (!maskByProgressRef.current) {
+          return `linear-gradient(to bottom, ${color} 25%, transparent 95%)`;
         }
+        const stopPoint = 50 + progress * 45;
+        return `linear-gradient(to bottom, ${color} 0%, transparent ${stopPoint}%)`;
       };
-      const handleScrollThrottled = throttle(handleScroll);
-      const target = scrollElement || document.body || document.documentElement;
-      target.addEventListener("scroll", handleScrollThrottled);
-      window.addEventListener("resize", handleScrollThrottled);
-      handleScroll();
+      const adjustedFullWidth = 1 - fullWidth;
+      const calculateProgress = (rawProgress) => {
+        const normalizedPosition = Math.max(
+          adjustedFullWidth,
+          // Minimum (floor)
+          Math.min(1, 1 - rawProgress)
+          // Convert GSAP progress to Framer's normalized position
+        );
+        return invertRef.current ? normalizedPosition : 1 - normalizedPosition;
+      };
+      const scroller = scrollElement ? scrollElement : void 0;
+      const st = ScrollTrigger.ScrollTrigger.create({
+        trigger: element,
+        start: "top bottom",
+        // Element top hits viewport bottom
+        end: "top top",
+        // Element top hits viewport top
+        scroller,
+        scrub: true,
+        // Instant scrubbing
+        onUpdate: (self) => {
+          const progress = calculateProgress(self.progress);
+          gsap2__default.default.set(element, {
+            background: interpolateBackground(progress, colorRef.current),
+            opacity: opacityMin + opacityRange * progress,
+            maskImage: interpolateMask(progress, colorRef.current),
+            webkitMaskImage: interpolateMask(progress, colorRef.current)
+          });
+        },
+        onRefresh: (self) => {
+          const progress = calculateProgress(self.progress);
+          gsap2__default.default.set(element, {
+            background: interpolateBackground(progress, colorRef.current),
+            opacity: opacityMin + opacityRange * progress,
+            maskImage: interpolateMask(progress, colorRef.current),
+            webkitMaskImage: interpolateMask(progress, colorRef.current)
+          });
+        }
+      });
+      const initialProgress = calculateProgress(st.progress);
+      gsap2__default.default.set(element, {
+        background: interpolateBackground(initialProgress, colorRef.current),
+        opacity: opacityMin + opacityRange * initialProgress,
+        maskImage: interpolateMask(initialProgress, colorRef.current),
+        webkitMaskImage: interpolateMask(initialProgress, colorRef.current)
+      });
+      const refreshTimeout = setTimeout(() => {
+        ScrollTrigger.ScrollTrigger.refresh();
+      }, 100);
       return () => {
-        target.removeEventListener("scroll", handleScrollThrottled);
-        window.removeEventListener("resize", handleScrollThrottled);
+        st.kill();
+        clearTimeout(refreshTimeout);
       };
+    },
+    {
+      // CRITICAL: Use refs for frequently changing values!
+      // colorRef, invertRef, maskByProgressRef allow updates without recreating ScrollTrigger
+      // This prevents visual glitches when these values change mid-scroll
+      // Only include values that affect ScrollTrigger's position/range calculations
+      dependencies: [
+        fullWidth,
+        // Affects trigger range
+        scrollElement
+        // Affects which element to watch
+      ],
+      scope: elementRef
     }
-  }, [inViewProgress, opacity, scrollElement, fullWidth, invert]);
-  const backgroundPosition = framerMotion.useTransform(
-    inViewProgress,
-    [0, 1],
-    [
-      `conic-gradient(from 90deg at 90% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 150% no-repeat, conic-gradient(from 270deg at 10% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,
-      `conic-gradient(from 90deg at 0% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 100% no-repeat, conic-gradient(from 270deg at 100% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`
-    ]
-  );
-  const maskImageOpacity = framerMotion.useTransform(
-    inViewProgress,
-    [0, 1],
-    [
-      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 50%)`,
-      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 95%)`
-    ]
   );
-  const maskImage = maskLightByProgress ? maskImageOpacity : `linear-gradient(to bottom, ${chosenColor} 25%, transparent 95%)`;
   const combinedClassName = `react-light-beam ${className || ""}`.trim();
   const finalStyles = disableDefaultStyles ? {
-    // No default styles, only motion values and user styles
-    background: backgroundPosition,
-    opacity,
-    maskImage,
-    WebkitMaskImage: maskImage,
+    // No default styles, only user styles
     willChange: "background, opacity",
+    contain: "layout style paint",
     ...style
     // User styles override
   } : {
-    // Merge default styles with motion values
+    // Merge default styles with user styles
     ...defaultStyles,
-    background: backgroundPosition,
-    // MotionValue (overrides default)
-    opacity,
-    // MotionValue (overrides default)
-    maskImage,
-    // MotionValue or string
-    WebkitMaskImage: maskImage,
-    willChange: "background, opacity",
     ...style
     // User styles override everything
   };
-  const motionProps = {
-    style: finalStyles,
-    ref: elementRef,
-    className: combinedClassName,
-    ...id ? { id } : {}
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...motionProps });
-};
-var throttle = (func) => {
-  let ticking = false;
-  return function(...args) {
-    if (!ticking) {
-      requestAnimationFrame(() => {
-        func.apply(this, args);
-        ticking = false;
-      });
-      ticking = true;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: elementRef,
+      className: combinedClassName,
+      style: finalStyles,
+      ...id ? { id } : {}
     }
-  };
+  );
 };
+/*! Bundled license information:
+
+@gsap/react/src/index.js:
+  (*!
+   * @gsap/react 2.1.2
+   * https://gsap.com
+   *
+   * Copyright 2008-2025, GreenSock. All rights reserved.
+   * Subject to the terms at https://gsap.com/standard-license or for
+   * Club GSAP members, the agreement issued with that membership.
+   * @author: Jack Doyle, jack@greensock.com
+  *)
+*/
 
 exports.LightBeam = LightBeam;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useDarkmode.tsx","../src/index.tsx"],"names":["useState","useEffect","useRef","useMotionValue","useTransform","jsx","motion"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useIsDarkmode = () => {\n  const [isDarkmode, setIsDarkmodeActive] = useState(false);\n\n  useEffect(() => {\n    const matchMedia = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n    const handleChange = () => {\n      setIsDarkmodeActive(matchMedia.matches);\n    };\n\n    // Set the initial value\n    setIsDarkmodeActive(matchMedia.matches);\n\n    // Listen for changes\n    matchMedia.addEventListener(\"change\", handleChange);\n\n    // Cleanup listener on unmount\n    return () => {\n      matchMedia.removeEventListener(\"change\", handleChange);\n    };\n  }, []);\n\n  return { isDarkmode };\n};\n","\"use client\";\nimport {motion, useMotionValue, useTransform} from \"framer-motion\";\nimport React, {useEffect, useRef} from \"react\";\nimport {LightBeamProps} from \"../types/types\";\nimport {useIsDarkmode} from \"./hooks/useDarkmode\";\n\n// Default inline styles using CSS variables for easy customization\n// Users can override via className by setting CSS variables\nconst defaultStyles: React.CSSProperties = {\n  height: \"var(--react-light-beam-height, 500px)\",\n  width: \"var(--react-light-beam-width, 100vw)\",\n  transition: \"var(--react-light-beam-transition, all 0.25s ease)\",\n  willChange: \"all\",\n  userSelect: \"none\",\n  pointerEvents: \"none\",\n  WebkitTransition: \"var(--react-light-beam-transition, all 0.25s ease)\",\n  WebkitUserSelect: \"none\",\n  MozUserSelect: \"none\",\n};\n\nexport const LightBeam = ({\n  className,\n  style,\n  colorLightmode = \"rgba(0,0,0, 0.5)\",\n  colorDarkmode = \"rgba(255, 255, 255, 0.5)\",\n  maskLightByProgress = false,\n  fullWidth = 1.0, // Default to full width\n  invert = false,\n  id = undefined,\n  onLoaded = undefined,\n  scrollElement,\n  disableDefaultStyles = false,\n}: LightBeamProps) => {\n  const elementRef = useRef<HTMLDivElement>(null);\n  const inViewProgress = useMotionValue(0);\n  const opacity = useMotionValue(0.839322);\n  const { isDarkmode } = useIsDarkmode();\n  const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;\n\n  useEffect(() => {\n    onLoaded && onLoaded();\n  }, []);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const handleScroll = () => {\n        if (elementRef.current) {\n          const rect = elementRef.current.getBoundingClientRect();\n          const windowHeight = window.innerHeight;\n\n          // Invert the fullWidth value: 1 becomes 0, and 0 becomes 1\n          const adjustedFullWidth = 1 - fullWidth;\n\n          // Calculate progress\n          const progress = invert\n            ? 0 +\n              Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight))\n            : 1 -\n              Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));\n\n          // Update motion values\n          inViewProgress.set(progress);\n          opacity.set(0.839322 + (1 - 0.839322) * progress);\n        }\n      };\n\n      const handleScrollThrottled = throttle(handleScroll); // Approx 60fps\n\n      // Default to document.body (works in modern React/Next.js setups)\n      // window doesn't fire scroll events in many modern setups!\n      const target = scrollElement || document.body || document.documentElement;\n\n      target.addEventListener(\"scroll\", handleScrollThrottled);\n      window.addEventListener(\"resize\", handleScrollThrottled);\n\n      // Initial call to handleScroll to set initial state\n      handleScroll();\n\n      return () => {\n        target.removeEventListener(\"scroll\", handleScrollThrottled);\n        window.removeEventListener(\"resize\", handleScrollThrottled);\n      };\n    }\n  }, [inViewProgress, opacity, scrollElement, fullWidth, invert]);\n\n  const backgroundPosition = useTransform(\n    inViewProgress,\n    [0, 1],\n    [\n      `conic-gradient(from 90deg at 90% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 150% no-repeat, conic-gradient(from 270deg at 10% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,\n      `conic-gradient(from 90deg at 0% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 100% no-repeat, conic-gradient(from 270deg at 100% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,\n    ]\n  );\n  const maskImageOpacity = useTransform(\n    inViewProgress,\n    [0, 1],\n    [\n      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 50%)`,\n      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 95%)`,\n    ]\n  );\n\n  const maskImage = maskLightByProgress\n    ? maskImageOpacity\n    : `linear-gradient(to bottom, ${chosenColor} 25%, transparent 95%)`;\n\n  const combinedClassName = `react-light-beam ${className || \"\"}`.trim();\n\n  // CRITICAL: MotionValues must be passed directly to motion.div style prop\n  // Don't spread them into plain objects or reactivity breaks!\n  const finalStyles = disableDefaultStyles\n    ? {\n        // No default styles, only motion values and user styles\n        background: backgroundPosition,\n        opacity: opacity,\n        maskImage: maskImage,\n        WebkitMaskImage: maskImage,\n        willChange: \"background, opacity\",\n        ...style, // User styles override\n      }\n    : {\n        // Merge default styles with motion values\n        ...defaultStyles,\n        background: backgroundPosition, // MotionValue (overrides default)\n        opacity: opacity,                // MotionValue (overrides default)\n        maskImage: maskImage,            // MotionValue or string\n        WebkitMaskImage: maskImage,\n        willChange: \"background, opacity\",\n        ...style, // User styles override everything\n      };\n\n  const motionProps: any = {\n    style: finalStyles,\n    ref: elementRef,\n    className: combinedClassName,\n    ...(id ? { id } : {}),\n  };\n\n  return <motion.div {...motionProps} />;\n};\n\nconst throttle = (func: Function) => {\n  let ticking = false;\n  return function (this: any, ...args: any[]) {\n    if (!ticking) {\n      requestAnimationFrame(() => {\n        func.apply(this, args);\n        ticking = false;\n      });\n      ticking = true;\n    }\n  };\n};\n"]}
+{"version":3,"sources":["../node_modules/@gsap/react/src/index.js","../src/hooks/useDarkmode.tsx","../src/index.tsx"],"names":["useLayoutEffect","useEffect","gsap","useRef","useState","ScrollTrigger","jsx"],"mappings":"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","file":"index.js","sourcesContent":["/*!\n * @gsap/react 2.1.2\n * https://gsap.com\n *\n * Copyright 2008-2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license or for\n * Club GSAP members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n/* eslint-disable */\nimport { useEffect, useLayoutEffect, useRef } from \"react\";\nimport gsap from \"gsap\";\n\nlet useIsomorphicLayoutEffect = typeof document !== \"undefined\" ? useLayoutEffect : useEffect,\n    isConfig = value => value && !Array.isArray(value) && typeof(value) === \"object\",\n    emptyArray = [],\n    defaultConfig = {},\n    _gsap = gsap; // accommodates situations where different versions of GSAP may be loaded, so a user can gsap.registerPlugin(useGSAP);\n\nexport const useGSAP = (callback, dependencies = emptyArray) => {\n  let config = defaultConfig;\n  if (isConfig(callback)) {\n    config = callback;\n    callback = null;\n    dependencies = \"dependencies\" in config ? config.dependencies : emptyArray;\n  } else if (isConfig(dependencies)) {\n    config = dependencies;\n    dependencies = \"dependencies\" in config ? config.dependencies : emptyArray;\n  }\n  (callback && typeof callback !== \"function\") && console.warn(\"First parameter must be a function or config object\");\n  const { scope, revertOnUpdate } = config,\n        mounted = useRef(false),\n        context = useRef(_gsap.context(() => { }, scope)),\n        contextSafe = useRef((func) => context.current.add(null, func)),\n        deferCleanup = dependencies && dependencies.length && !revertOnUpdate;\n  deferCleanup && useIsomorphicLayoutEffect(() => {\n    mounted.current = true;\n    return () => context.current.revert();\n  }, emptyArray);\n  useIsomorphicLayoutEffect(() => {\n    callback && context.current.add(callback, scope);\n    if (!deferCleanup || !mounted.current) { // React renders bottom-up, thus there could be hooks with dependencies that run BEFORE the component mounts, thus cleanup wouldn't occur since a hook with an empty dependency Array would only run once the component mounts.\n      return () => context.current.revert();\n    }\n  }, dependencies);\n  return { context: context.current, contextSafe: contextSafe.current };\n};\nuseGSAP.register = core => { _gsap = core; };\nuseGSAP.headless = true; // doesn't require the window to be registered.\n","\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useIsDarkmode = () => {\n  const [isDarkmode, setIsDarkmodeActive] = useState(false);\n\n  useEffect(() => {\n    const matchMedia = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n    const handleChange = () => {\n      setIsDarkmodeActive(matchMedia.matches);\n    };\n\n    // Set the initial value\n    setIsDarkmodeActive(matchMedia.matches);\n\n    // Listen for changes\n    matchMedia.addEventListener(\"change\", handleChange);\n\n    // Cleanup listener on unmount\n    return () => {\n      matchMedia.removeEventListener(\"change\", handleChange);\n    };\n  }, []);\n\n  return { isDarkmode };\n};\n","\"use client\";\nimport gsap from \"gsap\";\nimport {ScrollTrigger} from \"gsap/ScrollTrigger\";\nimport {useGSAP} from \"@gsap/react\";\nimport React, {useEffect, useRef} from \"react\";\nimport {LightBeamProps} from \"../types/types\";\nimport {useIsDarkmode} from \"./hooks/useDarkmode\";\n\n// Register GSAP plugins\ngsap.registerPlugin(ScrollTrigger, useGSAP);\n\n// Default inline styles using CSS variables for easy customization\n// Users can override via className by setting CSS variables\nconst defaultStyles: React.CSSProperties = {\n    height: \"var(--react-light-beam-height, 500px)\",\n    width: \"var(--react-light-beam-width, 100vw)\",\n    // CRITICAL: NO transition on GSAP-controlled properties (background, opacity, mask)\n    // Transitions would fight with GSAP's instant updates, causing visual glitches\n    // especially when scroll direction changes\n    transition: \"none\",\n    willChange: \"background, opacity\", // Specific properties for better performance\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    contain: \"layout style paint\", // CSS containment for better performance\n    WebkitTransition: \"none\",\n    WebkitUserSelect: \"none\",\n    MozUserSelect: \"none\",\n};\n\nexport const LightBeam = ({\n                              className,\n                              style,\n                              colorLightmode = \"rgba(0,0,0, 0.5)\",\n                              colorDarkmode = \"rgba(255, 255, 255, 0.5)\",\n                              maskLightByProgress = false,\n                              fullWidth = 1.0, // Default to full width\n                              invert = false,\n                              id = undefined,\n                              onLoaded = undefined,\n                              scrollElement,\n                              disableDefaultStyles = false,\n                          }: LightBeamProps) => {\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {isDarkmode} = useIsDarkmode();\n    const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;\n\n    // Use refs to track current values without triggering useGSAP re-runs\n    const colorRef = useRef(chosenColor);\n    const invertRef = useRef(invert);\n    const maskByProgressRef = useRef(maskLightByProgress);\n\n    // Update refs whenever values change\n    useEffect(() => {\n        colorRef.current = chosenColor;\n        invertRef.current = invert;\n        maskByProgressRef.current = maskLightByProgress;\n    }, [chosenColor, colorLightmode, colorDarkmode, invert, maskLightByProgress]);\n\n    // Call onLoaded callback when component mounts\n    useEffect(() => {\n        onLoaded && onLoaded();\n    }, []);\n\n    // GSAP ScrollTrigger implementation\n    useGSAP(\n        () => {\n            const element = elementRef.current;\n            if (!element || typeof window === \"undefined\") return;\n\n            // Pre-calculate constants for performance\n            const opacityMin = 0.839322;\n            const opacityRange = 0.160678; // 1 - 0.839322\n\n            // Helper function to interpolate background gradient\n            // NOTE: Takes color as parameter to always use current value (not closure!)\n            const interpolateBackground = (progress: number, color: string): string => {\n                // At progress 0: gradients are wide (90% and 10% positions)\n                // At progress 1: gradients converge (0% and 100% positions)\n                const leftPos = 90 - progress * 90; // 90% → 0%\n                const rightPos = 10 + progress * 90; // 10% → 100%\n                const leftSize = 150 - progress * 50; // 150% → 100%\n\n                return `conic-gradient(from 90deg at ${leftPos}% 0%, ${color}, transparent 180deg) 0% 0% / 50% ${leftSize}% no-repeat, conic-gradient(from 270deg at ${rightPos}% 0%, transparent 180deg, ${color}) 100% 0% / 50% 100% no-repeat`;\n            };\n\n            // Helper function to interpolate mask\n            // NOTE: Takes color as parameter to always use current value (not closure!)\n            const interpolateMask = (progress: number, color: string): string => {\n                if (!maskByProgressRef.current) {\n                    return `linear-gradient(to bottom, ${color} 25%, transparent 95%)`;\n                }\n                const stopPoint = 50 + progress * 45; // 50% → 95%\n                return `linear-gradient(to bottom, ${color} 0%, transparent ${stopPoint}%)`;\n            };\n\n            // EXACT MATCH TO FRAMER MOTION LOGIC:\n            // fullWidth controls the MINIMUM beam width, not maximum!\n            // fullWidth=1.0 → beam goes from 0% to 100% wide (full range)\n            // fullWidth=0.5 → beam goes from 50% to 100% wide (narrower minimum)\n            // fullWidth=0.2 → beam goes from 80% to 100% wide (very narrow minimum)\n            const adjustedFullWidth = 1 - fullWidth;\n\n            // Helper function to calculate progress (EXACTLY like Framer Motion)\n            const calculateProgress = (rawProgress: number): number => {\n                // ScrollTrigger rawProgress is 0-1 as element moves from start to end\n                // We need to convert this to match Framer's rect.top / windowHeight logic\n                // CRITICAL: GSAP progress (0→1) is INVERSE of Framer's normalizedPosition (1→0)\n\n                // Apply fullWidth floor (minimum progress value)\n                const normalizedPosition = Math.max(\n                    adjustedFullWidth,  // Minimum (floor)\n                    Math.min(1, 1 - rawProgress)  // Convert GSAP progress to Framer's normalized position\n                );\n\n                // Apply invert logic (EXACTLY like Framer Motion)\n                // Use invertRef to get current value without closure issues\n                return invertRef.current ? normalizedPosition : 1 - normalizedPosition;\n            };\n\n            // Determine scroll container\n            const scroller = scrollElement\n                ? (scrollElement as Element | Window)\n                : undefined;\n\n            // Create ScrollTrigger with FIXED range (like Framer Motion)\n            const st = ScrollTrigger.create({\n                trigger: element,\n                start: \"top bottom\", // Element top hits viewport bottom\n                end: \"top top\", // Element top hits viewport top\n                scroller: scroller,\n                scrub: true, // Instant scrubbing\n                onUpdate: (self) => {\n                    // Calculate progress using Framer Motion logic\n                    const progress = calculateProgress(self.progress);\n\n                    // Update styles\n                    gsap.set(element, {\n                        background: interpolateBackground(progress, colorRef.current),\n                        opacity: opacityMin + opacityRange * progress,\n                        maskImage: interpolateMask(progress, colorRef.current),\n                        webkitMaskImage: interpolateMask(progress, colorRef.current),\n                    });\n                },\n                onRefresh: (self) => {\n                    // Set initial state when ScrollTrigger refreshes\n                    const progress = calculateProgress(self.progress);\n                    gsap.set(element, {\n                        background: interpolateBackground(progress, colorRef.current),\n                        opacity: opacityMin + opacityRange * progress,\n                        maskImage: interpolateMask(progress, colorRef.current),\n                        webkitMaskImage: interpolateMask(progress, colorRef.current),\n                    });\n                },\n            });\n\n            // Set initial state immediately\n            const initialProgress = calculateProgress(st.progress);\n            gsap.set(element, {\n                background: interpolateBackground(initialProgress, colorRef.current),\n                opacity: opacityMin + opacityRange * initialProgress,\n                maskImage: interpolateMask(initialProgress, colorRef.current),\n                webkitMaskImage: interpolateMask(initialProgress, colorRef.current),\n            });\n\n            // Refresh ScrollTrigger after a brief delay to ensure layout is settled\n            // This is especially important for Next.js SSR/hydration\n            const refreshTimeout = setTimeout(() => {\n                ScrollTrigger.refresh();\n            }, 100);\n\n            // Cleanup function to kill ScrollTrigger and clear timeout\n            return () => {\n                st.kill();\n                clearTimeout(refreshTimeout);\n            };\n        },\n        {\n            // CRITICAL: Use refs for frequently changing values!\n            // colorRef, invertRef, maskByProgressRef allow updates without recreating ScrollTrigger\n            // This prevents visual glitches when these values change mid-scroll\n            // Only include values that affect ScrollTrigger's position/range calculations\n            dependencies: [\n                fullWidth,  // Affects trigger range\n                scrollElement,  // Affects which element to watch\n            ],\n            scope: elementRef,\n        }\n    );\n\n    const combinedClassName = `react-light-beam ${className || \"\"}`.trim();\n\n    // Prepare final styles (same logic as before, just without MotionValues)\n    const finalStyles = disableDefaultStyles\n        ? {\n            // No default styles, only user styles\n            willChange: \"background, opacity\",\n            contain: \"layout style paint\",\n            ...style, // User styles override\n        }\n        : {\n            // Merge default styles with user styles\n            ...defaultStyles,\n            ...style, // User styles override everything\n        };\n\n    return (\n        <div\n            ref={elementRef}\n            className={combinedClassName}\n            style={finalStyles}\n            {...(id ? {id} : {})}\n        />\n    );\n};\n\n\n\n//   <div class=\"react-light-beam max-h:[500px] absolute top:[-100px] inset:[0]\" style=\"height: var(--react-light-beam-height, 500px); width: var(--react-light-beam-width, 100vw); will-change: background,\n//   opacity; pointer-events: none; contain: layout style paint; transition: var(--react-light-beam-transition, all 0.25s ease); mask-image: linear-gradient(rgba(255, 255, 255, 0.8) 25%, transparent 95%);\n//   opacity: 0.9434; background: conic-gradient(from 90deg at 31.723% 0%, rgba(255, 255, 255, 0.8), transparent 180deg) 0% 0% / 50% 117.624% no-repeat, conic-gradient(from 270deg at 68.277% 0%, transparent\n//   180deg, rgba(255, 255, 255, 0.8)) 100% 0% / 50% 100% no-repeat;\"></div>\n\n//   <div class=\"react-light-beam max-h:[500px] absolute top:[-100px] inset:[0]\" style=\"height: var(--react-light-beam-height, 500px); width: var(--react-light-beam-width, 100vw); will-change: background,\n//   opacity; pointer-events: none; contain: layout style paint; transition: var(--react-light-beam-transition, all 0.25s ease); mask-image: linear-gradient(rgba(0, 0, 0, 0.2) 25%, transparent 95%); opacity:\n//   0.941; background: conic-gradient(from 90deg at 33.0405% 0%, rgba(0, 0, 0, 0.2), transparent 180deg) 0% 0% / 50% 118.356% no-repeat, conic-gradient(from 270deg at 66.9595% 0%, transparent 180deg, rgba(0, 0,\n//   0, 0.2)) 100% 0% / 50% 100% no-repeat;\"></div>\n\n"]}

package/dist/index.mjs

@@ -1,8 +1,43 @@
 "use client";
-import { useMotionValue, useTransform, motion } from 'framer-motion';
-import { useRef, useEffect, useState } from 'react';
+import gsap2 from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { useRef, useLayoutEffect, useEffect, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+var isConfig = (value) => value && !Array.isArray(value) && typeof value === "object";
+var emptyArray = [];
+var defaultConfig = {};
+var _gsap = gsap2;
+var useGSAP = (callback, dependencies = emptyArray) => {
+  let config = defaultConfig;
+  if (isConfig(callback)) {
+    config = callback;
+    callback = null;
+    dependencies = "dependencies" in config ? config.dependencies : emptyArray;
+  } else if (isConfig(dependencies)) {
+    config = dependencies;
+    dependencies = "dependencies" in config ? config.dependencies : emptyArray;
+  }
+  callback && typeof callback !== "function" && console.warn("First parameter must be a function or config object");
+  const { scope, revertOnUpdate } = config, mounted = useRef(false), context = useRef(_gsap.context(() => {
+  }, scope)), contextSafe = useRef((func) => context.current.add(null, func)), deferCleanup = dependencies && dependencies.length && !revertOnUpdate;
+  deferCleanup && useIsomorphicLayoutEffect(() => {
+    mounted.current = true;
+    return () => context.current.revert();
+  }, emptyArray);
+  useIsomorphicLayoutEffect(() => {
+    callback && context.current.add(callback, scope);
+    if (!deferCleanup || !mounted.current) {
+      return () => context.current.revert();
+    }
+  }, dependencies);
+  return { context: context.current, contextSafe: contextSafe.current };
+};
+useGSAP.register = (core) => {
+  _gsap = core;
+};
+useGSAP.headless = true;
 var useIsDarkmode = () => {
   const [isDarkmode, setIsDarkmodeActive] = useState(false);
   useEffect(() => {
@@ -18,14 +53,21 @@ var useIsDarkmode = () => {
   }, []);
   return { isDarkmode };
 };
+gsap2.registerPlugin(ScrollTrigger, useGSAP);
 var defaultStyles = {
   height: "var(--react-light-beam-height, 500px)",
   width: "var(--react-light-beam-width, 100vw)",
-  transition: "var(--react-light-beam-transition, all 0.25s ease)",
-  willChange: "all",
+  // CRITICAL: NO transition on GSAP-controlled properties (background, opacity, mask)
+  // Transitions would fight with GSAP's instant updates, causing visual glitches
+  // especially when scroll direction changes
+  transition: "none",
+  willChange: "background, opacity",
+  // Specific properties for better performance
   userSelect: "none",
   pointerEvents: "none",
-  WebkitTransition: "var(--react-light-beam-transition, all 0.25s ease)",
+  contain: "layout style paint",
+  // CSS containment for better performance
+  WebkitTransition: "none",
   WebkitUserSelect: "none",
   MozUserSelect: "none"
 };
@@ -44,97 +86,142 @@ var LightBeam = ({
   disableDefaultStyles = false
 }) => {
   const elementRef = useRef(null);
-  const inViewProgress = useMotionValue(0);
-  const opacity = useMotionValue(0.839322);
   const { isDarkmode } = useIsDarkmode();
   const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;
+  const colorRef = useRef(chosenColor);
+  const invertRef = useRef(invert);
+  const maskByProgressRef = useRef(maskLightByProgress);
+  useEffect(() => {
+    colorRef.current = chosenColor;
+    invertRef.current = invert;
+    maskByProgressRef.current = maskLightByProgress;
+  }, [chosenColor, colorLightmode, colorDarkmode, invert, maskLightByProgress]);
   useEffect(() => {
     onLoaded && onLoaded();
   }, []);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const handleScroll = () => {
-        if (elementRef.current) {
-          const rect = elementRef.current.getBoundingClientRect();
-          const windowHeight = window.innerHeight;
-          const adjustedFullWidth = 1 - fullWidth;
-          const progress = invert ? 0 + Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight)) : 1 - Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));
-          inViewProgress.set(progress);
-          opacity.set(0.839322 + (1 - 0.839322) * progress);
+  useGSAP(
+    () => {
+      const element = elementRef.current;
+      if (!element || typeof window === "undefined") return;
+      const opacityMin = 0.839322;
+      const opacityRange = 0.160678;
+      const interpolateBackground = (progress, color) => {
+        const leftPos = 90 - progress * 90;
+        const rightPos = 10 + progress * 90;
+        const leftSize = 150 - progress * 50;
+        return `conic-gradient(from 90deg at ${leftPos}% 0%, ${color}, transparent 180deg) 0% 0% / 50% ${leftSize}% no-repeat, conic-gradient(from 270deg at ${rightPos}% 0%, transparent 180deg, ${color}) 100% 0% / 50% 100% no-repeat`;
+      };
+      const interpolateMask = (progress, color) => {
+        if (!maskByProgressRef.current) {
+          return `linear-gradient(to bottom, ${color} 25%, transparent 95%)`;
         }
+        const stopPoint = 50 + progress * 45;
+        return `linear-gradient(to bottom, ${color} 0%, transparent ${stopPoint}%)`;
+      };
+      const adjustedFullWidth = 1 - fullWidth;
+      const calculateProgress = (rawProgress) => {
+        const normalizedPosition = Math.max(
+          adjustedFullWidth,
+          // Minimum (floor)
+          Math.min(1, 1 - rawProgress)
+          // Convert GSAP progress to Framer's normalized position
+        );
+        return invertRef.current ? normalizedPosition : 1 - normalizedPosition;
       };
-      const handleScrollThrottled = throttle(handleScroll);
-      const target = scrollElement || document.body || document.documentElement;
-      target.addEventListener("scroll", handleScrollThrottled);
-      window.addEventListener("resize", handleScrollThrottled);
-      handleScroll();
+      const scroller = scrollElement ? scrollElement : void 0;
+      const st = ScrollTrigger.create({
+        trigger: element,
+        start: "top bottom",
+        // Element top hits viewport bottom
+        end: "top top",
+        // Element top hits viewport top
+        scroller,
+        scrub: true,
+        // Instant scrubbing
+        onUpdate: (self) => {
+          const progress = calculateProgress(self.progress);
+          gsap2.set(element, {
+            background: interpolateBackground(progress, colorRef.current),
+            opacity: opacityMin + opacityRange * progress,
+            maskImage: interpolateMask(progress, colorRef.current),
+            webkitMaskImage: interpolateMask(progress, colorRef.current)
+          });
+        },
+        onRefresh: (self) => {
+          const progress = calculateProgress(self.progress);
+          gsap2.set(element, {
+            background: interpolateBackground(progress, colorRef.current),
+            opacity: opacityMin + opacityRange * progress,
+            maskImage: interpolateMask(progress, colorRef.current),
+            webkitMaskImage: interpolateMask(progress, colorRef.current)
+          });
+        }
+      });
+      const initialProgress = calculateProgress(st.progress);
+      gsap2.set(element, {
+        background: interpolateBackground(initialProgress, colorRef.current),
+        opacity: opacityMin + opacityRange * initialProgress,
+        maskImage: interpolateMask(initialProgress, colorRef.current),
+        webkitMaskImage: interpolateMask(initialProgress, colorRef.current)
+      });
+      const refreshTimeout = setTimeout(() => {
+        ScrollTrigger.refresh();
+      }, 100);
       return () => {
-        target.removeEventListener("scroll", handleScrollThrottled);
-        window.removeEventListener("resize", handleScrollThrottled);
+        st.kill();
+        clearTimeout(refreshTimeout);
       };
+    },
+    {
+      // CRITICAL: Use refs for frequently changing values!
+      // colorRef, invertRef, maskByProgressRef allow updates without recreating ScrollTrigger
+      // This prevents visual glitches when these values change mid-scroll
+      // Only include values that affect ScrollTrigger's position/range calculations
+      dependencies: [
+        fullWidth,
+        // Affects trigger range
+        scrollElement
+        // Affects which element to watch
+      ],
+      scope: elementRef
     }
-  }, [inViewProgress, opacity, scrollElement, fullWidth, invert]);
-  const backgroundPosition = useTransform(
-    inViewProgress,
-    [0, 1],
-    [
-      `conic-gradient(from 90deg at 90% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 150% no-repeat, conic-gradient(from 270deg at 10% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,
-      `conic-gradient(from 90deg at 0% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 100% no-repeat, conic-gradient(from 270deg at 100% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`
-    ]
-  );
-  const maskImageOpacity = useTransform(
-    inViewProgress,
-    [0, 1],
-    [
-      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 50%)`,
-      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 95%)`
-    ]
   );
-  const maskImage = maskLightByProgress ? maskImageOpacity : `linear-gradient(to bottom, ${chosenColor} 25%, transparent 95%)`;
   const combinedClassName = `react-light-beam ${className || ""}`.trim();
   const finalStyles = disableDefaultStyles ? {
-    // No default styles, only motion values and user styles
-    background: backgroundPosition,
-    opacity,
-    maskImage,
-    WebkitMaskImage: maskImage,
+    // No default styles, only user styles
     willChange: "background, opacity",
+    contain: "layout style paint",
     ...style
     // User styles override
   } : {
-    // Merge default styles with motion values
+    // Merge default styles with user styles
     ...defaultStyles,
-    background: backgroundPosition,
-    // MotionValue (overrides default)
-    opacity,
-    // MotionValue (overrides default)
-    maskImage,
-    // MotionValue or string
-    WebkitMaskImage: maskImage,
-    willChange: "background, opacity",
     ...style
     // User styles override everything
   };
-  const motionProps = {
-    style: finalStyles,
-    ref: elementRef,
-    className: combinedClassName,
-    ...id ? { id } : {}
-  };
-  return /* @__PURE__ */ jsx(motion.div, { ...motionProps });
-};
-var throttle = (func) => {
-  let ticking = false;
-  return function(...args) {
-    if (!ticking) {
-      requestAnimationFrame(() => {
-        func.apply(this, args);
-        ticking = false;
-      });
-      ticking = true;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: elementRef,
+      className: combinedClassName,
+      style: finalStyles,
+      ...id ? { id } : {}
     }
-  };
+  );
 };
+/*! Bundled license information:
+
+@gsap/react/src/index.js:
+  (*!
+   * @gsap/react 2.1.2
+   * https://gsap.com
+   *
+   * Copyright 2008-2025, GreenSock. All rights reserved.
+   * Subject to the terms at https://gsap.com/standard-license or for
+   * Club GSAP members, the agreement issued with that membership.
+   * @author: Jack Doyle, jack@greensock.com
+  *)
+*/
 
 export { LightBeam };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useDarkmode.tsx","../src/index.tsx"],"names":["useEffect"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useIsDarkmode = () => {\n  const [isDarkmode, setIsDarkmodeActive] = useState(false);\n\n  useEffect(() => {\n    const matchMedia = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n    const handleChange = () => {\n      setIsDarkmodeActive(matchMedia.matches);\n    };\n\n    // Set the initial value\n    setIsDarkmodeActive(matchMedia.matches);\n\n    // Listen for changes\n    matchMedia.addEventListener(\"change\", handleChange);\n\n    // Cleanup listener on unmount\n    return () => {\n      matchMedia.removeEventListener(\"change\", handleChange);\n    };\n  }, []);\n\n  return { isDarkmode };\n};\n","\"use client\";\nimport {motion, useMotionValue, useTransform} from \"framer-motion\";\nimport React, {useEffect, useRef} from \"react\";\nimport {LightBeamProps} from \"../types/types\";\nimport {useIsDarkmode} from \"./hooks/useDarkmode\";\n\n// Default inline styles using CSS variables for easy customization\n// Users can override via className by setting CSS variables\nconst defaultStyles: React.CSSProperties = {\n  height: \"var(--react-light-beam-height, 500px)\",\n  width: \"var(--react-light-beam-width, 100vw)\",\n  transition: \"var(--react-light-beam-transition, all 0.25s ease)\",\n  willChange: \"all\",\n  userSelect: \"none\",\n  pointerEvents: \"none\",\n  WebkitTransition: \"var(--react-light-beam-transition, all 0.25s ease)\",\n  WebkitUserSelect: \"none\",\n  MozUserSelect: \"none\",\n};\n\nexport const LightBeam = ({\n  className,\n  style,\n  colorLightmode = \"rgba(0,0,0, 0.5)\",\n  colorDarkmode = \"rgba(255, 255, 255, 0.5)\",\n  maskLightByProgress = false,\n  fullWidth = 1.0, // Default to full width\n  invert = false,\n  id = undefined,\n  onLoaded = undefined,\n  scrollElement,\n  disableDefaultStyles = false,\n}: LightBeamProps) => {\n  const elementRef = useRef<HTMLDivElement>(null);\n  const inViewProgress = useMotionValue(0);\n  const opacity = useMotionValue(0.839322);\n  const { isDarkmode } = useIsDarkmode();\n  const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;\n\n  useEffect(() => {\n    onLoaded && onLoaded();\n  }, []);\n\n  useEffect(() => {\n    if (typeof window !== \"undefined\") {\n      const handleScroll = () => {\n        if (elementRef.current) {\n          const rect = elementRef.current.getBoundingClientRect();\n          const windowHeight = window.innerHeight;\n\n          // Invert the fullWidth value: 1 becomes 0, and 0 becomes 1\n          const adjustedFullWidth = 1 - fullWidth;\n\n          // Calculate progress\n          const progress = invert\n            ? 0 +\n              Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight))\n            : 1 -\n              Math.max(adjustedFullWidth, Math.min(1, rect.top / windowHeight));\n\n          // Update motion values\n          inViewProgress.set(progress);\n          opacity.set(0.839322 + (1 - 0.839322) * progress);\n        }\n      };\n\n      const handleScrollThrottled = throttle(handleScroll); // Approx 60fps\n\n      // Default to document.body (works in modern React/Next.js setups)\n      // window doesn't fire scroll events in many modern setups!\n      const target = scrollElement || document.body || document.documentElement;\n\n      target.addEventListener(\"scroll\", handleScrollThrottled);\n      window.addEventListener(\"resize\", handleScrollThrottled);\n\n      // Initial call to handleScroll to set initial state\n      handleScroll();\n\n      return () => {\n        target.removeEventListener(\"scroll\", handleScrollThrottled);\n        window.removeEventListener(\"resize\", handleScrollThrottled);\n      };\n    }\n  }, [inViewProgress, opacity, scrollElement, fullWidth, invert]);\n\n  const backgroundPosition = useTransform(\n    inViewProgress,\n    [0, 1],\n    [\n      `conic-gradient(from 90deg at 90% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 150% no-repeat, conic-gradient(from 270deg at 10% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,\n      `conic-gradient(from 90deg at 0% 0%, ${chosenColor}, transparent 180deg) 0% 0% / 50% 100% no-repeat, conic-gradient(from 270deg at 100% 0%, transparent 180deg, ${chosenColor}) 100% 0% / 50% 100% no-repeat`,\n    ]\n  );\n  const maskImageOpacity = useTransform(\n    inViewProgress,\n    [0, 1],\n    [\n      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 50%)`,\n      `linear-gradient(to bottom, ${chosenColor} 0%, transparent 95%)`,\n    ]\n  );\n\n  const maskImage = maskLightByProgress\n    ? maskImageOpacity\n    : `linear-gradient(to bottom, ${chosenColor} 25%, transparent 95%)`;\n\n  const combinedClassName = `react-light-beam ${className || \"\"}`.trim();\n\n  // CRITICAL: MotionValues must be passed directly to motion.div style prop\n  // Don't spread them into plain objects or reactivity breaks!\n  const finalStyles = disableDefaultStyles\n    ? {\n        // No default styles, only motion values and user styles\n        background: backgroundPosition,\n        opacity: opacity,\n        maskImage: maskImage,\n        WebkitMaskImage: maskImage,\n        willChange: \"background, opacity\",\n        ...style, // User styles override\n      }\n    : {\n        // Merge default styles with motion values\n        ...defaultStyles,\n        background: backgroundPosition, // MotionValue (overrides default)\n        opacity: opacity,                // MotionValue (overrides default)\n        maskImage: maskImage,            // MotionValue or string\n        WebkitMaskImage: maskImage,\n        willChange: \"background, opacity\",\n        ...style, // User styles override everything\n      };\n\n  const motionProps: any = {\n    style: finalStyles,\n    ref: elementRef,\n    className: combinedClassName,\n    ...(id ? { id } : {}),\n  };\n\n  return <motion.div {...motionProps} />;\n};\n\nconst throttle = (func: Function) => {\n  let ticking = false;\n  return function (this: any, ...args: any[]) {\n    if (!ticking) {\n      requestAnimationFrame(() => {\n        func.apply(this, args);\n        ticking = false;\n      });\n      ticking = true;\n    }\n  };\n};\n"]}
+{"version":3,"sources":["../node_modules/@gsap/react/src/index.js","../src/hooks/useDarkmode.tsx","../src/index.tsx"],"names":["gsap","useEffect","useRef"],"mappings":"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","file":"index.mjs","sourcesContent":["/*!\n * @gsap/react 2.1.2\n * https://gsap.com\n *\n * Copyright 2008-2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license or for\n * Club GSAP members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n/* eslint-disable */\nimport { useEffect, useLayoutEffect, useRef } from \"react\";\nimport gsap from \"gsap\";\n\nlet useIsomorphicLayoutEffect = typeof document !== \"undefined\" ? useLayoutEffect : useEffect,\n    isConfig = value => value && !Array.isArray(value) && typeof(value) === \"object\",\n    emptyArray = [],\n    defaultConfig = {},\n    _gsap = gsap; // accommodates situations where different versions of GSAP may be loaded, so a user can gsap.registerPlugin(useGSAP);\n\nexport const useGSAP = (callback, dependencies = emptyArray) => {\n  let config = defaultConfig;\n  if (isConfig(callback)) {\n    config = callback;\n    callback = null;\n    dependencies = \"dependencies\" in config ? config.dependencies : emptyArray;\n  } else if (isConfig(dependencies)) {\n    config = dependencies;\n    dependencies = \"dependencies\" in config ? config.dependencies : emptyArray;\n  }\n  (callback && typeof callback !== \"function\") && console.warn(\"First parameter must be a function or config object\");\n  const { scope, revertOnUpdate } = config,\n        mounted = useRef(false),\n        context = useRef(_gsap.context(() => { }, scope)),\n        contextSafe = useRef((func) => context.current.add(null, func)),\n        deferCleanup = dependencies && dependencies.length && !revertOnUpdate;\n  deferCleanup && useIsomorphicLayoutEffect(() => {\n    mounted.current = true;\n    return () => context.current.revert();\n  }, emptyArray);\n  useIsomorphicLayoutEffect(() => {\n    callback && context.current.add(callback, scope);\n    if (!deferCleanup || !mounted.current) { // React renders bottom-up, thus there could be hooks with dependencies that run BEFORE the component mounts, thus cleanup wouldn't occur since a hook with an empty dependency Array would only run once the component mounts.\n      return () => context.current.revert();\n    }\n  }, dependencies);\n  return { context: context.current, contextSafe: contextSafe.current };\n};\nuseGSAP.register = core => { _gsap = core; };\nuseGSAP.headless = true; // doesn't require the window to be registered.\n","\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useIsDarkmode = () => {\n  const [isDarkmode, setIsDarkmodeActive] = useState(false);\n\n  useEffect(() => {\n    const matchMedia = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n    const handleChange = () => {\n      setIsDarkmodeActive(matchMedia.matches);\n    };\n\n    // Set the initial value\n    setIsDarkmodeActive(matchMedia.matches);\n\n    // Listen for changes\n    matchMedia.addEventListener(\"change\", handleChange);\n\n    // Cleanup listener on unmount\n    return () => {\n      matchMedia.removeEventListener(\"change\", handleChange);\n    };\n  }, []);\n\n  return { isDarkmode };\n};\n","\"use client\";\nimport gsap from \"gsap\";\nimport {ScrollTrigger} from \"gsap/ScrollTrigger\";\nimport {useGSAP} from \"@gsap/react\";\nimport React, {useEffect, useRef} from \"react\";\nimport {LightBeamProps} from \"../types/types\";\nimport {useIsDarkmode} from \"./hooks/useDarkmode\";\n\n// Register GSAP plugins\ngsap.registerPlugin(ScrollTrigger, useGSAP);\n\n// Default inline styles using CSS variables for easy customization\n// Users can override via className by setting CSS variables\nconst defaultStyles: React.CSSProperties = {\n    height: \"var(--react-light-beam-height, 500px)\",\n    width: \"var(--react-light-beam-width, 100vw)\",\n    // CRITICAL: NO transition on GSAP-controlled properties (background, opacity, mask)\n    // Transitions would fight with GSAP's instant updates, causing visual glitches\n    // especially when scroll direction changes\n    transition: \"none\",\n    willChange: \"background, opacity\", // Specific properties for better performance\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    contain: \"layout style paint\", // CSS containment for better performance\n    WebkitTransition: \"none\",\n    WebkitUserSelect: \"none\",\n    MozUserSelect: \"none\",\n};\n\nexport const LightBeam = ({\n                              className,\n                              style,\n                              colorLightmode = \"rgba(0,0,0, 0.5)\",\n                              colorDarkmode = \"rgba(255, 255, 255, 0.5)\",\n                              maskLightByProgress = false,\n                              fullWidth = 1.0, // Default to full width\n                              invert = false,\n                              id = undefined,\n                              onLoaded = undefined,\n                              scrollElement,\n                              disableDefaultStyles = false,\n                          }: LightBeamProps) => {\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {isDarkmode} = useIsDarkmode();\n    const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;\n\n    // Use refs to track current values without triggering useGSAP re-runs\n    const colorRef = useRef(chosenColor);\n    const invertRef = useRef(invert);\n    const maskByProgressRef = useRef(maskLightByProgress);\n\n    // Update refs whenever values change\n    useEffect(() => {\n        colorRef.current = chosenColor;\n        invertRef.current = invert;\n        maskByProgressRef.current = maskLightByProgress;\n    }, [chosenColor, colorLightmode, colorDarkmode, invert, maskLightByProgress]);\n\n    // Call onLoaded callback when component mounts\n    useEffect(() => {\n        onLoaded && onLoaded();\n    }, []);\n\n    // GSAP ScrollTrigger implementation\n    useGSAP(\n        () => {\n            const element = elementRef.current;\n            if (!element || typeof window === \"undefined\") return;\n\n            // Pre-calculate constants for performance\n            const opacityMin = 0.839322;\n            const opacityRange = 0.160678; // 1 - 0.839322\n\n            // Helper function to interpolate background gradient\n            // NOTE: Takes color as parameter to always use current value (not closure!)\n            const interpolateBackground = (progress: number, color: string): string => {\n                // At progress 0: gradients are wide (90% and 10% positions)\n                // At progress 1: gradients converge (0% and 100% positions)\n                const leftPos = 90 - progress * 90; // 90% → 0%\n                const rightPos = 10 + progress * 90; // 10% → 100%\n                const leftSize = 150 - progress * 50; // 150% → 100%\n\n                return `conic-gradient(from 90deg at ${leftPos}% 0%, ${color}, transparent 180deg) 0% 0% / 50% ${leftSize}% no-repeat, conic-gradient(from 270deg at ${rightPos}% 0%, transparent 180deg, ${color}) 100% 0% / 50% 100% no-repeat`;\n            };\n\n            // Helper function to interpolate mask\n            // NOTE: Takes color as parameter to always use current value (not closure!)\n            const interpolateMask = (progress: number, color: string): string => {\n                if (!maskByProgressRef.current) {\n                    return `linear-gradient(to bottom, ${color} 25%, transparent 95%)`;\n                }\n                const stopPoint = 50 + progress * 45; // 50% → 95%\n                return `linear-gradient(to bottom, ${color} 0%, transparent ${stopPoint}%)`;\n            };\n\n            // EXACT MATCH TO FRAMER MOTION LOGIC:\n            // fullWidth controls the MINIMUM beam width, not maximum!\n            // fullWidth=1.0 → beam goes from 0% to 100% wide (full range)\n            // fullWidth=0.5 → beam goes from 50% to 100% wide (narrower minimum)\n            // fullWidth=0.2 → beam goes from 80% to 100% wide (very narrow minimum)\n            const adjustedFullWidth = 1 - fullWidth;\n\n            // Helper function to calculate progress (EXACTLY like Framer Motion)\n            const calculateProgress = (rawProgress: number): number => {\n                // ScrollTrigger rawProgress is 0-1 as element moves from start to end\n                // We need to convert this to match Framer's rect.top / windowHeight logic\n                // CRITICAL: GSAP progress (0→1) is INVERSE of Framer's normalizedPosition (1→0)\n\n                // Apply fullWidth floor (minimum progress value)\n                const normalizedPosition = Math.max(\n                    adjustedFullWidth,  // Minimum (floor)\n                    Math.min(1, 1 - rawProgress)  // Convert GSAP progress to Framer's normalized position\n                );\n\n                // Apply invert logic (EXACTLY like Framer Motion)\n                // Use invertRef to get current value without closure issues\n                return invertRef.current ? normalizedPosition : 1 - normalizedPosition;\n            };\n\n            // Determine scroll container\n            const scroller = scrollElement\n                ? (scrollElement as Element | Window)\n                : undefined;\n\n            // Create ScrollTrigger with FIXED range (like Framer Motion)\n            const st = ScrollTrigger.create({\n                trigger: element,\n                start: \"top bottom\", // Element top hits viewport bottom\n                end: \"top top\", // Element top hits viewport top\n                scroller: scroller,\n                scrub: true, // Instant scrubbing\n                onUpdate: (self) => {\n                    // Calculate progress using Framer Motion logic\n                    const progress = calculateProgress(self.progress);\n\n                    // Update styles\n                    gsap.set(element, {\n                        background: interpolateBackground(progress, colorRef.current),\n                        opacity: opacityMin + opacityRange * progress,\n                        maskImage: interpolateMask(progress, colorRef.current),\n                        webkitMaskImage: interpolateMask(progress, colorRef.current),\n                    });\n                },\n                onRefresh: (self) => {\n                    // Set initial state when ScrollTrigger refreshes\n                    const progress = calculateProgress(self.progress);\n                    gsap.set(element, {\n                        background: interpolateBackground(progress, colorRef.current),\n                        opacity: opacityMin + opacityRange * progress,\n                        maskImage: interpolateMask(progress, colorRef.current),\n                        webkitMaskImage: interpolateMask(progress, colorRef.current),\n                    });\n                },\n            });\n\n            // Set initial state immediately\n            const initialProgress = calculateProgress(st.progress);\n            gsap.set(element, {\n                background: interpolateBackground(initialProgress, colorRef.current),\n                opacity: opacityMin + opacityRange * initialProgress,\n                maskImage: interpolateMask(initialProgress, colorRef.current),\n                webkitMaskImage: interpolateMask(initialProgress, colorRef.current),\n            });\n\n            // Refresh ScrollTrigger after a brief delay to ensure layout is settled\n            // This is especially important for Next.js SSR/hydration\n            const refreshTimeout = setTimeout(() => {\n                ScrollTrigger.refresh();\n            }, 100);\n\n            // Cleanup function to kill ScrollTrigger and clear timeout\n            return () => {\n                st.kill();\n                clearTimeout(refreshTimeout);\n            };\n        },\n        {\n            // CRITICAL: Use refs for frequently changing values!\n            // colorRef, invertRef, maskByProgressRef allow updates without recreating ScrollTrigger\n            // This prevents visual glitches when these values change mid-scroll\n            // Only include values that affect ScrollTrigger's position/range calculations\n            dependencies: [\n                fullWidth,  // Affects trigger range\n                scrollElement,  // Affects which element to watch\n            ],\n            scope: elementRef,\n        }\n    );\n\n    const combinedClassName = `react-light-beam ${className || \"\"}`.trim();\n\n    // Prepare final styles (same logic as before, just without MotionValues)\n    const finalStyles = disableDefaultStyles\n        ? {\n            // No default styles, only user styles\n            willChange: \"background, opacity\",\n            contain: \"layout style paint\",\n            ...style, // User styles override\n        }\n        : {\n            // Merge default styles with user styles\n            ...defaultStyles,\n            ...style, // User styles override everything\n        };\n\n    return (\n        <div\n            ref={elementRef}\n            className={combinedClassName}\n            style={finalStyles}\n            {...(id ? {id} : {})}\n        />\n    );\n};\n\n\n\n//   <div class=\"react-light-beam max-h:[500px] absolute top:[-100px] inset:[0]\" style=\"height: var(--react-light-beam-height, 500px); width: var(--react-light-beam-width, 100vw); will-change: background,\n//   opacity; pointer-events: none; contain: layout style paint; transition: var(--react-light-beam-transition, all 0.25s ease); mask-image: linear-gradient(rgba(255, 255, 255, 0.8) 25%, transparent 95%);\n//   opacity: 0.9434; background: conic-gradient(from 90deg at 31.723% 0%, rgba(255, 255, 255, 0.8), transparent 180deg) 0% 0% / 50% 117.624% no-repeat, conic-gradient(from 270deg at 68.277% 0%, transparent\n//   180deg, rgba(255, 255, 255, 0.8)) 100% 0% / 50% 100% no-repeat;\"></div>\n\n//   <div class=\"react-light-beam max-h:[500px] absolute top:[-100px] inset:[0]\" style=\"height: var(--react-light-beam-height, 500px); width: var(--react-light-beam-width, 100vw); will-change: background,\n//   opacity; pointer-events: none; contain: layout style paint; transition: var(--react-light-beam-transition, all 0.25s ease); mask-image: linear-gradient(rgba(0, 0, 0, 0.2) 25%, transparent 95%); opacity:\n//   0.941; background: conic-gradient(from 90deg at 33.0405% 0%, rgba(0, 0, 0, 0.2), transparent 180deg) 0% 0% / 50% 118.356% no-repeat, conic-gradient(from 270deg at 66.9595% 0%, transparent 180deg, rgba(0, 0,\n//   0, 0.2)) 100% 0% / 50% 100% no-repeat;\"></div>\n\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stianlarsen/react-light-beam",
-  "version": "1.2.0",
-  "description": "A customizable React component that creates a light beam effect using conic gradients. Supports dark mode and various customization options.",
+  "version": "2.1.0",
+  "description": "A customizable React component that creates a light beam effect using conic gradients. Powered by GSAP for maximum performance. Supports dark mode and various customization options.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -38,7 +38,9 @@
     "light beam",
     "conic gradient",
     "dark mode",
-    "framer-motion",
+    "gsap",
+    "scrolltrigger",
+    "scroll animation",
     "animation"
   ],
   "author": "Stian Larsen <stian.larsen@mac.com>",
@@ -48,14 +50,15 @@
   },
   "homepage": "https://github.com/stianalars1/react-light-beam#readme",
   "peerDependencies": {
-    "framer-motion": "^11.11.1",
+    "gsap": "^3.12.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@gsap/react": "^2.1.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "framer-motion": "^11.11.1",
+    "gsap": "^3.12.5",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tsup": "^8.5.1",