@andresclua/perlindom 0.0.1 → 0.0.2

package/dist/PerlinDOM.es.js

@@ -1,35 +1,53 @@
-var S = Object.defineProperty;
-var y = (r) => {
-  throw TypeError(r);
+var $ = Object.defineProperty;
+var q = (c) => {
+  throw TypeError(c);
 };
-var $ = (r, t, i) => t in r ? S(r, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[t] = i;
-var M = (r, t, i) => $(r, typeof t != "symbol" ? t + "" : t, i), j = (r, t, i) => t.has(r) || y("Cannot " + i);
-var F = (r, t, i) => t.has(r) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, i);
-var f = (r, t, i) => (j(r, t, "access private method"), i);
-var g, X, R, c, Y, B, d;
-const u = class u {
+var j = (c, t, i) => t in c ? $(c, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[t] = i;
+var D = (c, t, i) => j(c, typeof t != "symbol" ? t + "" : t, i), O = (c, t, i) => t.has(c) || q("Cannot " + i);
+var A = (c, t, i) => t.has(c) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(c) : t.set(c, i);
+var a = (c, t, i) => (O(c, t, "access private method"), i);
+var n, W, H, u, X, p, S, T, L;
+const o = class o {
   constructor({
     element: t,
     x: i = null,
-    y: a = null,
-    speed: n = 0.01,
-    seed: o = 0,
+    y: h = null,
+    speed: r = 0.01,
+    seed: l = 0,
     lerpSpeed: s = 0.1
   }) {
-    F(this, c);
-    M(this, "animate", () => {
-      if (this.lerpFactor !== this.targetLerpFactor && (this.lerpFactor = f(this, c, B).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, p);
+    D(this, "animate", () => {
+      var t, i, h, r, l, s, e, g, m, f, R, y;
+      if (this.lerpFactor !== this.targetLerpFactor && (this.lerpFactor = a(this, p, T).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 t = this.noise.perlin2(this.time, 0), i = this.noise.perlin2(this.time, 100), a = this.xRange ? f(this, c, d).call(this, t, -1, 1, this.xRange.min, this.xRange.max) : 0, n = this.yRange ? f(this, c, d).call(this, i, -1, 1, this.yRange.min, this.yRange.max) : 0;
-        this.lastX = a, this.lastY = n, this.el && (this.el.style.left = `${this.initialX + a}px`, this.el.style.top = `${this.initialY + n}px`);
+        const P = this.noise.perlin2(this.time, 0), Y = this.noise.perlin2(this.time, 100);
+        if (this.el) {
+          let d, F, x, v;
+          if (this.hasPercentages) {
+            const b = this.el.parentElement || document.body, B = b.clientWidth, w = b.clientHeight;
+            this.xRange && (d = a(t = o, n, u).call(t, this.xRange.min) ? a(i = o, n, X).call(i, this.xRange.min, B) : this.xRange.min, F = a(h = o, n, u).call(h, this.xRange.max) ? a(r = o, n, X).call(r, this.xRange.max, B) : this.xRange.max), this.yRange && (x = a(l = o, n, u).call(l, this.yRange.min) ? a(s = o, n, X).call(s, this.yRange.min, w) : this.yRange.min, v = a(e = o, n, u).call(e, this.yRange.max) ? a(g = o, n, X).call(g, this.yRange.max, w) : this.yRange.max);
+          } else
+            d = (m = this.xRange) == null ? void 0 : m.min, F = (f = this.xRange) == null ? void 0 : f.max, x = (R = this.yRange) == null ? void 0 : R.min, v = (y = this.yRange) == null ? void 0 : y.max;
+          const M = this.xRange ? a(this, p, L).call(this, P, -1, 1, d, F) : 0, z = this.yRange ? a(this, p, L).call(this, Y, -1, 1, x, v) : 0;
+          this.lastX = M, this.lastY = z, this.el.style.left = `${this.initialX + M}px`, this.el.style.top = `${this.initialY + z}px`;
+        } else {
+          const d = this.xRange ? a(this, p, L).call(this, P, -1, 1, this.xRange.min, this.xRange.max) : 0, F = this.yRange ? a(this, p, L).call(this, Y, -1, 1, this.yRange.min, this.yRange.max) : 0;
+          this.lastX = d, this.lastY = F;
+        }
       }
       (this.lerpFactor > 0 || this.targetLerpFactor > 0) && (this.raf = requestAnimationFrame(this.animate));
     });
-    this.el = t, this.xRange = i, this.yRange = a, this.speed = n, this.time = o, this.isPlaying = !0, this.lerpFactor = 1, this.lerpSpeed = s, this.targetLerpFactor = 1, this.lastX = 0, this.lastY = 0, t ? (this.initialX = t.offsetLeft, this.initialY = t.offsetTop) : (this.initialX = 0, this.initialY = 0), this.animate = this.animate.bind(this), this.init(o);
+    var e, g, m, f;
+    this.el = t, this.xRange = i, this.yRange = h, this.speed = r, 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, u).call(e, i.min) || a(g = o, n, u).call(g, i.max)) || h && (a(m = o, n, u).call(m, h.min) || a(f = o, n, u).call(f, h.max))) && (this.hasPercentages = !0), t ? (this.initialX = t.offsetLeft, this.initialY = t.offsetTop, this.hasPercentages && (this.handleResize = this.handleResize.bind(this), window.addEventListener("resize", this.handleResize))) : (this.initialX = 0, this.initialY = 0), this.animate = this.animate.bind(this), this.init(l);
   }
   init(t) {
     var i;
-    this.noise = f(this, c, Y).call(this, f(i = u, g, R).call(i, t)), this.isPlaying = !0, this.lerpFactor = 1, this.targetLerpFactor = 1, this.raf = requestAnimationFrame(this.animate), console.log("PerlinDOM initialized");
+    this.noise = a(this, p, S).call(this, a(i = o, n, H).call(i, t)), this.isPlaying = !0, this.lerpFactor = 1, this.targetLerpFactor = 1, this.raf = requestAnimationFrame(this.animate), console.log("PerlinDOM initialized");
+  }
+  // Handle window resize for percentage-based values
+  handleResize() {
+    this.hasPercentages && this.el && (this.needsRecalculation = !0);
   }
   pause() {
     this.isPlaying && (this.targetLerpFactor = 0, this.isPlaying = !1, console.log("PerlinDOM pausing..."));
@@ -38,61 +56,66 @@ const u = class u {
     this.isPlaying || (this.targetLerpFactor = 1, this.isPlaying = !0, this.lerpFactor === 0 && (this.raf = requestAnimationFrame(this.animate)), console.log("PerlinDOM playing..."));
   }
   destroy() {
-    cancelAnimationFrame(this.raf);
+    cancelAnimationFrame(this.raf), this.hasPercentages && window.removeEventListener("resize", this.handleResize);
   }
 };
-g = new WeakSet(), X = function(t) {
+n = new WeakSet(), W = 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;
   };
-}, R = function(t = 0) {
-  var n;
-  const i = Array.from({ length: 256 }, (o, s) => s), a = f(n = u, g, X).call(n, t);
-  for (let o = 255; o > 0; o--) {
-    const s = Math.floor(a() * (o + 1));
-    [i[o], i[s]] = [i[s], i[o]];
+}, H = function(t = 0) {
+  var r;
+  const i = Array.from({ length: 256 }, (l, s) => s), h = a(r = o, n, W).call(r, t);
+  for (let l = 255; l > 0; l--) {
+    const s = Math.floor(h() * (l + 1));
+    [i[l], i[s]] = [i[s], i[l]];
   }
   return i.concat(i);
-}, c = new WeakSet(), Y = function(t) {
-  const i = (s) => s * s * s * (s * (s * 6 - 15) + 10), a = (s, e, h) => e + s * (h - e), n = (s, e, h) => {
-    const l = s & 15, p = l < 8 ? e : h, m = l < 4 ? h : l === 12 || l === 14 ? e : 0;
-    return (l & 1 ? -p : p) + (l & 2 ? -m : m);
-  }, o = (s, e) => s & 1 ? -e : e;
+}, u = function(t) {
+  return typeof t == "string" && t.endsWith("%");
+}, X = function(t, i) {
+  var r;
+  return a(r = o, n, u).call(r, t) ? parseFloat(t) / 100 * i : t;
+}, p = new WeakSet(), S = function(t) {
+  const i = (s) => s * s * s * (s * (s * 6 - 15) + 10), h = (s, e, g) => e + s * (g - e), r = (s, e, g) => {
+    const m = s & 15, f = m < 8 ? e : g, R = m < 4 ? g : m === 12 || m === 14 ? e : 0;
+    return (m & 1 ? -f : f) + (m & 2 ? -R : R);
+  }, l = (s, e) => s & 1 ? -e : e;
   return {
     // Original 1D Perlin noise function
     perlin1(s) {
       const e = Math.floor(s) & 255;
       s -= Math.floor(s);
-      const h = i(s);
-      return a(h, o(t[e], s), o(t[e + 1], s - 1));
+      const g = i(s);
+      return h(g, l(t[e], s), l(t[e + 1], s - 1));
     },
     // New 2D Perlin noise function
     perlin2(s, e) {
-      const h = Math.floor(s) & 255, l = Math.floor(e) & 255;
+      const g = Math.floor(s) & 255, m = Math.floor(e) & 255;
       s -= Math.floor(s), e -= Math.floor(e);
-      const p = i(s), m = i(e), A = t[h] + l, L = t[h + 1] + l, b = t[A], v = t[A + 1], q = t[L], D = t[L + 1];
-      return a(
-        m,
-        a(
-          p,
-          n(t[b], s, e),
-          n(t[q], s - 1, e)
+      const f = i(s), R = i(e), y = t[g] + m, P = t[g + 1] + m, Y = t[y], d = t[y + 1], F = t[P], x = t[P + 1];
+      return h(
+        R,
+        h(
+          f,
+          r(t[Y], s, e),
+          r(t[F], s - 1, e)
         ),
-        a(
-          p,
-          n(t[v], s, e - 1),
-          n(t[D], s - 1, e - 1)
+        h(
+          f,
+          r(t[d], s, e - 1),
+          r(t[x], s - 1, e - 1)
         )
       );
     }
   };
-}, B = function(t, i, a) {
-  return t + a * (i - t);
-}, d = function(t, i, a, n, o) {
-  return (t - i) * (o - n) / (a - i) + n;
-}, F(u, g);
-let P = u;
+}, T = function(t, i, h) {
+  return t + h * (i - t);
+}, L = function(t, i, h, r, l) {
+  return (t - i) * (l - r) / (h - i) + r;
+}, A(o, n);
+let E = o;
 export {
-  P as default
+  E as default
 };

package/dist/PerlinDOM.umd.js

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

package/docs/examples.html

@@ -169,6 +169,12 @@
   <h1>PerlinDOM Examples</h1>
   <p>This page demonstrates various ways to use the PerlinDOM library for creating smooth, organic animations.</p>
   
+  <div style="background-color: #e3f2fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; border-left: 5px solid #2196f3;">
+    <h3 style="margin-top: 0; color: #0d47a1;">New Feature: Percentage-Based Values</h3>
+    <p>PerlinDOM now supports percentage-based values for responsive animations that adapt to container size.</p>
+    <p><a href="../src/percentage-example.html" style="color: #1976d2; font-weight: bold;">View Percentage-Based Examples →</a></p>
+  </div>
+  
   <!-- Example 1: Basic Animation -->
   <h2>1. Basic Animation</h2>
   <div class="code-block">

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@andresclua/perlindom",
     "private": false,
-    "version": "0.0.1",
+    "version": "0.0.2",
     "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

@@ -19,6 +19,7 @@ PerlinDOM allows you to animate HTML elements with natural and organic movements
 
 - **Organic animations**: Natural movements that avoid the rigidity of traditional animations
 - **Customizable**: Control over movement ranges, speed, and noise seed
+- **Responsive**: Support for percentage-based values that adapt to container size
 - **Lightweight**: Minimal implementation with no external dependencies
 - **Easy to use**: Simple API to implement complex effects
 - **Optimized performance**: Uses requestAnimationFrame for smooth animations
@@ -50,12 +51,42 @@ const animation = new PerlinDOM({
 | Option | Type | Description |
 |--------|------|-------------|
 | `element` | HTMLElement | The DOM element to animate |
-| `x` | Object or null | Horizontal movement configuration: `{min: value, max: value}`. Use `null` to disable horizontal movement |
-| `y` | Object or null | Vertical movement configuration: `{min: value, max: value}`. Use `null` to disable vertical movement |
+| `x` | Object or null | Horizontal movement configuration: `{min: value, max: value}`. Values can be numbers (pixels) or strings with '%' (percentage of parent width). Use `null` to disable horizontal movement |
+| `y` | Object or null | Vertical movement configuration: `{min: value, max: value}`. Values can be numbers (pixels) or strings with '%' (percentage of parent height). Use `null` to disable vertical movement |
 | `speed` | Number | Animation speed (smaller values = slower movement) |
 | `seed` | Number | Seed for the Perlin noise generator |
 | `lerpSpeed` | Number | Interpolation speed for smooth transitions (default: 0.1) |
 
+> **⚠️ Important**: For PerlinDOM to work correctly, the animated element **must** have a CSS `position` property set to `absolute`, `relative`, or `fixed`. Without this property, the animation will not function as expected.
+
+## Percentage-Based Values
+
+PerlinDOM now supports percentage-based values for movement ranges, allowing for responsive animations that adapt to the size of the parent container:
+
+```javascript
+const responsiveAnimation = new PerlinDOM({
+  element: document.querySelector('.responsive-element'),
+  x: { min: '-10%', max: '10%' },  // 10% of parent width in each direction
+  y: { min: '-5%', max: '5%' },    // 5% of parent height in each direction
+  speed: 0.01,
+  seed: 123
+});
+```
+
+You can also mix pixel and percentage values:
+
+```javascript
+const mixedAnimation = new PerlinDOM({
+  element: document.querySelector('.mixed-element'),
+  x: { min: '-10%', max: '10%' },  // Percentage-based horizontal movement
+  y: { min: -20, max: 20 },        // Pixel-based vertical movement
+  speed: 0.01,
+  seed: 456
+});
+```
+
+When using percentage values, PerlinDOM automatically recalculates the movement range when the window is resized, ensuring that your animations remain proportional to their container.
+
 ## Examples
 
 ### 1. Basic Animation
@@ -251,6 +282,23 @@ function animateTriangle() {
 animateTriangle();
 ```
 
+### 9. Responsive Animation with Percentage Values
+
+Create an animation that adapts to the size of its container.
+
+```javascript
+const responsiveAnimation = new PerlinDOM({
+  element: document.querySelector('.responsive-element'),
+  x: { min: '-15%', max: '15%' },  // 15% of parent width in each direction
+  y: { min: '-10%', max: '10%' },  // 10% of parent height in each direction
+  speed: 0.008,
+  seed: 789
+});
+
+// The animation will automatically adjust when the window is resized
+// No additional code needed for responsiveness
+```
+
 ## Use Cases
 
 - **Background elements**: Create dynamic and organic backgrounds
@@ -264,7 +312,7 @@ animateTriangle();
 PerlinDOM works in all modern browsers that support:
 - ES6 (ECMAScript 2015)
 - requestAnimationFrame
-- CSS transform
+- CSS positioning (absolute, relative, fixed)
 
 ## License
 

package/src/index.html

@@ -644,6 +644,96 @@
           </div>
         </div>
 
+        <!-- Example 9: Pixel vs. Percentage Values -->
+        <h2>9. Pixel vs. Percentage Values</h2>
+        <div class="code-block">
+          // Pixel-based animation (fixed size)<br>
+          const pixelAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.pixel-element'),<br>
+          &nbsp;&nbsp;x: { min: -50, max: 50 },<br>
+          &nbsp;&nbsp;y: { min: -50, max: 50 },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 123<br>
+          });<br><br>
+          
+          // Percentage-based animation (responsive)<br>
+          const percentageAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.percentage-element'),<br>
+          &nbsp;&nbsp;x: { min: '-20%', max: '20%' },<br>
+          &nbsp;&nbsp;y: { min: '-20%', max: '20%' },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 123<br>
+          });
+        </div>
+        <div class="example-container">
+          <div style="display: flex; justify-content: space-between; height: 100%;">
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Pixel Values (Fixed)</div>
+              <div class="pixel-element" style="width: 80px; height: 80px; background-color: #3498db; border-radius: 50%; position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); filter: blur(5px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Resize your browser window - animation range stays the same</div>
+            </div>
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Percentage Values (Responsive)</div>
+              <div class="percentage-element" style="width: 80px; height: 80px; background-color: #e74c3c; border-radius: 50%; position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); filter: blur(5px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Resize your browser window - animation range adapts</div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Example 10: Resizable Container with Percentage Values -->
+        <h2>10. Resizable Container with Percentage Values</h2>
+        <div class="code-block">
+          const responsiveAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.responsive-element'),<br>
+          &nbsp;&nbsp;x: { min: '-25%', max: '25%' },<br>
+          &nbsp;&nbsp;y: { min: '-25%', max: '25%' },<br>
+          &nbsp;&nbsp;speed: 0.008,<br>
+          &nbsp;&nbsp;seed: 456<br>
+          });
+        </div>
+        <div class="example-container">
+          <div style="height: 100%; position: relative; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; resize: both; min-width: 200px; min-height: 200px; background-color: #f0f0f0;">
+            <div class="responsive-element" style="width: 60px; height: 60px; background-color: #9b59b6; border-radius: 50%; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);"></div>
+            <div style="position: absolute; bottom: 10px; right: 10px; font-size: 12px; color: #7f8c8d;">↘️ Drag this corner to resize the container</div>
+          </div>
+        </div>
+        
+        <!-- Example 11: Mixed Pixel and Percentage Values -->
+        <h2>11. Mixed Pixel and Percentage Values</h2>
+        <div class="code-block">
+          // Horizontal percentage, vertical pixel<br>
+          const horizontalPercentAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.horizontal-percent-element'),<br>
+          &nbsp;&nbsp;x: { min: '-30%', max: '30%' },<br>
+          &nbsp;&nbsp;y: { min: -40, max: 40 },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 789<br>
+          });<br><br>
+          
+          // Horizontal pixel, vertical percentage<br>
+          const verticalPercentAnimation = new PerlinDOM({<br>
+          &nbsp;&nbsp;element: document.querySelector('.vertical-percent-element'),<br>
+          &nbsp;&nbsp;x: { min: -80, max: 80 },<br>
+          &nbsp;&nbsp;y: { min: '-20%', max: '20%' },<br>
+          &nbsp;&nbsp;speed: 0.01,<br>
+          &nbsp;&nbsp;seed: 789<br>
+          });
+        </div>
+        <div class="example-container">
+          <div style="display: flex; justify-content: space-between; height: 100%;">
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Horizontal % / Vertical px</div>
+              <div class="horizontal-percent-element" style="width: 60px; height: 60px; background-color: #f39c12; border-radius: 10px; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Horizontal movement adapts to width, vertical is fixed</div>
+            </div>
+            <div style="width: 48%; height: 100%; position: relative; border: 1px dashed #ccc; border-radius: 5px; overflow: hidden;">
+              <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-weight: bold; color: #7f8c8d; z-index: 10;">Horizontal px / Vertical %</div>
+              <div class="vertical-percent-element" style="width: 60px; height: 60px; background-color: #f39c12; border-radius: 10px; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);"></div>
+              <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 12px; color: #7f8c8d;">Horizontal movement is fixed, vertical adapts to height</div>
+            </div>
+          </div>
+        </div>
+
         <!-- Load all scripts -->
         <script type="module" src="./js/index.js"></script>
         <script type="module" src="./js/basic-examples.js"></script>
@@ -651,5 +741,51 @@
         <script type="module" src="./js/interactive-controls.js"></script>
         <script type="module" src="./js/animated-button.js"></script>
         <script type="module" src="./js/triangle-animation.js"></script>
+        <script type="module">
+          import PerlinDOM from './js/PerlinDom.js';
+          
+          // Example 9: Pixel vs. Percentage Values
+          const pixelAnimation = new PerlinDOM({
+            element: document.querySelector('.pixel-element'),
+            x: { min: -50, max: 50 },
+            y: { min: -50, max: 50 },
+            speed: 0.01,
+            seed: 123
+          });
+          
+          const percentageAnimation = new PerlinDOM({
+            element: document.querySelector('.percentage-element'),
+            x: { min: '-20%', max: '20%' },
+            y: { min: '-20%', max: '20%' },
+            speed: 0.01,
+            seed: 123
+          });
+          
+          // Example 10: Resizable Container
+          const responsiveAnimation = new PerlinDOM({
+            element: document.querySelector('.responsive-element'),
+            x: { min: '-25%', max: '25%' },
+            y: { min: '-25%', max: '25%' },
+            speed: 0.008,
+            seed: 456
+          });
+          
+          // Example 11: Mixed Values
+          const horizontalPercentAnimation = new PerlinDOM({
+            element: document.querySelector('.horizontal-percent-element'),
+            x: { min: '-30%', max: '30%' },
+            y: { min: -40, max: 40 },
+            speed: 0.01,
+            seed: 789
+          });
+          
+          const verticalPercentAnimation = new PerlinDOM({
+            element: document.querySelector('.vertical-percent-element'),
+            x: { min: -80, max: 80 },
+            y: { min: '-20%', max: '20%' },
+            speed: 0.01,
+            seed: 789
+          });
+        </script>
     </body>
 </html>

package/src/js/PerlinDom.js

@@ -18,6 +18,18 @@ class PerlinDOM {
       }
       return permutation.concat(permutation);
     }
+
+    // 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,
@@ -38,11 +50,24 @@ class PerlinDOM {
       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;
+      }
   
       // Solo inicializar estas propiedades si el elemento no es null
       if (element) {
         this.initialX = element.offsetLeft;
         this.initialY = element.offsetTop;
+        
+        // If using percentages, add resize listener
+        if (this.hasPercentages) {
+          this.handleResize = this.handleResize.bind(this);
+          window.addEventListener('resize', this.handleResize);
+        }
       } else {
         this.initialX = 0;
         this.initialY = 0;
@@ -62,6 +87,15 @@ class PerlinDOM {
       console.log('PerlinDOM initialized');
     }
     
+  // 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;
+      }
+    }
+    
   pause() {
       if (this.isPlaying) {
         this.targetLerpFactor = 0; // Target paused state
@@ -178,23 +212,73 @@ class PerlinDOM {
         const noiseX = this.noise.perlin2(this.time, 0);
         const noiseY = this.noise.perlin2(this.time, 100); // Different slice of the noise field
     
-        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;
-    
-        // Update position using left/top instead of transform
-        // Solo actualizar el elemento si existe
+        // 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;
+          }
+          
+          // 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 left/top
           this.el.style.left = `${this.initialX + valX}px`;
           this.el.style.top = `${this.initialY + valY}px`;
+        } 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;
         }
       }
   
@@ -210,6 +294,11 @@ class PerlinDOM {
   
     destroy() {
       cancelAnimationFrame(this.raf);
+      
+      // Remove resize listener if it was added
+      if (this.hasPercentages) {
+        window.removeEventListener('resize', this.handleResize);
+      }
     }
   }
   export default PerlinDOM;

package/src/examples.html

@@ -1,515 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PerlinDOM Examples</title>
-  <style>
-    body {
-      font-family: 'Arial', sans-serif;
-      line-height: 1.6;
-      color: #333;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-    
-    h1, h2 {
-      color: #2c3e50;
-    }
-    
-    .example-container {
-      margin-bottom: 40px;
-      border: 1px solid #ddd;
-      border-radius: 8px;
-      padding: 20px;
-      position: relative;
-      overflow: hidden;
-      height: 300px;
-      background-color: #f9f9f9;
-    }
-    
-    .code-block {
-      background-color: #f5f5f5;
-      padding: 15px;
-      border-radius: 5px;
-      overflow-x: auto;
-      margin-bottom: 20px;
-      font-family: monospace;
-      font-size: 14px;
-    }
-    
-    /* Example 1: Basic Animation */
-    .basic-element {
-      width: 80px;
-      height: 80px;
-      background-color: #3498db;
-      border-radius: 50%;
-      position: absolute;
-      left: calc(50% - 40px); /* 50% - half width */
-      top: calc(50% - 40px); /* 50% - half height */
-      filter: blur(5px);
-    }
-    
-    /* Example 2: Horizontal Only */
-    .horizontal-element {
-      width: 60px;
-      height: 60px;
-      background-color: #e74c3c;
-      border-radius: 10px;
-      position: absolute;
-      left: calc(50% - 30px); /* 50% - half width */
-      top: calc(50% - 30px); /* 50% - half height */
-    }
-    
-    /* Example 3: Multiple Elements */
-    .particle {
-      width: 230px;
-      height: 230px;
-      background:linear-gradient(to bottom right, #8e44ad, #3498db);
-      border-radius: 50%;
-      position: absolute;
-      /* opacity: 0.2; */
-      filter: blur(10px);
-    }
-    
-    /* Example 4: Background Effect */
-    .bg-container {
-      background-color: #34495e;
-      position: relative;
-    }
-    
-    .bg-element {
-      position: absolute;
-      border-radius: 50%;
-      background-color: rgba(255, 255, 255, 0.1);
-      filter: blur(5px);
-      transform: scale(3.2);
-    }
-    
-    .bg-element-1 {
-      width: 100px;
-      height: 100px;
-      left: 20%;
-      top: 30%;
-    }
-    
-    .bg-element-2 {
-      width: 150px;
-      height: 150px;
-      left: 60%;
-      top: 50%;
-    }
-    
-    .bg-element-3 {
-      width: 80px;
-      height: 80px;
-      left: 40%;
-      top: 70%;
-    }
-    
-    .content {
-      position: relative;
-      z-index: 10;
-      color: white;
-      text-align: center;
-      padding-top: 120px;
-    }
-    
-    /* Example 5: Pause Play Element */
-    .pause-play-container {
-      position: relative;
-      cursor: pointer;
-      height: 200px;
-      border: 1px dashed #ccc;
-      border-radius: 8px;
-      margin-top: 20px;
-    }
-    
-    .pause-play-element {
-      width: 70px;
-      height: 70px;
-      background-color: #f39c12;
-      border-radius: 50%;
-      position: absolute;
-      left: calc(50% - 35px);
-      top: calc(50% - 35px);
-      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    }
-    
-    .status-display {
-      position: absolute;
-      bottom: 20px;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      font-weight: bold;
-    }
-    
-    .status-indicator {
-      color: #2980b9;
-    }
-    
-    .instruction {
-      font-size: 14px;
-      color: #7f8c8d;
-      margin-top: 5px;
-    }
-    
-    .pause-play-settings {
-      margin-bottom: 20px;
-    }
-    
-    .setting-description {
-      font-size: 12px;
-      color: #7f8c8d;
-      margin-top: 5px;
-    }
-    
-    .lerp-value {
-      font-weight: bold;
-      color: #e67e22;
-    }
-    
-    /* Example 6: Interactive Element */
-    .interactive-container {
-      display: flex;
-      justify-content: space-between;
-    }
-    
-    .controls {
-      width: 40%;
-    }
-    
-    .preview {
-      width: 55%;
-      height: 200px;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-      position: relative;
-      overflow: hidden;
-    }
-    
-    .interactive-element {
-      width: 50px;
-      height: 50px;
-      background-color: #9b59b6;
-      border-radius: 50%;
-      position: absolute;
-      left: calc(50% - 25px); /* 50% - half width */
-      top: calc(50% - 25px); /* 50% - half height */
-    }
-    
-    .control-group {
-      margin-bottom: 15px;
-    }
-    
-    label {
-      display: block;
-      margin-bottom: 5px;
-      font-weight: bold;
-    }
-    
-    input[type="range"] {
-      width: 100%;
-    }
-    
-    .value-display {
-      font-size: 12px;
-      color: #666;
-    }
-  </style>
-</head>
-<body>
-  <h1>PerlinDOM Examples</h1>
-  <p>This page demonstrates various ways to use the PerlinDOM library for creating smooth, organic animations.</p>
-  
-  <!-- Example 1: Basic Animation -->
-  <h2>1. Basic Animation</h2>
-  <div class="code-block">
-    const basicAnimation = new PerlinDOM({<br>
-    &nbsp;&nbsp;element: document.querySelector('.basic-element'),<br>
-    &nbsp;&nbsp;x: { min: -50, max: 50 },<br>
-    &nbsp;&nbsp;y: { min: -50, max: 50 },<br>
-    &nbsp;&nbsp;speed: 0.01,<br>
-    &nbsp;&nbsp;seed: 123<br>
-    });
-  </div>
-  <div class="example-container">
-    <div class="basic-element"></div>
-  </div>
-  
-  <!-- Example 2: Horizontal Only -->
-  <h2>2. Horizontal-Only Movement</h2>
-  <div class="code-block">
-    const horizontalAnimation = new PerlinDOM({<br>
-    &nbsp;&nbsp;element: document.querySelector('.horizontal-element'),<br>
-    &nbsp;&nbsp;x: { min: -100, max: 100 },<br>
-    &nbsp;&nbsp;y: null, // No vertical movement<br>
-    &nbsp;&nbsp;speed: 0.02<br>
-    });
-  </div>
-  <div class="example-container">
-    <div class="horizontal-element"></div>
-  </div>
-  
-  <!-- Example 3: Multiple Elements -->
-  <h2>3. Multiple Elements with Different Seeds</h2>
-  <div class="code-block">
-    document.querySelectorAll('.particle').forEach((el, index) => {<br>
-    &nbsp;&nbsp;new PerlinDOM({<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;element: el,<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;x: { min: -100, max: 100 },<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;y: { min: -100, max: 100 },<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;speed: 0.01,<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;seed: index * 100 // Different seed for each element<br>
-    &nbsp;&nbsp;});<br>
-    });
-  </div>
-  <div class="example-container">
-    <div class="particle" style="left: 30%; top: 30%"></div>
-    <div class="particle" style="left: 50%; top: 50%"></div>
-    <div class="particle" style="left: 70%; top: 70%"></div>
-    <div class="particle" style="left: 30%; top: 70%"></div>
-    <div class="particle" style="left: 70%; top: 30%"></div>
-  </div>
-  
-  <!-- Example 4: Background Effect -->
-  <h2>4. Creating a Background Effect</h2>
-  <div class="code-block">
-    document.querySelectorAll('.bg-element').forEach(el => {<br>
-    &nbsp;&nbsp;new PerlinDOM({<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;element: el,<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;x: { min: -10, max: 10 },<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;y: { min: -10, max: 10 },<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;speed: 0.002, // Very slow movement<br>
-    &nbsp;&nbsp;&nbsp;&nbsp;seed: Math.random() * 2000<br>
-    &nbsp;&nbsp;});<br>
-    });
-  </div>
-  <div class="example-container bg-container">
-    <div class="bg-element bg-element-1"></div>
-    <div class="bg-element bg-element-2"></div>
-    <div class="bg-element bg-element-3"></div>
-    <div class="content">
-      <h3>Subtle Background Animation</h3>
-      <p>Perfect for creating depth in UI elements</p>
-    </div>
-  </div>
-  
-  <!-- Example 5: Pause and Play with Mouse Events -->
-  <h2>5. Smooth Pause and Play with Mouse Events</h2>
-  <div class="code-block">
-    const pausePlayAnimation = new PerlinDOM({<br>
-    &nbsp;&nbsp;element: document.querySelector('.pause-play-element'),<br>
-    &nbsp;&nbsp;x: { min: -80, max: 80 },<br>
-    &nbsp;&nbsp;y: { min: -80, max: 80 },<br>
-    &nbsp;&nbsp;speed: 0.01,<br>
-    &nbsp;&nbsp;seed: 42,<br>
-    &nbsp;&nbsp;lerpSpeed: 0.05 // Controls how smooth the transition is<br>
-    });<br><br>
-    
-    // Pause on mouse leave<br>
-    document.querySelector('.pause-play-container').addEventListener('mouseleave', () => {<br>
-    &nbsp;&nbsp;pausePlayAnimation.pause();<br>
-    &nbsp;&nbsp;document.querySelector('.status-indicator').textContent = 'Pausing...';<br>
-    });<br><br>
-    
-    // Play on mouse enter<br>
-    document.querySelector('.pause-play-container').addEventListener('mouseenter', () => {<br>
-    &nbsp;&nbsp;pausePlayAnimation.play();<br>
-    &nbsp;&nbsp;document.querySelector('.status-indicator').textContent = 'Playing...';<br>
-    });<br><br>
-    
-    // Update lerpSpeed when slider changes<br>
-    document.getElementById('lerp-speed').addEventListener('input', (e) => {<br>
-    &nbsp;&nbsp;const newSpeed = parseFloat(e.target.value);<br>
-    &nbsp;&nbsp;pausePlayAnimation.lerpSpeed = newSpeed;<br>
-    &nbsp;&nbsp;document.querySelector('.lerp-value').textContent = newSpeed.toFixed(2);<br>
-    });
-  </div>
-  <div class="example-container">
-    <div class="pause-play-settings">
-      <label for="lerp-speed">Transition Speed: <span class="lerp-value">0.05</span></label>
-      <input type="range" id="lerp-speed" min="0.01" max="0.2" step="0.01" value="0.05">
-      <p class="setting-description">Lower values = smoother, slower transitions</p>
-    </div>
-    <div class="pause-play-container">
-      <div class="pause-play-element"></div>
-      <div class="status-display">
-        Status: <span class="status-indicator">Playing</span>
-        <p class="instruction">Hover over this orange circle to play, move mouse out to pause</p>
-      </div>
-    </div>
-  </div>
-  
-  <!-- Example 6: Interactive Controls -->
-  <h2>6. Interactive Controls</h2>
-  <div class="code-block">
-    // Create the animation with initial settings<br>
-    const interactiveAnimation = new PerlinDOM({<br>
-    &nbsp;&nbsp;element: document.querySelector('.interactive-element'),<br>
-    &nbsp;&nbsp;x: { min: -50, max: 50 },<br>
-    &nbsp;&nbsp;y: { min: -50, max: 50 },<br>
-    &nbsp;&nbsp;speed: 0.01,<br>
-    &nbsp;&nbsp;seed: 0<br>
-    });<br><br>
-    
-    // Update settings based on user input<br>
-    speedControl.addEventListener('input', () => {<br>
-    &nbsp;&nbsp;// Stop current animation<br>
-    &nbsp;&nbsp;interactiveAnimation.destroy();<br>
-    &nbsp;&nbsp;<br>
-    &nbsp;&nbsp;// Reinitialize with new settings<br>
-    &nbsp;&nbsp;interactiveAnimation.speed = parseFloat(speedControl.value);<br>
-    &nbsp;&nbsp;interactiveAnimation.init(seedControl.value);<br>
-    });
-  </div>
-  <div class="example-container">
-    <div class="interactive-container">
-      <div class="controls">
-        <div class="control-group">
-          <label for="x-range">X Range:</label>
-          <input type="range" id="x-range" min="0" max="100" value="50">
-          <div class="value-display">-50 to 50</div>
-        </div>
-        
-        <div class="control-group">
-          <label for="y-range">Y Range:</label>
-          <input type="range" id="y-range" min="0" max="100" value="50">
-          <div class="value-display">-50 to 50</div>
-        </div>
-        
-        <div class="control-group">
-          <label for="speed">Speed:</label>
-          <input type="range" id="speed" min="0.001" max="0.05" step="0.001" value="0.01">
-          <div class="value-display">0.01</div>
-        </div>
-        
-        <div class="control-group">
-          <label for="seed">Seed:</label>
-          <input type="range" id="seed" min="0" max="1000" step="1" value="0">
-          <div class="value-display">0</div>
-        </div>
-      </div>
-      
-      <div class="preview">
-        <div class="interactive-element"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Load PerlinDOM library -->
-  <script type="module">
-    import PerlinDOM from './js/PerlinDom.js';
-    
-    // Example 1: Basic Animation
-    const basicAnimation = new PerlinDOM({
-      element: document.querySelector('.basic-element'),
-      x: { min: -50, max: 50 },
-      y: { min: -50, max: 50 },
-      speed: 0.01,
-      seed: 123
-    });
-    
-    // Example 2: Horizontal Only
-    const horizontalAnimation = new PerlinDOM({
-      element: document.querySelector('.horizontal-element'),
-      x: { min: -100, max: 100 },
-      y: null, // No vertical movement
-      speed: 0.02
-    });
-    
-    // Example 3: Multiple Elements
-    document.querySelectorAll('.particle').forEach((el, index) => {
-      new PerlinDOM({
-        element: el,
-        x: { min: -100, max: 100 + index * 20 }, // Slightly wider range for each element
-        y: { min: -100, max: 120}, // Random vertical range
-        speed:  index * 0.001, // Slightly different speed for each element
-        seed: index * 16700 // Different seed for each element
-      });
-    });
-    
-    // Example 4: Background Effect
-    document.querySelectorAll('.bg-element').forEach(el => {
-      new PerlinDOM({
-        element: el,
-        x: { min: -110, max: 110 },
-        y: { min: -110, max: 110 },
-        speed: 0.002, // Very slow movement
-        seed: Math.random() * 2000
-      });
-    });
-    
-    // Example 5: Pause and Play with Mouse Events
-    const pausePlayAnimation = new PerlinDOM({
-      element: document.querySelector('.pause-play-element'),
-      x: { min: -80, max: 80 },
-      y: { min: -180, max: 80 },
-      speed: 0.01,
-      seed: 42,
-      lerpSpeed: 0.05 // Controls how smooth the transition is
-    });
-    
-    // Pause on mouse leave
-    document.querySelector('.pause-play-container').addEventListener('mouseleave', () => {
-      pausePlayAnimation.pause();
-      document.querySelector('.status-indicator').textContent = 'Pausing...';
-    });
-    
-    // Play on mouse enter
-    document.querySelector('.pause-play-container').addEventListener('mouseenter', () => {
-      pausePlayAnimation.play();
-      document.querySelector('.status-indicator').textContent = 'Playing...';
-    });
-    
-    // Update lerpSpeed when slider changes
-    document.getElementById('lerp-speed').addEventListener('input', (e) => {
-      const newSpeed = parseFloat(e.target.value);
-      pausePlayAnimation.lerpSpeed = newSpeed;
-      document.querySelector('.lerp-value').textContent = newSpeed.toFixed(2);
-    });
-    
-    // Example 6: Interactive Controls
-    let interactiveAnimation;
-    
-    function initInteractiveAnimation() {
-      // Destroy previous instance if it exists
-      if (interactiveAnimation) {
-        interactiveAnimation.destroy();
-      }
-      
-      // Get current values
-      const xRange = parseInt(document.getElementById('x-range').value);
-      const yRange = parseInt(document.getElementById('y-range').value);
-      const speed = parseFloat(document.getElementById('speed').value);
-      const seed = parseInt(document.getElementById('seed').value);
-      
-      // Create new instance
-      interactiveAnimation = new PerlinDOM({
-        element: document.querySelector('.interactive-element'),
-        x: { min: -xRange, max: xRange },
-        y: { min: -yRange, max: yRange },
-        speed: speed,
-        seed: seed
-      });
-      
-      // Update displays
-      document.querySelector('#x-range + .value-display').textContent = `-${xRange} to ${xRange}`;
-      document.querySelector('#y-range + .value-display').textContent = `-${yRange} to ${yRange}`;
-      document.querySelector('#speed + .value-display').textContent = speed.toFixed(3);
-      document.querySelector('#seed + .value-display').textContent = seed;
-    }
-    
-    // Initialize
-    initInteractiveAnimation();
-    
-    // Add event listeners
-    document.getElementById('x-range').addEventListener('input', initInteractiveAnimation);
-    document.getElementById('y-range').addEventListener('input', initInteractiveAnimation);
-    document.getElementById('speed').addEventListener('input', initInteractiveAnimation);
-    document.getElementById('seed').addEventListener('input', initInteractiveAnimation);
-  </script>
-</body>
-</html>

package/src/js/PerlinSVG.js

@@ -1,190 +0,0 @@
-import PerlinDOM from './PerlinDom.js';
-
-/**
- * PerlinSVG - Clase para animar paths SVG usando ruido Perlin
- * 
- * Esta clase extiende PerlinDOM para proporcionar animaciones orgánicas
- * a elementos SVG path, creando efectos de ondulación fluidos y naturales.
- */
-class PerlinSVG extends PerlinDOM {
-  /**
-   * Constructor de PerlinSVG
-   * 
-   * @param {Object} options - Opciones de configuración
-   * @param {Element|Element[]} options.element - El/los elemento(s) SVG path a animar
-   * @param {number} options.numPoints - Número de puntos de control para cada path (más puntos = curvas más detalladas)
-   * @param {number} options.amplitude - Amplitud máxima de la animación (altura de las ondas en píxeles)
-   * @param {boolean} options.isOpen - Estado inicial (true = abierto/visible, false = cerrado/oculto)
-   * @param {number} options.speed - Velocidad de la animación (valores más altos = movimiento más rápido)
-   * @param {number} options.seed - Semilla para el generador de ruido Perlin (misma semilla = mismo patrón)
-   * @param {number} options.lerpSpeed - Velocidad de interpolación entre estados (valores más altos = transiciones más rápidas)
-   * @param {number} options.delayPointsMax - Retraso máximo aleatorio para cada punto (crea efectos de cascada)
-   * @param {number} options.delayPerPath - Retraso entre capas/paths consecutivos (crea efecto escalonado)
-   */
-  constructor({
-    element,                // El/los elemento(s) SVG path a animar
-    numPoints = 10,         // Número de puntos de control (más puntos = curvas más detalladas)
-    amplitude = 100,        // Amplitud máxima de la animación (altura de las ondas)
-    isOpen = false,         // Estado inicial (true = abierto/visible, false = cerrado/oculto)
-    speed = 0.01,           // Velocidad de la animación (valores más altos = movimiento más rápido)
-    seed = 0,               // Semilla para el generador de ruido Perlin (misma semilla = mismo patrón)
-    lerpSpeed = 0.1,        // Velocidad de interpolación entre estados
-    delayPointsMax = 0.3,   // Retraso máximo aleatorio para cada punto (crea efectos de cascada)
-    delayPerPath = 0.25     // Retraso entre capas/paths consecutivos (crea efecto escalonado)
-  }) {
-    // Call parent constructor with null element
-    // since we'll handle the SVG differently
-    super({
-      element: null,
-      speed: speed,
-      seed: seed,
-      lerpSpeed: lerpSpeed
-    });
-    
-    // SVG specific properties
-    this.svgElement = element;
-    this.paths = Array.isArray(element) ? element : [element];
-    this.numPoints = numPoints;
-    this.amplitude = amplitude;
-    this.isOpen = isOpen;
-    this.delayPointsMax = delayPointsMax;
-    this.delayPerPath = delayPerPath;
-    this.isAnimating = false;
-    
-    // Arrays to store points and delays
-    this.allPoints = [];
-    this.pointsDelay = [];
-    
-    // Initialize points and delays
-    this.initPoints();
-    
-    // Add click event
-    if (this.paths.length > 0 && this.paths[0].ownerSVGElement) {
-      this.paths[0].ownerSVGElement.addEventListener('click', () => this.toggle());
-    }
-  }
-  
-  // Initialize points for all paths
-  initPoints() {
-    // Initialize delays for points
-    for (let i = 0; i < this.numPoints; i++) {
-      this.pointsDelay[i] = Math.random() * this.delayPointsMax;
-    }
-    
-    // Initialize points for each path
-    for (let i = 0; i < this.paths.length; i++) {
-      let points = [];
-      this.allPoints.push(points);
-      
-      for (let j = 0; j < this.numPoints; j++) {
-        points.push(this.isOpen ? 0 : this.amplitude);
-      }
-    }
-    
-    // Render initial paths
-    this.render();
-  }
-  
-  // Toggle between open/closed states
-  toggle() {
-    if (this.isAnimating) return;
-    
-    this.isOpen = !this.isOpen;
-    this.isAnimating = true;
-    
-    // Schedule animations for each point with Perlin noise-based delays
-    const startTime = performance.now();
-    const animate = (timestamp) => {
-      const elapsed = timestamp - startTime;
-      let stillAnimating = false;
-      
-      // Update all points
-      for (let i = 0; i < this.paths.length; i++) {
-        const pathDelay = this.delayPerPath * 1000 * (this.isOpen ? i : (this.paths.length - i - 1));
-        
-        for (let j = 0; j < this.numPoints; j++) {
-          const pointDelay = this.pointsDelay[j] * 1000; // Convert to ms
-          const totalDelay = pointDelay + pathDelay;
-          
-          if (elapsed > totalDelay) {
-            // Calculate animation progress
-            const animProgress = Math.min(1, (elapsed - totalDelay) / (1000 * this.lerpSpeed * 5));
-            
-            // Target value
-            const targetValue = this.isOpen ? 0 : this.amplitude;
-            
-            // Interpolate towards target
-            if (Math.abs(this.allPoints[i][j] - targetValue) > 0.1) {
-              // Use Perlin noise to add natural variation
-              const noiseValue = this.noise.perlin2(j * 0.1, i * 0.1 + this.time);
-              const variation = noiseValue * 2; // Small variation
-              
-              // Use our own lerp function since we can't access the private one
-              this.allPoints[i][j] = this.lerp(
-                this.allPoints[i][j],
-                targetValue + (this.isOpen ? 0 : variation), // Only add variation in closed state
-                animProgress
-              );
-              
-              stillAnimating = true;
-            } else {
-              this.allPoints[i][j] = targetValue;
-            }
-          } else {
-            stillAnimating = true;
-          }
-        }
-      }
-      
-      // Update the display
-      this.render();
-      
-      // Continue animation if needed
-      if (stillAnimating) {
-        this.raf = requestAnimationFrame(animate);
-      } else {
-        this.isAnimating = false;
-      }
-      
-      // Update time for Perlin noise
-      this.time += this.speed;
-    };
-    
-    // Start animation
-    this.raf = requestAnimationFrame(animate);
-  }
-  
-  // Render SVG paths
-  render() {
-    for (let i = 0; i < this.paths.length; i++) {
-      const path = this.paths[i];
-      const points = this.allPoints[i];
-      
-      let d = "";
-      d += this.isOpen ? `M 0 0 V ${points[0]} C` : `M 0 ${points[0]} C`;
-      
-      for (let j = 0; j < this.numPoints - 1; j++) {
-        let p = (j + 1) / (this.numPoints - 1) * 100;
-        let cp = p - (1 / (this.numPoints - 1) * 100) / 2;
-        d += ` ${cp} ${points[j]} ${cp} ${points[j+1]} ${p} ${points[j+1]}`;
-      }
-      
-      d += this.isOpen ? ` V 100 H 0` : ` V 0 H 0`;
-      path.setAttribute("d", d);
-    }
-  }
-  
-  // Override parent's animate method
-  // so it doesn't interfere with our custom animation
-  animate = () => {
-    // We don't do anything here, as we handle animation in toggle()
-    this.raf = requestAnimationFrame(this.animate);
-  };
-  
-  // Our own lerp function since we can't access the private one from PerlinDOM
-  lerp(a, b, t) {
-    return a + t * (b - a);
-  }
-}
-
-export default PerlinSVG;