@linear_non/stellar-libs 1.0.4 → 1.0.6

package/package.json

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

package/src/Noise/index.js

@@ -0,0 +1,138 @@
+// stellar-libs/effects/Noise.js
+import { kitStore } from "@linear_non/stellar-kit"
+import { emitter, EVENTS } from "@linear_non/stellar-kit/events"
+import { qs } from "@linear_non/stellar-kit/utils"
+
+export default class Noise {
+  constructor(opts = {}) {
+    const {
+      target = ".-noise",
+      density = 0.75,
+      color = 0xf3f2feff,
+      opacity = 0.25,
+      fps = 24,
+      tileSize = 160,
+      useDPR = true,
+      composite = "source-over",
+    } = opts
+
+    this.density = Math.max(0, Math.min(1, density))
+    this.color = color >>> 0
+    this.opacity = Math.max(0, Math.min(1, opacity))
+    this.fps = Math.max(1, fps)
+    this.tileSize = Math.max(8, tileSize)
+    this.useDPR = useDPR
+    this.composite = composite
+
+    // Resolve canvas
+    this.canvas = typeof target === "string" ? qs(target) : target
+
+    if (!this.canvas) {
+      // Create one if not found; useful when dropping in quickly
+      this.canvas = document.createElement("canvas")
+      this.canvas.className = "-noise"
+      Object.assign(this.canvas.style, {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        pointerEvents: "none",
+        zIndex: 1,
+      })
+      document.body.appendChild(this.canvas)
+    }
+
+    this.ctx = this.canvas.getContext("2d", { alpha: true })
+    this.tile = document.createElement("canvas")
+    this.tileCtx = this.tile.getContext("2d", { alpha: true })
+
+    this._msPerFrame = 1000 / this.fps
+    this._last = 0
+    this._running = false
+
+    this._boundTick = this.tick.bind(this)
+    this._boundResize = this.resize.bind(this)
+
+    this.resize()
+    this.start()
+  }
+
+  start() {
+    if (this._running) return
+    this._running = true
+    emitter.on(EVENTS.APP_TICK, this.tick)
+    emitter.on(EVENTS.APP_RESIZE, this.resize)
+  }
+
+  stop() {
+    if (!this._running) return
+    this._running = false
+    emitter.off(EVENTS.APP_TICK, this.tick)
+    emitter.off(EVENTS.APP_RESIZE, this.resize)
+  }
+
+  destroy() {
+    this.stop()
+    // Optional: clear canvas
+    this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  resize() {
+    const { sizes } = kitStore || {}
+    const vw = sizes?.vw || window.innerWidth
+    const vh = sizes?.vh || window.innerHeight
+    const dpr = this.useDPR ? sizes?.dpr || window.devicePixelRatio || 1 : 1
+
+    // Backing store
+    this.canvas.width = Math.max(1, Math.floor(vw * dpr))
+    this.canvas.height = Math.max(1, Math.floor(vh * dpr))
+
+    // CSS size
+    this.canvas.style.width = `${vw}px`
+    this.canvas.style.height = `${vh}px`
+
+    // Tile is DPR-agnostic; we upscale it anyway
+    this.tile.width = this.tileSize
+    this.tile.height = this.tileSize
+  }
+
+  tick = () => {
+    if (!this._running) return
+    const now = performance.now()
+    if (now - this._last < this._msPerFrame) return
+    this._last = now
+    this.drawTile()
+    this.blit()
+  }
+
+  drawTile() {
+    const { tileCtx } = this
+    const w = this.tile.width
+    const h = this.tile.height
+
+    const iData = tileCtx.createImageData(w, h)
+    const buf32 = new Uint32Array(iData.data.buffer)
+    const len = buf32.length
+    const color = this.color
+
+    // Fill sparse pixels for grainy look
+    // (leaving others transparent keeps the “salt & pepper”)
+    const threshold = this.density
+    for (let i = 0; i < len; i++) {
+      if (Math.random() < threshold) buf32[i] = color
+    }
+    tileCtx.putImageData(iData, 0, 0)
+  }
+
+  blit() {
+    const { ctx, canvas, tile } = this
+    if (!ctx) return
+    ctx.save()
+    ctx.globalCompositeOperation = this.composite
+    ctx.globalAlpha = this.opacity // 👈 softens the whole layer
+    ctx.imageSmoothingEnabled = false
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.drawImage(tile, 0, 0, tile.width, tile.height, 0, 0, canvas.width, canvas.height)
+    ctx.restore()
+  }
+}

package/src/Smooth/index.js

@@ -13,6 +13,7 @@ export default class Smooth {
     this.threshold = 100
     this.sections = null
     this.scrollbar = null
+    this.dpr = Math.max(1, Math.round(window.devicePixelRatio || 1))
     this.init()
   }
 
@@ -81,7 +82,9 @@ export default class Smooth {
   }
 
   getTransform(transform) {
-    return `translate3d(0, ${-transform}px, 0)`
+    let y = -transform
+    y = Math.round(y * this.dpr) / this.dpr
+    return `translate3d(0, ${y}px, 0)`
   }
 
   getVars(el, speed) {

package/src/index.js

@@ -1,5 +1,6 @@
 import Sticky from "./Sticky"
 import Smooth from "./Smooth"
 import SplitonScroll from "./SplitOnScroll"
+import Noise from "./Noise"
 
-export { Sticky, Smooth, SplitonScroll }
+export { Sticky, Smooth, SplitonScroll, Noise }