@linear_non/stellar-libs 1.2.6 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.2.6",
+  "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/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 }