@andresclua/perlindom 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,70 @@
+# Changelog
+
+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.3] - 2025-01-07
+
+### Fixed
+- **Positioning Issue**: Fixed problem where inline styles (`left`, `top`) were conflicting with transform animations, causing double positioning
+- **Transform Initialization**: PerlinDOM now properly initializes transform property if it doesn't exist
+
+### Improved
+- **Automatic Position Detection**: PerlinDOM now automatically detects and works from the element's current position (CSS or inline styles)
+- **Cleaner API**: No need for specific inline styles - elements animate from wherever they are positioned
+- **Better Performance**: Improved transform handling for smoother animations
+
+### Documentation
+- **README**: Completely restructured with better organization and clearer examples
+- **Examples**: Cleaned up HTML examples, moved positioning from inline styles to CSS classes
+- **Best Practices**: Added section explaining when to use CSS vs inline styles
+- **Troubleshooting**: New section with common issues and solutions
+
+### Code Quality
+- **Examples Cleanup**: Removed unnecessary inline styles from demo particles
+- **CSS Organization**: Better separation of positioning and styling concerns
+
+## [0.0.2] - 2024-12-XX
+
+### Added
+- **Percentage Support**: Added support for percentage-based movement values (`'-10%'`, `'10%'`)
+- **Responsive Animations**: Animations now adapt to container size changes
+- **Mixed Values**: Support for mixing pixel and percentage values in same animation
+- **Window Resize Handling**: Automatic recalculation when using percentage values
+
+### Features
+- **2D Perlin Noise**: Enhanced noise generation for more natural movement patterns
+- **Smooth Transitions**: Improved lerp-based pause/play functionality
+- **Performance Optimization**: Better requestAnimationFrame usage
+
+## [0.0.1] - 2024-11-XX
+
+### Added
+- **Initial Release**: Basic PerlinDOM functionality
+- **Core Animation**: Smooth organic animations using Perlin noise
+- **Basic API**: Constructor with element, x/y ranges, speed, and seed options
+- **Control Methods**: `play()`, `pause()`, `destroy()`, and `init()` methods
+- **Transform-based Movement**: CSS transform animations for better performance
+
+### Features
+- **Perlin Noise Generation**: Custom implementation with seeded random generation
+- **Configurable Ranges**: Separate X and Y movement ranges
+- **Speed Control**: Adjustable animation speed
+- **Seed Support**: Reproducible animations with custom seeds
+- **Element Positioning**: Automatic relative positioning for static elements
+
+---
+
+## Legend
+
+- **Added**: New features
+- **Changed**: Changes in existing functionality
+- **Deprecated**: Soon-to-be removed features
+- **Removed**: Removed features
+- **Fixed**: Bug fixes
+- **Security**: Vulnerability fixes
+- **Improved**: Performance or usability improvements
+- **Documentation**: Documentation changes
+- **Code Quality**: Code organization and cleanup

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.3",
     "description": "A lightweight JavaScript library for creating smooth, organic animations for DOM elements using Perlin noise",
     "type": "module",
     "main": "./dist/perlindom.umd.js",