gsap-react-marquee 0.1.3 → 0.1.5

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import require$$0, { forwardRef, useRef, useState, useMemo } from 'react';
+import require$$0, { forwardRef, useRef, useState, useLayoutEffect, useMemo } from 'react';
 import { useGSAP } from '@gsap/react';
-import gsap from 'gsap';
+import gsap$1 from 'gsap';
 
 var jsxRuntime = {exports: {}};
 
@@ -421,6 +421,710 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); return Constructor; }
+
+/*!
+ * Observer 3.13.0
+ * https://gsap.com
+ *
+ * @license Copyright 2008-2025, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var gsap,
+    _coreInitted,
+    _win,
+    _doc,
+    _docEl,
+    _body,
+    _isTouch,
+    _pointerType,
+    ScrollTrigger,
+    _root,
+    _normalizer,
+    _eventTypes,
+    _context,
+    _getGSAP = function _getGSAP() {
+  return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap;
+},
+    _startup = 1,
+    _observers = [],
+    _scrollers = [],
+    _proxies = [],
+    _getTime = Date.now,
+    _bridge = function _bridge(name, value) {
+  return value;
+},
+    _integrate = function _integrate() {
+  var core = ScrollTrigger.core,
+      data = core.bridge || {},
+      scrollers = core._scrollers,
+      proxies = core._proxies;
+  scrollers.push.apply(scrollers, _scrollers);
+  proxies.push.apply(proxies, _proxies);
+  _scrollers = scrollers;
+  _proxies = proxies;
+
+  _bridge = function _bridge(name, value) {
+    return data[name](value);
+  };
+},
+    _getProxyProp = function _getProxyProp(element, property) {
+  return ~_proxies.indexOf(element) && _proxies[_proxies.indexOf(element) + 1][property];
+},
+    _isViewport = function _isViewport(el) {
+  return !!~_root.indexOf(el);
+},
+    _addListener = function _addListener(element, type, func, passive, capture) {
+  return element.addEventListener(type, func, {
+    passive: passive !== false,
+    capture: !!capture
+  });
+},
+    _removeListener = function _removeListener(element, type, func, capture) {
+  return element.removeEventListener(type, func, !!capture);
+},
+    _scrollLeft = "scrollLeft",
+    _scrollTop = "scrollTop",
+    _onScroll = function _onScroll() {
+  return _normalizer && _normalizer.isPressed || _scrollers.cache++;
+},
+    _scrollCacheFunc = function _scrollCacheFunc(f, doNotCache) {
+  var cachingFunc = function cachingFunc(value) {
+    // since reading the scrollTop/scrollLeft/pageOffsetY/pageOffsetX can trigger a layout, this function allows us to cache the value so it only gets read fresh after a "scroll" event fires (or while we're refreshing because that can lengthen the page and alter the scroll position). when "soft" is true, that means don't actually set the scroll, but cache the new value instead (useful in ScrollSmoother)
+    if (value || value === 0) {
+      _startup && (_win.history.scrollRestoration = "manual"); // otherwise the new position will get overwritten by the browser onload.
+
+      var isNormalizing = _normalizer && _normalizer.isPressed;
+      value = cachingFunc.v = Math.round(value) || (_normalizer && _normalizer.iOS ? 1 : 0); //TODO: iOS Bug: if you allow it to go to 0, Safari can start to report super strange (wildly inaccurate) touch positions!
+
+      f(value);
+      cachingFunc.cacheID = _scrollers.cache;
+      isNormalizing && _bridge("ss", value); // set scroll (notify ScrollTrigger so it can dispatch a "scrollStart" event if necessary
+    } else if (doNotCache || _scrollers.cache !== cachingFunc.cacheID || _bridge("ref")) {
+      cachingFunc.cacheID = _scrollers.cache;
+      cachingFunc.v = f();
+    }
+
+    return cachingFunc.v + cachingFunc.offset;
+  };
+
+  cachingFunc.offset = 0;
+  return f && cachingFunc;
+},
+    _horizontal = {
+  s: _scrollLeft,
+  p: "left",
+  p2: "Left",
+  os: "right",
+  os2: "Right",
+  d: "width",
+  d2: "Width",
+  a: "x",
+  sc: _scrollCacheFunc(function (value) {
+    return arguments.length ? _win.scrollTo(value, _vertical.sc()) : _win.pageXOffset || _doc[_scrollLeft] || _docEl[_scrollLeft] || _body[_scrollLeft] || 0;
+  })
+},
+    _vertical = {
+  s: _scrollTop,
+  p: "top",
+  p2: "Top",
+  os: "bottom",
+  os2: "Bottom",
+  d: "height",
+  d2: "Height",
+  a: "y",
+  op: _horizontal,
+  sc: _scrollCacheFunc(function (value) {
+    return arguments.length ? _win.scrollTo(_horizontal.sc(), value) : _win.pageYOffset || _doc[_scrollTop] || _docEl[_scrollTop] || _body[_scrollTop] || 0;
+  })
+},
+    _getTarget = function _getTarget(t, self) {
+  return (self && self._ctx && self._ctx.selector || gsap.utils.toArray)(t)[0] || (typeof t === "string" && gsap.config().nullTargetWarn !== false ? console.warn("Element not found:", t) : null);
+},
+    _isWithin = function _isWithin(element, list) {
+  // check if the element is in the list or is a descendant of an element in the list.
+  var i = list.length;
+
+  while (i--) {
+    if (list[i] === element || list[i].contains(element)) {
+      return true;
+    }
+  }
+
+  return false;
+},
+    _getScrollFunc = function _getScrollFunc(element, _ref) {
+  var s = _ref.s,
+      sc = _ref.sc;
+  // we store the scroller functions in an alternating sequenced Array like [element, verticalScrollFunc, horizontalScrollFunc, ...] so that we can minimize memory, maximize performance, and we also record the last position as a ".rec" property in order to revert to that after refreshing to ensure things don't shift around.
+  _isViewport(element) && (element = _doc.scrollingElement || _docEl);
+
+  var i = _scrollers.indexOf(element),
+      offset = sc === _vertical.sc ? 1 : 2;
+
+  !~i && (i = _scrollers.push(element) - 1);
+  _scrollers[i + offset] || _addListener(element, "scroll", _onScroll); // clear the cache when a scroll occurs
+
+  var prev = _scrollers[i + offset],
+      func = prev || (_scrollers[i + offset] = _scrollCacheFunc(_getProxyProp(element, s), true) || (_isViewport(element) ? sc : _scrollCacheFunc(function (value) {
+    return arguments.length ? element[s] = value : element[s];
+  })));
+  func.target = element;
+  prev || (func.smooth = gsap.getProperty(element, "scrollBehavior") === "smooth"); // only set it the first time (don't reset every time a scrollFunc is requested because perhaps it happens during a refresh() when it's disabled in ScrollTrigger.
+
+  return func;
+},
+    _getVelocityProp = function _getVelocityProp(value, minTimeRefresh, useDelta) {
+  var v1 = value,
+      v2 = value,
+      t1 = _getTime(),
+      t2 = t1,
+      min = minTimeRefresh,
+      dropToZeroTime = Math.max(500, min * 3),
+      update = function update(value, force) {
+    var t = _getTime();
+
+    if (force || t - t1 > min) {
+      v2 = v1;
+      v1 = value;
+      t2 = t1;
+      t1 = t;
+    } else {
+      v1 += value;
+    }
+  },
+      reset = function reset() {
+    v2 = v1 = 0 ;
+    t2 = t1 = 0;
+  },
+      getVelocity = function getVelocity(latestValue) {
+    var tOld = t2,
+        vOld = v2,
+        t = _getTime();
+
+    (latestValue || latestValue === 0) && latestValue !== v1 && update(latestValue);
+    return t1 === t2 || t - t2 > dropToZeroTime ? 0 : (v1 + (vOld )) / ((t ) - tOld) * 1000;
+  };
+
+  return {
+    update: update,
+    reset: reset,
+    getVelocity: getVelocity
+  };
+},
+    _getEvent = function _getEvent(e, preventDefault) {
+  preventDefault && !e._gsapAllow && e.preventDefault();
+  return e.changedTouches ? e.changedTouches[0] : e;
+},
+    _getAbsoluteMax = function _getAbsoluteMax(a) {
+  var max = Math.max.apply(Math, a),
+      min = Math.min.apply(Math, a);
+  return Math.abs(max) >= Math.abs(min) ? max : min;
+},
+    _setScrollTrigger = function _setScrollTrigger() {
+  ScrollTrigger = gsap.core.globals().ScrollTrigger;
+  ScrollTrigger && ScrollTrigger.core && _integrate();
+},
+    _initCore = function _initCore(core) {
+  gsap = core || _getGSAP();
+
+  if (!_coreInitted && gsap && typeof document !== "undefined" && document.body) {
+    _win = window;
+    _doc = document;
+    _docEl = _doc.documentElement;
+    _body = _doc.body;
+    _root = [_win, _doc, _docEl, _body];
+    gsap.utils.clamp;
+
+    _context = gsap.core.context || function () {};
+
+    _pointerType = "onpointerenter" in _body ? "pointer" : "mouse"; // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
+
+    _isTouch = Observer.isTouch = _win.matchMedia && _win.matchMedia("(hover: none), (pointer: coarse)").matches ? 1 : "ontouchstart" in _win || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ? 2 : 0;
+    _eventTypes = Observer.eventTypes = ("ontouchstart" in _docEl ? "touchstart,touchmove,touchcancel,touchend" : !("onpointerdown" in _docEl) ? "mousedown,mousemove,mouseup,mouseup" : "pointerdown,pointermove,pointercancel,pointerup").split(",");
+    setTimeout(function () {
+      return _startup = 0;
+    }, 500);
+
+    _setScrollTrigger();
+
+    _coreInitted = 1;
+  }
+
+  return _coreInitted;
+};
+
+_horizontal.op = _vertical;
+_scrollers.cache = 0;
+var Observer = /*#__PURE__*/function () {
+  function Observer(vars) {
+    this.init(vars);
+  }
+
+  var _proto = Observer.prototype;
+
+  _proto.init = function init(vars) {
+    _coreInitted || _initCore(gsap) || console.warn("Please gsap.registerPlugin(Observer)");
+    ScrollTrigger || _setScrollTrigger();
+    var tolerance = vars.tolerance,
+        dragMinimum = vars.dragMinimum,
+        type = vars.type,
+        target = vars.target,
+        lineHeight = vars.lineHeight,
+        debounce = vars.debounce,
+        preventDefault = vars.preventDefault,
+        onStop = vars.onStop,
+        onStopDelay = vars.onStopDelay,
+        ignore = vars.ignore,
+        wheelSpeed = vars.wheelSpeed,
+        event = vars.event,
+        onDragStart = vars.onDragStart,
+        onDragEnd = vars.onDragEnd,
+        onDrag = vars.onDrag,
+        onPress = vars.onPress,
+        onRelease = vars.onRelease,
+        onRight = vars.onRight,
+        onLeft = vars.onLeft,
+        onUp = vars.onUp,
+        onDown = vars.onDown,
+        onChangeX = vars.onChangeX,
+        onChangeY = vars.onChangeY,
+        onChange = vars.onChange,
+        onToggleX = vars.onToggleX,
+        onToggleY = vars.onToggleY,
+        onHover = vars.onHover,
+        onHoverEnd = vars.onHoverEnd,
+        onMove = vars.onMove,
+        ignoreCheck = vars.ignoreCheck,
+        isNormalizer = vars.isNormalizer,
+        onGestureStart = vars.onGestureStart,
+        onGestureEnd = vars.onGestureEnd,
+        onWheel = vars.onWheel,
+        onEnable = vars.onEnable,
+        onDisable = vars.onDisable,
+        onClick = vars.onClick,
+        scrollSpeed = vars.scrollSpeed,
+        capture = vars.capture,
+        allowClicks = vars.allowClicks,
+        lockAxis = vars.lockAxis,
+        onLockAxis = vars.onLockAxis;
+    this.target = target = _getTarget(target) || _docEl;
+    this.vars = vars;
+    ignore && (ignore = gsap.utils.toArray(ignore));
+    tolerance = tolerance || 1e-9;
+    dragMinimum = dragMinimum || 0;
+    wheelSpeed = wheelSpeed || 1;
+    scrollSpeed = scrollSpeed || 1;
+    type = type || "wheel,touch,pointer";
+    debounce = debounce !== false;
+    lineHeight || (lineHeight = parseFloat(_win.getComputedStyle(_body).lineHeight) || 22); // note: browser may report "normal", so default to 22.
+
+    var id,
+        onStopDelayedCall,
+        dragged,
+        moved,
+        wheeled,
+        locked,
+        axis,
+        self = this,
+        prevDeltaX = 0,
+        prevDeltaY = 0,
+        passive = vars.passive || !preventDefault && vars.passive !== false,
+        scrollFuncX = _getScrollFunc(target, _horizontal),
+        scrollFuncY = _getScrollFunc(target, _vertical),
+        scrollX = scrollFuncX(),
+        scrollY = scrollFuncY(),
+        limitToTouch = ~type.indexOf("touch") && !~type.indexOf("pointer") && _eventTypes[0] === "pointerdown",
+        // for devices that accommodate mouse events and touch events, we need to distinguish.
+    isViewport = _isViewport(target),
+        ownerDoc = target.ownerDocument || _doc,
+        deltaX = [0, 0, 0],
+        // wheel, scroll, pointer/touch
+    deltaY = [0, 0, 0],
+        onClickTime = 0,
+        clickCapture = function clickCapture() {
+      return onClickTime = _getTime();
+    },
+        _ignoreCheck = function _ignoreCheck(e, isPointerOrTouch) {
+      return (self.event = e) && ignore && _isWithin(e.target, ignore) || isPointerOrTouch && limitToTouch && e.pointerType !== "touch" || ignoreCheck && ignoreCheck(e, isPointerOrTouch);
+    },
+        onStopFunc = function onStopFunc() {
+      self._vx.reset();
+
+      self._vy.reset();
+
+      onStopDelayedCall.pause();
+      onStop && onStop(self);
+    },
+        update = function update() {
+      var dx = self.deltaX = _getAbsoluteMax(deltaX),
+          dy = self.deltaY = _getAbsoluteMax(deltaY),
+          changedX = Math.abs(dx) >= tolerance,
+          changedY = Math.abs(dy) >= tolerance;
+
+      onChange && (changedX || changedY) && onChange(self, dx, dy, deltaX, deltaY); // in ScrollTrigger.normalizeScroll(), we need to know if it was touch/pointer so we need access to the deltaX/deltaY Arrays before we clear them out.
+
+      if (changedX) {
+        onRight && self.deltaX > 0 && onRight(self);
+        onLeft && self.deltaX < 0 && onLeft(self);
+        onChangeX && onChangeX(self);
+        onToggleX && self.deltaX < 0 !== prevDeltaX < 0 && onToggleX(self);
+        prevDeltaX = self.deltaX;
+        deltaX[0] = deltaX[1] = deltaX[2] = 0;
+      }
+
+      if (changedY) {
+        onDown && self.deltaY > 0 && onDown(self);
+        onUp && self.deltaY < 0 && onUp(self);
+        onChangeY && onChangeY(self);
+        onToggleY && self.deltaY < 0 !== prevDeltaY < 0 && onToggleY(self);
+        prevDeltaY = self.deltaY;
+        deltaY[0] = deltaY[1] = deltaY[2] = 0;
+      }
+
+      if (moved || dragged) {
+        onMove && onMove(self);
+
+        if (dragged) {
+          onDragStart && dragged === 1 && onDragStart(self);
+          onDrag && onDrag(self);
+          dragged = 0;
+        }
+
+        moved = false;
+      }
+
+      locked && !(locked = false) && onLockAxis && onLockAxis(self);
+
+      if (wheeled) {
+        onWheel(self);
+        wheeled = false;
+      }
+
+      id = 0;
+    },
+        onDelta = function onDelta(x, y, index) {
+      deltaX[index] += x;
+      deltaY[index] += y;
+
+      self._vx.update(x);
+
+      self._vy.update(y);
+
+      debounce ? id || (id = requestAnimationFrame(update)) : update();
+    },
+        onTouchOrPointerDelta = function onTouchOrPointerDelta(x, y) {
+      if (lockAxis && !axis) {
+        self.axis = axis = Math.abs(x) > Math.abs(y) ? "x" : "y";
+        locked = true;
+      }
+
+      if (axis !== "y") {
+        deltaX[2] += x;
+
+        self._vx.update(x, true); // update the velocity as frequently as possible instead of in the debounced function so that very quick touch-scrolls (flicks) feel natural. If it's the mouse/touch/pointer, force it so that we get snappy/accurate momentum scroll.
+
+      }
+
+      if (axis !== "x") {
+        deltaY[2] += y;
+
+        self._vy.update(y, true);
+      }
+
+      debounce ? id || (id = requestAnimationFrame(update)) : update();
+    },
+        _onDrag = function _onDrag(e) {
+      if (_ignoreCheck(e, 1)) {
+        return;
+      }
+
+      e = _getEvent(e, preventDefault);
+      var x = e.clientX,
+          y = e.clientY,
+          dx = x - self.x,
+          dy = y - self.y,
+          isDragging = self.isDragging;
+      self.x = x;
+      self.y = y;
+
+      if (isDragging || (dx || dy) && (Math.abs(self.startX - x) >= dragMinimum || Math.abs(self.startY - y) >= dragMinimum)) {
+        dragged = isDragging ? 2 : 1; // dragged: 0 = not dragging, 1 = first drag, 2 = normal drag
+
+        isDragging || (self.isDragging = true);
+        onTouchOrPointerDelta(dx, dy);
+      }
+    },
+        _onPress = self.onPress = function (e) {
+      if (_ignoreCheck(e, 1) || e && e.button) {
+        return;
+      }
+
+      self.axis = axis = null;
+      onStopDelayedCall.pause();
+      self.isPressed = true;
+      e = _getEvent(e); // note: may need to preventDefault(?) Won't side-scroll on iOS Safari if we do, though.
+
+      prevDeltaX = prevDeltaY = 0;
+      self.startX = self.x = e.clientX;
+      self.startY = self.y = e.clientY;
+
+      self._vx.reset(); // otherwise the t2 may be stale if the user touches and flicks super fast and releases in less than 2 requestAnimationFrame ticks, causing velocity to be 0.
+
+
+      self._vy.reset();
+
+      _addListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, passive, true);
+
+      self.deltaX = self.deltaY = 0;
+      onPress && onPress(self);
+    },
+        _onRelease = self.onRelease = function (e) {
+      if (_ignoreCheck(e, 1)) {
+        return;
+      }
+
+      _removeListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, true);
+
+      var isTrackingDrag = !isNaN(self.y - self.startY),
+          wasDragging = self.isDragging,
+          isDragNotClick = wasDragging && (Math.abs(self.x - self.startX) > 3 || Math.abs(self.y - self.startY) > 3),
+          // some touch devices need some wiggle room in terms of sensing clicks - the finger may move a few pixels.
+      eventData = _getEvent(e);
+
+      if (!isDragNotClick && isTrackingDrag) {
+        self._vx.reset();
+
+        self._vy.reset(); //if (preventDefault && allowClicks && self.isPressed) { // check isPressed because in a rare edge case, the inputObserver in ScrollTrigger may stopPropagation() on the press/drag, so the onRelease may get fired without the onPress/onDrag ever getting called, thus it could trigger a click to occur on a link after scroll-dragging it.
+
+
+        if (preventDefault && allowClicks) {
+          gsap.delayedCall(0.08, function () {
+            // some browsers (like Firefox) won't trust script-generated clicks, so if the user tries to click on a video to play it, for example, it simply won't work. Since a regular "click" event will most likely be generated anyway (one that has its isTrusted flag set to true), we must slightly delay our script-generated click so that the "real"/trusted one is prioritized. Remember, when there are duplicate events in quick succession, we suppress all but the first one. Some browsers don't even trigger the "real" one at all, so our synthetic one is a safety valve that ensures that no matter what, a click event does get dispatched.
+            if (_getTime() - onClickTime > 300 && !e.defaultPrevented) {
+              if (e.target.click) {
+                //some browsers (like mobile Safari) don't properly trigger the click event
+                e.target.click();
+              } else if (ownerDoc.createEvent) {
+                var syntheticEvent = ownerDoc.createEvent("MouseEvents");
+                syntheticEvent.initMouseEvent("click", true, true, _win, 1, eventData.screenX, eventData.screenY, eventData.clientX, eventData.clientY, false, false, false, false, 0, null);
+                e.target.dispatchEvent(syntheticEvent);
+              }
+            }
+          });
+        }
+      }
+
+      self.isDragging = self.isGesturing = self.isPressed = false;
+      onStop && wasDragging && !isNormalizer && onStopDelayedCall.restart(true);
+      dragged && update(); // in case debouncing, we don't want onDrag to fire AFTER onDragEnd().
+
+      onDragEnd && wasDragging && onDragEnd(self);
+      onRelease && onRelease(self, isDragNotClick);
+    },
+        _onGestureStart = function _onGestureStart(e) {
+      return e.touches && e.touches.length > 1 && (self.isGesturing = true) && onGestureStart(e, self.isDragging);
+    },
+        _onGestureEnd = function _onGestureEnd() {
+      return (self.isGesturing = false) || onGestureEnd(self);
+    },
+        onScroll = function onScroll(e) {
+      if (_ignoreCheck(e)) {
+        return;
+      }
+
+      var x = scrollFuncX(),
+          y = scrollFuncY();
+      onDelta((x - scrollX) * scrollSpeed, (y - scrollY) * scrollSpeed, 1);
+      scrollX = x;
+      scrollY = y;
+      onStop && onStopDelayedCall.restart(true);
+    },
+        _onWheel = function _onWheel(e) {
+      if (_ignoreCheck(e)) {
+        return;
+      }
+
+      e = _getEvent(e, preventDefault);
+      onWheel && (wheeled = true);
+      var multiplier = (e.deltaMode === 1 ? lineHeight : e.deltaMode === 2 ? _win.innerHeight : 1) * wheelSpeed;
+      onDelta(e.deltaX * multiplier, e.deltaY * multiplier, 0);
+      onStop && !isNormalizer && onStopDelayedCall.restart(true);
+    },
+        _onMove = function _onMove(e) {
+      if (_ignoreCheck(e)) {
+        return;
+      }
+
+      var x = e.clientX,
+          y = e.clientY,
+          dx = x - self.x,
+          dy = y - self.y;
+      self.x = x;
+      self.y = y;
+      moved = true;
+      onStop && onStopDelayedCall.restart(true);
+      (dx || dy) && onTouchOrPointerDelta(dx, dy);
+    },
+        _onHover = function _onHover(e) {
+      self.event = e;
+      onHover(self);
+    },
+        _onHoverEnd = function _onHoverEnd(e) {
+      self.event = e;
+      onHoverEnd(self);
+    },
+        _onClick = function _onClick(e) {
+      return _ignoreCheck(e) || _getEvent(e, preventDefault) && onClick(self);
+    };
+
+    onStopDelayedCall = self._dc = gsap.delayedCall(onStopDelay || 0.25, onStopFunc).pause();
+    self.deltaX = self.deltaY = 0;
+    self._vx = _getVelocityProp(0, 50);
+    self._vy = _getVelocityProp(0, 50);
+    self.scrollX = scrollFuncX;
+    self.scrollY = scrollFuncY;
+    self.isDragging = self.isGesturing = self.isPressed = false;
+
+    _context(this);
+
+    self.enable = function (e) {
+      if (!self.isEnabled) {
+        _addListener(isViewport ? ownerDoc : target, "scroll", _onScroll);
+
+        type.indexOf("scroll") >= 0 && _addListener(isViewport ? ownerDoc : target, "scroll", onScroll, passive, capture);
+        type.indexOf("wheel") >= 0 && _addListener(target, "wheel", _onWheel, passive, capture);
+
+        if (type.indexOf("touch") >= 0 && _isTouch || type.indexOf("pointer") >= 0) {
+          _addListener(target, _eventTypes[0], _onPress, passive, capture);
+
+          _addListener(ownerDoc, _eventTypes[2], _onRelease);
+
+          _addListener(ownerDoc, _eventTypes[3], _onRelease);
+
+          allowClicks && _addListener(target, "click", clickCapture, true, true);
+          onClick && _addListener(target, "click", _onClick);
+          onGestureStart && _addListener(ownerDoc, "gesturestart", _onGestureStart);
+          onGestureEnd && _addListener(ownerDoc, "gestureend", _onGestureEnd);
+          onHover && _addListener(target, _pointerType + "enter", _onHover);
+          onHoverEnd && _addListener(target, _pointerType + "leave", _onHoverEnd);
+          onMove && _addListener(target, _pointerType + "move", _onMove);
+        }
+
+        self.isEnabled = true;
+        self.isDragging = self.isGesturing = self.isPressed = moved = dragged = false;
+
+        self._vx.reset();
+
+        self._vy.reset();
+
+        scrollX = scrollFuncX();
+        scrollY = scrollFuncY();
+        e && e.type && _onPress(e);
+        onEnable && onEnable(self);
+      }
+
+      return self;
+    };
+
+    self.disable = function () {
+      if (self.isEnabled) {
+        // only remove the _onScroll listener if there aren't any others that rely on the functionality.
+        _observers.filter(function (o) {
+          return o !== self && _isViewport(o.target);
+        }).length || _removeListener(isViewport ? ownerDoc : target, "scroll", _onScroll);
+
+        if (self.isPressed) {
+          self._vx.reset();
+
+          self._vy.reset();
+
+          _removeListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, true);
+        }
+
+        _removeListener(isViewport ? ownerDoc : target, "scroll", onScroll, capture);
+
+        _removeListener(target, "wheel", _onWheel, capture);
+
+        _removeListener(target, _eventTypes[0], _onPress, capture);
+
+        _removeListener(ownerDoc, _eventTypes[2], _onRelease);
+
+        _removeListener(ownerDoc, _eventTypes[3], _onRelease);
+
+        _removeListener(target, "click", clickCapture, true);
+
+        _removeListener(target, "click", _onClick);
+
+        _removeListener(ownerDoc, "gesturestart", _onGestureStart);
+
+        _removeListener(ownerDoc, "gestureend", _onGestureEnd);
+
+        _removeListener(target, _pointerType + "enter", _onHover);
+
+        _removeListener(target, _pointerType + "leave", _onHoverEnd);
+
+        _removeListener(target, _pointerType + "move", _onMove);
+
+        self.isEnabled = self.isPressed = self.isDragging = false;
+        onDisable && onDisable(self);
+      }
+    };
+
+    self.kill = self.revert = function () {
+      self.disable();
+
+      var i = _observers.indexOf(self);
+
+      i >= 0 && _observers.splice(i, 1);
+      _normalizer === self && (_normalizer = 0);
+    };
+
+    _observers.push(self);
+
+    isNormalizer && _isViewport(target) && (_normalizer = self);
+    self.enable(event);
+  };
+
+  _createClass(Observer, [{
+    key: "velocityX",
+    get: function get() {
+      return this._vx.getVelocity();
+    }
+  }, {
+    key: "velocityY",
+    get: function get() {
+      return this._vy.getVelocity();
+    }
+  }]);
+
+  return Observer;
+}();
+Observer.version = "3.13.0";
+
+Observer.create = function (vars) {
+  return new Observer(vars);
+};
+
+Observer.register = _initCore;
+
+Observer.getAll = function () {
+  return _observers.slice();
+};
+
+Observer.getById = function (id) {
+  return _observers.filter(function (o) {
+    return o.vars.id === id;
+  })[0];
+};
+
+_getGSAP() && gsap.registerPlugin(Observer);
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const CLASS_PART_SEPARATOR = '-';
@@ -2917,124 +3621,367 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
 /**
  * Utility function to merge Tailwind classes with clsx
+ *
+ * Combines clsx for conditional classes with tailwind-merge to handle
+ * conflicting Tailwind classes by keeping the last occurrence.
+ * This prevents issues like "p-4 p-2" where both would be applied.
+ *
+ * @param inputs - Array of class values (strings, conditionals, objects)
+ * @returns Merged and deduplicated class string
  */
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
 /**
- * Sets up container styles and rotation handling
+ * 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
+ *
+ * This function handles the complex styling requirements for different marquee orientations:
+ *
+ * 1. **Basic Setup**: Applies gap spacing and rotation for vertical marquees
+ * 2. **Vertical Mode**: Rotates container 90° and adjusts width to parent height
+ * 3. **Rotation Alignment**: Special mode for vertical text that remains readable
+ *
+ * @param containerMarquee - The main container element that holds all marquee instances
+ * @param marquees - Array of individual marquee wrapper elements
+ * @param marqueesChildren - Array of content container elements within each marquee
+ * @param isVertical - Boolean indicating if marquee moves up/down instead of left/right
+ * @param props - Configuration object containing spacing and alignment options
  */
 const setupContainerStyles = (containerMarquee, marquees, marqueesChildren, isVertical, props) => {
     const { spacing = 16, alignRotationWithY = false } = props;
-    gsap.set(containerMarquee, {
+    /**
+     * Apply base container styling
+     * - gap: Space between marquee elements (prevents content overlap)
+     * - rotate: 90° rotation for vertical movement (transforms horizontal motion to vertical)
+     */
+    gsap$1.set(containerMarquee, {
         gap: `${spacing}px`,
         rotate: isVertical ? 90 : "0",
     });
+    /**
+     * Handle vertical marquee specific adjustments
+     * When isVertical is true, the container is rotated 90°, so we need to:
+     * 1. Set container width to match parent height (since it's rotated)
+     * 2. Allow content to overflow visible bounds for smooth transitions
+     */
     if (isVertical) {
         const parent = containerMarquee.parentNode;
-        gsap.set(containerMarquee, {
-            width: parent.offsetHeight,
+        gsap$1.set(containerMarquee, {
+            width: parent.offsetHeight, // Width becomes the vertical space available
         });
-        gsap.set(marqueesChildren, {
-            overflow: "visible",
+        gsap$1.set(marqueesChildren, {
+            overflow: "visible", // Prevents clipping during animation
         });
     }
+    /**
+     * Handle special rotation alignment mode
+     *
+     * This creates a complex layout where:
+     * - The main container is rotated for vertical movement
+     * - Individual content is counter-rotated to remain readable
+     * - Content is repositioned to align properly within the rotated space
+     *
+     * Use case: Vertical text marquee where text remains horizontally readable
+     */
     if (alignRotationWithY && marquees.length > 0) {
         const marqueeHeight = marquees[0].offsetHeight;
-        gsap.set(containerMarquee, {
+        // Center align items within the container
+        gsap$1.set(containerMarquee, {
             alignItems: "center",
         });
-        gsap.set(marqueesChildren, {
-            rotate: -90,
-            x: (containerMarquee.offsetWidth - spacing) / 2 - spacing,
+        /**
+         * Counter-rotate content and reposition for proper alignment
+         *
+         * - rotate: -90° counters the container's 90° rotation
+         * - x: Horizontal offset to center content within rotated container
+         * - width: Set to marquee height since dimensions are swapped after rotation
+         * - flexWrap/wordBreak/whiteSpace: Handle text flow in constrained space
+         */
+        gsap$1.set(marqueesChildren, {
+            rotate: -90, // Counter-rotate to keep text readable
+            x: (containerMarquee.offsetWidth - spacing) / 2 - spacing, // Center horizontally
             display: "flex",
-            flexWrap: "wrap",
-            width: marqueeHeight,
-            wordBreak: "break-all",
-            whiteSpace: "break-spaces",
+            flexWrap: "wrap", // Allow text to wrap within constrained width
+            width: marqueeHeight, // Width constraint for wrapped text
+            wordBreak: "break-all", // Force word breaking if necessary
+            whiteSpace: "break-spaces", // Preserve spaces while allowing breaks
         });
-        gsap.set(marquees, {
+        /**
+         * Adjust marquee height to fit within the rotated container
+         * Accounts for spacing to prevent overflow
+         */
+        gsap$1.set(marquees, {
             height: containerMarquee.offsetWidth - spacing,
         });
     }
 };
 /**
- * Calculates the number of duplicates needed to fill the container
+ * Calculates the number of content duplicates needed for seamless looping
+ *
+ * For smooth infinite scrolling, we need enough content copies to fill the visible area
+ * plus buffer space. This prevents gaps when content loops back to the beginning.
+ *
+ * Algorithm:
+ * 1. If not in fill mode, only one copy is needed (content already spans container)
+ * 2. Determine target width (viewport height for vertical, container width for horizontal)
+ * 3. Calculate how many copies fit in the target space, rounding up for complete coverage
+ *
+ * @param marqueeChildrenWidth - Width of a single content instance
+ * @param containerMarqueeWidth - Width of the marquee container
+ * @param isVertical - Whether the marquee scrolls vertically
+ * @param props - Configuration object containing fill mode setting
+ * @returns Number of content duplicates needed (minimum 1)
  */
 const calculateDuplicates = (marqueeChildrenWidth, containerMarqueeWidth, isVertical, props) => {
+    // If not filling, content presumably already spans the container
     if (!props.fill)
         return 1;
+    /**
+     * Determine the space we need to fill
+     * - Vertical: Use viewport height (since container is rotated 90°)
+     * - Horizontal: Use container width
+     */
     const targetWidth = isVertical ? window.innerHeight : containerMarqueeWidth;
+    /**
+     * Calculate required duplicates
+     * Math.ceil ensures we have enough copies to fully cover the target width
+     * Even if the last copy is partially visible, it prevents gaps during looping
+     */
     return marqueeChildrenWidth < targetWidth
         ? Math.ceil(targetWidth / marqueeChildrenWidth)
-        : 1;
+        : 1; // If content is already larger than target, one copy suffices
 };
 /**
- * Determines the minimum width for marquee elements
+ * Determines the minimum width for marquee elements based on content and container
+ *
+ * This function ensures marquee elements have appropriate dimensions for their content
+ * and container context, handling different modes and orientations.
+ *
+ * Width determination logic:
+ * 1. **Fill mode**: Auto width lets content size naturally
+ * 2. **Rotation alignment**: Use content height as width (rotated dimensions)
+ * 3. **Undersized content**: Stretch to 100% to fill container
+ * 4. **Oversized content**: Use actual content width for overflow scrolling
+ *
+ * @param marqueesChildren - Array of content elements for dimension measurement
+ * @param totalWidth - Combined width of all content elements
+ * @param containerMarqueeWidth - Available container width
+ * @param props - Configuration object containing fill and alignment settings
+ * @returns CSS width value (string with units or number for pixels)
  */
 const getMinWidth = (marqueesChildren, totalWidth, containerMarqueeWidth, props) => {
     const { fill = false, alignRotationWithY = false } = props;
+    // Fill mode: Let content size itself naturally
     if (fill)
         return "auto";
+    /**
+     * Rotation alignment mode: Use height as width
+     * Since content is rotated 90°, height becomes the effective width
+     */
     if (alignRotationWithY && marqueesChildren.length > 0) {
         return `${marqueesChildren[0].offsetHeight}px`;
     }
+    /**
+     * Content smaller than container: Stretch to fill
+     * Prevents awkward gaps in the marquee display
+     */
     if (totalWidth < containerMarqueeWidth)
         return "100%";
+    /**
+     * Content larger than container: Use actual content width
+     * Allows content to overflow and scroll properly
+     */
     return `${totalWidth}px`;
 };
 /**
  * Creates a complex fill-based marquee animation with seamless looping
+ *
+ * This is the core animation engine that creates smooth, continuous scrolling.
+ * It handles the complex math required for seamless looping by calculating
+ * precise positions and durations for each content element.
+ *
+ * Animation Strategy:
+ * 1. **Position Calculation**: Convert pixel positions to percentages for responsive scaling
+ * 2. **Seamless Looping**: Calculate track length and loop points to prevent gaps
+ * 3. **Staggered Animation**: Each element starts at different times for smooth flow
+ * 4. **Direction Handling**: Support forward and reverse directions with proper timing
+ *
+ * Technical Details:
+ * - Uses xPercent for percentage-based positioning (responsive to element width changes)
+ * - Creates two-part animation: main movement + seamless loop reset
+ * - Calculates precise durations based on distance and speed for consistent motion
+ *
+ * @param elementsToAnimate - Array of DOM elements to animate (content or containers)
+ * @param startX - Starting X position reference point
+ * @param tl - GSAP timeline to add animations to
+ * @param isReverse - Whether animation should play in reverse direction
+ * @param props - Configuration object with spacing, speed, delay, and other settings
  */
 const coreAnimation = (elementsToAnimate, startX, tl, isReverse, props) => {
     const { spacing = 16, speed = 100, delay = 0, paused = false, alignRotationWithY = false, } = props;
-    const widths = [];
-    const xPercents = [];
-    const latestPos = elementsToAnimate.length - 1;
-    // Set initial positions and calculate percentages
-    gsap.set(elementsToAnimate, {
+    // Arrays to store calculated values for each element
+    const widths = []; // Element widths in pixels
+    const xPercents = []; // Current positions as percentages
+    const latestPos = elementsToAnimate.length - 1; // Index of last element
+    /**
+     * Initialize positions and calculate percentage values
+     *
+     * GSAP's xPercent property positions elements relative to their own width:
+     * - 0% = element's left edge at current x position
+     * - -100% = element's right edge at current x position
+     * - 100% = element positioned one full width to the right
+     *
+     * This approach makes animations responsive to width changes
+     */
+    gsap$1.set(elementsToAnimate, {
         xPercent: (i, el) => {
-            const w = (widths[i] = parseFloat(String(gsap.getProperty(el, "width", "px"))));
+            // Get element width and store for later calculations
+            const w = (widths[i] = parseFloat(String(gsap$1.getProperty(el, "width", "px"))));
+            /**
+             * Calculate current position as percentage of element width
+             * Combines pixel position with any existing percentage offset
+             */
             xPercents[i] =
-                (parseFloat(String(gsap.getProperty(el, "x", "px"))) / w) * 100 +
-                    Number(gsap.getProperty(el, "xPercent"));
+                (parseFloat(String(gsap$1.getProperty(el, "x", "px"))) / w) * 100 +
+                    Number(gsap$1.getProperty(el, "xPercent"));
             return xPercents[i];
         },
     });
-    gsap.set(elementsToAnimate, { x: 0 });
-    //Calculate the total track length for seamless looping
+    // Reset x position to 0 since we're now using xPercent for positioning
+    gsap$1.set(elementsToAnimate, { x: 0 });
+    /**
+     * Calculate total track length for seamless looping
+     *
+     * Track length is the total distance content travels before looping back.
+     * It includes:
+     * - Distance from start to last element's left edge
+     * - Last element's offset percentage in pixels
+     * - Last element's full width
+     * - Spacing gap after last element
+     *
+     * This ensures smooth transitions when content loops back to beginning
+     */
     const trackLength = elementsToAnimate[latestPos].offsetLeft +
         (xPercents[latestPos] / 100) * widths[latestPos] -
         startX +
         elementsToAnimate[latestPos].offsetWidth +
         spacing;
-    // Create animation timeline for each element
+    /**
+     * Create staggered animation for each element
+     *
+     * Each element gets a two-part animation:
+     * 1. Main movement: From start position to loop point
+     * 2. Reset movement: From end of track back to start (seamless loop)
+     */
     elementsToAnimate.forEach((item, i) => {
+        // Current position in pixels
         const curX = (xPercents[i] / 100) * widths[i];
+        // Distance from element to animation start point
         const distanceToStart = item.offsetLeft + curX - startX;
+        /**
+         * Calculate distance to complete loop point
+         *
+         * For rotation alignment mode, use height instead of width
+         * since the element dimensions are effectively swapped
+         */
         const distanceToLoop = alignRotationWithY
             ? distanceToStart + item.offsetHeight - spacing
             : distanceToStart + widths[i];
+        /**
+         * Part 1: Main animation - move from current position to loop point
+         *
+         * - Target: Position where element should loop back
+         * - Duration: Based on distance and speed for consistent motion
+         * - Start time: 0 (all elements start simultaneously but from different positions)
+         */
         tl.to(item, {
             xPercent: ((curX - distanceToLoop) / widths[i]) * 100,
             duration: distanceToLoop / speed,
-        }, 0).fromTo(item, {
+        }, 0 // Start immediately
+        ).fromTo(item, {
+            /**
+             * Part 2 Start: Position element at end of track
+             * This creates the illusion of seamless continuation
+             */
             xPercent: ((curX - distanceToLoop + trackLength) / widths[i]) * 100,
         }, {
+            /**
+             * Part 2 End: Move back to original start position
+             * Completes the seamless loop cycle
+             */
             xPercent: xPercents[i],
             duration: (curX - distanceToLoop + trackLength - curX) / speed,
-            immediateRender: false,
-        }, distanceToLoop / speed);
+            immediateRender: false, // Don't render start position immediately
+        }, distanceToLoop / speed // Start after main animation completes
+        );
     });
+    // Apply initial delay before starting animations
     tl.delay(delay);
+    /**
+     * Handle reverse direction animations
+     *
+     * For reverse marquees (right/down directions):
+     * 1. Set timeline to end position
+     * 2. Pause to prevent immediate playback
+     * 3. Use delayed call to start reverse playback after initial delay
+     * 4. Set up reverse completion handler for continuous looping
+     */
     if (isReverse) {
+        // If paused is requested, just pause and return
         if (paused) {
             tl.pause();
             return;
         }
+        // Position timeline at end and pause
         tl.progress(1).pause();
-        gsap.delayedCall(delay, () => {
-            tl.reverse();
+        /**
+         * Start reverse playback after delay
+         * This creates the proper reverse scrolling effect
+         */
+        gsap$1.delayedCall(delay, () => {
+            tl.reverse(); // Start playing backwards
+            /**
+             * Handle seamless looping in reverse direction
+             * When reverse completes, restart from end position
+             * This prevents new delay in continuous reverse scrolling
+             */
             tl.eventCallback("onReverseComplete", () => {
                 tl.totalTime(tl.rawTime() + tl.duration() * 100);
             });
@@ -3043,23 +3990,30 @@ const coreAnimation = (elementsToAnimate, startX, tl, isReverse, props) => {
 };
 
 const GSAPReactMarquee = forwardRef((props, ref) => {
-    const { children, className, dir = "left", loop = -1, paused = false, fill = false, } = props;
+    const { children, className, dir = "left", loop = -1, paused = false, fill = false, followScrollDir = false, scrollSpeed = 2.5, gradient = false, gradientColor = null, } = props;
     const rootRef = useRef(null) || ref;
     const containerRef = rootRef;
     const marqueeRef = useRef(null);
     const [marqueeDuplicates, setMarqueeDuplicates] = useState(1);
+    const [effectivelyGradient, setEffectivelyGradient] = useState(null);
+    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";
     useGSAP(() => {
         if (!(marqueeRef === null || marqueeRef === void 0 ? void 0 : marqueeRef.current) || !containerRef.current)
             return;
         const containerMarquee = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-        const marquees = gsap.utils.toArray(containerMarquee.querySelectorAll(".gsap-react-marquee"));
-        const marqueesChildren = gsap.utils.toArray(containerMarquee.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));
+        const marquees = gsap$1.utils.toArray(containerMarquee.querySelectorAll(".gsap-react-marquee"));
+        const marqueesChildren = gsap$1.utils.toArray(containerMarquee.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));
         const marquee = marqueeRef.current;
         if (!marquee || !marqueesChildren)
             return;
-        const tl = gsap.timeline({
+        const tl = gsap$1.timeline({
             paused: paused,
             repeat: loop,
             defaults: { ease: "none" },
@@ -3072,32 +4026,98 @@ const GSAPReactMarquee = forwardRef((props, ref) => {
         setupContainerStyles(containerMarquee, marquees, marqueesChildren, isVertical, props);
         // Calculate dimensions and duplicates
         const containerMarqueeWidth = containerMarquee.offsetWidth;
-        //   const marqueeHeight = marquees[0].offsetHeight;
         const marqueeChildrenWidth = marqueesChildren[0].offsetWidth;
         const startX = marqueesChildren[0].offsetLeft;
+        // Clamp scrollSpeed to valid range (1.1 to 4.0)
+        const clampedScrollSpeed = Math.min(4, Math.max(1.1, scrollSpeed));
         setMarqueeDuplicates(calculateDuplicates(marqueeChildrenWidth, containerMarqueeWidth, isVertical, props));
         // Calculate total width and set marquee styles
-        const totalWidth = gsap.utils
+        const totalWidth = gsap$1.utils
             .toArray(marquee.children)
             .map((child) => child.offsetWidth)
             .reduce((a, b) => a + b, 0);
-        gsap.set(marquees, {
+        gsap$1.set(marquees, {
             minWidth: getMinWidth(marqueesChildren, totalWidth, containerMarqueeWidth, props),
             flex: fill ? "0 0 auto" : "1",
         });
         // Create appropriate animation based on fill setting
         coreAnimation(fill ? marqueesChildren : marquees, startX, tl, isReverse, props);
+        /**
+         * GSAP Observer for scroll-based speed control
+         *
+         * This creates an interactive experience where users can control
+         * the marquee speed and direction through mouse wheel scrolling.
+         *
+         * Behavior:
+         * - Scroll down: Increases speed in normal direction
+         * - Scroll up: Increases speed in reverse direction or slows normal direction
+         * - Speed changes are smoothly animated with acceleration and deceleration phases
+         * - ScrollSpeed multiplier is applied and clamped to valid range
+         */
+        Observer.create({
+            onChangeY(self) {
+                if (!followScrollDir)
+                    return;
+                let factor = clampedScrollSpeed * (isReverse ? -1 : 1);
+                if (self.deltaY < 0) {
+                    factor *= -1;
+                }
+                /**
+                 * Create smooth speed transition animation
+                 *
+                 * Phase 1: Quick acceleration to new speed (0.2s)
+                 * - timeScale: Controls timeline playback speed (higher = faster)
+                 * - factor * 2.5: Initial speed boost for responsive feel
+                 * - overwrite: Cancels any previous speed animations
+                 *
+                 * Phase 2: Gradual deceleration to sustained speed (1s delay + 1s duration)
+                 * - factor / 2.5: Settle to a more moderate sustained speed
+                 * - "+=0.3": Wait 0.3 seconds before starting deceleration
+                 */
+                gsap$1
+                    .timeline({
+                    defaults: {
+                        ease: "none",
+                    },
+                })
+                    .to(tl, {
+                    timeScale: factor * 2.5,
+                    duration: 0.2,
+                    overwrite: true,
+                })
+                    .to(tl, { timeScale: factor / 2.5, duration: 1 }, "+=0.3");
+            },
+        });
     }, {
         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
+     *
+     * Creates multiple copies of the content based on calculated duplicates.
+     * Each clone maintains the same structure and styling as the original.
+     * Memoized to prevent unnecessary re-renders when dependencies haven't changed.
+     */
     const clonedMarquees = useMemo(() => {
         if (!Number.isFinite(marqueeDuplicates) || marqueeDuplicates <= 0)
             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";
 
-export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getMinWidth, setupContainerStyles };
+export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getEffectiveBackgroundColor, getMinWidth, setupContainerStyles };
 //# sourceMappingURL=index.esm.js.map