@stianlarsen/react-light-beam 3.1.0 → 3.1.1

package/package.json

@@ -1,34 +1,33 @@
 {
   "name": "@stianlarsen/react-light-beam",
-  "version": "3.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",
+  "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>",
@@ -48,20 +45,24 @@
   "bugs": {
     "url": "https://github.com/stianalars1/react-light-beam/issues"
   },
-  "homepage": "https://stianlars1.github.io/react-light-beam",
-  "dependencies": {
-    "@gsap/react": "^2.1.2",
-    "gsap": "^3.12.5"
-  },
+  "homepage": "https://github.com/stianalars1/react-light-beam#readme",
   "peerDependencies": {
-    "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": {
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "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,138 +0,0 @@
-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;
-  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;
-
-  /**
-   * 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;
-
-export { LightBeam };

package/dist/index.mjs

@@ -1,450 +0,0 @@
-"use client";
-import gsap3 from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { useGSAP } from '@gsap/react';
-import { useRef, useEffect, useState, useMemo } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var useIsDarkmode = () => {
-  const [isDarkmode, setIsDarkmodeActive] = useState(false);
-  useEffect(() => {
-    const matchMedia = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      console.log("Darkmode match?", matchMedia.matches);
-      setIsDarkmodeActive(matchMedia.matches);
-    };
-    setIsDarkmodeActive(matchMedia.matches);
-    matchMedia.addEventListener("change", handleChange);
-    handleChange();
-    return () => {
-      matchMedia.removeEventListener("change", handleChange);
-    };
-  }, []);
-  return { isDarkmode };
-};
-var DustParticles = ({ config, beamColor }) => {
-  const {
-    enabled = false,
-    count = 30,
-    speed = 1,
-    sizeRange = [1, 3],
-    opacityRange = [0.2, 0.6],
-    color
-  } = config;
-  const particles = useMemo(() => {
-    if (!enabled) return [];
-    return Array.from({ length: count }, (_, i) => {
-      const x = Math.random() * 100;
-      const y = Math.random() * 100;
-      const size = sizeRange[0] + Math.random() * (sizeRange[1] - sizeRange[0]);
-      const opacity = opacityRange[0] + Math.random() * (opacityRange[1] - opacityRange[0]);
-      const duration = (3 + Math.random() * 4) / speed;
-      const delay = Math.random() * duration;
-      return {
-        id: `dust-${i}`,
-        x,
-        y,
-        size,
-        opacity,
-        duration,
-        delay
-      };
-    });
-  }, [enabled, count, sizeRange, opacityRange, speed]);
-  useGSAP(
-    () => {
-      if (!enabled || particles.length === 0) return;
-      const timelines = [];
-      particles.forEach((particle) => {
-        const element = document.getElementById(particle.id);
-        if (!element) return;
-        const tl = gsap3.timeline({
-          repeat: -1,
-          yoyo: true,
-          delay: particle.delay
-        });
-        tl.to(element, {
-          y: `-=${20 + Math.random() * 30}`,
-          // Float upward 20-50px
-          x: `+=${Math.random() * 20 - 10}`,
-          // Slight horizontal drift ±10px
-          opacity: particle.opacity * 0.5,
-          // Fade slightly
-          duration: particle.duration,
-          ease: "sine.inOut"
-        });
-        timelines.push(tl);
-      });
-      return () => {
-        timelines.forEach((tl) => tl.kill());
-      };
-    },
-    {
-      dependencies: [particles, enabled]
-    }
-  );
-  if (!enabled) return null;
-  const particleColor = color || beamColor;
-  return /* @__PURE__ */ jsx(Fragment, { children: particles.map((particle) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      id: particle.id,
-      style: {
-        position: "absolute",
-        left: `${particle.x}%`,
-        top: `${particle.y}%`,
-        width: `${particle.size}px`,
-        height: `${particle.size}px`,
-        borderRadius: "50%",
-        backgroundColor: particleColor,
-        opacity: particle.opacity,
-        pointerEvents: "none",
-        willChange: "transform, opacity"
-      }
-    },
-    particle.id
-  )) });
-};
-var MistEffect = ({ config, beamColor }) => {
-  const {
-    enabled = false,
-    intensity = 0.3,
-    speed = 1,
-    layers = 2
-  } = config;
-  const mistLayers = useMemo(() => {
-    if (!enabled) return [];
-    return Array.from({ length: layers }, (_, i) => {
-      const layerOpacity = intensity * 0.6 / (i + 1);
-      const duration = (8 + i * 3) / speed;
-      const delay = i * 1.5 / speed;
-      const scale = 1 + i * 0.2;
-      return {
-        id: `mist-layer-${i}`,
-        opacity: layerOpacity,
-        duration,
-        delay,
-        scale
-      };
-    });
-  }, [enabled, intensity, speed, layers]);
-  useGSAP(
-    () => {
-      if (!enabled || mistLayers.length === 0) return;
-      const timelines = [];
-      mistLayers.forEach((layer) => {
-        const element = document.getElementById(layer.id);
-        if (!element) return;
-        const tl = gsap3.timeline({
-          repeat: -1,
-          yoyo: false
-        });
-        tl.fromTo(
-          element,
-          {
-            x: "-100%",
-            opacity: 0
-          },
-          {
-            x: "100%",
-            opacity: layer.opacity,
-            duration: layer.duration,
-            ease: "none",
-            delay: layer.delay
-          }
-        ).to(element, {
-          opacity: 0,
-          duration: layer.duration * 0.2,
-          ease: "power1.in"
-        });
-        timelines.push(tl);
-      });
-      return () => {
-        timelines.forEach((tl) => tl.kill());
-      };
-    },
-    {
-      dependencies: [mistLayers, enabled]
-    }
-  );
-  if (!enabled) return null;
-  const mistColor = beamColor.replace(/[\d.]+\)$/g, `${intensity})`);
-  return /* @__PURE__ */ jsx(Fragment, { children: mistLayers.map((layer) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      id: layer.id,
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        background: `radial-gradient(ellipse 120% 80% at 50% 20%, ${mistColor}, transparent 70%)`,
-        opacity: 0,
-        pointerEvents: "none",
-        willChange: "transform, opacity",
-        transform: `scale(${layer.scale})`,
-        filter: "blur(40px)"
-      }
-    },
-    layer.id
-  )) });
-};
-var PulseEffect = ({ config, containerRef }) => {
-  const {
-    enabled = false,
-    duration = 2,
-    intensity = 0.2,
-    easing = "sine.inOut"
-  } = config;
-  useGSAP(
-    () => {
-      if (!enabled || !containerRef.current) return;
-      const element = containerRef.current;
-      const timeline = gsap3.timeline({
-        repeat: -1,
-        // Infinite loop
-        yoyo: true
-        // Reverse on each iteration
-      });
-      const maxMultiplier = Math.min(2, 1 + intensity);
-      timeline.fromTo(
-        element,
-        {
-          "--pulse-multiplier": 1
-        },
-        {
-          "--pulse-multiplier": maxMultiplier,
-          duration,
-          ease: easing
-        }
-      );
-      const updateOpacity = () => {
-        const baseOpacity = getComputedStyle(element).getPropertyValue("--base-opacity") || "1";
-        const pulseMultiplier = getComputedStyle(element).getPropertyValue("--pulse-multiplier") || "1";
-        element.style.opacity = `calc(${baseOpacity} * ${pulseMultiplier})`;
-      };
-      const ticker = gsap3.ticker.add(updateOpacity);
-      return () => {
-        timeline.kill();
-        gsap3.ticker.remove(ticker);
-      };
-    },
-    {
-      dependencies: [enabled, duration, intensity, easing],
-      scope: containerRef
-    }
-  );
-  return null;
-};
-gsap3.registerPlugin(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"
-};
-var LightBeam = ({
-  className,
-  style,
-  colorLightmode = "rgba(0,0,0, 0.5)",
-  colorDarkmode = "rgba(255, 255, 255, 0.5)",
-  maskLightByProgress = false,
-  fullWidth = 1,
-  // Default to full width range
-  invert = false,
-  id = void 0,
-  onLoaded = void 0,
-  scrollElement,
-  disableDefaultStyles = false,
-  scrollStart = "top bottom",
-  scrollEnd = "top top",
-  dustParticles = { enabled: false },
-  mist = { enabled: false },
-  pulse = { enabled: false }
-}) => {
-  const elementRef = useRef(null);
-  const { isDarkmode } = useIsDarkmode();
-  const chosenColor = isDarkmode ? colorDarkmode : colorLightmode;
-  const colorRef = useRef(chosenColor);
-  const invertRef = useRef(invert);
-  const maskByProgressRef = useRef(maskLightByProgress);
-  const scrollTriggerRef = useRef(null);
-  useEffect(() => {
-    colorRef.current = chosenColor;
-    if (elementRef.current) {
-      elementRef.current.style.setProperty("--beam-color", chosenColor);
-    }
-  }, [chosenColor, colorLightmode, colorDarkmode]);
-  useEffect(() => {
-    const prevInvert = invertRef.current;
-    invertRef.current = invert;
-    if (prevInvert !== invert && scrollTriggerRef.current && elementRef.current) {
-      const st = scrollTriggerRef.current;
-      elementRef.current;
-      st.refresh();
-    }
-  }, [invert]);
-  useEffect(() => {
-    const prevMaskByProgress = maskByProgressRef.current;
-    maskByProgressRef.current = maskLightByProgress;
-    if (prevMaskByProgress !== maskLightByProgress && elementRef.current) {
-      const element = elementRef.current;
-      if (maskLightByProgress) {
-        element.style.setProperty("--beam-mask-stop", "50%");
-        element.style.maskImage = `linear-gradient(to bottom, var(--beam-color) 0%, transparent var(--beam-mask-stop))`;
-        element.style.webkitMaskImage = `linear-gradient(to bottom, var(--beam-color) 0%, transparent var(--beam-mask-stop))`;
-      } else {
-        element.style.maskImage = `linear-gradient(to bottom, var(--beam-color) 25%, transparent 95%)`;
-        element.style.webkitMaskImage = `linear-gradient(to bottom, var(--beam-color) 25%, transparent 95%)`;
-      }
-      if (scrollTriggerRef.current) {
-        scrollTriggerRef.current.refresh();
-      }
-    }
-  }, [maskLightByProgress]);
-  useEffect(() => {
-    onLoaded && onLoaded();
-  }, []);
-  useGSAP(
-    () => {
-      const element = elementRef.current;
-      if (!element || typeof window === "undefined") return;
-      const opacityMin = 0.839322;
-      const opacityRange = 0.160678;
-      const updateColorVar = (color) => {
-        element.style.setProperty("--beam-color", color);
-      };
-      const initGradientStructure = (color) => {
-        updateColorVar(color);
-        const baseGradient = `conic-gradient(from 90deg at var(--beam-left-pos) 0%, var(--beam-color), transparent 180deg) 0% 0% / 50% var(--beam-left-size) no-repeat, conic-gradient(from 270deg at var(--beam-right-pos) 0%, transparent 180deg, var(--beam-color)) 100% 0% / 50% 100% no-repeat`;
-        element.style.background = baseGradient;
-        if (maskByProgressRef.current) {
-          element.style.maskImage = `linear-gradient(to bottom, var(--beam-color) 0%, transparent var(--beam-mask-stop))`;
-          element.style.webkitMaskImage = `linear-gradient(to bottom, var(--beam-color) 0%, transparent var(--beam-mask-stop))`;
-        } else {
-          element.style.maskImage = `linear-gradient(to bottom, var(--beam-color) 25%, transparent 95%)`;
-          element.style.webkitMaskImage = `linear-gradient(to bottom, var(--beam-color) 25%, transparent 95%)`;
-        }
-      };
-      const adjustedFullWidth = 1 - fullWidth;
-      const calculateProgress = (rawProgress) => {
-        const normalizedPosition = Math.max(
-          adjustedFullWidth,
-          // Floor value (1 - fullWidth)
-          Math.min(1, 1 - rawProgress)
-          // Inverted GSAP progress
-        );
-        return invertRef.current ? normalizedPosition : 1 - normalizedPosition;
-      };
-      const scroller = scrollElement ? scrollElement : void 0;
-      const applyProgressState = (progress) => {
-        const leftPos = 90 - progress * 90;
-        const rightPos = 10 + progress * 90;
-        const leftSize = 150 - progress * 50;
-        const baseOpacity = opacityMin + opacityRange * progress;
-        const maskStop = maskByProgressRef.current ? 50 + progress * 45 : void 0;
-        const cssProps = {
-          "--beam-left-pos": `${leftPos}%`,
-          "--beam-right-pos": `${rightPos}%`,
-          "--beam-left-size": `${leftSize}%`,
-          "--base-opacity": baseOpacity
-        };
-        if (maskStop !== void 0) {
-          cssProps["--beam-mask-stop"] = `${maskStop}%`;
-        }
-        if (!pulse.enabled) {
-          cssProps.opacity = baseOpacity;
-        }
-        gsap3.set(element, cssProps);
-      };
-      initGradientStructure(colorRef.current);
-      const st = ScrollTrigger.create({
-        trigger: element,
-        start: scrollStart,
-        // When to start the animation
-        end: scrollEnd,
-        // When to end the animation
-        scroller,
-        scrub: 0.15,
-        // Fast catch-up (300ms) for responsive scroll without jitter
-        onUpdate: (self) => {
-          const progress = calculateProgress(self.progress);
-          applyProgressState(progress);
-        },
-        onRefresh: (self) => {
-          const progress = calculateProgress(self.progress);
-          applyProgressState(progress);
-        }
-      });
-      scrollTriggerRef.current = st;
-      const initialProgress = calculateProgress(st.progress);
-      applyProgressState(initialProgress);
-      const refreshTimeout = setTimeout(() => {
-        ScrollTrigger.refresh();
-      }, 100);
-      return () => {
-        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 progress range calculation
-        scrollElement,
-        // Affects which element to watch
-        scrollStart,
-        // Affects when animation starts
-        scrollEnd
-        // Affects when animation ends
-      ],
-      scope: elementRef
-    }
-  );
-  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__ */ jsxs(
-    "div",
-    {
-      ref: elementRef,
-      className: combinedClassName,
-      style: finalStyles,
-      ...id ? { id } : {},
-      children: [
-        dustParticles.enabled && /* @__PURE__ */ jsx(DustParticles, { config: dustParticles, beamColor: chosenColor }),
-        mist.enabled && /* @__PURE__ */ jsx(MistEffect, { config: mist, beamColor: chosenColor }),
-        pulse.enabled && /* @__PURE__ */ jsx(PulseEffect, { config: pulse, containerRef: elementRef })
-      ]
-    }
-  );
-};
-
-export { LightBeam };
-//# sourceMappingURL=index.mjs.map