@andresclua/perlindom 0.0.5 → 0.0.6

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.6] - 2025-02-09
+
+## Changed
+- **Transform Handling**: Movement now composes `translate3d` with existing CSS transforms (`scale`, `rotate`, etc.) instead of overriding them
+- **Base Transform Extraction**: Introduced `#extractBaseTransform()` to strip prior translations while keeping scale/rotate/skew intact
+- **Destroy Behavior**: `destroy()` now restores the original inline `transform` value of the element
+
+### Improved
+- **Configuration**: Added `preserveBaseTranslation` option to control whether original translations are kept
+- **Flexibility**: New `refreshBaseTransform()` method allows recalculating the base transform when classes or styles change dynamically
+
 ## [0.0.5] - 2025-01-07
 
 - **Remove logs** : remove logs

package/dist/PerlinDOM.es.js

@@ -1,59 +1,65 @@
-var j = Object.defineProperty;
-var S = (c) => {
+var D = Object.defineProperty;
+var z = (c) => {
   throw TypeError(c);
 };
-var C = (c, t, i) => t in c ? j(c, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[t] = i;
-var q = (c, t, i) => C(c, typeof t != "symbol" ? t + "" : t, i), k = (c, t, i) => t.has(c) || S("Cannot " + i);
-var Y = (c, t, i) => t.has(c) ? S("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(c) : t.set(c, i);
-var a = (c, t, i) => (k(c, t, "access private method"), i);
-var n, W, H, R, v, p, T, $, L;
-const o = class o {
+var H = (c, t, s) => t in c ? D(c, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : c[t] = s;
+var S = (c, t, s) => H(c, typeof t != "symbol" ? t + "" : t, s), j = (c, t, s) => t.has(c) || z("Cannot " + s);
+var A = (c, t, s) => t.has(c) ? z("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(c) : t.set(c, s);
+var n = (c, t, s) => (j(c, t, "access private method"), s);
+var r, E, I, d, P, f, W, C, T, B;
+const l = class l {
   constructor({
     element: t,
-    x: i = null,
-    y: r = null,
+    x: s = null,
+    y: e = null,
     speed: h = 0.01,
-    seed: l = 0,
-    lerpSpeed: s = 0.1
+    seed: o = 0,
+    lerpSpeed: i = 0.1,
+    preserveBaseTranslation: a = !1
+    // <-- si querés mantener la traslación base
   }) {
-    Y(this, p);
-    q(this, "animate", () => {
-      var t, i, r, h, l, s, e, m, g, f, u, d;
-      if (this.lerpFactor !== this.targetLerpFactor && (this.lerpFactor = a(this, p, $).call(this, this.lerpFactor, this.targetLerpFactor, this.lerpSpeed), Math.abs(this.lerpFactor - this.targetLerpFactor) < 1e-3 && (this.lerpFactor = this.targetLerpFactor)), this.lerpFactor > 0) {
+    A(this, f);
+    S(this, "animate", () => {
+      var t, s, e, h, o, i, a, m, g, p, u, R;
+      if (this.lerpFactor !== this.targetLerpFactor && (this.lerpFactor = n(this, f, C).call(this, this.lerpFactor, this.targetLerpFactor, this.lerpSpeed), Math.abs(this.lerpFactor - this.targetLerpFactor) < 1e-3 && (this.lerpFactor = this.targetLerpFactor)), this.lerpFactor > 0) {
         this.time += this.speed * this.lerpFactor;
-        const x = this.noise.perlin2(this.time, 0), A = this.noise.perlin2(this.time, 100);
+        const x = this.noise.perlin2(this.time, 0), b = this.noise.perlin2(this.time, 100);
         if (this.el) {
-          let F, y, P, X;
+          let F, y, v, L;
           if (this.hasPercentages) {
-            const w = this.el.parentElement || document.body, M = w.clientWidth, B = w.clientHeight;
-            this.xRange && (F = a(t = o, n, R).call(t, this.xRange.min) ? a(i = o, n, v).call(i, this.xRange.min, M) : this.xRange.min, y = a(r = o, n, R).call(r, this.xRange.max) ? a(h = o, n, v).call(h, this.xRange.max, M) : this.xRange.max), this.yRange && (P = a(l = o, n, R).call(l, this.yRange.min) ? a(s = o, n, v).call(s, this.yRange.min, B) : this.yRange.min, X = a(e = o, n, R).call(e, this.yRange.max) ? a(m = o, n, v).call(m, this.yRange.max, B) : this.yRange.max);
+            const Y = this.el.parentElement || document.body, $ = Y.clientWidth, M = Y.clientHeight;
+            this.xRange && (F = n(t = l, r, d).call(t, this.xRange.min) ? n(s = l, r, P).call(s, this.xRange.min, $) : this.xRange.min, y = n(e = l, r, d).call(e, this.xRange.max) ? n(h = l, r, P).call(h, this.xRange.max, $) : this.xRange.max), this.yRange && (v = n(o = l, r, d).call(o, this.yRange.min) ? n(i = l, r, P).call(i, this.yRange.min, M) : this.yRange.min, L = n(a = l, r, d).call(a, this.yRange.max) ? n(m = l, r, P).call(m, this.yRange.max, M) : this.yRange.max);
           } else
-            F = (g = this.xRange) == null ? void 0 : g.min, y = (f = this.xRange) == null ? void 0 : f.max, P = (u = this.yRange) == null ? void 0 : u.min, X = (d = this.yRange) == null ? void 0 : d.max;
-          const z = this.xRange ? a(this, p, L).call(this, x, -1, 1, F, y) : 0, b = this.yRange ? a(this, p, L).call(this, A, -1, 1, P, X) : 0;
-          this.lastX = z, this.lastY = b, this.el.style.transform = `translate3d(${z}px, ${b}px, 0)`;
+            F = (g = this.xRange) == null ? void 0 : g.min, y = (p = this.xRange) == null ? void 0 : p.max, v = (u = this.yRange) == null ? void 0 : u.min, L = (R = this.yRange) == null ? void 0 : R.max;
+          const X = this.xRange ? n(this, f, T).call(this, x, -1, 1, F, y) : 0, w = this.yRange ? n(this, f, T).call(this, b, -1, 1, v, L) : 0;
+          this.lastX = X, this.lastY = w, this.el.style.transform = `translate3d(${X}px, ${w}px, 0) ${this.baseTransform}`.trim();
         } else {
-          const F = this.xRange ? a(this, p, L).call(this, x, -1, 1, this.xRange.min, this.xRange.max) : 0, y = this.yRange ? a(this, p, L).call(this, A, -1, 1, this.yRange.min, this.yRange.max) : 0;
+          const F = this.xRange ? n(this, f, T).call(this, x, -1, 1, this.xRange.min, this.xRange.max) : 0, y = this.yRange ? n(this, f, T).call(this, b, -1, 1, this.yRange.min, this.yRange.max) : 0;
           this.lastX = F, this.lastY = y;
         }
       }
       (this.lerpFactor > 0 || this.targetLerpFactor > 0) && (this.raf = requestAnimationFrame(this.animate));
     });
-    var e, m, g, f;
-    if (this.el = t, this.xRange = i, this.yRange = r, this.speed = h, this.time = l, this.isPlaying = !0, this.lerpFactor = 1, this.lerpSpeed = s, this.targetLerpFactor = 1, this.lastX = 0, this.lastY = 0, this.hasPercentages = !1, (i && (a(e = o, n, R).call(e, i.min) || a(m = o, n, R).call(m, i.max)) || r && (a(g = o, n, R).call(g, r.min) || a(f = o, n, R).call(f, r.max))) && (this.hasPercentages = !0), t) {
-      const u = window.getComputedStyle(t);
-      u.position === "static" && (t.style.position = "relative");
-      const d = u.transform;
-      (!d || d === "none") && (t.style.transform = "translate3d(0px, 0px, 0px)"), this.hasPercentages && (this.handleResize = this.handleResize.bind(this), window.addEventListener("resize", this.handleResize));
-    }
-    this.animate = this.animate.bind(this), this.init(l);
+    var m, g, p, u;
+    if (this.el = t, this.xRange = s, this.yRange = e, this.speed = h, this.time = o, this.isPlaying = !0, this.lerpFactor = 1, this.lerpSpeed = i, this.targetLerpFactor = 1, this.lastX = 0, this.lastY = 0, this.preserveBaseTranslation = a, this.hasPercentages = !!(s && (n(m = l, r, d).call(m, s.min) || n(g = l, r, d).call(g, s.max)) || e && (n(p = l, r, d).call(p, e.min) || n(u = l, r, d).call(u, e.max))), t) {
+      const R = window.getComputedStyle(t);
+      R.position === "static" && (t.style.position = "relative"), this.originalInlineTransform = t.style.transform || "", this.baseTransform = n(this, f, B).call(this, R.transform, this.preserveBaseTranslation), this.hasPercentages && (this.handleResize = this.handleResize.bind(this), window.addEventListener("resize", this.handleResize));
+    } else
+      this.originalInlineTransform = "", this.baseTransform = "";
+    this.animate = this.animate.bind(this), this.init(o);
   }
   init(t) {
-    var i;
-    this.noise = a(this, p, T).call(this, a(i = o, n, H).call(i, t)), this.isPlaying = !0, this.lerpFactor = 1, this.targetLerpFactor = 1, this.raf = requestAnimationFrame(this.animate);
+    var s;
+    this.noise = n(this, f, W).call(this, n(s = l, r, I).call(s, t)), this.isPlaying = !0, this.lerpFactor = 1, this.targetLerpFactor = 1, this.raf = requestAnimationFrame(this.animate);
+  }
+  // Permite refrescar el transform base si cambian clases/estilos en runtime
+  refreshBaseTransform(t = this.preserveBaseTranslation) {
+    if (!this.el) return;
+    const s = window.getComputedStyle(this.el);
+    this.baseTransform = n(this, f, B).call(this, s.transform, t);
   }
   // Handle window resize for percentage-based values
   handleResize() {
-    this.hasPercentages && this.el && (this.needsRecalculation = !0);
   }
   pause() {
     this.isPlaying && (this.targetLerpFactor = 0, this.isPlaying = !1);
@@ -62,66 +68,71 @@ const o = class o {
     this.isPlaying || (this.targetLerpFactor = 1, this.isPlaying = !0, this.lerpFactor === 0 && (this.raf = requestAnimationFrame(this.animate)));
   }
   destroy() {
-    cancelAnimationFrame(this.raf), this.hasPercentages && window.removeEventListener("resize", this.handleResize);
+    cancelAnimationFrame(this.raf), this.el && (this.el.style.transform = this.originalInlineTransform || ""), this.hasPercentages && window.removeEventListener("resize", this.handleResize);
   }
 };
-n = new WeakSet(), W = function(t) {
+r = new WeakSet(), E = function(t) {
   return function() {
-    let i = t += 1831565813;
-    return i = Math.imul(i ^ i >>> 15, i | 1), i ^= i + Math.imul(i ^ i >>> 7, i | 61), ((i ^ i >>> 14) >>> 0) / 4294967296;
+    let s = t += 1831565813;
+    return s = Math.imul(s ^ s >>> 15, s | 1), s ^= s + Math.imul(s ^ s >>> 7, s | 61), ((s ^ s >>> 14) >>> 0) / 4294967296;
   };
-}, H = function(t = 0) {
+}, I = function(t = 0) {
   var h;
-  const i = Array.from({ length: 256 }, (l, s) => s), r = a(h = o, n, W).call(h, t);
-  for (let l = 255; l > 0; l--) {
-    const s = Math.floor(r() * (l + 1));
-    [i[l], i[s]] = [i[s], i[l]];
+  const s = Array.from({ length: 256 }, (o, i) => i), e = n(h = l, r, E).call(h, t);
+  for (let o = 255; o > 0; o--) {
+    const i = Math.floor(e() * (o + 1));
+    [s[o], s[i]] = [s[i], s[o]];
   }
-  return i.concat(i);
-}, R = function(t) {
+  return s.concat(s);
+}, d = function(t) {
   return typeof t == "string" && t.endsWith("%");
-}, v = function(t, i) {
+}, P = function(t, s) {
   var h;
-  return a(h = o, n, R).call(h, t) ? parseFloat(t) / 100 * i : t;
-}, p = new WeakSet(), T = function(t) {
-  const i = (s) => s * s * s * (s * (s * 6 - 15) + 10), r = (s, e, m) => e + s * (m - e), h = (s, e, m) => {
-    const g = s & 15, f = g < 8 ? e : m, u = g < 4 ? m : g === 12 || g === 14 ? e : 0;
-    return (g & 1 ? -f : f) + (g & 2 ? -u : u);
-  }, l = (s, e) => s & 1 ? -e : e;
+  return n(h = l, r, d).call(h, t) ? parseFloat(t) / 100 * s : t;
+}, f = new WeakSet(), W = function(t) {
+  const s = (i) => i * i * i * (i * (i * 6 - 15) + 10), e = (i, a, m) => a + i * (m - a), h = (i, a, m) => {
+    const g = i & 15, p = g < 8 ? a : m, u = g < 4 ? m : g === 12 || g === 14 ? a : 0;
+    return (g & 1 ? -p : p) + (g & 2 ? -u : u);
+  }, o = (i, a) => i & 1 ? -a : a;
   return {
     // Original 1D Perlin noise function
-    perlin1(s) {
-      const e = Math.floor(s) & 255;
-      s -= Math.floor(s);
-      const m = i(s);
-      return r(m, l(t[e], s), l(t[e + 1], s - 1));
+    perlin1(i) {
+      const a = Math.floor(i) & 255;
+      i -= Math.floor(i);
+      const m = s(i);
+      return e(m, o(t[a], i), o(t[a + 1], i - 1));
     },
     // New 2D Perlin noise function
-    perlin2(s, e) {
-      const m = Math.floor(s) & 255, g = Math.floor(e) & 255;
-      s -= Math.floor(s), e -= Math.floor(e);
-      const f = i(s), u = i(e), d = t[m] + g, x = t[m + 1] + g, A = t[d], F = t[d + 1], y = t[x], P = t[x + 1];
-      return r(
+    perlin2(i, a) {
+      const m = Math.floor(i) & 255, g = Math.floor(a) & 255;
+      i -= Math.floor(i), a -= Math.floor(a);
+      const p = s(i), u = s(a), R = t[m] + g, x = t[m + 1] + g, b = t[R], F = t[R + 1], y = t[x], v = t[x + 1];
+      return e(
         u,
-        r(
-          f,
-          h(t[A], s, e),
-          h(t[y], s - 1, e)
-        ),
-        r(
-          f,
-          h(t[F], s, e - 1),
-          h(t[P], s - 1, e - 1)
-        )
+        e(p, h(t[b], i, a), h(t[y], i - 1, a)),
+        e(p, h(t[F], i, a - 1), h(t[v], i - 1, a - 1))
       );
     }
   };
-}, $ = function(t, i, r) {
-  return t + r * (i - t);
-}, L = function(t, i, r, h, l) {
-  return (t - i) * (l - h) / (r - i) + h;
-}, Y(o, n);
-let E = o;
+}, C = function(t, s, e) {
+  return t + e * (s - t);
+}, T = function(t, s, e, h, o) {
+  return (t - s) * (o - h) / (e - s) + h;
+}, // Quita o preserva la traslación del transform base en 2D según flag
+B = function(t, s = !1) {
+  if (!t || t === "none") return "";
+  try {
+    const e = new DOMMatrixReadOnly(t);
+    if (e.is2D) {
+      const h = s ? e.e : 0, o = s ? e.f : 0;
+      return `matrix(${e.a}, ${e.b}, ${e.c}, ${e.d}, ${h}, ${o})`;
+    } else
+      return t;
+  } catch {
+    return t;
+  }
+}, A(l, r);
+let q = l;
 export {
-  E as default
+  q as default
 };

package/dist/PerlinDOM.umd.js

@@ -1 +1 @@
-(function(a,t){typeof exports=="object"&&typeof module<"u"?module.exports=t():typeof define=="function"&&define.amd?define(t):(a=typeof globalThis<"u"?globalThis:a||self,a.PerlinDOM=t())})(this,function(){"use strict";var $=Object.defineProperty;var T=a=>{throw TypeError(a)};var C=(a,t,p)=>t in a?$(a,t,{enumerable:!0,configurable:!0,writable:!0,value:p}):a[t]=p;var q=(a,t,p)=>C(a,typeof t!="symbol"?t+"":t,p),D=(a,t,p)=>t.has(a)||T("Cannot "+p);var b=(a,t,p)=>t.has(a)?T("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(a):t.set(a,p);var r=(a,t,p)=>(D(a,t,"access private method"),p);var t,E,W,R,L,f,j,H,A;const o=class o{constructor({element:e,x:i=null,y:h=null,speed:l=.01,seed:c=0,lerpSpeed:s=.1}){b(this,f);q(this,"animate",()=>{var e,i,h,l,c,s,n,m,g,u,d,F;if(this.lerpFactor!==this.targetLerpFactor&&(this.lerpFactor=r(this,f,H).call(this,this.lerpFactor,this.targetLerpFactor,this.lerpSpeed),Math.abs(this.lerpFactor-this.targetLerpFactor)<.001&&(this.lerpFactor=this.targetLerpFactor)),this.lerpFactor>0){this.time+=this.speed*this.lerpFactor;const P=this.noise.perlin2(this.time,0),X=this.noise.perlin2(this.time,100);if(this.el){let y,x,v,Y;if(this.hasPercentages){const w=this.el.parentElement||document.body,B=w.clientWidth,S=w.clientHeight;this.xRange&&(y=r(e=o,t,R).call(e,this.xRange.min)?r(i=o,t,L).call(i,this.xRange.min,B):this.xRange.min,x=r(h=o,t,R).call(h,this.xRange.max)?r(l=o,t,L).call(l,this.xRange.max,B):this.xRange.max),this.yRange&&(v=r(c=o,t,R).call(c,this.yRange.min)?r(s=o,t,L).call(s,this.yRange.min,S):this.yRange.min,Y=r(n=o,t,R).call(n,this.yRange.max)?r(m=o,t,L).call(m,this.yRange.max,S):this.yRange.max)}else y=(g=this.xRange)==null?void 0:g.min,x=(u=this.xRange)==null?void 0:u.max,v=(d=this.yRange)==null?void 0:d.min,Y=(F=this.yRange)==null?void 0:F.max;const z=this.xRange?r(this,f,A).call(this,P,-1,1,y,x):0,M=this.yRange?r(this,f,A).call(this,X,-1,1,v,Y):0;this.lastX=z,this.lastY=M,this.el.style.transform=`translate3d(${z}px, ${M}px, 0)`}else{const y=this.xRange?r(this,f,A).call(this,P,-1,1,this.xRange.min,this.xRange.max):0,x=this.yRange?r(this,f,A).call(this,X,-1,1,this.yRange.min,this.yRange.max):0;this.lastX=y,this.lastY=x}}(this.lerpFactor>0||this.targetLerpFactor>0)&&(this.raf=requestAnimationFrame(this.animate))});var n,m,g,u;if(this.el=e,this.xRange=i,this.yRange=h,this.speed=l,this.time=c,this.isPlaying=!0,this.lerpFactor=1,this.lerpSpeed=s,this.targetLerpFactor=1,this.lastX=0,this.lastY=0,this.hasPercentages=!1,(i&&(r(n=o,t,R).call(n,i.min)||r(m=o,t,R).call(m,i.max))||h&&(r(g=o,t,R).call(g,h.min)||r(u=o,t,R).call(u,h.max)))&&(this.hasPercentages=!0),e){const d=window.getComputedStyle(e);d.position==="static"&&(e.style.position="relative");const F=d.transform;(!F||F==="none")&&(e.style.transform="translate3d(0px, 0px, 0px)"),this.hasPercentages&&(this.handleResize=this.handleResize.bind(this),window.addEventListener("resize",this.handleResize))}this.animate=this.animate.bind(this),this.init(c)}init(e){var i;this.noise=r(this,f,j).call(this,r(i=o,t,W).call(i,e)),this.isPlaying=!0,this.lerpFactor=1,this.targetLerpFactor=1,this.raf=requestAnimationFrame(this.animate)}handleResize(){this.hasPercentages&&this.el&&(this.needsRecalculation=!0)}pause(){this.isPlaying&&(this.targetLerpFactor=0,this.isPlaying=!1)}play(){this.isPlaying||(this.targetLerpFactor=1,this.isPlaying=!0,this.lerpFactor===0&&(this.raf=requestAnimationFrame(this.animate)))}destroy(){cancelAnimationFrame(this.raf),this.hasPercentages&&window.removeEventListener("resize",this.handleResize)}};t=new WeakSet,E=function(e){return function(){let i=e+=1831565813;return i=Math.imul(i^i>>>15,i|1),i^=i+Math.imul(i^i>>>7,i|61),((i^i>>>14)>>>0)/4294967296}},W=function(e=0){var l;const i=Array.from({length:256},(c,s)=>s),h=r(l=o,t,E).call(l,e);for(let c=255;c>0;c--){const s=Math.floor(h()*(c+1));[i[c],i[s]]=[i[s],i[c]]}return i.concat(i)},R=function(e){return typeof e=="string"&&e.endsWith("%")},L=function(e,i){var l;return r(l=o,t,R).call(l,e)?parseFloat(e)/100*i:e},f=new WeakSet,j=function(e){const i=s=>s*s*s*(s*(s*6-15)+10),h=(s,n,m)=>n+s*(m-n),l=(s,n,m)=>{const g=s&15,u=g<8?n:m,d=g<4?m:g===12||g===14?n:0;return(g&1?-u:u)+(g&2?-d:d)},c=(s,n)=>s&1?-n:n;return{perlin1(s){const n=Math.floor(s)&255;s-=Math.floor(s);const m=i(s);return h(m,c(e[n],s),c(e[n+1],s-1))},perlin2(s,n){const m=Math.floor(s)&255,g=Math.floor(n)&255;s-=Math.floor(s),n-=Math.floor(n);const u=i(s),d=i(n),F=e[m]+g,P=e[m+1]+g,X=e[F],y=e[F+1],x=e[P],v=e[P+1];return h(d,h(u,l(e[X],s,n),l(e[x],s-1,n)),h(u,l(e[y],s,n-1),l(e[v],s-1,n-1)))}}},H=function(e,i,h){return e+h*(i-e)},A=function(e,i,h,l,c){return(e-i)*(c-l)/(h-i)+l},b(o,t);let a=o;return a});
+(function(h,s){typeof exports=="object"&&typeof module<"u"?module.exports=s():typeof define=="function"&&define.amd?define(s):(h=typeof globalThis<"u"?globalThis:h||self,h.PerlinDOM=s())})(this,function(){"use strict";var j=Object.defineProperty;var S=h=>{throw TypeError(h)};var C=(h,s,u)=>s in h?j(h,s,{enumerable:!0,configurable:!0,writable:!0,value:u}):h[s]=u;var q=(h,s,u)=>C(h,typeof s!="symbol"?s+"":s,u),H=(h,s,u)=>s.has(h)||S("Cannot "+u);var B=(h,s,u)=>s.has(h)?S("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(h):s.set(h,u);var r=(h,s,u)=>(H(h,s,"access private method"),u);var s,D,E,R,P,g,I,W,b,X;const c=class c{constructor({element:t,x:i=null,y:n=null,speed:o=.01,seed:l=0,lerpSpeed:e=.1,preserveBaseTranslation:a=!1}){B(this,g);q(this,"animate",()=>{var t,i,n,o,l,e,a,m,f,p,d,y;if(this.lerpFactor!==this.targetLerpFactor&&(this.lerpFactor=r(this,g,W).call(this,this.lerpFactor,this.targetLerpFactor,this.lerpSpeed),Math.abs(this.lerpFactor-this.targetLerpFactor)<.001&&(this.lerpFactor=this.targetLerpFactor)),this.lerpFactor>0){this.time+=this.speed*this.lerpFactor;const T=this.noise.perlin2(this.time,0),L=this.noise.perlin2(this.time,100);if(this.el){let F,x,v,A;if(this.hasPercentages){const Y=this.el.parentElement||document.body,$=Y.clientWidth,z=Y.clientHeight;this.xRange&&(F=r(t=c,s,R).call(t,this.xRange.min)?r(i=c,s,P).call(i,this.xRange.min,$):this.xRange.min,x=r(n=c,s,R).call(n,this.xRange.max)?r(o=c,s,P).call(o,this.xRange.max,$):this.xRange.max),this.yRange&&(v=r(l=c,s,R).call(l,this.yRange.min)?r(e=c,s,P).call(e,this.yRange.min,z):this.yRange.min,A=r(a=c,s,R).call(a,this.yRange.max)?r(m=c,s,P).call(m,this.yRange.max,z):this.yRange.max)}else F=(f=this.xRange)==null?void 0:f.min,x=(p=this.xRange)==null?void 0:p.max,v=(d=this.yRange)==null?void 0:d.min,A=(y=this.yRange)==null?void 0:y.max;const w=this.xRange?r(this,g,b).call(this,T,-1,1,F,x):0,M=this.yRange?r(this,g,b).call(this,L,-1,1,v,A):0;this.lastX=w,this.lastY=M,this.el.style.transform=`translate3d(${w}px, ${M}px, 0) ${this.baseTransform}`.trim()}else{const F=this.xRange?r(this,g,b).call(this,T,-1,1,this.xRange.min,this.xRange.max):0,x=this.yRange?r(this,g,b).call(this,L,-1,1,this.yRange.min,this.yRange.max):0;this.lastX=F,this.lastY=x}}(this.lerpFactor>0||this.targetLerpFactor>0)&&(this.raf=requestAnimationFrame(this.animate))});var m,f,p,d;if(this.el=t,this.xRange=i,this.yRange=n,this.speed=o,this.time=l,this.isPlaying=!0,this.lerpFactor=1,this.lerpSpeed=e,this.targetLerpFactor=1,this.lastX=0,this.lastY=0,this.preserveBaseTranslation=a,this.hasPercentages=!!(i&&(r(m=c,s,R).call(m,i.min)||r(f=c,s,R).call(f,i.max))||n&&(r(p=c,s,R).call(p,n.min)||r(d=c,s,R).call(d,n.max))),t){const y=window.getComputedStyle(t);y.position==="static"&&(t.style.position="relative"),this.originalInlineTransform=t.style.transform||"",this.baseTransform=r(this,g,X).call(this,y.transform,this.preserveBaseTranslation),this.hasPercentages&&(this.handleResize=this.handleResize.bind(this),window.addEventListener("resize",this.handleResize))}else this.originalInlineTransform="",this.baseTransform="";this.animate=this.animate.bind(this),this.init(l)}init(t){var i;this.noise=r(this,g,I).call(this,r(i=c,s,E).call(i,t)),this.isPlaying=!0,this.lerpFactor=1,this.targetLerpFactor=1,this.raf=requestAnimationFrame(this.animate)}refreshBaseTransform(t=this.preserveBaseTranslation){if(!this.el)return;const i=window.getComputedStyle(this.el);this.baseTransform=r(this,g,X).call(this,i.transform,t)}handleResize(){}pause(){this.isPlaying&&(this.targetLerpFactor=0,this.isPlaying=!1)}play(){this.isPlaying||(this.targetLerpFactor=1,this.isPlaying=!0,this.lerpFactor===0&&(this.raf=requestAnimationFrame(this.animate)))}destroy(){cancelAnimationFrame(this.raf),this.el&&(this.el.style.transform=this.originalInlineTransform||""),this.hasPercentages&&window.removeEventListener("resize",this.handleResize)}};s=new WeakSet,D=function(t){return function(){let i=t+=1831565813;return i=Math.imul(i^i>>>15,i|1),i^=i+Math.imul(i^i>>>7,i|61),((i^i>>>14)>>>0)/4294967296}},E=function(t=0){var o;const i=Array.from({length:256},(l,e)=>e),n=r(o=c,s,D).call(o,t);for(let l=255;l>0;l--){const e=Math.floor(n()*(l+1));[i[l],i[e]]=[i[e],i[l]]}return i.concat(i)},R=function(t){return typeof t=="string"&&t.endsWith("%")},P=function(t,i){var o;return r(o=c,s,R).call(o,t)?parseFloat(t)/100*i:t},g=new WeakSet,I=function(t){const i=e=>e*e*e*(e*(e*6-15)+10),n=(e,a,m)=>a+e*(m-a),o=(e,a,m)=>{const f=e&15,p=f<8?a:m,d=f<4?m:f===12||f===14?a:0;return(f&1?-p:p)+(f&2?-d:d)},l=(e,a)=>e&1?-a:a;return{perlin1(e){const a=Math.floor(e)&255;e-=Math.floor(e);const m=i(e);return n(m,l(t[a],e),l(t[a+1],e-1))},perlin2(e,a){const m=Math.floor(e)&255,f=Math.floor(a)&255;e-=Math.floor(e),a-=Math.floor(a);const p=i(e),d=i(a),y=t[m]+f,T=t[m+1]+f,L=t[y],F=t[y+1],x=t[T],v=t[T+1];return n(d,n(p,o(t[L],e,a),o(t[x],e-1,a)),n(p,o(t[F],e,a-1),o(t[v],e-1,a-1)))}}},W=function(t,i,n){return t+n*(i-t)},b=function(t,i,n,o,l){return(t-i)*(l-o)/(n-i)+o},X=function(t,i=!1){if(!t||t==="none")return"";try{const n=new DOMMatrixReadOnly(t);if(n.is2D){const o=i?n.e:0,l=i?n.f:0;return`matrix(${n.a}, ${n.b}, ${n.c}, ${n.d}, ${o}, ${l})`}else return t}catch{return t}},B(c,s);let h=c;return h});

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@andresclua/perlindom",
     "private": false,
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "A lightweight JavaScript library for creating smooth, organic animations for DOM elements using Perlin noise",
     "type": "module",
     "main": "./dist/PerlinDOM.umd.js",

package/readme.md

@@ -336,6 +336,7 @@ See [CHANGELOG.md](./CHANGELOG.md) for detailed version history.
 
 ### Recent Updates
 
+- **v0.0.6**: Enhanced PerlinDOM to preserve design transforms
 - **v0.0.4**: Package now public on npm, enhanced module exports configuration
 - **v0.0.3**: Fixed positioning conflicts, improved automatic position detection
 - **v0.0.2**: Added percentage support and responsive animations

package/src/index.html

@@ -62,6 +62,8 @@
               left: calc(50% - 40px);
               top: calc(50% - 40px);
               filter: blur(5px);
+              transform: scale(3.5) skewX(120deg);
+
             }
             
             /* Example 2: Horizontal Only */

package/src/js/PerlinDom.js

@@ -1,307 +1,318 @@
 class PerlinDOM {
-    /* ---------- helpers privados y estáticos ---------- */
-    static #mulberry32(a) {
-      return function () {
-        let t = (a += 0x6d2b79f5);
-        t = Math.imul(t ^ (t >>> 15), t | 1);
-        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-      };
-    }
-  
-    static #generatePermutation(seed = 0) {
-      const permutation = Array.from({ length: 256 }, (_, i) => i);
-      const rand = PerlinDOM.#mulberry32(seed);
-      for (let i = 255; i > 0; i--) {
-        const j = Math.floor(rand() * (i + 1));
-        [permutation[i], permutation[j]] = [permutation[j], permutation[i]];
-      }
-      return permutation.concat(permutation);
-    }
+  /* ---------- helpers privados y estáticos ---------- */
+  static #mulberry32(a) {
+    return function () {
+      let t = (a += 0x6d2b79f5);
+      t = Math.imul(t ^ (t >>> 15), t | 1);
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
 
-    // Helper to check if a value is a percentage string
-    static #isPercentage(value) {
-      return typeof value === 'string' && value.endsWith('%');
+  static #generatePermutation(seed = 0) {
+    const permutation = Array.from({ length: 256 }, (_, i) => i);
+    const rand = PerlinDOM.#mulberry32(seed);
+    for (let i = 255; i > 0; i--) {
+      const j = Math.floor(rand() * (i + 1));
+      [permutation[i], permutation[j]] = [permutation[j], permutation[i]];
     }
+    return permutation.concat(permutation);
+  }
 
-    // Helper to convert percentage to pixels
-    static #percentToPixels(percentage, dimension) {
-      if (!PerlinDOM.#isPercentage(percentage)) return percentage;
-      const value = parseFloat(percentage);
-      return (value / 100) * dimension;
-    }
-  
-    constructor({
-      element,
-      x = null,
-      y = null,
-      speed = 0.01,
-      seed = 0,
-      lerpSpeed = 0.1
-    }) {
-      this.el = element;
-      this.xRange = x;
-      this.yRange = y;
-      this.speed = speed;
-      this.time = seed;
-      this.isPlaying = true;
-      this.lerpFactor = 1; // 1 = full speed, 0 = paused
-      this.lerpSpeed = lerpSpeed; // How fast to transition between play/pause states
-      this.targetLerpFactor = 1; // Target state (1 = play, 0 = pause)
-      this.lastX = 0;
-      this.lastY = 0;
-      
-      // Check if we have percentage values
-      this.hasPercentages = false;
-      if (x && (PerlinDOM.#isPercentage(x.min) || PerlinDOM.#isPercentage(x.max)) ||
-          y && (PerlinDOM.#isPercentage(y.min) || PerlinDOM.#isPercentage(y.max))) {
-        this.hasPercentages = true;
+  // Helper to check if a value is a percentage string
+  static #isPercentage(value) {
+    return typeof value === 'string' && value.endsWith('%');
+  }
+
+  // Helper to convert percentage to pixels
+  static #percentToPixels(percentage, dimension) {
+    if (!PerlinDOM.#isPercentage(percentage)) return percentage;
+    const value = parseFloat(percentage);
+    return (value / 100) * dimension;
+  }
+
+  constructor({
+    element,
+    x = null,
+    y = null,
+    speed = 0.01,
+    seed = 0,
+    lerpSpeed = 0.1,
+    preserveBaseTranslation = false, // <-- si querés mantener la traslación base
+  }) {
+    this.el = element;
+    this.xRange = x;
+    this.yRange = y;
+    this.speed = speed;
+    this.time = seed;
+    this.isPlaying = true;
+    this.lerpFactor = 1; // 1 = full speed, 0 = paused
+    this.lerpSpeed = lerpSpeed; // How fast to transition between play/pause states
+    this.targetLerpFactor = 1; // Target state (1 = play, 0 = pause)
+    this.lastX = 0;
+    this.lastY = 0;
+    this.preserveBaseTranslation = preserveBaseTranslation;
+
+    // Check if we have percentage values (paréntesis para evitar precedencia ambigua)
+    this.hasPercentages = !!(
+      (x && (PerlinDOM.#isPercentage(x.min) || PerlinDOM.#isPercentage(x.max))) ||
+      (y && (PerlinDOM.#isPercentage(y.min) || PerlinDOM.#isPercentage(y.max)))
+    );
+
+    // Solo inicializar estas propiedades si el elemento no es null
+    if (element) {
+      // Ensure element has positioning for transform to work properly
+      const computedStyle = window.getComputedStyle(element);
+      if (computedStyle.position === 'static') {
+        element.style.position = 'relative';
       }
-  
-      // Solo inicializar estas propiedades si el elemento no es null
-      if (element) {
-        // Ensure element has positioning for transform to work properly
-        const computedStyle = window.getComputedStyle(element);
-        if (computedStyle.position === 'static') {
-          element.style.position = 'relative';
-        }
-        
-        // Initialize transform if it doesn't exist
-        const currentTransform = computedStyle.transform;
-        if (!currentTransform || currentTransform === 'none') {
-          element.style.transform = 'translate3d(0px, 0px, 0px)';
-        }
-        
-        // If using percentages, add resize listener
-        if (this.hasPercentages) {
-          this.handleResize = this.handleResize.bind(this);
-          window.addEventListener('resize', this.handleResize);
-        }
-  
+
+      // Guardamos el transform inline original para restaurar en destroy()
+      this.originalInlineTransform = element.style.transform || '';
+
+      // Capturamos el transform base (quitando translate en 2D por defecto)
+      this.baseTransform = this.#extractBaseTransform(
+        computedStyle.transform,
+        this.preserveBaseTranslation
+      );
+
+      // Si usamos porcentajes, escuchamos resize
+      if (this.hasPercentages) {
+        this.handleResize = this.handleResize.bind(this);
+        window.addEventListener('resize', this.handleResize);
       }
-      
-      this.animate = this.animate.bind(this);
-      
-      this.init(seed);
+    } else {
+      this.originalInlineTransform = '';
+      this.baseTransform = '';
     }
-    
+
+    this.animate = this.animate.bind(this);
+    this.init(seed);
+  }
+
   init(seed) {
-      this.noise = this.#createPerlin(PerlinDOM.#generatePermutation(seed));
-      this.isPlaying = true;
-      this.lerpFactor = 1;
-      this.targetLerpFactor = 1;
-      this.raf = requestAnimationFrame(this.animate);
-    }
-    
+    this.noise = this.#createPerlin(PerlinDOM.#generatePermutation(seed));
+    this.isPlaying = true;
+    this.lerpFactor = 1;
+    this.targetLerpFactor = 1;
+    this.raf = requestAnimationFrame(this.animate);
+  }
+
+  // Permite refrescar el transform base si cambian clases/estilos en runtime
+  refreshBaseTransform(preserveTranslation = this.preserveBaseTranslation) {
+    if (!this.el) return;
+    const cs = window.getComputedStyle(this.el);
+    this.baseTransform = this.#extractBaseTransform(cs.transform, preserveTranslation);
+  }
+
   // Handle window resize for percentage-based values
   handleResize() {
-      // Only recalculate if we're using percentages
-      if (this.hasPercentages && this.el) {
-        // Force a recalculation on next animation frame
-        this.needsRecalculation = true;
-      }
-    }
-    
+    // No necesitamos recalcular nada fuera de animate; se leen dimensiones en cada frame
+    // Este método queda por si querés extender la lógica (debounce, etc.).
+  }
+
   pause() {
-      if (this.isPlaying) {
-        this.targetLerpFactor = 0; // Target paused state
-        this.isPlaying = false;
-      }
+    if (this.isPlaying) {
+      this.targetLerpFactor = 0; // Target paused state
+      this.isPlaying = false;
     }
-    
+  }
+
   play() {
-      if (!this.isPlaying) {
-        this.targetLerpFactor = 1; // Target playing state
-        this.isPlaying = true;
-        
-        // Only start a new animation frame if we're completely paused
-        if (this.lerpFactor === 0) {
-          this.raf = requestAnimationFrame(this.animate);
-        }
-        
+    if (!this.isPlaying) {
+      this.targetLerpFactor = 1; // Target playing state
+      this.isPlaying = true;
+
+      // Solo arrancar un nuevo frame si estaba completamente pausado
+      if (this.lerpFactor === 0) {
+        this.raf = requestAnimationFrame(this.animate);
       }
     }
-  
-    #createPerlin(p) {
-      const fade = t => t * t * t * (t * (t * 6 - 15) + 10);
-      const lerp = (t, a, b) => a + t * (b - a);
-      
-      // Enhanced gradient function for 2D
-      const grad2D = (hash, x, y) => {
-        const h = hash & 15;
-        const u = h < 8 ? x : y;
-        const v = h < 4 ? y : (h === 12 || h === 14 ? x : 0);
-        return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
-      };
-      
-      // 1D gradient (kept for backward compatibility)
-      const grad1D = (hash, x) => (hash & 1 ? -x : x);
-      
-      return {
-        // Original 1D Perlin noise function
-        perlin1(x) {
-          const X = Math.floor(x) & 255;
-          x -= Math.floor(x);
-          const u = fade(x);
-          return lerp(u, grad1D(p[X], x), grad1D(p[X + 1], x - 1));
-        },
-        
-        // New 2D Perlin noise function
-        perlin2(x, y) {
-          // Integer parts of coordinates
-          const X = Math.floor(x) & 255;
-          const Y = Math.floor(y) & 255;
-          
-          // Fractional parts of coordinates
-          x -= Math.floor(x);
-          y -= Math.floor(y);
-          
-          // Fade curves for x and y
-          const u = fade(x);
-          const v = fade(y);
-          
-          // Hash coordinates of the 4 square corners
-          const A = p[X] + Y;
-          const B = p[X + 1] + Y;
-          const AA = p[A];
-          const AB = p[A + 1];
-          const BA = p[B];
-          const BB = p[B + 1];
-          
-          // Blend the four corner gradients
-          return lerp(
-            v,
-            lerp(
-              u,
-              grad2D(p[AA], x, y),
-              grad2D(p[BA], x - 1, y)
-            ),
-            lerp(
-              u,
-              grad2D(p[AB], x, y - 1),
-              grad2D(p[BB], x - 1, y - 1)
-            )
-          );
-        }
-      };
-    }
-  
-    #lerp(a, b, t) {
-      return a + t * (b - a);
-    }
-  
-    animate = () => {
-      // Update lerp factor towards target
-      if (this.lerpFactor !== this.targetLerpFactor) {
-        this.lerpFactor = this.#lerp(
-          this.lerpFactor, 
-          this.targetLerpFactor, 
-          this.lerpSpeed
+  }
+
+  #createPerlin(p) {
+    const fade = t => t * t * t * (t * (t * 6 - 15) + 10);
+    const lerp = (t, a, b) => a + t * (b - a);
+
+    // Enhanced gradient function for 2D
+    const grad2D = (hash, x, y) => {
+      const h = hash & 15;
+      const u = h < 8 ? x : y;
+      const v = h < 4 ? y : (h === 12 || h === 14 ? x : 0);
+      return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+    };
+
+    // 1D gradient (kept for backward compatibility)
+    const grad1D = (hash, x) => (hash & 1 ? -x : x);
+
+    return {
+      // Original 1D Perlin noise function
+      perlin1(x) {
+        const X = Math.floor(x) & 255;
+        x -= Math.floor(x);
+        const u = fade(x);
+        return lerp(u, grad1D(p[X], x), grad1D(p[X + 1], x - 1));
+      },
+
+      // New 2D Perlin noise function
+      perlin2(x, y) {
+        // Integer parts
+        const X = Math.floor(x) & 255;
+        const Y = Math.floor(y) & 255;
+
+        // Fractional parts
+        x -= Math.floor(x);
+        y -= Math.floor(y);
+
+        // Fade curves
+        const u = fade(x);
+        const v = fade(y);
+
+        // Hash coordinates of the 4 corners
+        const A = p[X] + Y;
+        const B = p[X + 1] + Y;
+        const AA = p[A];
+        const AB = p[A + 1];
+        const BA = p[B];
+        const BB = p[B + 1];
+
+        // Blend the four corner gradients
+        return lerp(
+          v,
+          lerp(u, grad2D(p[AA], x, y), grad2D(p[BA], x - 1, y)),
+          lerp(u, grad2D(p[AB], x, y - 1), grad2D(p[BB], x - 1, y - 1))
         );
-        
-        // Snap to target if very close
-        if (Math.abs(this.lerpFactor - this.targetLerpFactor) < 0.001) {
-          this.lerpFactor = this.targetLerpFactor;
-        }
       }
-      
-      // Only update time if not completely paused
-      if (this.lerpFactor > 0) {
-        // Scale time increment by lerp factor for smooth speed transition
-        this.time += this.speed * this.lerpFactor;
-        
-        // Use 2D Perlin noise for more natural movement
-        // We use time for one dimension and a fixed offset for the other
-        // This creates a path through the 2D noise field
-        const noiseX = this.noise.perlin2(this.time, 0);
-        const noiseY = this.noise.perlin2(this.time, 100); // Different slice of the noise field
-    
-        // Only process if we have an element
-        if (this.el) {
-          let minX, maxX, minY, maxY;
-          
-          // Get parent dimensions for percentage calculations if needed
-          if (this.hasPercentages) {
-            const parent = this.el.parentElement || document.body;
-            const parentWidth = parent.clientWidth;
-            const parentHeight = parent.clientHeight;
-            
-            // Convert percentage values to pixels if needed
-            if (this.xRange) {
-              minX = PerlinDOM.#isPercentage(this.xRange.min) 
-                ? PerlinDOM.#percentToPixels(this.xRange.min, parentWidth)
-                : this.xRange.min;
-              
-              maxX = PerlinDOM.#isPercentage(this.xRange.max)
-                ? PerlinDOM.#percentToPixels(this.xRange.max, parentWidth)
-                : this.xRange.max;
-            }
-            
-            if (this.yRange) {
-              minY = PerlinDOM.#isPercentage(this.yRange.min)
-                ? PerlinDOM.#percentToPixels(this.yRange.min, parentHeight)
-                : this.yRange.min;
-              
-              maxY = PerlinDOM.#isPercentage(this.yRange.max)
-                ? PerlinDOM.#percentToPixels(this.yRange.max, parentHeight)
-                : this.yRange.max;
-            }
-          } else {
-            // Use the original values if not using percentages
-            minX = this.xRange?.min;
-            maxX = this.xRange?.max;
-            minY = this.yRange?.min;
-            maxY = this.yRange?.max;
+    };
+  }
+
+  #lerp(a, b, t) {
+    return a + t * (b - a);
+  }
+
+  animate = () => {
+    // Update lerp factor towards target
+    if (this.lerpFactor !== this.targetLerpFactor) {
+      this.lerpFactor = this.#lerp(this.lerpFactor, this.targetLerpFactor, this.lerpSpeed);
+
+      // Snap to target if very close
+      if (Math.abs(this.lerpFactor - this.targetLerpFactor) < 0.001) {
+        this.lerpFactor = this.targetLerpFactor;
+      }
+    }
+
+    // Only update time if not completely paused
+    if (this.lerpFactor > 0) {
+      // Scale time increment by lerp factor for smooth speed transition
+      this.time += this.speed * this.lerpFactor;
+
+      // 2D Perlin noise for more natural movement
+      const noiseX = this.noise.perlin2(this.time, 0);
+      const noiseY = this.noise.perlin2(this.time, 100); // Different slice
+
+      // Only process if we have an element
+      if (this.el) {
+        let minX, maxX, minY, maxY;
+
+        // Get parent dimensions for percentage calculations if needed
+        if (this.hasPercentages) {
+          const parent = this.el.parentElement || document.body;
+          const parentWidth = parent.clientWidth;
+          const parentHeight = parent.clientHeight;
+
+          // Convert percentage values to pixels if needed
+          if (this.xRange) {
+            minX = PerlinDOM.#isPercentage(this.xRange.min)
+              ? PerlinDOM.#percentToPixels(this.xRange.min, parentWidth)
+              : this.xRange.min;
+
+            maxX = PerlinDOM.#isPercentage(this.xRange.max)
+              ? PerlinDOM.#percentToPixels(this.xRange.max, parentWidth)
+              : this.xRange.max;
+          }
+
+          if (this.yRange) {
+            minY = PerlinDOM.#isPercentage(this.yRange.min)
+              ? PerlinDOM.#percentToPixels(this.yRange.min, parentHeight)
+              : this.yRange.min;
+
+            maxY = PerlinDOM.#isPercentage(this.yRange.max)
+              ? PerlinDOM.#percentToPixels(this.yRange.max, parentHeight)
+              : this.yRange.max;
           }
-          
-          // Calculate the actual pixel values
-          const valX = this.xRange
-            ? this.#map(noiseX, -1, 1, minX, maxX)
-            : 0;
-      
-          const valY = this.yRange
-            ? this.#map(noiseY, -1, 1, minY, maxY)
-            : 0;
-          
-          // Store current values for interpolation
-          this.lastX = valX;
-          this.lastY = valY;
-      
-          // Update position using transform for better performance
-          this.el.style.transform = `translate3d(${valX}px, ${valY}px, 0)`;
         } else {
-          // If no element, just calculate and store the values
-          const valX = this.xRange
-            ? this.#map(noiseX, -1, 1, this.xRange.min, this.xRange.max)
-            : 0;
-      
-          const valY = this.yRange
-            ? this.#map(noiseY, -1, 1, this.yRange.min, this.yRange.max)
-            : 0;
-          
-          // Store current values for interpolation
-          this.lastX = valX;
-          this.lastY = valY;
+          // Use original values if not using percentages
+          minX = this.xRange?.min;
+          maxX = this.xRange?.max;
+          minY = this.yRange?.min;
+          maxY = this.yRange?.max;
         }
+
+        // Calculate pixel values
+        const valX = this.xRange ? this.#map(noiseX, -1, 1, minX, maxX) : 0;
+        const valY = this.yRange ? this.#map(noiseY, -1, 1, minY, maxY) : 0;
+
+        // Store current values for potential external use
+        this.lastX = valX;
+        this.lastY = valY;
+
+        // Compose translate3d with the base transform (scale/rotate/skew)
+        // Orden: primero translate (nuestro movimiento), luego el transform base del diseño
+        this.el.style.transform = `translate3d(${valX}px, ${valY}px, 0) ${this.baseTransform}`.trim();
+      } else {
+        // If no element, just calculate and store the values
+        const valX = this.xRange ? this.#map(noiseX, -1, 1, this.xRange.min, this.xRange.max) : 0;
+        const valY = this.yRange ? this.#map(noiseY, -1, 1, this.yRange.min, this.yRange.max) : 0;
+
+        this.lastX = valX;
+        this.lastY = valY;
       }
-  
-      // Continue animation if not completely paused or still transitioning
-      if (this.lerpFactor > 0 || this.targetLerpFactor > 0) {
-        this.raf = requestAnimationFrame(this.animate);
-      }
-    };
-  
-    #map(n, inMin, inMax, outMin, outMax) {
-      return ((n - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
     }
-  
-    destroy() {
-      cancelAnimationFrame(this.raf);
-      
-      // Remove resize listener if it was added
-      if (this.hasPercentages) {
-        window.removeEventListener('resize', this.handleResize);
+
+    // Continue animation if not completely paused or still transitioning
+    if (this.lerpFactor > 0 || this.targetLerpFactor > 0) {
+      this.raf = requestAnimationFrame(this.animate);
+    }
+  };
+
+  #map(n, inMin, inMax, outMin, outMax) {
+    return ((n - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+  }
+
+  // Quita o preserva la traslación del transform base en 2D según flag
+  #extractBaseTransform(transformValue, preserveTranslation = false) {
+    if (!transformValue || transformValue === 'none') return '';
+
+    try {
+      const m = new DOMMatrixReadOnly(transformValue);
+      if (m.is2D) {
+        // matrix(a, b, c, d, e, f) -> rearmamos con e,f = 0 si NO preservamos traslación
+        const e = preserveTranslation ? m.e : 0;
+        const f = preserveTranslation ? m.f : 0;
+        return `matrix(${m.a}, ${m.b}, ${m.c}, ${m.d}, ${e}, ${f})`;
+      } else {
+        // 3D: lo dejamos tal cual (remover traslación en 3D requiere descomposición)
+        return transformValue;
       }
+    } catch {
+      // Fallback si DOMMatrix no está disponible o hay un valor raro
+      return transformValue;
+    }
+  }
+
+  destroy() {
+    cancelAnimationFrame(this.raf);
+
+    // Restaurar transform inline original
+    if (this.el) {
+      this.el.style.transform = this.originalInlineTransform || '';
+    }
+
+    // Remove resize listener if it was added
+    if (this.hasPercentages) {
+      window.removeEventListener('resize', this.handleResize);
     }
   }
-  export default PerlinDOM;
+}
+
+export default PerlinDOM;