@linear_non/stellar-libs 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",

package/src/CursorTracker/index.js

@@ -0,0 +1,74 @@
+import { lerp } from "@linear_non/stellar-kit/utils"
+import { gsap } from "@linear_non/stellar-kit/gsap"
+
+export default class CursorTracker {
+  constructor({ container, el, ease = 0.12, isCentered = true }) {
+    this.container = container
+    this.el = el
+    this.ease = ease
+    this.isCentered = isCentered
+
+    this.pos = { x: 0, y: 0 }
+    this.target = { x: 0, y: 0 }
+    this.isHovering = false
+
+    this.init()
+  }
+
+  setup() {
+    if (this.isCentered) {
+      gsap.set(this.el, { xPercent: -50, yPercent: -50 })
+    }
+  }
+
+  // GLOBAL TICK
+  tick({ mouse }) {
+    if (!this.isHovering) return
+
+    this.target.x = mouse.x
+    this.target.y = mouse.y
+
+    this.pos.x = lerp(this.pos.x, this.target.x, this.ease)
+    this.pos.y = lerp(this.pos.y, this.target.y, this.ease)
+
+    gsap.set(this.el, {
+      x: this.pos.x,
+      y: this.pos.y,
+    })
+  }
+
+  hoverIn = () => {
+    this.isHovering = true
+    gsap.to(this.el, { autoAlpha: 1, duration: 0.2, overwrite: true })
+  }
+
+  hoverOut = () => {
+    this.isHovering = false
+    gsap.to(this.el, { autoAlpha: 0, duration: 0.2, overwrite: true })
+  }
+
+  on() {
+    if (!this.container) return
+
+    this.container.addEventListener("mouseenter", this.hoverIn)
+    this.container.addEventListener("mouseleave", this.hoverOut)
+  }
+
+  off() {
+    if (!this.container) return
+
+    this.container.removeEventListener("mouseenter", this.hoverIn)
+    this.container.removeEventListener("mouseleave", this.hoverOut)
+  }
+
+  destroy() {
+    this.off()
+    this.container = null
+    this.el = null
+  }
+
+  init() {
+    this.setup()
+    this.on()
+  }
+}

package/src/Marquee/index.js

@@ -0,0 +1,91 @@
+import { gsap } from "@linear_non/stellar-kit/gsap"
+
+export default class Marquee {
+  constructor({ container, el, speed = 50, gap = "1.6rem" }) {
+    this.container = container
+    this.el = el
+    this.speed = speed
+    this.gap = gap
+    this.tween = null
+    this.init()
+  }
+
+  setup() {
+    if (this.tween) this.tween.kill()
+
+    gsap.set(this.container, {
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "flex-start",
+    })
+
+    gsap.set(this.el, {
+      display: "flex",
+      whiteSpace: "nowrap",
+      width: "max-content",
+      x: 0,
+      gap: this.gap,
+      willChange: "transform",
+    })
+
+    const source = this.el.children[0]
+    if (!source) return
+
+    // Use bounding rect for more accurate (subpixel) width
+    const itemWidth = source.getBoundingClientRect().width
+    if (!itemWidth) return
+
+    // Convert computed gap to px
+    const gapPx = parseFloat(getComputedStyle(this.el).gap) || 0
+
+    // One "step" includes the gap after the item
+    const stepWidth = itemWidth + gapPx
+
+    // Copies needed to cover viewport (+ a little buffer)
+    const copies = Math.ceil(window.innerWidth / stepWidth) + 2
+
+    while (this.el.children.length < copies * 2) {
+      const clone = source.cloneNode(true)
+      clone.setAttribute("aria-hidden", "true")
+      this.el.appendChild(clone)
+    }
+
+    // Loop distance must include gaps too
+    const setWidth = copies * stepWidth
+    const duration = setWidth / this.speed
+
+    const wrapX = gsap.utils.wrap(-setWidth, 0)
+
+    this.tween = gsap.to(this.el, {
+      x: `-=${setWidth}`,
+      duration,
+      ease: "none",
+      repeat: -1,
+      modifiers: {
+        // GSAP gives strings like "-123.45px"
+        x: v => `${wrapX(parseFloat(v))}px`,
+      },
+    })
+  }
+
+  on() {
+    this._onResize = () => this.setup()
+    window.addEventListener("resize", this._onResize)
+  }
+
+  off() {
+    if (this._onResize) window.removeEventListener("resize", this._onResize)
+    this._onResize = null
+  }
+
+  destroy() {
+    this.off()
+    if (this.tween) this.tween.kill()
+    this.tween = null
+  }
+
+  init() {
+    this.setup()
+    this.on()
+  }
+}

package/src/Sticky/index.js

@@ -5,13 +5,14 @@ import { kitStore } from "@linear_non/stellar-kit"
 
 export default class Sticky {
   constructor(obj) {
-    const { el, sticky, container, isSmooth, onUpdateCallback } = obj
+    const { el, sticky, container, frame, isSmooth, onUpdateCallback } = obj
 
     this.el = el
     this.sticky = sticky
     this.isSticky = false
     this.isSmooth = isSmooth
     this.container = container
+    this.frame = frame || null
     this.progress = 0
     this.total = 0
     this.positionX = 0
@@ -97,13 +98,34 @@ export default class Sticky {
   resize() {
     if (!this.sticky) return
 
-    // Get the viewport height dynamically instead of using store
     const vh = window.innerHeight
-    const vw = window.innerWidth
-    let stickyRect = bounds(this.el)
-    let containerRect = this.container ? bounds(this.container) : null
-    this.config.totalWidth = containerRect ? this.snap(containerRect.width - vw) : 0
+
+    const stickyRect = bounds(this.el)
+
+    // HEIGHT (same as you have)
     this.config.totalHeight = this.snap(stickyRect.height - vh)
+
+    // WIDTH (fix)
+    if (!this.container) {
+      this.config.totalWidth = 0
+      return
+    }
+
+    const frameEl = this.frame || this.container.parentElement
+    const frameRect = frameEl ? bounds(frameEl) : { width: window.innerWidth }
+
+    let padL = 0
+    let padR = 0
+    if (frameEl) {
+      const cs = getComputedStyle(frameEl)
+      padL = parseFloat(cs.paddingLeft) || 0
+      padR = parseFloat(cs.paddingRight) || 0
+    }
+
+    const visibleContentWidth = Math.max(0, frameRect.width - padL - padR)
+    const totalContentWidth = this.container.scrollWidth || bounds(this.container).width
+
+    this.config.totalWidth = this.snap(Math.max(0, totalContentWidth - visibleContentWidth))
   }
 
   destroy() {

package/src/index.js

@@ -3,5 +3,7 @@ import Smooth from "./Smooth"
 import SplitonScroll from "./SplitOnScroll"
 import Noise from "./Noise"
 import SpritePlayer from "./SpritePlayer"
+import CursorTracker from "./CursorTracker"
+import Marquee from "./Marquee"
 
-export { Sticky, Smooth, SplitonScroll, Noise, SpritePlayer }
+export { Sticky, Smooth, SplitonScroll, Noise, SpritePlayer, CursorTracker, Marquee }