@andresclua/perlindom 0.0.6 → 0.1.0

package/dist/PerlinDOM.es.js

@@ -1,138 +0,0 @@
-var D = Object.defineProperty;
-var z = (c) => {
-  throw TypeError(c);
-};
-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: s = null,
-    y: e = null,
-    speed: h = 0.01,
-    seed: o = 0,
-    lerpSpeed: i = 0.1,
-    preserveBaseTranslation: a = !1
-    // <-- si querés mantener la traslación base
-  }) {
-    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), b = this.noise.perlin2(this.time, 100);
-        if (this.el) {
-          let F, y, v, L;
-          if (this.hasPercentages) {
-            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 = (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 ? 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 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 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() {
-  }
-  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);
-  }
-};
-r = new WeakSet(), E = function(t) {
-  return function() {
-    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;
-  };
-}, I = function(t = 0) {
-  var h;
-  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 s.concat(s);
-}, d = function(t) {
-  return typeof t == "string" && t.endsWith("%");
-}, P = function(t, s) {
-  var h;
-  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(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(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,
-        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))
-      );
-    }
-  };
-}, 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 {
-  q as default
-};

package/dist/PerlinDOM.umd.js

@@ -1 +0,0 @@
-(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/docs/examples.html

@@ -1,391 +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: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      filter: blur(5px);
-    }
-    
-    /* Example 2: Horizontal Only */
-    .horizontal-element {
-      width: 60px;
-      height: 60px;
-      background-color: #e74c3c;
-      border-radius: 10px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-    
-    /* Example 3: Multiple Elements */
-    .particle {
-      width: 30px;
-      height: 30px;
-      background-color: #2ecc71;
-      border-radius: 50%;
-      position: absolute;
-      opacity: 0.7;
-    }
-    
-    /* 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);
-    }
-    
-    .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: 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: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-    
-    .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>
-  
-  <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">
-    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: Interactive Controls -->
-  <h2>5. 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 '../dist/perlindom.es.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 },
-        y: { min: -100, max: 100 },
-        speed: 0.01,
-        seed: index * 100 // Different seed for each element
-      });
-    });
-    
-    // Example 4: Background Effect
-    document.querySelectorAll('.bg-element').forEach(el => {
-      new PerlinDOM({
-        element: el,
-        x: { min: -10, max: 10 },
-        y: { min: -10, max: 10 },
-        speed: 0.002, // Very slow movement
-        seed: Math.random() * 2000
-      });
-    });
-    
-    // Example 5: 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/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>