@brandocms/jupiter 5.0.0-beta.15 → 5.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "5.0.0-beta.15",
+  "version": "5.0.0-beta.16",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",

package/src/modules/Looper/index.js

@@ -147,6 +147,23 @@ function horizontalLoop(app, items, config) {
   // Cache track element reference (M3)
   const trackElement = items[0].parentElement
 
+  /**
+   * The element the pointer actually lands on.
+   *
+   * `trackElement` is what gets translated, so once the carousel has been
+   * dragged its box has left the viewport — and with it the `pointerdown`
+   * listener, the `touch-action` and the `grab` cursor. The visible row is then
+   * made of item boxes with dead gaps between them: pressing a slide still
+   * works (the event bubbles up through the track) but pressing between two
+   * slides hits nothing. It reads as "drag works until you have dragged".
+   *
+   * So when `container` is the track itself, the surface moves to the wrapper,
+   * which stays put and spans the same visible area. When `center` gave us a
+   * separate container it is already stationary and keeps the job.
+   */
+  const dragSurface =
+    (container === trackElement ? config.wrapper : container) || container
+
   /**
    * Measure total width of all items as currently laid out
    * @returns {number} Total width in pixels
@@ -877,6 +894,18 @@ function horizontalLoop(app, items, config) {
       // Only handle primary pointer (left click, first touch)
       if (e.button !== undefined && e.button !== 0) return
 
+      // The drag surface is the wrapper, and next/previous buttons live inside
+      // it — pressing one must not also arm a drag, or the tap that follows
+      // snaps the row on top of the navigation the button just did. Slides are
+      // deliberately not exempt: a slide may be a link and still be draggable.
+      // `[data-looper-no-drag]` opts anything else in the wrapper out.
+      if (
+        e.target.closest &&
+        e.target.closest('[data-panner-next], [data-panner-previous], [data-looper-no-drag]')
+      ) {
+        return
+      }
+
       isDragging = true
       indexSetByNav = false
       startX = e.clientX
@@ -976,7 +1005,7 @@ function horizontalLoop(app, items, config) {
 
         // Horizontal — commit to drag
         hasDragged = true
-        container.style.cursor = 'grabbing'
+        dragSurface.style.cursor = 'grabbing'
         trackElement.classList.add('looper-dragging')
       }
 
@@ -1022,12 +1051,12 @@ function horizontalLoop(app, items, config) {
 
       // Reset cursor and re-enable hover effects (only if we actually dragged)
       if (hasDragged) {
-        container.style.cursor = 'grab'
+        dragSurface.style.cursor = 'grab'
         trackElement.classList.remove('looper-dragging')
 
         // Swallow the next click event so links don't navigate after a drag.
         // The browser fires click after pointerup — capture it before it reaches any <a>.
-        container.addEventListener('click', swallowClick, { capture: true, once: true })
+        dragSurface.addEventListener('click', swallowClick, { capture: true, once: true })
       }
 
       // If this was a click (not a drag):
@@ -1351,17 +1380,17 @@ function horizontalLoop(app, items, config) {
     }
 
     // Set up touch-action CSS for proper touch handling
-    container.style.touchAction = 'pan-y' // Allow vertical scroll, prevent horizontal
+    dragSurface.style.touchAction = 'pan-y' // Allow vertical scroll, prevent horizontal
 
     // Add pointer down listener
-    container.style.cursor = 'grab'
-    container.addEventListener('pointerdown', onPointerDown)
+    dragSurface.style.cursor = 'grab'
+    dragSurface.addEventListener('pointerdown', onPointerDown)
 
     // Store cleanup function
     dragState = {
       cleanup: () => {
-        container.removeEventListener('pointerdown', onPointerDown)
-        container.removeEventListener('click', swallowClick, { capture: true })
+        dragSurface.removeEventListener('pointerdown', onPointerDown)
+        dragSurface.removeEventListener('click', swallowClick, { capture: true })
         window.removeEventListener('pointermove', onPointerMove)
         window.removeEventListener('pointerup', onPointerUp)
         window.removeEventListener('pointercancel', onPointerUp)
@@ -1748,9 +1777,9 @@ function horizontalLoop(app, items, config) {
       trackElement.style.willChange = ''
       trackElement.style.transform = ''
 
-      // Clear inline styles on container
-      container.style.touchAction = ''
-      container.style.cursor = ''
+      // Clear inline styles on the drag surface
+      dragSurface.style.touchAction = ''
+      dragSurface.style.cursor = ''
 
       // Clear item wrap transforms
       items.forEach(item => {

package/src/modules/Marquee/index.js

@@ -1,8 +1,16 @@
-import { animate } from 'motion'
+import { animate, motionValue } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
 import { set, clearProps } from '../../utils/motion-helpers'
 
+// Velocity sampling window for throws (ms)
+const VELOCITY_WINDOW_MS = 150
+// Speed the crawl ramps up from after a throw settles
+const MIN_CRAWL_SPEED = 0.001
+const SPEED_RAMP_DURATION = 1.2
+// Crawl speed while the pointer rests on the marquee (slowDownOnHover)
+const HOVER_SPEED = 0.5
+
 const DEFAULT_OPTIONS = {
   speed: 100,
   extraHeight: 0,
@@ -11,6 +19,18 @@ const DEFAULT_OPTIONS = {
   startProgress: 0,
   spacer: '<span>&nbsp;&mdash;&nbsp;</span>',
 
+  // Crawl direction. false = scroll content leftward (default), true = rightward.
+  // Speed is controlled independently via `speed` (and the live timeline.speed).
+  reversed: false,
+
+  // Drag + throw (inertia). Opt-in — existing marquees are unaffected.
+  draggable: false,
+  minimumMovement: 3, // Pixels for mouse - below this a press is a click, above is a drag
+  touchMinimumMovement: 10, // Higher threshold for touch (finger imprecision)
+  throwResistance: 325, // Inertia time constant (higher = longer glide)
+  throwPower: 0.8, // Deceleration curve (0-1)
+  throwVelocityMultiplier: 0.8, // Scale release velocity
+
   onReveal: marqueeEl => {
     animate(marqueeEl, { opacity: 1 }, { ease: 'linear' })
   }
@@ -25,24 +45,83 @@ export default class Marquee {
     this.elements.$marquee = Dom.find(this.elements.$el, '[data-marquee]')
     this.elements.$holder = Dom.find(this.elements.$el, '[data-marquee-holder]')
     this.elements.$item = Dom.find(this.elements.$el, '[data-marquee-item]')
-    this.timeline = null
+
+    // Position model: a single motionValue is the source of truth. The crawl
+    // animation, drag and inertia all write to it; a change listener applies a
+    // seamless (modulo holderWidth) transform to the marquee element.
+    this.position = motionValue(0)
+    this.holderWidth = 0
+    this.duration = 0
+
+    this.timeline = null // crawl animation (kept named `timeline` for back-compat)
+    this.speedAnimation = null
+    this.inertiaAnimation = null
     this.observer = null
+    this.playing = false
+
+    // Tracks whether the pointer is over the marquee, so a crawl recreated
+    // after a drag or throw resumes at the hover speed rather than full speed.
+    this.hovering = false
+
+    // Bound handlers (stored so they can be removed in destroy)
+    this._onResize = this.updateMarquee.bind(this)
+    this._onReveal = this.revealMarquee.bind(this)
+    this._onMouseEnter = this.slowDown.bind(this)
+    this._onMouseLeave = this.speedUp.bind(this)
+    this._positionUnsubscribe = null
+    this._dragCleanup = null
 
     this.initialize()
   }
 
   initialize() {
-    set(this.elements.$marquee, { opacity: 0 })
-    window.addEventListener('APPLICATION:RESIZE', this.updateMarquee.bind(this))
-    window.addEventListener('APPLICATION:REVEALED', this.revealMarquee.bind(this))
+    set(this.elements.$marquee, { opacity: 0, willChange: 'transform' })
+
+    // Apply the position to the DOM whenever it changes (crawl, drag or inertia)
+    this._positionUnsubscribe = this.position.on('change', latest => {
+      this.render(latest)
+    })
+
+    window.addEventListener('APPLICATION:RESIZE', this._onResize)
+    window.addEventListener('APPLICATION:REVEALED', this._onReveal)
     this.updateMarquee()
     this.setupObserver()
+
     if (this.opts.slowDownOnHover) {
-      this.elements.$el.addEventListener('mouseenter', this.slowDown.bind(this))
-      this.elements.$el.addEventListener('mouseleave', this.speedUp.bind(this))
+      this.elements.$el.addEventListener('mouseenter', this._onMouseEnter)
+      this.elements.$el.addEventListener('mouseleave', this._onMouseLeave)
+    }
+
+    if (this.opts.draggable) {
+      this.setupDrag()
     }
   }
 
+  /**
+   * Apply the current raw position to the marquee element.
+   * Holders are laid out side by side at i * holderWidth, so translating by
+   * the position modulo holderWidth produces a seamless infinite scroll.
+   */
+  render(rawPos) {
+    if (!this.holderWidth) return
+    const m = ((rawPos % this.holderWidth) + this.holderWidth) % this.holderWidth
+    this.elements.$marquee.style.transform = `translateX(${-m}px) translateZ(0)`
+  }
+
+  /**
+   * Detect whether the marquee element is horizontally mirrored (scaleX(-1)),
+   * as used for "reverse" rows. Read from the live computed transform so it
+   * works no matter how the flip is applied (and survives responsive changes).
+   */
+  isAxisFlipped() {
+    const t = getComputedStyle(this.elements.$el).transform
+    if (!t || t === 'none') return false
+    // matrix(a, b, c, d, e, f) / matrix3d(a, ...) — a < 0 means a horizontal flip
+    const inner = t.slice(t.indexOf('(') + 1)
+    const a = parseFloat(inner)
+    return Number.isFinite(a) && a < 0
+  }
+
   revealMarquee(e) {
     this.updateMarquee()
     this.opts.onReveal(this.elements.$marquee)
@@ -61,14 +140,10 @@ export default class Marquee {
     this.fillText()
     this.setHeight()
 
-    const holderWidth = this.elements.$holder.offsetWidth
+    this.holderWidth = this.elements.$holder.offsetWidth
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
-    const marqueeWidth = holderWidth * $allHolders.length
-    // Cap duration at 40s to prevent precision issues at slow speeds
-    this.duration = Math.min(
-      (holderWidth + marqueeWidth) / this.opts.speed,
-      40
-    )
+    const marqueeWidth = this.holderWidth * $allHolders.length
+    this.duration = this.holderWidth / this.opts.speed
 
     set(this.elements.$marquee, { width: marqueeWidth })
     this.initializeTween()
@@ -84,16 +159,23 @@ export default class Marquee {
   }
 
   killTweens() {
-    if (this.timeline) {
-      this.timeline.stop()
-      this.timeline = null
-    }
     if (this.speedAnimation) {
       this.speedAnimation.stop()
       this.speedAnimation = null
     }
+    if (this.inertiaAnimation) {
+      this.inertiaAnimation.stop()
+      this.inertiaAnimation = null
+    }
+    if (this.timeline) {
+      this.timeline.stop()
+      this.timeline = null
+    }
   }
 
+  /**
+   * Lay out holders and create the (paused) crawl animation.
+   */
   initializeTween() {
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
 
@@ -106,50 +188,85 @@ export default class Marquee {
       })
     })
 
-    this.timeline = animate(
-      $allHolders,
-      { transform: ['translateX(0) translateZ(0)', 'translateX(-100%) translateZ(0)'] },
-      { duration: this.duration, ease: 'linear', repeat: Infinity }
-    )
+    // Set initial progress before creating the crawl so it starts from there.
+    // On resize rebuilds the existing position is preserved (modulo render
+    // keeps it seamless regardless of the new holderWidth).
+    if (!this._initialized && this.opts.startProgress > 0) {
+      this.position.set(this.opts.startProgress * this.holderWidth)
+    }
+    this._initialized = true
+    this.render(this.position.get())
+
+    this.timeline = this.createCrawl()
     this.timeline.pause()
+  }
 
-    // Set initial progress if specified
-    if (this.opts.startProgress > 0) {
-      this.timeline.currentTime = this.opts.startProgress * this.duration
-    }
+  /**
+   * Create an infinite crawl animation from the current position.
+   * Animating exactly one holderWidth and relying on the modulo render keeps
+   * the loop reset (repeat) invisible. Always recreated from the live position
+   * so it stays correct after drags and throws.
+   */
+  createCrawl() {
+    const from = this.position.get()
+    // Direction is baked into the target; speed stays positive so timeline.speed
+    // (hover slow-down, pause ramps, etc.) keeps working regardless of direction.
+    const target = this.opts.reversed ? from - this.holderWidth : from + this.holderWidth
+    return animate(this.position, target, {
+      duration: this.duration,
+      ease: 'linear',
+      repeat: Infinity
+    })
+  }
 
-    window.timeline = this.timeline
-    window.marquee = this
+  /**
+   * The speed the crawl should settle at. Half speed while the pointer rests
+   * on the marquee, so a crawl recreated after a drag or throw doesn't lose
+   * the hover slow-down.
+   * @returns {number}
+   */
+  targetSpeed() {
+    return this.opts.slowDownOnHover && this.hovering ? HOVER_SPEED : 1
   }
 
   play(rampUp = false) {
     this.playing = true
     if (this.speedAnimation) {
       this.speedAnimation.stop()
+      this.speedAnimation = null
     }
 
+    if (!this.holderWidth) return
+
+    // Recreate the crawl from the live position so it is always seamless,
+    // regardless of where a drag/throw left the marquee.
+    if (this.timeline) this.timeline.stop()
+    this.timeline = this.createCrawl()
+
     if (rampUp) {
       this.timeline.play()
-      const state = { speed: this.timeline.speed || 0 }
+      const state = { speed: MIN_CRAWL_SPEED }
+      this.timeline.speed = MIN_CRAWL_SPEED
       this.speedAnimation = animate(
         state,
-        { speed: 1 },
+        { speed: this.targetSpeed() },
         {
           duration: 0.8,
           ease: 'easeIn',
           onUpdate: () => {
-            this.timeline.speed = state.speed
+            if (this.timeline) this.timeline.speed = state.speed
           }
         }
       )
     } else {
-      this.timeline.speed = 1
+      this.timeline.speed = this.targetSpeed()
       this.timeline.play()
     }
   }
 
   pause() {
     this.playing = false
+    if (!this.timeline) return
     const state = { speed: this.timeline.speed || 1 }
     this.speedAnimation = animate(
       state,
@@ -157,41 +274,48 @@ export default class Marquee {
       {
         duration: 0.8,
         onUpdate: () => {
-          this.timeline.speed = state.speed
+          if (this.timeline) this.timeline.speed = state.speed
         }
       }
     )
-    this.speedAnimation.finished.then(() => {
-      // Only pause if we're still in paused state (haven't called play() in the meantime)
-      if (!this.playing) {
-        this.timeline.pause()
-      }
-    })
+    this.speedAnimation.finished
+      .then(() => {
+        if (!this.playing && this.timeline) {
+          this.timeline.pause()
+        }
+      })
+      // The ramp is routinely stopped by slowDown/play/resumeCrawl — that
+      // rejects `finished`, and an unhandled rejection is not our problem.
+      .catch(() => {})
   }
 
   slowDown() {
+    this.hovering = true
     if (this.speedAnimation) {
       this.speedAnimation.stop()
     }
+    if (!this.timeline) return
     const state = { speed: this.timeline.speed || 1 }
     this.speedAnimation = animate(
       state,
-      { speed: 0.5 },
+      { speed: HOVER_SPEED },
       {
         duration: 0.3,
         ease: [0.4, 0, 0.2, 1], // ease-out
         onUpdate: () => {
-          this.timeline.speed = state.speed
+          if (this.timeline) this.timeline.speed = state.speed
         }
       }
     )
   }
 
   speedUp() {
+    this.hovering = false
     if (this.speedAnimation) {
       this.speedAnimation.stop()
     }
-    const state = { speed: this.timeline.speed || 0.5 }
+    if (!this.timeline) return
+    const state = { speed: this.timeline.speed || HOVER_SPEED }
     this.speedAnimation = animate(
       state,
       { speed: 1 },
@@ -199,7 +323,241 @@ export default class Marquee {
         duration: 0.3,
         ease: [0.4, 0, 0.2, 1], // ease-out
         onUpdate: () => {
-          this.timeline.speed = state.speed
+          if (this.timeline) this.timeline.speed = state.speed
+        }
+      }
+    )
+  }
+
+  /**
+   * Setup pointer-based drag + throw interaction.
+   * Mirrors the Looper module's physics (velocity sampling + Motion inertia).
+   */
+  setupDrag() {
+    const $el = this.elements.$el
+
+    let startX = 0
+    let startY = 0
+    let startPosition = 0
+    let velocityTracker = []
+    let isDragging = false
+    let hasDragged = false
+    let axisDecided = false
+    let activeMinimumMovement = this.opts.minimumMovement
+    let dragDir = 1 // -1 when the marquee is horizontally mirrored (scaleX(-1))
+
+    const swallowClick = e => {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    const getVelocity = () => {
+      if (velocityTracker.length < 2) return 0
+      const recent = velocityTracker.slice(-6)
+      let totalVelocity = 0
+      let totalWeight = 0
+      for (let i = 1; i < recent.length; i++) {
+        const prev = recent[i - 1]
+        const curr = recent[i]
+        const deltaX = curr.x - prev.x
+        const deltaTime = curr.time - prev.time
+        if (deltaTime > 0) {
+          const weight = i / recent.length
+          const velocity = (deltaX / deltaTime) * 1000 // px/second
+          totalVelocity += velocity * weight
+          totalWeight += weight
+        }
+      }
+      return totalWeight > 0 ? totalVelocity / totalWeight : 0
+    }
+
+    const onPointerDown = e => {
+      if (e.button !== undefined && e.button !== 0) return
+
+      isDragging = true
+      startX = e.clientX
+      startY = e.clientY
+      startPosition = this.position.get()
+      velocityTracker = [{ x: e.clientX, time: e.timeStamp }]
+      hasDragged = false
+      axisDecided = false
+      activeMinimumMovement =
+        e.pointerType === 'touch' ? this.opts.touchMinimumMovement : this.opts.minimumMovement
+
+      // A reversed row is mirrored with scaleX(-1), so screen-space pointer
+      // movement maps to the opposite direction in the marquee's own space.
+      dragDir = this.isAxisFlipped() ? -1 : 1
+
+      // Stop crawl + any ongoing throw / speed ramp
+      if (this.speedAnimation) {
+        this.speedAnimation.stop()
+        this.speedAnimation = null
+      }
+      if (this.inertiaAnimation) {
+        this.inertiaAnimation.stop()
+        this.inertiaAnimation = null
+      }
+      if (this.timeline) {
+        this.timeline.stop()
+        this.timeline = null
+      }
+
+      if (e.pointerType === 'mouse') {
+        e.preventDefault()
+      }
+
+      window.addEventListener('pointermove', onPointerMove, { passive: false })
+      window.addEventListener('pointerup', onPointerUp)
+      window.addEventListener('pointercancel', onPointerUp)
+    }
+
+    const onPointerMove = e => {
+      if (!isDragging) return
+
+      const currentX = e.clientX
+      const currentTime = e.timeStamp
+
+      if (!axisDecided) {
+        const dX = Math.abs(currentX - startX)
+        const dY = Math.abs(e.clientY - startY)
+        if (Math.max(dX, dY) < activeMinimumMovement) return
+        axisDecided = true
+
+        // Clearly vertical → abort, let the page scroll
+        if (dY > dX * 1.2) {
+          isDragging = false
+          window.removeEventListener('pointermove', onPointerMove)
+          window.removeEventListener('pointerup', onPointerUp)
+          window.removeEventListener('pointercancel', onPointerUp)
+          if (this.playing) this.resumeCrawl()
+          return
+        }
+
+        hasDragged = true
+        $el.style.cursor = 'grabbing'
+      }
+
+      e.preventDefault()
+
+      velocityTracker.push({ x: currentX, time: currentTime })
+      while (
+        velocityTracker.length > 0 &&
+        currentTime - velocityTracker[0].time > VELOCITY_WINDOW_MS
+      ) {
+        velocityTracker.shift()
+      }
+
+      // Drag left (cursor decreases) scrolls content left (position increases).
+      // dragDir flips this for mirrored (reversed) rows.
+      const deltaX = (startX - currentX) * dragDir
+      this.position.set(startPosition + deltaX)
+    }
+
+    const onPointerUp = e => {
+      if (!isDragging) return
+      isDragging = false
+
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      window.removeEventListener('pointercancel', onPointerUp)
+
+      if (hasDragged) {
+        $el.style.cursor = 'grab'
+        // Swallow the click the browser fires after pointerup so item links
+        // don't navigate at the end of a drag.
+        $el.addEventListener('click', swallowClick, { capture: true, once: true })
+      } else {
+        // A tap that didn't move — just resume crawling.
+        if (this.playing) this.resumeCrawl()
+        return
+      }
+
+      let velocity = getVelocity()
+      const lastTrackedX =
+        velocityTracker.length > 0 ? velocityTracker[velocityTracker.length - 1].x : e.clientX
+      const overallDelta = lastTrackedX - startX
+
+      // Velocity direction must match the overall drag direction
+      if (overallDelta > 0 && velocity < 0) velocity = 0
+      if (overallDelta < 0 && velocity > 0) velocity = 0
+
+      if (Math.abs(velocity) > 1) {
+        // Flip the throw velocity into the marquee's own space for mirrored rows
+        this.startInertia(velocity * dragDir)
+      } else if (this.playing) {
+        this.resumeCrawl()
+      }
+    }
+
+    $el.style.touchAction = 'pan-y'
+    $el.style.cursor = 'grab'
+    $el.addEventListener('pointerdown', onPointerDown)
+
+    this._dragCleanup = () => {
+      $el.removeEventListener('pointerdown', onPointerDown)
+      $el.removeEventListener('click', swallowClick, { capture: true })
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      window.removeEventListener('pointercancel', onPointerUp)
+      $el.style.touchAction = ''
+      $el.style.cursor = ''
+    }
+  }
+
+  /**
+   * Throw the marquee with momentum after a drag release.
+   * @param {number} velocity - Cursor velocity in px/second
+   */
+  startInertia(velocity) {
+    const currentPos = this.position.get()
+    // Cursor and content velocity are opposite: drag left → position increases
+    const motionVelocity = -velocity * this.opts.throwVelocityMultiplier
+    const estimatedDistance = this.opts.throwPower * motionVelocity
+    const targetPos = currentPos + estimatedDistance
+
+    this.inertiaAnimation = animate(this.position, targetPos, {
+      type: 'inertia',
+      velocity: motionVelocity,
+      power: this.opts.throwPower,
+      timeConstant: this.opts.throwResistance,
+      restSpeed: 10,
+      restDelta: 0.5
+    })
+
+    this.inertiaAnimation.finished
+      .then(() => {
+        this.inertiaAnimation = null
+        if (this.playing) this.resumeCrawl()
+      })
+      .catch(() => {
+        this.inertiaAnimation = null
+      })
+  }
+
+  /**
+   * Resume the auto-crawl from the current position, ramping back up to full
+   * speed so it eases out of a throw rather than snapping.
+   */
+  resumeCrawl() {
+    if (this.speedAnimation) {
+      this.speedAnimation.stop()
+      this.speedAnimation = null
+    }
+    if (this.timeline) this.timeline.stop()
+
+    this.timeline = this.createCrawl()
+    this.timeline.play()
+
+    const state = { speed: MIN_CRAWL_SPEED }
+    this.timeline.speed = MIN_CRAWL_SPEED
+    this.speedAnimation = animate(
+      state,
+      { speed: this.targetSpeed() },
+      {
+        duration: SPEED_RAMP_DURATION,
+        ease: 'easeIn',
+        onUpdate: () => {
+          if (this.timeline) this.timeline.speed = state.speed
         }
       }
     )
@@ -255,7 +613,17 @@ export default class Marquee {
         }
       }
 
-      this.elements.$marquee.appendChild(this.elements.$holder.cloneNode(true))
+      // Duplicate holders until they cover the viewport plus a full holder
+      // width — guarantees seamless coverage across the whole modulo cycle.
+      const holderWidth = this.elements.$holder.offsetWidth
+      const required = this.app.size.width + holderWidth
+      let totalWidth = holderWidth
+      let guard = 0
+      while (totalWidth < required && guard < 10) {
+        this.elements.$marquee.appendChild(this.elements.$holder.cloneNode(true))
+        totalWidth += holderWidth
+        guard += 1
+      }
     } else {
       console.error(
         'no textWidth! probably image? Set width to elements inside holder',
@@ -271,4 +639,29 @@ export default class Marquee {
     set(this.elements.$el, { height })
     set(this.elements.$marquee, { height })
   }
+
+  destroy() {
+    this.killTweens()
+
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer = null
+    }
+    if (this._positionUnsubscribe) {
+      this._positionUnsubscribe()
+      this._positionUnsubscribe = null
+    }
+    if (this._dragCleanup) {
+      this._dragCleanup()
+      this._dragCleanup = null
+    }
+
+    if (this.opts.slowDownOnHover) {
+      this.elements.$el.removeEventListener('mouseenter', this._onMouseEnter)
+      this.elements.$el.removeEventListener('mouseleave', this._onMouseLeave)
+    }
+
+    window.removeEventListener('APPLICATION:RESIZE', this._onResize)
+    window.removeEventListener('APPLICATION:REVEALED', this._onReveal)
+  }
 }

package/src/utils/motion-helpers.js

@@ -60,9 +60,20 @@ export function set(target, values) {
       element.style.transform = transformProps.join(' ')
     }
 
+    // Properties that are unitless (don't need 'px')
+    const unitless = new Set([
+      'opacity', 'zIndex', 'fontWeight', 'lineHeight', 'orphans',
+      'widows', 'order', 'flexGrow', 'flexShrink', 'columnCount',
+      'fillOpacity', 'strokeOpacity', 'tabSize',
+    ])
+
     // Apply other styles
     Object.entries(styleProps).forEach(([key, value]) => {
-      element.style[key] = value
+      if (typeof value === 'number' && !unitless.has(key)) {
+        element.style[key] = value + 'px'
+      } else {
+        element.style[key] = value
+      }
     })
   })
 }

package/types/modules/DoubleHeader/index.d.ts

@@ -46,6 +46,12 @@ export default class DoubleHeader {
     pin(): void;
     notSmall(): void;
     small(): void;
+    /**
+     * Update the --header-height CSS variable on :root.
+     * Uses el height when pinned (el is the main header, auxEl is secondary).
+     * Set to 0px when unpinned.
+     */
+    _updateHeaderHeight(): void;
     shouldUnpin(toleranceExceeded: any): any;
     shouldPin(toleranceExceeded: any): any;
     isOutOfBounds(): boolean;

package/types/modules/FixedHeader/index.d.ts

@@ -108,6 +108,11 @@ export default class FixedHeader {
     pin(): void;
     notSmall(): void;
     small(): void;
+    /**
+     * Update the --header-height CSS variable on :root.
+     * Set to the header's current height when pinned, 0px when unpinned.
+     */
+    _updateHeaderHeight(): void;
     notAltBg(): void;
     altBg(): void;
     shouldUnpin(toleranceExceeded: any): any;

package/types/modules/Marquee/index.d.ts

@@ -3,23 +3,79 @@ export default class Marquee {
     opts: any;
     app: any;
     elements: {};
+    position: any;
+    holderWidth: number;
+    duration: number;
     timeline: any;
+    speedAnimation: any;
+    inertiaAnimation: any;
     observer: IntersectionObserver;
+    playing: boolean;
+    hovering: boolean;
+    _onResize: any;
+    _onReveal: any;
+    _onMouseEnter: any;
+    _onMouseLeave: any;
+    _positionUnsubscribe: any;
+    _dragCleanup: () => void;
     initialize(): void;
+    /**
+     * Apply the current raw position to the marquee element.
+     * Holders are laid out side by side at i * holderWidth, so translating by
+     * the position modulo holderWidth produces a seamless infinite scroll.
+     */
+    render(rawPos: any): void;
+    /**
+     * Detect whether the marquee element is horizontally mirrored (scaleX(-1)),
+     * as used for "reverse" rows. Read from the live computed transform so it
+     * works no matter how the flip is applied (and survives responsive changes).
+     */
+    isAxisFlipped(): boolean;
     revealMarquee(e: any): void;
     updateMarquee(e: any): void;
-    duration: number;
     clearHolders(): void;
     killTweens(): void;
-    speedAnimation: any;
+    /**
+     * Lay out holders and create the (paused) crawl animation.
+     */
     initializeTween(): void;
+    _initialized: boolean;
+    /**
+     * Create an infinite crawl animation from the current position.
+     * Animating exactly one holderWidth and relying on the modulo render keeps
+     * the loop reset (repeat) invisible. Always recreated from the live position
+     * so it stays correct after drags and throws.
+     */
+    createCrawl(): any;
+    /**
+     * The speed the crawl should settle at. Half speed while the pointer rests
+     * on the marquee, so a crawl recreated after a drag or throw doesn't lose
+     * the hover slow-down.
+     * @returns {number}
+     */
+    targetSpeed(): number;
     play(rampUp?: boolean): void;
-    playing: boolean;
     pause(): void;
     slowDown(): void;
     speedUp(): void;
+    /**
+     * Setup pointer-based drag + throw interaction.
+     * Mirrors the Looper module's physics (velocity sampling + Motion inertia).
+     */
+    setupDrag(): void;
+    /**
+     * Throw the marquee with momentum after a drag release.
+     * @param {number} velocity - Cursor velocity in px/second
+     */
+    startInertia(velocity: number): void;
+    /**
+     * Resume the auto-crawl from the current position, ramping back up to full
+     * speed so it eases out of a throw rather than snapping.
+     */
+    resumeCrawl(): void;
     setupObserver(): void;
     fillText(): void;
     measuredHeight: any;
     setHeight(): void;
+    destroy(): void;
 }

package/types/modules/Moonwalk/index.d.ts

@@ -373,7 +373,7 @@ export type MoonwalkOptions = {
      */
     on?: string | null;
     /**
-     * - Delay before starting animations
+     * - Delay in ms before starting animations
      */
     initialDelay?: number;
     /**

package/types/modules/StickyHeader/index.d.ts

@@ -57,6 +57,11 @@ export default class StickyHeader {
     pin(): void;
     notSmall(): void;
     small(): void;
+    /**
+     * Update the --header-height CSS variable on :root.
+     * Set to the header's current height when pinned, 0px when unpinned.
+     */
+    _updateHeaderHeight(): void;
     notAltBg(): void;
     altBg(): void;
     shouldUnpin(toleranceExceeded: any): any;