@stianlarsen/react-light-beam 2.1.2 → 3.1.1

package/dist/index.js

@@ -1,52 +1,19 @@
 "use client";
-'use strict';
 
-var gsap = require('gsap');
-var ScrollTrigger = require('gsap/ScrollTrigger');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+// src/index.tsx
+import { motion, useMotionValue, useTransform } from "framer-motion";
+import { useEffect as useEffect2, useRef } from "react";
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var gsap__default = /*#__PURE__*/_interopDefault(gsap);
-
-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 = gsap__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 };
+// src/css/lightBeam.module.css
+var lightBeam_default = {
+  react__light__beam: "lightBeam_react__light__beam"
 };
-useGSAP.register = (core) => {
-  _gsap = core;
-};
-useGSAP.headless = true;
+
+// src/hooks/useDarkmode.tsx
+import { useEffect, useState } from "react";
 var useIsDarkmode = () => {
-  const [isDarkmode, setIsDarkmodeActive] = react.useState(false);
-  react.useEffect(() => {
+  const [isDarkmode, setIsDarkmodeActive] = useState(false);
+  useEffect(() => {
     const matchMedia = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
       setIsDarkmodeActive(matchMedia.matches);
@@ -59,27 +26,11 @@ var useIsDarkmode = () => {
   }, []);
   return { isDarkmode };
 };
-gsap__default.default.registerPlugin(ScrollTrigger.ScrollTrigger, useGSAP);
-var defaultStyles = {
-  height: "var(--react-light-beam-height, 500px)",
-  width: "var(--react-light-beam-width, 100vw)",
-  // 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",
-  contain: "layout style paint",
-  // CSS containment for better performance
-  WebkitTransition: "none",
-  WebkitUserSelect: "none",
-  MozUserSelect: "none"
-};
+
+// src/index.tsx
+import { jsx } from "react/jsx-runtime";
 var LightBeam = ({
   className,
-  style,
   colorLightmode = "rgba(0,0,0, 0.5)",
   colorDarkmode = "rgba(255, 255, 255, 0.5)",
   maskLightByProgress = false,
@@ -88,140 +39,86 @@ var LightBeam = ({
   invert = false,
   id = void 0,
   onLoaded = void 0,
-  scrollElement,
-  disableDefaultStyles = false
+  scrollElement
+  // Add this line
 }) => {
-  const elementRef = react.useRef(null);
+  const elementRef = useRef(null);
+  const inViewProgress = useMotionValue(0);
+  const opacity = 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(() => {
+  useEffect2(() => {
     onLoaded && onLoaded();
   }, []);
-  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%)`;
+  useEffect2(() => {
+    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);
         }
-        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 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);
-          element.style.background = interpolateBackground(progress, colorRef.current);
-          element.style.opacity = String(opacityMin + opacityRange * progress);
-          element.style.maskImage = interpolateMask(progress, colorRef.current);
-          element.style.webkitMaskImage = interpolateMask(progress, colorRef.current);
-        },
-        onRefresh: (self) => {
-          const progress = calculateProgress(self.progress);
-          element.style.background = interpolateBackground(progress, colorRef.current);
-          element.style.opacity = String(opacityMin + opacityRange * progress);
-          element.style.maskImage = interpolateMask(progress, colorRef.current);
-          element.style.webkitMaskImage = interpolateMask(progress, colorRef.current);
-        }
-      });
-      const initialProgress = calculateProgress(st.progress);
-      element.style.background = interpolateBackground(initialProgress, colorRef.current);
-      element.style.opacity = String(opacityMin + opacityRange * initialProgress);
-      element.style.maskImage = interpolateMask(initialProgress, colorRef.current);
-      element.style.webkitMaskImage = interpolateMask(initialProgress, colorRef.current);
-      const refreshTimeout = setTimeout(() => {
-        ScrollTrigger.ScrollTrigger.refresh();
-      }, 100);
+      const handleScrollThrottled = throttle(handleScroll);
+      const target = scrollElement || window;
+      target.addEventListener("scroll", handleScrollThrottled);
+      window.addEventListener("resize", handleScrollThrottled);
+      handleScroll();
       return () => {
-        st.kill();
-        clearTimeout(refreshTimeout);
+        target.removeEventListener("scroll", handleScrollThrottled);
+        window.removeEventListener("resize", handleScrollThrottled);
       };
-    },
-    {
-      // 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]);
+  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 combinedClassName = `react-light-beam ${className || ""}`.trim();
-  const finalStyles = disableDefaultStyles ? {
-    // No default styles, only user styles
-    willChange: "background, opacity",
-    contain: "layout style paint",
-    ...style
-    // User styles override
-  } : {
-    // Merge default styles with user styles
-    ...defaultStyles,
-    ...style
-    // User styles override everything
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  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%)`;
+  return /* @__PURE__ */ jsx(
+    motion.div,
     {
+      style: {
+        background: backgroundPosition,
+        opacity,
+        maskImage,
+        WebkitMaskImage: maskImage,
+        willChange: "background, opacity"
+      },
       ref: elementRef,
-      className: combinedClassName,
-      style: finalStyles,
-      ...id ? { id } : {}
+      id,
+      className: `lightBeam ${className} ${lightBeam_default.react__light__beam}`
     }
   );
 };
-/*! 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;
+var throttle = (func) => {
+  let ticking = false;
+  return function(...args) {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        func.apply(this, args);
+        ticking = false;
+      });
+      ticking = true;
+    }
+  };
+};
+export {
+  LightBeam
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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 directly (not via gsap.set to avoid CSS variable parsing issues)\n                    element.style.background = interpolateBackground(progress, colorRef.current);\n                    element.style.opacity = String(opacityMin + opacityRange * progress);\n                    element.style.maskImage = interpolateMask(progress, colorRef.current);\n                    element.style.webkitMaskImage = interpolateMask(progress, colorRef.current);\n                },\n                onRefresh: (self) => {\n                    // Set initial state when ScrollTrigger refreshes\n                    const progress = calculateProgress(self.progress);\n                    element.style.background = interpolateBackground(progress, colorRef.current);\n                    element.style.opacity = String(opacityMin + opacityRange * progress);\n                    element.style.maskImage = interpolateMask(progress, colorRef.current);\n                    element.style.webkitMaskImage = interpolateMask(progress, colorRef.current);\n                },\n            });\n\n            // Set initial state immediately\n            const initialProgress = calculateProgress(st.progress);\n            element.style.background = interpolateBackground(initialProgress, colorRef.current);\n            element.style.opacity = String(opacityMin + opacityRange * initialProgress);\n            element.style.maskImage = interpolateMask(initialProgress, colorRef.current);\n            element.style.webkitMaskImage = interpolateMask(initialProgress, colorRef.current);\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"]}
+{"version":3,"sources":["../src/index.tsx","../src/css/lightBeam.module.css","../src/hooks/useDarkmode.tsx"],"sourcesContent":["\"use client\";\nimport { motion, useMotionValue, useTransform } from \"framer-motion\";\nimport React, { useEffect, useRef } from \"react\";\nimport { LightBeamProps } from \"../types/types\";\nexport type { LightBeamProps } from \"../types/types\";\nimport styles from \"./css/lightBeam.module.css\";\nimport { useIsDarkmode } from \"./hooks/useDarkmode\";\n\nexport const LightBeam = ({\n  className,\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, // Add this line\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      const target = scrollElement || window;\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]);\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  return (\n    <motion.div\n      style={{\n        background: backgroundPosition,\n        opacity: opacity,\n        maskImage: maskImage,\n        WebkitMaskImage: maskImage,\n        willChange: \"background, opacity\",\n      }}\n      ref={elementRef}\n      id={id}\n      className={`lightBeam ${className} ${styles.react__light__beam}`}\n    />\n  );\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",".react__light__beam {\n  height: 500px;\n  width: 100vw;\n  transition: all 0.25s ease;\n  will-change: all;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: none;\n  -webkit-transition: all 0.25s ease;\n}/*# sourceMappingURL=lightBeam.module.css.map */","\"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"],"mappings":"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","names":["useEffect","react__light__beam","useEffect"]}

package/package.json

@@ -1,34 +1,33 @@
 {
   "name": "@stianlarsen/react-light-beam",
-  "version": "2.1.2",
-  "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",
+  "version": "3.1.1",
+  "description": "A customizable React component that creates a light beam effect using conic gradients. Supports dark mode and various customization options.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup"
   },
   "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
+    "dist"
   ],
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       }
     }
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stianalars1/react-light-beam.git"
@@ -38,9 +37,7 @@
     "light beam",
     "conic gradient",
     "dark mode",
-    "gsap",
-    "scrolltrigger",
-    "scroll animation",
+    "framer-motion",
     "animation"
   ],
   "author": "Stian Larsen <stian.larsen@mac.com>",
@@ -50,17 +47,22 @@
   },
   "homepage": "https://github.com/stianalars1/react-light-beam#readme",
   "peerDependencies": {
-    "gsap": "^3.12.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "@emotion/is-prop-valid": "^1.3.1",
+    "framer-motion": "^11.11.1",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": false
+    },
+    "@emotion/is-prop-valid": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@gsap/react": "^2.1.2",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "gsap": "^3.12.5",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
     "tsup": "^8.5.1",
     "typescript": "^5.5.4"
   }

package/dist/index.d.mts

@@ -1,28 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type LightBeamProps = {
-  className?: string;
-  /**
-   * Custom styles to merge with or override default styles.
-   * User styles take priority over defaults.
-   * @example style={{ height: '800px', width: '80vw' }}
-   */
-  style?: React.CSSProperties;
-  fullWidth?: number;
-  colorLightmode?: string;
-  colorDarkmode?: string;
-  maskLightByProgress?: boolean;
-  invert?: boolean;
-  id?: string;
-  scrollElement?: EventTarget;
-  onLoaded?: () => void;
-  /**
-   * Disable default inline styles. Set to true if you want to provide custom CSS via className only.
-   * @default false
-   */
-  disableDefaultStyles?: boolean;
-};
-
-declare const LightBeam: ({ className, style, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, disableDefaultStyles, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
-
-export { LightBeam };