@stianlarsen/react-light-beam 3.1.0 → 3.1.2

package/dist/index.cjs

@@ -0,0 +1,168 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  LightBeam: () => LightBeam
+});
+module.exports = __toCommonJS(index_exports);
+var import_framer_motion = require("framer-motion");
+var import_react2 = require("react");
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/css/lightBeam.css
+styleInject(".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}\n");
+
+// src/hooks/useDarkmode.tsx
+var import_react = require("react");
+var useIsDarkmode = () => {
+  const [isDarkmode, setIsDarkmodeActive] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const matchMedia = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setIsDarkmodeActive(matchMedia.matches);
+    };
+    setIsDarkmodeActive(matchMedia.matches);
+    matchMedia.addEventListener("change", handleChange);
+    return () => {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, []);
+  return { isDarkmode };
+};
+
+// src/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LightBeam = ({
+  className,
+  colorLightmode = "rgba(0,0,0, 0.5)",
+  colorDarkmode = "rgba(255, 255, 255, 0.5)",
+  maskLightByProgress = false,
+  fullWidth = 1,
+  // Default to full width
+  invert = false,
+  id = void 0,
+  onLoaded = void 0,
+  scrollElement
+  // Add this line
+}) => {
+  const elementRef = (0, import_react2.useRef)(null);
+  const inViewProgress = (0, import_framer_motion.useMotionValue)(0);
+  const opacity = (0, import_framer_motion.useMotionValue)(0.839322);
+  const { isDarkmode } = useIsDarkmode();
+  const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;
+  (0, import_react2.useEffect)(() => {
+    onLoaded && onLoaded();
+  }, []);
+  (0, import_react2.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);
+        }
+      };
+      const handleScrollThrottled = throttle(handleScroll);
+      const target = scrollElement || window;
+      target.addEventListener("scroll", handleScrollThrottled);
+      window.addEventListener("resize", handleScrollThrottled);
+      handleScroll();
+      return () => {
+        target.removeEventListener("scroll", handleScrollThrottled);
+        window.removeEventListener("resize", handleScrollThrottled);
+      };
+    }
+  }, [inViewProgress, opacity, scrollElement]);
+  const backgroundPosition = (0, import_framer_motion.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 = (0, import_framer_motion.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__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      style: {
+        background: backgroundPosition,
+        opacity,
+        maskImage,
+        WebkitMaskImage: maskImage,
+        willChange: "background, opacity"
+      },
+      ref: elementRef,
+      id,
+      className: `lightBeam ${className} react__light__beam`
+    }
+  );
+};
+var throttle = (func) => {
+  let ticking = false;
+  return function(...args) {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        func.apply(this, args);
+        ticking = false;
+      });
+      ticking = true;
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LightBeam
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx","#style-inject:#style-inject","../src/css/lightBeam.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 \"./css/lightBeam.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} 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","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".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}\\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"],"mappings":"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","names":["import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type LightBeamProps = {
+  className?: string;
+  fullWidth?: number;
+  colorLightmode?: string;
+  colorDarkmode?: string;
+  maskLightByProgress?: boolean;
+  invert?: boolean;
+  id?: string;
+  scrollElement?: EventTarget;
+  onLoaded?: () => void;
+};
+
+declare const LightBeam: ({ className, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
+
+export { LightBeam, type LightBeamProps };

package/dist/index.d.ts

@@ -1,91 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type DustParticlesConfig = {
-  /**
-   * Enable floating dust particles in the beam
-   * @default false
-   */
-  enabled?: boolean;
-  /**
-   * Number of dust particles
-   * @default 30
-   */
-  count?: number;
-  /**
-   * Animation speed multiplier (1 = normal, 2 = twice as fast)
-   * @default 1
-   */
-  speed?: number;
-  /**
-   * Particle size range [min, max] in pixels
-   * @default [1, 3]
-   */
-  sizeRange?: [number, number];
-  /**
-   * Particle opacity range [min, max]
-   * @default [0.2, 0.6]
-   */
-  opacityRange?: [number, number];
-  /**
-   * Particle color (inherits beam color if not specified)
-   */
-  color?: string;
-};
-
-type MistConfig = {
-  /**
-   * Enable mist/fog effect
-   * @default false
-   */
-  enabled?: boolean;
-  /**
-   * Mist intensity (0-1)
-   * @default 0.3
-   */
-  intensity?: number;
-  /**
-   * Animation speed multiplier
-   * @default 1
-   */
-  speed?: number;
-  /**
-   * Number of layered mist effects for depth
-   * @default 2
-   */
-  layers?: number;
-};
-
-type PulseConfig = {
-  /**
-   * Enable rhythmic pulse effect
-   * @default false
-   */
-  enabled?: boolean;
-  /**
-   * Pulse duration in seconds
-   * @default 2
-   */
-  duration?: number;
-  /**
-   * Pulse intensity (0-1) - how much brightness varies
-   * @default 0.2
-   */
-  intensity?: number;
-  /**
-   * GSAP easing function
-   * @default "sine.inOut"
-   */
-  easing?: string;
-};
-
 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;
@@ -94,45 +10,8 @@ type LightBeamProps = {
   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;
-
-  /**
-   * GSAP ScrollTrigger start position
-   * @default "top bottom"
-   * @example "top center", "center bottom", "top 80%"
-   */
-  scrollStart?: string;
-
-  /**
-   * GSAP ScrollTrigger end position
-   * @default "top top"
-   * @example "top 20%", "center center", "bottom top"
-   */
-  scrollEnd?: string;
-
-  /**
-   * Dust particles configuration
-   * @example dustParticles={{ enabled: true, count: 50, speed: 1.5 }}
-   */
-  dustParticles?: DustParticlesConfig;
-
-  /**
-   * Mist/fog effect configuration
-   * @example mist={{ enabled: true, intensity: 0.5, layers: 3 }}
-   */
-  mist?: MistConfig;
-
-  /**
-   * Pulse effect configuration
-   * @example pulse={{ enabled: true, duration: 3, intensity: 0.3 }}
-   */
-  pulse?: PulseConfig;
 };
 
-declare const LightBeam: ({ className, style, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, disableDefaultStyles, scrollStart, scrollEnd, dustParticles, mist, pulse, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
+declare const LightBeam: ({ className, colorLightmode, colorDarkmode, maskLightByProgress, fullWidth, invert, id, onLoaded, scrollElement, }: LightBeamProps) => react_jsx_runtime.JSX.Element;
 
-export { LightBeam };
+export { LightBeam, type LightBeamProps };