@stianlarsen/react-light-beam 1.0.7 → 1.0.9

package/dist/css/lightBeam.module.css

@@ -1,10 +1,11 @@
 .react__light__beam {
   height: 500px;
   width: 100vw;
-  transition: all 0.5s ease;
-  will-change: auto;
+  transition: all 0.25s ease;
+  will-change: all;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   pointer-events: none;
+  -webkit-transition: all 0.25s ease;
 }/*# sourceMappingURL=lightBeam.module.css.map */

package/dist/index.js

@@ -46,7 +46,7 @@ invert = false, id = undefined, onLoaded = undefined, }) => {
         onLoaded && onLoaded();
     }, []);
     (0, react_1.useEffect)(() => {
-        if (bodyElement) {
+        if (bodyElement && typeof window !== "undefined") {
             const handleScroll = () => {
                 if (elementRef.current) {
                     const rect = elementRef.current.getBoundingClientRect();
@@ -65,13 +65,14 @@ invert = false, id = undefined, onLoaded = undefined, }) => {
                 }
             };
             // Attach scroll and resize event listeners
-            bodyElement.addEventListener("scroll", handleScroll);
-            window.addEventListener("resize", handleScroll);
+            const handleScrollThrottled = throttle(handleScroll); // Approx 60fps
+            bodyElement.addEventListener("scroll", handleScrollThrottled);
+            window.addEventListener("resize", handleScrollThrottled);
             // Initial call to handleScroll to set initial state
             handleScroll();
             return () => {
-                bodyElement.removeEventListener("scroll", handleScroll);
-                window.removeEventListener("resize", handleScroll);
+                bodyElement.removeEventListener("scroll", handleScrollThrottled);
+                window.removeEventListener("resize", handleScrollThrottled);
             };
         }
     }, [bodyElement, inViewProgress, opacity]);
@@ -91,6 +92,19 @@ invert = false, id = undefined, onLoaded = undefined, }) => {
             opacity: opacity,
             maskImage: maskImage,
             WebkitMaskImage: maskImage,
+            willChange: "background, opacity",
         }, ref: elementRef, id: id, className: `lightBeam ${className} ${lightBeam_module_css_1.default.react__light__beam}` }));
 };
 exports.LightBeam = LightBeam;
+const throttle = (func) => {
+    let ticking = false;
+    return function (...args) {
+        if (!ticking) {
+            requestAnimationFrame(() => {
+                func.apply(this, args);
+                ticking = false;
+            });
+            ticking = true;
+        }
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stianlarsen/react-light-beam",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A customizable React component that creates a light beam effect using conic gradients. Supports dark mode and various customization options.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,9 +38,10 @@
   },
   "homepage": "https://github.com/stianalars1/react-light-beam#readme",
   "peerDependencies": {
-    "framer-motion": "^11.3.30",
+    "framer-motion": "^11.11.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "@emotion/is-prop-valid": "^1.3.1"
   },
   "devDependencies": {
     "@types/react": "^18",
@@ -49,8 +50,6 @@
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "framer-motion": "^11.3.30",
-    "react": "^18",
-    "react-dom": "^18"
+    "framer-motion": "^11.11.1"
   }
 }