@rippleflow/water-distortion 0.1.2 → 0.1.3

package/dist/water-distortion.js

@@ -1,16 +1,16 @@
 var Ye = Object.defineProperty;
-var Ve = (r, e, t) => e in r ? Ye(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var f = (r, e, t) => Ve(r, typeof e != "symbol" ? e + "" : e, t);
+var Ve = (r, e, n) => e in r ? Ye(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
+var f = (r, e, n) => Ve(r, typeof e != "symbol" ? e + "" : e, n);
 import { jsxs as qe, jsx as de } from "react/jsx-runtime";
 import { forwardRef as $e, useRef as y, useImperativeHandle as Qe, useEffect as V, useState as je } from "react";
-function h(r, e, t) {
-  return Math.min(t, Math.max(e, r));
+function h(r, e, n) {
+  return Math.min(n, Math.max(e, r));
 }
 function Ze(r, e) {
   return Math.hypot(e.x - r.x, e.y - r.y);
 }
-function O(r, e, t) {
-  return r + (e - r) * t;
+function O(r, e, n) {
+  return r + (e - r) * n;
 }
 const J = 24, C = 128, oe = 8, se = Math.PI * 2, fe = {
   causticGain: 0.1,
@@ -272,7 +272,8 @@ void main() {
 }
 `;
 class rt {
-  constructor(e) {
+  constructor(e, n = () => {
+  }) {
     f(this, "gl");
     f(this, "isWebGL2");
     f(this, "canLinearFloat");
@@ -296,17 +297,17 @@ class rt {
     f(this, "wakeAUniforms", new Float32Array(J * 4));
     f(this, "wakeBUniforms", new Float32Array(J * 4));
     f(this, "wakeShapeUniforms", new Float32Array(J * 4));
-    this.canvas = e;
-    const { gl: t, isWebGL2: n, canLinearFloat: i } = it(e);
-    this.gl = t, this.isWebGL2 = n, this.canLinearFloat = i, this.quadBuffer = q(t.createBuffer(), "WebGL buffer"), this.simulationProgram = Le(t, Ae, et), this.materialProgram = Le(t, Ae, tt), this.backgroundTexture = q(t.createTexture(), "WebGL texture"), this.causticTexture = q(t.createTexture(), "WebGL texture"), t.bindBuffer(t.ARRAY_BUFFER, this.quadBuffer), t.bufferData(
+    this.canvas = e, this.requestRender = n;
+    const { gl: t, isWebGL2: i, canLinearFloat: a } = it(e);
+    this.gl = t, this.isWebGL2 = i, this.canLinearFloat = a, this.quadBuffer = q(t.createBuffer(), "WebGL buffer"), this.simulationProgram = Le(t, Ae, et), this.materialProgram = Le(t, Ae, tt), this.backgroundTexture = q(t.createTexture(), "WebGL texture"), this.causticTexture = q(t.createTexture(), "WebGL texture"), t.bindBuffer(t.ARRAY_BUFFER, this.quadBuffer), t.bufferData(
       t.ARRAY_BUFFER,
       new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
       t.STATIC_DRAW
     ), t.disable(t.DEPTH_TEST), t.disable(t.STENCIL_TEST), t.disable(t.BLEND), this.initializeBackgroundTexture(), this.initializeCausticTexture(), this.resize(1, 1, 1, 192);
   }
-  resize(e, t, n, i) {
-    this.cssWidth = Math.max(1, e), this.cssHeight = Math.max(1, t);
-    const a = Math.min(2, Math.max(1, n || 1)), l = Math.max(1, Math.round(this.cssWidth * a)), c = Math.max(1, Math.round(this.cssHeight * a));
+  resize(e, n, t, i) {
+    this.cssWidth = Math.max(1, e), this.cssHeight = Math.max(1, n);
+    const a = Math.min(2, Math.max(1, t || 1)), l = Math.max(1, Math.round(this.cssWidth * a)), c = Math.max(1, Math.round(this.cssHeight * a));
     (this.canvas.width !== l || this.canvas.height !== c) && (this.canvas.width = l, this.canvas.height = c);
     const s = Math.max(32, Math.round(i)), d = this.cssWidth / this.cssHeight, E = d >= 1 ? s : Math.max(1, Math.round(s * d)), _ = d >= 1 ? Math.max(1, Math.round(s / d)) : s;
     E === this.simWidth && _ === this.simHeight || (this.simWidth = E, this.simHeight = _, this.recreateState());
@@ -318,28 +319,28 @@ class rt {
       this.textureImage = e, this.textureNeedsUpload = !0;
       return;
     }
-    const t = new Image();
-    t.crossOrigin = "anonymous", t.onload = () => {
-      this.textureSource === e && (this.textureImage = t, this.textureNeedsUpload = !0);
-    }, t.onerror = () => {
+    const n = new Image();
+    n.crossOrigin = "anonymous", n.onload = () => {
+      this.textureSource === e && (this.textureImage = n, this.textureNeedsUpload = !0, this.requestRender());
+    }, n.onerror = () => {
       this.textureSource === e && (this.textureImage = void 0, this.textureReady = !1, this.textureNeedsUpload = !1);
-    }, t.src = e;
+    }, n.src = e;
   }
-  step(e, t, n) {
+  step(e, n, t) {
     if (!this.stateTextures || !this.framebuffers)
       return;
     const i = this.gl, a = 1 - this.readIndex;
-    i.useProgram(this.simulationProgram.program), i.bindFramebuffer(i.FRAMEBUFFER, this.framebuffers[a]), i.viewport(0, 0, this.simWidth, this.simHeight), i.activeTexture(i.TEXTURE0), i.bindTexture(i.TEXTURE_2D, this.stateTextures[this.readIndex]), this.prepareQuad(this.simulationProgram), this.setSimulationUniforms(e, t, n), i.drawArrays(i.TRIANGLE_STRIP, 0, 4), i.bindFramebuffer(i.FRAMEBUFFER, null), this.readIndex = a;
+    i.useProgram(this.simulationProgram.program), i.bindFramebuffer(i.FRAMEBUFFER, this.framebuffers[a]), i.viewport(0, 0, this.simWidth, this.simHeight), i.activeTexture(i.TEXTURE0), i.bindTexture(i.TEXTURE_2D, this.stateTextures[this.readIndex]), this.prepareQuad(this.simulationProgram), this.setSimulationUniforms(e, n, t), i.drawArrays(i.TRIANGLE_STRIP, 0, 4), i.bindFramebuffer(i.FRAMEBUFFER, null), this.readIndex = a;
   }
-  render(e, t = 0) {
-    const n = this.gl;
-    this.stateTextures && (e.texture ? this.setTextureSource(e.texture) : this.setTextureSource(void 0), this.uploadTextureIfNeeded(e), n.useProgram(this.materialProgram.program), n.bindFramebuffer(n.FRAMEBUFFER, null), n.viewport(0, 0, this.canvas.width, this.canvas.height), n.clearColor(0, 0, 0, 0), n.clear(n.COLOR_BUFFER_BIT), n.activeTexture(n.TEXTURE0), n.bindTexture(n.TEXTURE_2D, this.stateTextures[this.readIndex]), n.activeTexture(n.TEXTURE1), n.bindTexture(n.TEXTURE_2D, this.backgroundTexture), n.activeTexture(n.TEXTURE2), n.bindTexture(n.TEXTURE_2D, this.causticTexture), this.prepareQuad(this.materialProgram), this.setMaterialUniforms(e, t), n.drawArrays(n.TRIANGLE_STRIP, 0, 4));
+  render(e, n = 0) {
+    const t = this.gl;
+    this.stateTextures && (e.texture ? this.setTextureSource(e.texture) : this.setTextureSource(void 0), this.uploadTextureIfNeeded(e), t.useProgram(this.materialProgram.program), t.bindFramebuffer(t.FRAMEBUFFER, null), t.viewport(0, 0, this.canvas.width, this.canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), !(e.mode !== "dom" && e.texture && !this.textureReady) && (t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.stateTextures[this.readIndex]), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, this.backgroundTexture), t.activeTexture(t.TEXTURE2), t.bindTexture(t.TEXTURE_2D, this.causticTexture), this.prepareQuad(this.materialProgram), this.setMaterialUniforms(e, n), t.drawArrays(t.TRIANGLE_STRIP, 0, 4)));
   }
   hasVisibleActivity() {
     if (!this.framebuffers)
       return !1;
-    const e = this.gl, t = this.framebuffers[this.readIndex], n = this.simWidth * this.simHeight * 4;
-    (!this.activityPixels || this.activityPixels.length !== n) && (this.activityPixels = new Float32Array(n)), e.bindFramebuffer(e.FRAMEBUFFER, t);
+    const e = this.gl, n = this.framebuffers[this.readIndex], t = this.simWidth * this.simHeight * 4;
+    (!this.activityPixels || this.activityPixels.length !== t) && (this.activityPixels = new Float32Array(t)), e.bindFramebuffer(e.FRAMEBUFFER, n);
     try {
       e.readPixels(
         0,
@@ -363,26 +364,26 @@ class rt {
     const e = this.gl;
     if (this.framebuffers) {
       e.viewport(0, 0, this.simWidth, this.simHeight);
-      for (const t of this.framebuffers)
-        e.bindFramebuffer(e.FRAMEBUFFER, t), e.clearColor(0, 0, 0, 1), e.clear(e.COLOR_BUFFER_BIT);
+      for (const n of this.framebuffers)
+        e.bindFramebuffer(e.FRAMEBUFFER, n), e.clearColor(0, 0, 0, 1), e.clear(e.COLOR_BUFFER_BIT);
     }
     e.bindFramebuffer(e.FRAMEBUFFER, null), e.viewport(0, 0, this.canvas.width, this.canvas.height), e.clearColor(0, 0, 0, 0), e.clear(e.COLOR_BUFFER_BIT);
   }
   dispose() {
-    var t, n;
+    var n, t;
     const e = this.gl;
-    (t = this.stateTextures) == null || t.forEach((i) => e.deleteTexture(i)), (n = this.framebuffers) == null || n.forEach((i) => e.deleteFramebuffer(i)), e.deleteTexture(this.backgroundTexture), e.deleteTexture(this.causticTexture), e.deleteBuffer(this.quadBuffer), e.deleteProgram(this.simulationProgram.program), e.deleteProgram(this.materialProgram.program);
+    (n = this.stateTextures) == null || n.forEach((i) => e.deleteTexture(i)), (t = this.framebuffers) == null || t.forEach((i) => e.deleteFramebuffer(i)), e.deleteTexture(this.backgroundTexture), e.deleteTexture(this.causticTexture), e.deleteBuffer(this.quadBuffer), e.deleteProgram(this.simulationProgram.program), e.deleteProgram(this.materialProgram.program);
   }
   recreateState() {
     var l, c;
     const e = this.gl;
     (l = this.stateTextures) == null || l.forEach((s) => e.deleteTexture(s)), (c = this.framebuffers) == null || c.forEach((s) => e.deleteFramebuffer(s));
-    const t = this.createStateTexture(), n = this.createStateTexture(), i = this.createFramebuffer(t), a = this.createFramebuffer(n);
-    this.stateTextures = [t, n], this.framebuffers = [i, a], this.readIndex = 0, this.clear();
+    const n = this.createStateTexture(), t = this.createStateTexture(), i = this.createFramebuffer(n), a = this.createFramebuffer(t);
+    this.stateTextures = [n, t], this.framebuffers = [i, a], this.readIndex = 0, this.clear();
   }
   createStateTexture() {
-    const e = this.gl, t = q(e.createTexture(), "WebGL texture");
-    if (e.bindTexture(e.TEXTURE_2D, t), e.texParameteri(
+    const e = this.gl, n = q(e.createTexture(), "WebGL texture");
+    if (e.bindTexture(e.TEXTURE_2D, n), e.texParameteri(
       e.TEXTURE_2D,
       e.TEXTURE_MIN_FILTER,
       this.canLinearFloat ? e.LINEAR : e.NEAREST
@@ -391,16 +392,16 @@ class rt {
       e.TEXTURE_MAG_FILTER,
       this.canLinearFloat ? e.LINEAR : e.NEAREST
     ), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), this.isWebGL2) {
-      const n = e;
-      n.texImage2D(
-        n.TEXTURE_2D,
+      const t = e;
+      t.texImage2D(
+        t.TEXTURE_2D,
         0,
-        n.RGBA32F,
+        t.RGBA32F,
         this.simWidth,
         this.simHeight,
         0,
-        n.RGBA,
-        n.FLOAT,
+        t.RGBA,
+        t.FLOAT,
         null
       );
     } else
@@ -415,19 +416,19 @@ class rt {
         e.FLOAT,
         null
       );
-    return t;
+    return n;
   }
   createFramebuffer(e) {
-    const t = this.gl, n = q(t.createFramebuffer(), "WebGL framebuffer");
-    if (t.bindFramebuffer(t.FRAMEBUFFER, n), t.framebufferTexture2D(
-      t.FRAMEBUFFER,
-      t.COLOR_ATTACHMENT0,
-      t.TEXTURE_2D,
+    const n = this.gl, t = q(n.createFramebuffer(), "WebGL framebuffer");
+    if (n.bindFramebuffer(n.FRAMEBUFFER, t), n.framebufferTexture2D(
+      n.FRAMEBUFFER,
+      n.COLOR_ATTACHMENT0,
+      n.TEXTURE_2D,
       e,
       0
-    ), t.checkFramebufferStatus(t.FRAMEBUFFER) !== t.FRAMEBUFFER_COMPLETE)
+    ), n.checkFramebufferStatus(n.FRAMEBUFFER) !== n.FRAMEBUFFER_COMPLETE)
       throw new Error("WaterDistortion could not create a float simulation target.");
-    return t.bindFramebuffer(t.FRAMEBUFFER, null), n;
+    return n.bindFramebuffer(n.FRAMEBUFFER, null), t;
   }
   initializeBackgroundTexture() {
     const e = this.gl;
@@ -460,71 +461,71 @@ class rt {
   uploadTextureIfNeeded(e) {
     if (e.mode === "dom" || !this.textureImage || !this.textureNeedsUpload && !at(this.textureImage))
       return;
-    const t = this.gl;
+    const n = this.gl;
     try {
-      t.bindTexture(t.TEXTURE_2D, this.backgroundTexture), t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL, 1), t.texImage2D(
-        t.TEXTURE_2D,
+      n.bindTexture(n.TEXTURE_2D, this.backgroundTexture), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, 1), n.texImage2D(
+        n.TEXTURE_2D,
         0,
-        t.RGBA,
-        t.RGBA,
-        t.UNSIGNED_BYTE,
+        n.RGBA,
+        n.RGBA,
+        n.UNSIGNED_BYTE,
         this.textureImage
-      ), t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL, 0), this.textureReady = !0, this.textureNeedsUpload = !1;
+      ), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, 0), this.textureReady = !0, this.textureNeedsUpload = !1;
     } catch {
       this.textureReady = !1, this.textureNeedsUpload = !1;
     }
   }
   prepareQuad(e) {
-    const t = this.gl;
-    t.bindBuffer(t.ARRAY_BUFFER, this.quadBuffer), t.enableVertexAttribArray(e.position), t.vertexAttribPointer(e.position, 2, t.FLOAT, !1, 0, 0);
+    const n = this.gl;
+    n.bindBuffer(n.ARRAY_BUFFER, this.quadBuffer), n.enableVertexAttribArray(e.position), n.vertexAttribPointer(e.position, 2, n.FLOAT, !1, 0, 0);
   }
-  setSimulationUniforms(e, t, n) {
+  setSimulationUniforms(e, n, t) {
     const i = this.gl, a = this.simulationProgram.program, l = Math.min(e.length, J), c = this.wakeAUniforms, s = this.wakeBUniforms, d = this.wakeShapeUniforms, E = Math.max(0, e.length - J);
     c.fill(0), s.fill(0), d.fill(0);
     for (let _ = 0; _ < l; _ += 1) {
       const m = e[E + _], v = _ * 4;
       c[v] = m.ax, c[v + 1] = m.ay, c[v + 2] = m.radius, c[v + 3] = m.wakeStrength, s[v] = m.bx, s[v + 1] = m.by, s[v + 2] = m.wakeLength, s[v + 3] = m.velocity, d[v] = m.troughStrength, d[v + 1] = m.ridgeStrength, d[v + 2] = m.ridgeOffset;
     }
-    i.uniform1i(p(i, a, "u_state"), 0), i.uniform2f(p(i, a, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), i.uniform1f(p(i, a, "u_delta"), n), i.uniform1f(p(i, a, "u_damping"), t.damping), i.uniform1f(p(i, a, "u_stiffness"), t.waveSpeed), i.uniform1f(p(i, a, "u_aspect"), this.cssWidth / this.cssHeight), i.uniform1i(p(i, a, "u_wakeCount"), l), i.uniform4fv(p(i, a, "u_wakeA[0]"), c), i.uniform4fv(p(i, a, "u_wakeB[0]"), s), i.uniform4fv(p(i, a, "u_wakeShape[0]"), d);
+    i.uniform1i(p(i, a, "u_state"), 0), i.uniform2f(p(i, a, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), i.uniform1f(p(i, a, "u_delta"), t), i.uniform1f(p(i, a, "u_damping"), n.damping), i.uniform1f(p(i, a, "u_stiffness"), n.waveSpeed), i.uniform1f(p(i, a, "u_aspect"), this.cssWidth / this.cssHeight), i.uniform1i(p(i, a, "u_wakeCount"), l), i.uniform4fv(p(i, a, "u_wakeA[0]"), c), i.uniform4fv(p(i, a, "u_wakeB[0]"), s), i.uniform4fv(p(i, a, "u_wakeShape[0]"), d);
   }
-  setMaterialUniforms(e, t) {
-    const n = this.gl, i = this.materialProgram.program, a = e.mode !== "dom";
-    n.uniform1i(p(n, i, "u_state"), 0), n.uniform1i(p(n, i, "u_background"), 1), n.uniform1i(p(n, i, "u_causticMap"), 2), n.uniform2f(p(n, i, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), n.uniform1f(p(n, i, "u_domMode"), e.mode === "dom" ? 1 : 0), n.uniform1f(
-      p(n, i, "u_textureEnabled"),
+  setMaterialUniforms(e, n) {
+    const t = this.gl, i = this.materialProgram.program, a = e.mode !== "dom";
+    t.uniform1i(p(t, i, "u_state"), 0), t.uniform1i(p(t, i, "u_background"), 1), t.uniform1i(p(t, i, "u_causticMap"), 2), t.uniform2f(p(t, i, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), t.uniform1f(p(t, i, "u_domMode"), e.mode === "dom" ? 1 : 0), t.uniform1f(
+      p(t, i, "u_textureEnabled"),
       a && this.textureReady ? 1 : 0
-    ), n.uniform1f(p(n, i, "u_normalScale"), e.normalScale), n.uniform1f(p(n, i, "u_refractionStrength"), e.refractionStrength), n.uniform1f(p(n, i, "u_specularIntensity"), e.specularIntensity), n.uniform1f(p(n, i, "u_crestIntensity"), e.crestIntensity), n.uniform1f(p(n, i, "u_causticIntensity"), e.causticIntensity), n.uniform1f(p(n, i, "u_time"), t % 1e3);
+    ), t.uniform1f(p(t, i, "u_normalScale"), e.normalScale), t.uniform1f(p(t, i, "u_refractionStrength"), e.refractionStrength), t.uniform1f(p(t, i, "u_specularIntensity"), e.specularIntensity), t.uniform1f(p(t, i, "u_crestIntensity"), e.crestIntensity), t.uniform1f(p(t, i, "u_causticIntensity"), e.causticIntensity), t.uniform1f(p(t, i, "u_time"), n % 1e3);
   }
 }
 function nt() {
   const r = new Uint8Array(C * C * 4);
   for (let e = 0; e < C; e += 1)
-    for (let t = 0; t < C; t += 1) {
-      const n = (t + 0.5) / C, i = (e + 0.5) / C, a = Math.round(ce(n, i, 0) * 255), l = Math.round(ce(n, i, 11) * 255), c = Math.round(ce(n, i, 23) * 255), s = Math.round(ce(n, i, 37) * 255), d = (e * C + t) * 4;
+    for (let n = 0; n < C; n += 1) {
+      const t = (n + 0.5) / C, i = (e + 0.5) / C, a = Math.round(ce(t, i, 0) * 255), l = Math.round(ce(t, i, 11) * 255), c = Math.round(ce(t, i, 23) * 255), s = Math.round(ce(t, i, 37) * 255), d = (e * C + n) * 4;
       r[d] = a, r[d + 1] = l, r[d + 2] = c, r[d + 3] = s;
     }
   return r;
 }
-function ce(r, e, t) {
-  const n = Math.sin(se * (e * 2 + t * 0.013)) * 0.12 + Math.sin(se * (r * 3 + e + t * 0.021)) * 0.06, i = Math.cos(se * (r * 2 + t * 0.017)) * 0.12 + Math.sin(se * (e * 3 - r + t * 0.019)) * 0.06, a = r * oe + n, l = e * oe + i, c = Math.floor(a), s = Math.floor(l);
+function ce(r, e, n) {
+  const t = Math.sin(se * (e * 2 + n * 0.013)) * 0.12 + Math.sin(se * (r * 3 + e + n * 0.021)) * 0.06, i = Math.cos(se * (r * 2 + n * 0.017)) * 0.12 + Math.sin(se * (e * 3 - r + n * 0.019)) * 0.06, a = r * oe + t, l = e * oe + i, c = Math.floor(a), s = Math.floor(l);
   let d = Number.POSITIVE_INFINITY, E = Number.POSITIVE_INFINITY, _ = 0, m = 0;
   for (let P = -1; P <= 1; P += 1)
     for (let U = -1; U <= 1; U += 1) {
-      const k = c + U, B = s + P, M = Ie(k, oe), I = Ie(B, oe), z = k + 0.16 + me(M, I, t) * 0.68, N = B + 0.16 + me(M, I, t + 1) * 0.68, D = Math.hypot(a - z, l - N);
+      const k = c + U, B = s + P, M = Ie(k, oe), I = Ie(B, oe), z = k + 0.16 + me(M, I, n) * 0.68, N = B + 0.16 + me(M, I, n + 1) * 0.68, D = Math.hypot(a - z, l - N);
       D < d ? (E = d, d = D, _ = M, m = I) : D < E && (E = D);
     }
-  const v = E - d, A = 1 - Fe(0.025, 0.13, v), w = 1 - Fe(0.08, 0.34, v), W = 0.74 + me(_, m, t + 2) * 0.26, H = A * A * 0.58 + w * 0.34;
+  const v = E - d, A = 1 - Fe(0.025, 0.13, v), w = 1 - Fe(0.08, 0.34, v), W = 0.74 + me(_, m, n + 2) * 0.26, H = A * A * 0.58 + w * 0.34;
   return We(Math.pow(H * W, 1.12));
 }
-function me(r, e, t) {
-  const n = Math.sin(r * 127.1 + e * 311.7 + t * 74.7) * 43758.5453123;
-  return n - Math.floor(n);
+function me(r, e, n) {
+  const t = Math.sin(r * 127.1 + e * 311.7 + n * 74.7) * 43758.5453123;
+  return t - Math.floor(t);
 }
 function Ie(r, e) {
   return (r % e + e) % e;
 }
-function Fe(r, e, t) {
-  const n = We((t - r) / (e - r));
-  return n * n * (3 - n * 2);
+function Fe(r, e, n) {
+  const t = We((n - r) / (e - r));
+  return t * t * (3 - t * 2);
 }
 function We(r) {
   return Math.min(1, Math.max(0, r));
@@ -537,33 +538,33 @@ function it(r) {
     stencil: !1,
     premultipliedAlpha: !1,
     preserveDrawingBuffer: !1
-  }, t = r.getContext("webgl2", e);
-  if (t) {
-    if (!t.getExtension("EXT_color_buffer_float"))
+  }, n = r.getContext("webgl2", e);
+  if (n) {
+    if (!n.getExtension("EXT_color_buffer_float"))
       throw new Error("WaterDistortion requires float render targets.");
     return {
-      gl: t,
+      gl: n,
       isWebGL2: !0,
-      canLinearFloat: !!t.getExtension("OES_texture_float_linear")
+      canLinearFloat: !!n.getExtension("OES_texture_float_linear")
     };
   }
-  const n = r.getContext("webgl", e) || r.getContext(
+  const t = r.getContext("webgl", e) || r.getContext(
     "experimental-webgl",
     e
   );
-  if (!n)
+  if (!t)
     throw new Error("WaterDistortion requires WebGL.");
-  if (!n.getExtension("OES_texture_float") || !n.getExtension("WEBGL_color_buffer_float") && !n.getExtension("EXT_color_buffer_float"))
+  if (!t.getExtension("OES_texture_float") || !t.getExtension("WEBGL_color_buffer_float") && !t.getExtension("EXT_color_buffer_float"))
     throw new Error("WaterDistortion requires float texture support.");
   return {
-    gl: n,
+    gl: t,
     isWebGL2: !1,
-    canLinearFloat: !!n.getExtension("OES_texture_float_linear")
+    canLinearFloat: !!t.getExtension("OES_texture_float_linear")
   };
 }
-function Le(r, e, t) {
-  const n = ke(r, r.VERTEX_SHADER, e), i = ke(r, r.FRAGMENT_SHADER, t), a = q(r.createProgram(), "WebGL program");
-  if (r.attachShader(a, n), r.attachShader(a, i), r.linkProgram(a), r.deleteShader(n), r.deleteShader(i), !r.getProgramParameter(a, r.LINK_STATUS)) {
+function Le(r, e, n) {
+  const t = ke(r, r.VERTEX_SHADER, e), i = ke(r, r.FRAGMENT_SHADER, n), a = q(r.createProgram(), "WebGL program");
+  if (r.attachShader(a, t), r.attachShader(a, i), r.linkProgram(a), r.deleteShader(t), r.deleteShader(i), !r.getProgramParameter(a, r.LINK_STATUS)) {
     const c = r.getProgramInfoLog(a) || "Unknown shader link error.";
     throw r.deleteProgram(a), new Error(c);
   }
@@ -572,19 +573,19 @@ function Le(r, e, t) {
     throw new Error("WaterDistortion could not bind its quad attribute.");
   return { program: a, position: l };
 }
-function ke(r, e, t) {
-  const n = q(r.createShader(e), "WebGL shader");
-  if (r.shaderSource(n, t), r.compileShader(n), !r.getShaderParameter(n, r.COMPILE_STATUS)) {
-    const i = r.getShaderInfoLog(n) || "Unknown shader compile error.";
-    throw r.deleteShader(n), new Error(i);
+function ke(r, e, n) {
+  const t = q(r.createShader(e), "WebGL shader");
+  if (r.shaderSource(t, n), r.compileShader(t), !r.getShaderParameter(t, r.COMPILE_STATUS)) {
+    const i = r.getShaderInfoLog(t) || "Unknown shader compile error.";
+    throw r.deleteShader(t), new Error(i);
   }
-  return n;
+  return t;
 }
-function p(r, e, t) {
-  const n = r.getUniformLocation(e, t);
-  if (!n)
-    throw new Error(`WaterDistortion could not bind uniform ${t}.`);
-  return n;
+function p(r, e, n) {
+  const t = r.getUniformLocation(e, n);
+  if (!t)
+    throw new Error(`WaterDistortion could not bind uniform ${n}.`);
+  return t;
 }
 function q(r, e) {
   if (!r)
@@ -594,18 +595,18 @@ function q(r, e) {
 function at(r) {
   return typeof HTMLCanvasElement < "u" && r instanceof HTMLCanvasElement || typeof HTMLVideoElement < "u" && r instanceof HTMLVideoElement || typeof OffscreenCanvas < "u" && r instanceof OffscreenCanvas;
 }
-function ot(r, e, t, n = Je) {
-  const i = Math.max(0, Math.floor(e)), a = Math.max(0, Math.floor(t));
+function ot(r, e, n, t = Je) {
+  const i = Math.max(0, Math.floor(e)), a = Math.max(0, Math.floor(n));
   if (i === 0 || a === 0)
     return !1;
   const l = (c, s) => r[(s * i + c) * 4] ?? 0;
   for (let c = 0; c < a; c += 1)
     for (let s = 0; s < i; s += 1) {
       const d = (c * i + s) * 4, E = r[d] ?? 0, _ = r[d + 1] ?? 0;
-      if (E < -n.trough || Math.abs(_) > n.velocity)
+      if (E < -t.trough || Math.abs(_) > t.velocity)
         return !0;
       const m = s > 0 ? l(s - 1, c) : E, v = s < i - 1 ? l(s + 1, c) : E, A = c > 0 ? l(s, c - 1) : E, w = c < a - 1 ? l(s, c + 1) : E, W = Math.hypot(v - m, w - A), H = Math.abs(m + v + A + w - E * 4);
-      if (W > n.gradient || H > n.curvature)
+      if (W > t.gradient || H > t.curvature)
         return !0;
     }
   return !1;
@@ -665,8 +666,8 @@ function ge(r) {
     )
   };
 }
-function Ue(r, e, t = r.timeStamp) {
-  const n = typeof r.getCoalescedEvents == "function" ? r.getCoalescedEvents() : [], i = n.length > 0 ? n : [r], a = t - r.timeStamp;
+function Ue(r, e, n = r.timeStamp) {
+  const t = typeof r.getCoalescedEvents == "function" ? r.getCoalescedEvents() : [], i = t.length > 0 ? t : [r], a = n - r.timeStamp;
   return i.map((l) => ({
     x: l.clientX - e.left,
     y: l.clientY - e.top,
@@ -692,14 +693,14 @@ class ct {
   }
   addSample(e) {
     this.disturbances.length = 0;
-    const t = this.clampSample(e), n = this.previous;
-    if (!n)
-      return this.previous = t, this.disturbances;
-    t.time <= n.time && (t.time = n.time + 0.01);
-    const i = this.smoothSample(n, t), a = Ze(n, i);
+    const n = this.clampSample(e), t = this.previous;
+    if (!t)
+      return this.previous = n, this.disturbances;
+    n.time <= t.time && (n.time = t.time + 0.01);
+    const i = this.smoothSample(t, n), a = Ze(t, i);
     if (a < 0.35)
       return this.previous = i, this.disturbances;
-    const l = a / Math.max(0.01, i.time - n.time), c = h(1 - this.options.cursorSmoothing, 0.12, 1);
+    const l = a / Math.max(0.01, i.time - t.time), c = h(1 - this.options.cursorSmoothing, 0.12, 1);
     this.smoothedVelocity = O(
       this.smoothedVelocity,
       l,
@@ -713,8 +714,8 @@ class ct {
       const E = d / s, _ = (d + 1) / s;
       this.disturbances.push(
         ve(
-          De(n, i, E),
-          De(n, i, _),
+          De(t, i, E),
+          De(t, i, _),
           this.smoothedVelocity,
           this.options
         )
@@ -729,18 +730,18 @@ class ct {
       time: e.time
     };
   }
-  smoothSample(e, t) {
-    const n = 1 - this.options.cursorSmoothing;
+  smoothSample(e, n) {
+    const t = 1 - this.options.cursorSmoothing;
     return {
-      x: O(e.x, t.x, n),
-      y: O(e.y, t.y, n),
-      time: t.time
+      x: O(e.x, n.x, t),
+      y: O(e.y, n.y, t),
+      time: n.time
     };
   }
 }
-function ve(r, e, t, n) {
-  const i = ge(n), a = h(
-    t * i.velocityScale / i.velocityClamp,
+function ve(r, e, n, t) {
+  const i = ge(t), a = h(
+    n * i.velocityScale / i.velocityClamp,
     0,
     1
   ), l = h(r.y / i.height, 0, 1), c = h(e.y / i.height, 0, 1), s = i.wakeLength * O(0.55, 1.35, a);
@@ -758,16 +759,16 @@ function ve(r, e, t, n) {
     velocity: a
   };
 }
-function De(r, e, t) {
+function De(r, e, n) {
   return {
-    x: O(r.x, e.x, t),
-    y: O(r.y, e.y, t),
-    time: O(r.time, e.time, t)
+    x: O(r.x, e.x, n),
+    y: O(r.y, e.y, n),
+    time: O(r.time, e.time, n)
   };
 }
 function ut(r) {
-  const e = h(r, 0.85, 0.998), t = Math.ceil(Math.log(0.012) / Math.log(e));
-  return h(t * (1e3 / 60), 900, 5200);
+  const e = h(r, 0.85, 0.998), n = Math.ceil(Math.log(0.012) / Math.log(e));
+  return h(n * (1e3 / 60), 900, 5200);
 }
 const x = {
   mode: "texture",
@@ -898,48 +899,48 @@ function ft(r) {
     pauseKey: r.pauseKey || x.pauseKey
   };
 }
-function Ce(r, e, t) {
-  const n = h(r.x, 0, 1) * t.width, i = h(r.y, 0, 1) * t.height, a = Math.max(0.5, e.interactionRadius * 0.08), l = e.velocityClamp / e.velocityScale, c = {
+function Ce(r, e, n) {
+  const t = h(r.x, 0, 1) * n.width, i = h(r.y, 0, 1) * n.height, a = Math.max(0.5, e.interactionRadius * 0.08), l = e.velocityClamp / e.velocityScale, c = {
     ...e,
-    width: t.width,
-    height: t.height,
+    width: n.width,
+    height: n.height,
     wakeLength: e.interactionRadius * 1.5
   };
   return [
     ve(
-      { x: n - a, y: i },
-      { x: n + a, y: i },
+      { x: t - a, y: i },
+      { x: t + a, y: i },
       l,
       c
     ),
     ve(
-      { x: n, y: i - a },
-      { x: n, y: i + a },
+      { x: t, y: i - a },
+      { x: t, y: i + a },
       l,
       c
     )
   ];
 }
 function mt(r) {
-  const [e, t] = je(!1);
+  const [e, n] = je(!1);
   return V(() => {
     if (!r || typeof window > "u" || !window.matchMedia) {
-      t(!1);
+      n(!1);
       return;
     }
-    const n = window.matchMedia("(prefers-reduced-motion: reduce)");
-    t(n.matches);
+    const t = window.matchMedia("(prefers-reduced-motion: reduce)");
+    n(t.matches);
     const i = (a) => {
-      t(a.matches);
+      n(a.matches);
     };
-    return n.addEventListener("change", i), () => {
-      n.removeEventListener("change", i);
+    return t.addEventListener("change", i), () => {
+      t.removeEventListener("change", i);
     };
   }, [r]), e;
 }
-const gt = $e(function(e, t) {
+const gt = $e(function(e, n) {
   const {
-    underlay: n,
+    underlay: t,
     children: i,
     foreground: a,
     className: l,
@@ -952,7 +953,7 @@ const gt = $e(function(e, t) {
     s === "respect"
   ), ue = s === "disable" || s === "respect" && Ne, Xe = a ?? i;
   g.current = R, Qe(
-    t,
+    n,
     () => ({
       triggerRipple(S) {
         B.current || M.current || H.current(
@@ -1090,7 +1091,9 @@ const gt = $e(function(e, t) {
     };
     w.current = le;
     try {
-      b = new rt(K), _.current = b, b.setTextureSource(g.current.texture);
+      b = new rt(K, () => {
+        w.current();
+      }), _.current = b, b.setTextureSource(g.current.texture);
     } catch {
       return K.style.display = "none", _.current = null, w.current = () => {
       }, () => {
@@ -1192,7 +1195,7 @@ const gt = $e(function(e, t) {
     isolation: "isolate"
   };
   return /* @__PURE__ */ qe("div", { ref: d, className: l, style: Ge, children: [
-    n ? /* @__PURE__ */ de(
+    t ? /* @__PURE__ */ de(
       "div",
       {
         style: {
@@ -1202,7 +1205,7 @@ const gt = $e(function(e, t) {
           pointerEvents: "none",
           transform: "translateZ(0)"
         },
-        children: n
+        children: t
       }
     ) : null,
     /* @__PURE__ */ de(