gsap-react-marquee 0.1.4 → 0.1.5

package/dist/components/gsap-reactmarquee.utils.d.ts

@@ -11,6 +11,32 @@ import type { GSAPReactMarqueeProps } from "./gsap-react-marquee.type";
  * @returns Merged and deduplicated class string
  */
 export declare const cn: (...inputs: ClassValue[]) => string;
+/**
+ * Traverses the DOM tree upward to find the first non-transparent background color
+ *
+ * This function walks up the element hierarchy starting from the given element,
+ * checking each parent's computed backgroundColor style until it finds a visible
+ * (non-transparent) background color. This is useful for automatically detecting
+ * the effective background behind an element for gradient overlays.
+ *
+ * The traversal stops at the first element with a visible background color,
+ * which could be the element itself or any of its ancestors up to the document root.
+ *
+ * @param el - The HTMLElement to start the background color search from
+ * @returns The first non-transparent background color found in the hierarchy,
+ *          or "transparent" if no visible background is found
+ *
+ * @example
+ * // Element with white parent background
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "rgb(255, 255, 255)" or "#ffffff"
+ *
+ * @example
+ * // Element with no background set anywhere in hierarchy
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "transparent"
+ */
+export declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
 /**
  * Sets up container styles and rotation handling for the marquee
  *

package/dist/index.cjs.css

@@ -1 +1 @@
-.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}
+.gsap-react-marquee-container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);content:"";height:100%;left:0;position:absolute;top:0;width:15%;z-index:10}.gsap-react-marquee-container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);content:"";height:100%;position:absolute;right:0;top:0;width:15%;z-index:10}.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}

package/dist/index.cjs.js

@@ -3636,6 +3636,43 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
+/**
+ * Traverses the DOM tree upward to find the first non-transparent background color
+ *
+ * This function walks up the element hierarchy starting from the given element,
+ * checking each parent's computed backgroundColor style until it finds a visible
+ * (non-transparent) background color. This is useful for automatically detecting
+ * the effective background behind an element for gradient overlays.
+ *
+ * The traversal stops at the first element with a visible background color,
+ * which could be the element itself or any of its ancestors up to the document root.
+ *
+ * @param el - The HTMLElement to start the background color search from
+ * @returns The first non-transparent background color found in the hierarchy,
+ *          or "transparent" if no visible background is found
+ *
+ * @example
+ * // Element with white parent background
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "rgb(255, 255, 255)" or "#ffffff"
+ *
+ * @example
+ * // Element with no background set anywhere in hierarchy
+ * const color = getEffectiveBackgroundColor(marqueeElement);
+ * // Returns: "transparent"
+ */
+const getEffectiveBackgroundColor = (el) => {
+    let current = el;
+    while (current) {
+        const bg = window.getComputedStyle(current).backgroundColor;
+        // Check if background color is visible (not transparent or rgba(0,0,0,0))
+        if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+            return bg;
+        }
+        current = current.parentElement;
+    }
+    return "transparent"; // fallback when no visible background is found
+};
 /**
  * Sets up container styles and rotation handling for the marquee
  *
@@ -3957,11 +3994,18 @@ const coreAnimation = (elementsToAnimate, startX, tl, isReverse, props) => {
 };
 
 const GSAPReactMarquee = require$$0.forwardRef((props, ref) => {
-    const { children, className, dir = "left", loop = -1, paused = false, fill = false, followScrollDir = false, scrollSpeed = 2.5, } = props;
+    const { children, className, dir = "left", loop = -1, paused = false, fill = false, followScrollDir = false, scrollSpeed = 2.5, gradient = false, gradientColor = null, } = props;
     const rootRef = require$$0.useRef(null) || ref;
     const containerRef = rootRef;
     const marqueeRef = require$$0.useRef(null);
     const [marqueeDuplicates, setMarqueeDuplicates] = require$$0.useState(1);
+    const [effectivelyGradient, setEffectivelyGradient] = require$$0.useState(null);
+    require$$0.useLayoutEffect(() => {
+        if (!gradient || !(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            return;
+        const effectiveBg = getEffectiveBackgroundColor(containerRef.current);
+        setEffectivelyGradient(effectiveBg);
+    }, [gradient]);
     const isVertical = dir === "up" || dir === "down";
     const isReverse = dir === "down" || dir === "right";
     react.useGSAP(() => {
@@ -4051,6 +4095,16 @@ const GSAPReactMarquee = require$$0.forwardRef((props, ref) => {
     }, {
         dependencies: [marqueeDuplicates],
     });
+    const getGradientColor = () => {
+        // Priority order: explicit gradientColor > auto-detected > fallback
+        if (gradientColor) {
+            return gradientColor; // User-specified color takes precedence
+        }
+        if (gradient && effectivelyGradient) {
+            return effectivelyGradient; // Auto-detected background color
+        }
+        return "transparent"; // Default fallback
+    };
     /**
      * Generate cloned marquee elements for seamless looping
      *
@@ -4063,7 +4117,9 @@ const GSAPReactMarquee = require$$0.forwardRef((props, ref) => {
             return null;
         return Array.from({ length: marqueeDuplicates }, (_, i) => (jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee"), children: jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee-content", className), children: children }) }, i)));
     }, [marqueeDuplicates, className, children]);
-    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: cn("gsap-react-marquee-container flex w-full overflow-hidden whitespace-nowrap"), children: [jsxRuntimeExports.jsx("div", { ref: marqueeRef, className: cn("gsap-react-marquee"), children: jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee-content", className), children: children }) }), clonedMarquees] }));
+    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, style: {
+            "--gradient-color": getGradientColor(),
+        }, className: cn("gsap-react-marquee-container flex w-full overflow-hidden whitespace-nowrap"), children: [jsxRuntimeExports.jsx("div", { ref: marqueeRef, className: cn("gsap-react-marquee"), children: jsxRuntimeExports.jsx("div", { className: cn("gsap-react-marquee-content", className), children: children }) }), clonedMarquees] }));
 });
 GSAPReactMarquee.displayName = "GSAPReactMarquee";
 
@@ -4071,6 +4127,7 @@ exports.calculateDuplicates = calculateDuplicates;
 exports.cn = cn;
 exports.coreAnimation = coreAnimation;
 exports.default = GSAPReactMarquee;
+exports.getEffectiveBackgroundColor = getEffectiveBackgroundColor;
 exports.getMinWidth = getMinWidth;
 exports.setupContainerStyles = setupContainerStyles;
 //# sourceMappingURL=index.cjs.js.map