@rippleflow/water-distortion 0.1.3 → 0.1.5

package/dist/water-distortion.js

@@ -1,27 +1,27 @@
-var Ye = Object.defineProperty;
-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, n) {
+var Ve = Object.defineProperty;
+var qe = (r, e, n) => e in r ? Ve(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
+var f = (r, e, n) => qe(r, typeof e != "symbol" ? e + "" : e, n);
+import { jsxs as $e, jsx as fe } from "react/jsx-runtime";
+import { forwardRef as Qe, useRef as R, useImperativeHandle as je, useEffect as q, useState as Ze } from "react";
+function d(r, e, n) {
   return Math.min(n, Math.max(e, r));
 }
-function Ze(r, e) {
+function Je(r, e) {
   return Math.hypot(e.x - r.x, e.y - r.y);
 }
 function O(r, e, n) {
   return r + (e - r) * n;
 }
-const J = 24, C = 128, oe = 8, se = Math.PI * 2, fe = {
+const ee = 24, V = 32, C = 128, oe = 8, se = Math.PI * 2, me = {
   causticGain: 0.1,
   screenCompensation: 1.35,
   maxAlpha: 0.9
-}, Je = {
+}, et = {
   gradient: 8e-4,
   curvature: 8e-4,
   trough: 6e-3,
   velocity: 8e-4
-}, Ae = `
+}, Fe = `
 attribute vec2 a_position;
 varying vec2 v_uv;
 
@@ -29,10 +29,10 @@ void main() {
   v_uv = a_position * 0.5 + 0.5;
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
-`, et = `
+`, tt = `
 precision highp float;
 
-#define MAX_WAKE_SEGMENTS ${J}
+#define MAX_WAKE_SEGMENTS ${ee}
 
 varying vec2 v_uv;
 
@@ -122,7 +122,7 @@ void main() {
 
   gl_FragColor = vec4(height, velocity, 0.0, 1.0);
 }
-`, tt = `
+`, rt = `
 precision highp float;
 
 varying vec2 v_uv;
@@ -131,8 +131,8 @@ uniform sampler2D u_state;
 uniform sampler2D u_background;
 uniform sampler2D u_causticMap;
 uniform vec2 u_texel;
+uniform vec2 u_backgroundScale;
 uniform float u_domMode;
-uniform float u_textureEnabled;
 uniform float u_normalScale;
 uniform float u_refractionStrength;
 uniform float u_specularIntensity;
@@ -140,21 +140,9 @@ uniform float u_crestIntensity;
 uniform float u_causticIntensity;
 uniform float u_time;
 
-const float DOM_CAUSTIC_GAIN = ${fe.causticGain.toFixed(2)};
-const float DOM_SCREEN_COMPENSATION = ${fe.screenCompensation.toFixed(2)};
-const float DOM_MAX_ALPHA = ${fe.maxAlpha.toFixed(2)};
-
-vec3 proceduralBackground(vec2 uv) {
-  vec3 deep = vec3(0.055, 0.075, 0.070);
-  vec3 teal = vec3(0.060, 0.320, 0.310);
-  vec3 coral = vec3(0.680, 0.230, 0.190);
-  vec3 gold = vec3(0.850, 0.710, 0.360);
-  float diagonal = smoothstep(0.05, 0.95, uv.x * 0.72 + uv.y * 0.28);
-  vec3 color = mix(deep, teal, diagonal);
-  color = mix(color, coral, smoothstep(0.18, 0.76, uv.x - uv.y * 0.18) * 0.36);
-  color = mix(color, gold, smoothstep(0.58, 1.0, uv.y + uv.x * 0.16) * 0.24);
-  return color;
-}
+const float DOM_CAUSTIC_GAIN = ${me.causticGain.toFixed(2)};
+const float DOM_SCREEN_COMPENSATION = ${me.screenCompensation.toFixed(2)};
+const float DOM_MAX_ALPHA = ${me.maxAlpha.toFixed(2)};
 
 vec4 causticLayer(vec2 uv, vec2 bend, mat2 rotation, float scale, vec2 drift) {
   vec2 p = rotation * (uv * scale + drift * u_time);
@@ -174,15 +162,20 @@ void main() {
   float dy = up - down;
   float signedCurvature = left + right + down + up - height * 4.0;
   vec3 normal = normalize(vec3(-dx * u_normalScale, 1.0, -dy * u_normalScale));
-  vec2 refractedUv = clamp(
-    v_uv + normal.xz * u_refractionStrength * 0.025,
+  vec2 backgroundUv = (v_uv - vec2(0.5)) * u_backgroundScale + vec2(0.5);
+  vec2 refractedUv = (
+    v_uv + normal.xz * u_refractionStrength * 0.025 - vec2(0.5)
+  ) * u_backgroundScale + vec2(0.5);
+  vec2 textureBounds =
+    step(vec2(0.0), backgroundUv) * step(backgroundUv, vec2(1.0));
+  float textureAlpha = textureBounds.x * textureBounds.y;
+  refractedUv = clamp(
+    refractedUv,
     vec2(0.001),
     vec2(0.999)
   );
 
-  vec3 base = u_textureEnabled > 0.5
-    ? texture2D(u_background, refractedUv).rgb
-    : proceduralBackground(refractedUv);
+  vec3 base = texture2D(u_background, refractedUv).rgb;
 
   float gradient = length(vec2(dx, dy)) * u_normalScale;
   float crest = smoothstep(0.012, 0.24, gradient);
@@ -268,10 +261,10 @@ void main() {
   }
 
   vec3 color = base + highlight - vec3(0.015, 0.055, 0.070) * visibleTrough * 0.45;
-  gl_FragColor = vec4(color, 1.0);
+  gl_FragColor = vec4(color, textureAlpha);
 }
 `;
-class rt {
+class nt {
   constructor(e, n = () => {
   }) {
     f(this, "gl");
@@ -293,13 +286,15 @@ class rt {
     f(this, "textureImage");
     f(this, "textureReady", !1);
     f(this, "textureNeedsUpload", !1);
+    f(this, "textureWidth", 0);
+    f(this, "textureHeight", 0);
     f(this, "activityPixels");
-    f(this, "wakeAUniforms", new Float32Array(J * 4));
-    f(this, "wakeBUniforms", new Float32Array(J * 4));
-    f(this, "wakeShapeUniforms", new Float32Array(J * 4));
+    f(this, "wakeAUniforms", new Float32Array(ee * 4));
+    f(this, "wakeBUniforms", new Float32Array(ee * 4));
+    f(this, "wakeShapeUniforms", new Float32Array(ee * 4));
     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(
+    const { gl: t, isWebGL2: i, canLinearFloat: a } = st(e);
+    this.gl = t, this.isWebGL2 = i, this.canLinearFloat = a, this.quadBuffer = $(t.createBuffer(), "WebGL buffer"), this.simulationProgram = Ue(t, Fe, tt), this.materialProgram = Ue(t, Fe, rt), this.backgroundTexture = $(t.createTexture(), "WebGL texture"), this.causticTexture = $(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
@@ -307,13 +302,17 @@ class rt {
   }
   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());
+    const a = Math.min(2, Math.max(1, t || 1)), s = Math.max(1, Math.round(this.cssWidth * a)), u = Math.max(1, Math.round(this.cssHeight * a));
+    (this.canvas.width !== s || this.canvas.height !== u) && (this.canvas.width = s, this.canvas.height = u);
+    const c = Math.max(
+      V,
+      Math.round(i)
+    ), h = this.cssWidth / this.cssHeight;
+    let v = c, x = c;
+    h >= 1 ? (x = Math.round(c / h), x < V && (x = V, v = Math.round(V * h))) : (v = Math.round(c * h), v < V && (v = V, x = Math.round(V / h))), !(v === this.simWidth && x === this.simHeight) && (this.simWidth = v, this.simHeight = x, this.recreateState());
   }
   setTextureSource(e) {
-    if (e === this.textureSource || (this.textureSource = e, this.textureImage = void 0, this.textureReady = !1, this.textureNeedsUpload = !1, !e))
+    if (e === this.textureSource || (this.textureSource = e, this.textureImage = void 0, this.textureReady = !1, this.textureNeedsUpload = !1, this.textureWidth = 0, this.textureHeight = 0, !e))
       return;
     if (typeof e != "string") {
       this.textureImage = e, this.textureNeedsUpload = !0;
@@ -334,7 +333,7 @@ class rt {
   }
   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)));
+    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" && !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)
@@ -354,7 +353,7 @@ class rt {
     } finally {
       e.bindFramebuffer(e.FRAMEBUFFER, null);
     }
-    return ot(
+    return ut(
       this.activityPixels,
       this.simWidth,
       this.simHeight
@@ -375,14 +374,14 @@ class rt {
     (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;
+    var s, u;
     const e = this.gl;
-    (l = this.stateTextures) == null || l.forEach((s) => e.deleteTexture(s)), (c = this.framebuffers) == null || c.forEach((s) => e.deleteFramebuffer(s));
+    (s = this.stateTextures) == null || s.forEach((c) => e.deleteTexture(c)), (u = this.framebuffers) == null || u.forEach((c) => e.deleteFramebuffer(c));
     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, n = q(e.createTexture(), "WebGL texture");
+    const e = this.gl, n = $(e.createTexture(), "WebGL texture");
     if (e.bindTexture(e.TEXTURE_2D, n), e.texParameteri(
       e.TEXTURE_2D,
       e.TEXTURE_MIN_FILTER,
@@ -419,7 +418,7 @@ class rt {
     return n;
   }
   createFramebuffer(e) {
-    const n = this.gl, t = q(n.createFramebuffer(), "WebGL framebuffer");
+    const n = this.gl, t = $(n.createFramebuffer(), "WebGL framebuffer");
     if (n.bindFramebuffer(n.FRAMEBUFFER, t), n.framebufferTexture2D(
       n.FRAMEBUFFER,
       n.COLOR_ATTACHMENT0,
@@ -455,11 +454,11 @@ class rt {
       0,
       e.RGBA,
       e.UNSIGNED_BYTE,
-      nt()
+      ot()
     ), e.generateMipmap(e.TEXTURE_2D);
   }
   uploadTextureIfNeeded(e) {
-    if (e.mode === "dom" || !this.textureImage || !this.textureNeedsUpload && !at(this.textureImage))
+    if (e.mode === "dom" || !this.textureImage || !this.textureNeedsUpload && !ct(this.textureImage))
       return;
     const n = this.gl;
     try {
@@ -470,9 +469,11 @@ class rt {
         n.RGBA,
         n.UNSIGNED_BYTE,
         this.textureImage
-      ), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, 0), this.textureReady = !0, this.textureNeedsUpload = !1;
+      ), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, 0), [this.textureWidth, this.textureHeight] = at(
+        this.textureImage
+      ), this.textureReady = !0, this.textureNeedsUpload = !1;
     } catch {
-      this.textureReady = !1, this.textureNeedsUpload = !1;
+      this.textureReady = !1, this.textureNeedsUpload = !1, this.textureWidth = 0, this.textureHeight = 0;
     }
   }
   prepareQuad(e) {
@@ -480,57 +481,84 @@ class rt {
     n.bindBuffer(n.ARRAY_BUFFER, this.quadBuffer), n.enableVertexAttribArray(e.position), n.vertexAttribPointer(e.position, 2, n.FLOAT, !1, 0, 0);
   }
   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;
+    const i = this.gl, a = this.simulationProgram.program, s = Math.min(e.length, ee), u = this.wakeAUniforms, c = this.wakeBUniforms, h = this.wakeShapeUniforms, v = Math.max(0, e.length - ee);
+    u.fill(0), c.fill(0), h.fill(0);
+    for (let x = 0; x < s; x += 1) {
+      const m = e[v + x], p = x * 4;
+      u[p] = m.ax, u[p + 1] = m.ay, u[p + 2] = m.radius, u[p + 3] = m.wakeStrength, c[p] = m.bx, c[p + 1] = m.by, c[p + 2] = m.wakeLength, c[p + 3] = m.velocity, h[p] = m.troughStrength, h[p + 1] = m.ridgeStrength, h[p + 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"), 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);
+    i.uniform1i(_(i, a, "u_state"), 0), i.uniform2f(_(i, a, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), i.uniform1f(_(i, a, "u_delta"), t), i.uniform1f(_(i, a, "u_damping"), n.damping), i.uniform1f(_(i, a, "u_stiffness"), n.waveSpeed), i.uniform1f(_(i, a, "u_aspect"), this.cssWidth / this.cssHeight), i.uniform1i(_(i, a, "u_wakeCount"), s), i.uniform4fv(_(i, a, "u_wakeA[0]"), u), i.uniform4fv(_(i, a, "u_wakeB[0]"), c), i.uniform4fv(_(i, a, "u_wakeShape[0]"), h);
   }
   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
-    ), 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);
+    const t = this.gl, i = this.materialProgram.program, [a, s] = it(
+      e.textureFit,
+      this.textureWidth,
+      this.textureHeight,
+      this.cssWidth,
+      this.cssHeight
+    );
+    t.uniform1i(_(t, i, "u_state"), 0), t.uniform1i(_(t, i, "u_background"), 1), t.uniform1i(_(t, i, "u_causticMap"), 2), t.uniform2f(_(t, i, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), t.uniform2f(
+      _(t, i, "u_backgroundScale"),
+      a,
+      s
+    ), t.uniform1f(_(t, i, "u_domMode"), e.mode === "dom" ? 1 : 0), t.uniform1f(_(t, i, "u_normalScale"), e.normalScale), t.uniform1f(_(t, i, "u_refractionStrength"), e.refractionStrength), t.uniform1f(_(t, i, "u_specularIntensity"), e.specularIntensity), t.uniform1f(_(t, i, "u_crestIntensity"), e.crestIntensity), t.uniform1f(_(t, i, "u_causticIntensity"), e.causticIntensity), t.uniform1f(_(t, i, "u_time"), n % 1e3);
   }
 }
-function nt() {
+function it(r, e, n, t, i) {
+  if (r === "fill" || !Number.isFinite(e) || !Number.isFinite(n) || !Number.isFinite(t) || !Number.isFinite(i) || e <= 0 || n <= 0 || t <= 0 || i <= 0)
+    return [1, 1];
+  if (r === "none")
+    return [t / e, i / n];
+  const a = e / n, s = t / i;
+  return r === "cover" ? a > s ? [s / a, 1] : [1, a / s] : a > s ? [1, a / s] : [s / a, 1];
+}
+function at(r) {
+  const e = r, n = [
+    [e.naturalWidth, e.naturalHeight],
+    [e.videoWidth, e.videoHeight],
+    [e.displayWidth, e.displayHeight],
+    [e.width, e.height]
+  ];
+  for (const [t, i] of n)
+    if (typeof t == "number" && typeof i == "number" && Number.isFinite(t) && Number.isFinite(i) && t > 0 && i > 0)
+      return [t, i];
+  return [0, 0];
+}
+function ot() {
   const r = new Uint8Array(C * C * 4);
   for (let e = 0; e < C; e += 1)
     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;
+      const t = (n + 0.5) / C, i = (e + 0.5) / C, a = Math.round(ce(t, i, 0) * 255), s = Math.round(ce(t, i, 11) * 255), u = Math.round(ce(t, i, 23) * 255), c = Math.round(ce(t, i, 37) * 255), h = (e * C + n) * 4;
+      r[h] = a, r[h + 1] = s, r[h + 2] = u, r[h + 3] = c;
     }
   return r;
 }
 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;
+  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, s = e * oe + i, u = Math.floor(a), c = Math.floor(s);
+  let h = Number.POSITIVE_INFINITY, v = Number.POSITIVE_INFINITY, x = 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, 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 k = u + U, B = c + P, b = Le(k, oe), I = Le(B, oe), z = k + 0.16 + ge(b, I, n) * 0.68, W = B + 0.16 + ge(b, I, n + 1) * 0.68, D = Math.hypot(a - z, s - W);
+      D < h ? (v = h, h = D, x = b, m = I) : D < v && (v = 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, n + 2) * 0.26, H = A * A * 0.58 + w * 0.34;
-  return We(Math.pow(H * W, 1.12));
+  const p = v - h, A = 1 - ke(0.025, 0.13, p), w = 1 - ke(0.08, 0.34, p), N = 0.74 + ge(x, m, n + 2) * 0.26, H = A * A * 0.58 + w * 0.34;
+  return Xe(Math.pow(H * N, 1.12));
 }
-function me(r, e, n) {
+function ge(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) {
+function Le(r, e) {
   return (r % e + e) % e;
 }
-function Fe(r, e, n) {
-  const t = We((n - r) / (e - r));
+function ke(r, e, n) {
+  const t = Xe((n - r) / (e - r));
   return t * t * (3 - t * 2);
 }
-function We(r) {
+function Xe(r) {
   return Math.min(1, Math.max(0, r));
 }
-function it(r) {
+function st(r) {
   const e = {
     alpha: !0,
     antialias: !1,
@@ -562,51 +590,51 @@ function it(r) {
     canLinearFloat: !!t.getExtension("OES_texture_float_linear")
   };
 }
-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");
+function Ue(r, e, n) {
+  const t = De(r, r.VERTEX_SHADER, e), i = De(r, r.FRAGMENT_SHADER, n), a = $(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);
+    const u = r.getProgramInfoLog(a) || "Unknown shader link error.";
+    throw r.deleteProgram(a), new Error(u);
   }
-  const l = r.getAttribLocation(a, "a_position");
-  if (l < 0)
+  const s = r.getAttribLocation(a, "a_position");
+  if (s < 0)
     throw new Error("WaterDistortion could not bind its quad attribute.");
-  return { program: a, position: l };
+  return { program: a, position: s };
 }
-function ke(r, e, n) {
-  const t = q(r.createShader(e), "WebGL shader");
+function De(r, e, n) {
+  const t = $(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 t;
 }
-function p(r, e, n) {
+function _(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) {
+function $(r, e) {
   if (!r)
     throw new Error(`WaterDistortion could not create ${e}.`);
   return r;
 }
-function at(r) {
+function ct(r) {
   return typeof HTMLCanvasElement < "u" && r instanceof HTMLCanvasElement || typeof HTMLVideoElement < "u" && r instanceof HTMLVideoElement || typeof OffscreenCanvas < "u" && r instanceof OffscreenCanvas;
 }
-function ot(r, e, n, t = Je) {
+function ut(r, e, n, t = et) {
   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 < -t.trough || Math.abs(_) > t.velocity)
+  const s = (u, c) => r[(c * i + u) * 4] ?? 0;
+  for (let u = 0; u < a; u += 1)
+    for (let c = 0; c < i; c += 1) {
+      const h = (u * i + c) * 4, v = r[h] ?? 0, x = r[h + 1] ?? 0;
+      if (v < -t.trough || Math.abs(x) > 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 > t.gradient || H > t.curvature)
+      const m = c > 0 ? s(c - 1, u) : v, p = c < i - 1 ? s(c + 1, u) : v, A = u > 0 ? s(c, u - 1) : v, w = u < a - 1 ? s(c, u + 1) : v, N = Math.hypot(p - m, w - A), H = Math.abs(m + p + A + w - v * 4);
+      if (N > t.gradient || H > t.curvature)
         return !0;
     }
   return !1;
@@ -624,8 +652,8 @@ const L = {
   velocityClamp: 1.35,
   cursorSmoothing: 0.2,
   segmentSpacing: 18
-}, st = 24;
-function ge(r) {
+}, lt = 24;
+function ve(r) {
   return {
     width: Math.max(1, r.width ?? L.width),
     height: Math.max(1, r.height ?? L.height),
@@ -655,7 +683,7 @@ function ge(r) {
       0.05,
       r.velocityClamp ?? L.velocityClamp
     ),
-    cursorSmoothing: h(
+    cursorSmoothing: d(
       r.cursorSmoothing ?? L.cursorSmoothing,
       0,
       0.9
@@ -666,24 +694,24 @@ function ge(r) {
     )
   };
 }
-function Ue(r, e, n = r.timeStamp) {
+function Pe(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,
-    time: l.timeStamp + a
+  return i.map((s) => ({
+    x: s.clientX - e.left,
+    y: s.clientY - e.top,
+    time: s.timeStamp + a
   }));
 }
-class ct {
+class ht {
   constructor(e = {}) {
     f(this, "options");
     f(this, "previous");
     f(this, "smoothedVelocity", 0);
     f(this, "disturbances", []);
-    this.options = ge(e);
+    this.options = ve(e);
   }
   configure(e) {
-    this.options = ge({
+    this.options = ve({
       ...this.options,
       ...e
     });
@@ -697,25 +725,25 @@ class ct {
     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);
+    const i = this.smoothSample(t, n), a = Je(t, i);
     if (a < 0.35)
       return this.previous = i, this.disturbances;
-    const l = a / Math.max(0.01, i.time - t.time), c = h(1 - this.options.cursorSmoothing, 0.12, 1);
+    const s = a / Math.max(0.01, i.time - t.time), u = d(1 - this.options.cursorSmoothing, 0.12, 1);
     this.smoothedVelocity = O(
       this.smoothedVelocity,
-      l,
-      c
+      s,
+      u
     ), this.previous = i;
-    const s = Math.min(
-      st,
+    const c = Math.min(
+      lt,
       Math.max(1, Math.ceil(a / this.options.segmentSpacing))
     );
-    for (let d = 0; d < s; d += 1) {
-      const E = d / s, _ = (d + 1) / s;
+    for (let h = 0; h < c; h += 1) {
+      const v = h / c, x = (h + 1) / c;
       this.disturbances.push(
-        ve(
-          De(t, i, E),
-          De(t, i, _),
+        xe(
+          Be(t, i, v),
+          Be(t, i, x),
           this.smoothedVelocity,
           this.options
         )
@@ -725,8 +753,8 @@ class ct {
   }
   clampSample(e) {
     return {
-      x: h(e.x, 0, this.options.width),
-      y: h(e.y, 0, this.options.height),
+      x: d(e.x, 0, this.options.width),
+      y: d(e.y, 0, this.options.height),
       time: e.time
     };
   }
@@ -739,39 +767,40 @@ class ct {
     };
   }
 }
-function ve(r, e, n, t) {
-  const i = ge(t), a = h(
+function xe(r, e, n, t) {
+  const i = ve(t), a = d(
     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);
+  ), s = d(r.y / i.height, 0, 1), u = d(e.y / i.height, 0, 1), c = i.wakeLength * O(0.55, 1.35, a);
   return {
-    ax: h(r.x / i.width, 0, 1),
-    ay: 1 - l,
-    bx: h(e.x / i.width, 0, 1),
-    by: 1 - c,
+    ax: d(r.x / i.width, 0, 1),
+    ay: 1 - s,
+    bx: d(e.x / i.width, 0, 1),
+    by: 1 - u,
     radius: i.interactionRadius / i.height,
     wakeStrength: i.wakeStrength * O(0.18, 1, a),
     troughStrength: i.troughStrength,
     ridgeStrength: i.ridgeStrength,
     ridgeOffset: i.ridgeOffset / i.height,
-    wakeLength: s / i.height,
+    wakeLength: c / i.height,
     velocity: a
   };
 }
-function De(r, e, n) {
+function Be(r, e, n) {
   return {
     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), n = Math.ceil(Math.log(0.012) / Math.log(e));
-  return h(n * (1e3 / 60), 900, 5200);
+function dt(r) {
+  const e = d(r, 0.85, 0.998), n = Math.ceil(Math.log(0.012) / Math.log(e));
+  return d(n * (1e3 / 60), 900, 5200);
 }
-const x = {
+const E = {
   mode: "texture",
+  textureFit: "fill",
   damping: 0.98,
   waveSpeed: 0.4,
   normalScale: 20,
@@ -794,136 +823,137 @@ const x = {
   interactionMode: "move",
   runInBackground: !1,
   pauseKey: void 0
-}, G = 1e3 / 60, lt = 4, Pe = 360, Be = 24, ht = 200;
-function dt(r) {
+}, G = 1e3 / 60, ft = 4, Ce = 360, Ne = 24, mt = 200;
+function gt(r) {
   return r instanceof Element && r.closest(
     "a, button, input, select, textarea, [contenteditable]:not([contenteditable=false])"
   ) !== null;
 }
-function ft(r) {
+function vt(r) {
   const e = r.strength === void 0 ? void 0 : r.strength / 48;
   return {
-    mode: r.mode ?? x.mode,
+    mode: r.mode ?? E.mode,
     texture: r.texture,
-    damping: h(
-      r.damping ?? r.dissipation ?? x.damping,
+    textureFit: r.textureFit ?? E.textureFit,
+    damping: d(
+      r.damping ?? r.dissipation ?? E.damping,
       0.85,
       0.998
     ),
-    waveSpeed: h(r.waveSpeed ?? x.waveSpeed, 0.05, 1),
-    normalScale: h(
-      r.normalScale ?? x.normalScale,
+    waveSpeed: d(r.waveSpeed ?? E.waveSpeed, 0.05, 1),
+    normalScale: d(
+      r.normalScale ?? E.normalScale,
       1,
       80
     ),
-    refractionStrength: h(
-      r.refractionStrength ?? x.refractionStrength,
+    refractionStrength: d(
+      r.refractionStrength ?? E.refractionStrength,
       0,
       2.5
     ),
-    specularIntensity: h(
-      r.specularIntensity ?? x.specularIntensity,
+    specularIntensity: d(
+      r.specularIntensity ?? E.specularIntensity,
       0,
       3
     ),
-    crestIntensity: h(
-      r.crestIntensity ?? x.crestIntensity,
+    crestIntensity: d(
+      r.crestIntensity ?? E.crestIntensity,
       0,
       3
     ),
-    causticIntensity: h(
-      r.causticIntensity ?? x.causticIntensity,
+    causticIntensity: d(
+      r.causticIntensity ?? E.causticIntensity,
       0,
       3
     ),
-    simulationResolution: h(
+    simulationResolution: d(
       Math.round(
-        r.simulationResolution ?? x.simulationResolution
+        r.simulationResolution ?? E.simulationResolution
       ),
       64,
       384
     ),
-    wakeStrength: h(
-      r.wakeStrength ?? r.rippleStrength ?? e ?? x.wakeStrength,
+    wakeStrength: d(
+      r.wakeStrength ?? r.rippleStrength ?? e ?? E.wakeStrength,
       0,
       3
     ),
-    interactionRadius: h(
-      r.interactionRadius ?? x.interactionRadius,
+    interactionRadius: d(
+      r.interactionRadius ?? E.interactionRadius,
       2,
       80
     ),
-    troughStrength: h(
-      r.troughStrength ?? x.troughStrength,
+    troughStrength: d(
+      r.troughStrength ?? E.troughStrength,
       0,
       3
     ),
-    ridgeStrength: h(
-      r.ridgeStrength ?? x.ridgeStrength,
+    ridgeStrength: d(
+      r.ridgeStrength ?? E.ridgeStrength,
       0,
       3
     ),
-    ridgeOffset: h(
-      r.ridgeOffset ?? x.ridgeOffset,
+    ridgeOffset: d(
+      r.ridgeOffset ?? E.ridgeOffset,
       0,
       80
     ),
-    wakeLength: h(
-      r.wakeLength ?? x.wakeLength,
+    wakeLength: d(
+      r.wakeLength ?? E.wakeLength,
       1,
       240
     ),
-    velocityScale: h(
-      r.velocityScale ?? x.velocityScale,
+    velocityScale: d(
+      r.velocityScale ?? E.velocityScale,
       0.01,
       4
     ),
-    velocityClamp: h(
-      r.velocityClamp ?? x.velocityClamp,
+    velocityClamp: d(
+      r.velocityClamp ?? E.velocityClamp,
       0.05,
       8
     ),
-    cursorSmoothing: h(
-      r.cursorSmoothing ?? x.cursorSmoothing,
+    cursorSmoothing: d(
+      r.cursorSmoothing ?? E.cursorSmoothing,
       0,
       0.9
     ),
-    segmentSpacing: h(
-      r.segmentSpacing ?? x.segmentSpacing,
+    segmentSpacing: d(
+      r.segmentSpacing ?? E.segmentSpacing,
       1,
       96
     ),
-    idleTimeout: Math.max(120, r.idleTimeout ?? x.idleTimeout),
-    interactionMode: r.interactionMode ?? x.interactionMode,
-    runInBackground: r.runInBackground ?? x.runInBackground,
-    pauseKey: r.pauseKey || x.pauseKey
+    idleTimeout: Math.max(120, r.idleTimeout ?? E.idleTimeout),
+    interactionMode: r.interactionMode ?? E.interactionMode,
+    runInBackground: r.runInBackground ?? E.runInBackground,
+    pauseKey: r.pauseKey || E.pauseKey
   };
 }
-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 = {
+function We(r, e, n) {
+  const t = d(r.x, 0, 1) * n.width, i = d(r.y, 0, 1) * n.height, a = Math.max(0.5, e.interactionRadius * 0.08), s = e.velocityClamp / e.velocityScale, u = {
     ...e,
     width: n.width,
     height: n.height,
     wakeLength: e.interactionRadius * 1.5
   };
   return [
-    ve(
+    xe(
       { x: t - a, y: i },
       { x: t + a, y: i },
-      l,
-      c
+      s,
+      u
     ),
-    ve(
+    xe(
       { x: t, y: i - a },
       { x: t, y: i + a },
-      l,
-      c
+      s,
+      u
     )
   ];
 }
-function mt(r) {
-  const [e, n] = je(!1);
-  return V(() => {
+function xt(r) {
+  const [e, n] = Ze(!1);
+  return q(() => {
     if (!r || typeof window > "u" || !window.matchMedia) {
       n(!1);
       return;
@@ -938,71 +968,72 @@ function mt(r) {
     };
   }, [r]), e;
 }
-const gt = $e(function(e, n) {
+const pt = Qe(function(e, n) {
   const {
     underlay: t,
     children: i,
     foreground: a,
-    className: l,
-    style: c,
-    reducedMotion: s = "respect"
-  } = e, d = y(null), E = y(null), _ = y(null), m = y(new ct()), v = y(null), A = y(null), w = y(() => {
-  }), W = y(() => {
-  }), H = y(() => {
-  }), P = y([]), U = y(!0), k = y(!0), B = y(!1), M = y(!1), I = y(null), z = y(0), N = y(0), D = y(0), R = ft(e), g = y(R), $ = y({ width: 1, height: 1 }), Ne = mt(
-    s === "respect"
-  ), ue = s === "disable" || s === "respect" && Ne, Xe = a ?? i;
-  g.current = R, Qe(
+    className: s,
+    style: u,
+    reducedMotion: c = "respect"
+  } = e, h = R(null), v = R(null), x = R(null), m = R(new ht()), p = R(null), A = R(null), w = R(() => {
+  }), N = R(() => {
+  }), H = R(() => {
+  }), P = R([]), U = R(!0), k = R(!0), B = R(!1), b = R(!1), I = R(null), z = R(0), W = R(0), D = R(0), T = vt(e), g = R(T), Q = R({ width: 1, height: 1 }), Ge = xt(
+    c === "respect"
+  ), ue = c === "disable" || c === "respect" && Ge, Oe = a ?? i;
+  g.current = T, je(
     n,
     () => ({
       triggerRipple(S) {
-        B.current || M.current || H.current(
-          Ce(
+        B.current || b.current || H.current(
+          We(
             S,
             g.current,
-            $.current
+            Q.current
           )
         );
       }
     }),
     []
-  ), V(() => {
+  ), q(() => {
     var S;
-    B.current = ue, ue && (m.current.reset(), I.current = null, P.current = [], z.current = 0, N.current = 0, D.current = 0, (S = _.current) == null || S.clear()), w.current();
-  }, [ue]), V(() => {
-    const S = _.current;
+    B.current = ue, ue && (m.current.reset(), I.current = null, P.current = [], z.current = 0, W.current = 0, D.current = 0, (S = x.current) == null || S.clear()), w.current();
+  }, [ue]), q(() => {
+    const S = x.current;
     if (!S)
       return;
-    const { width: K, height: b } = $.current;
+    const { width: K, height: M } = Q.current;
     S.resize(
       K,
-      b,
+      M,
       window.devicePixelRatio,
-      R.simulationResolution
-    ), S.setTextureSource(R.texture), w.current();
+      T.simulationResolution
+    ), S.setTextureSource(T.texture), w.current();
   }, [
-    R.mode,
-    R.texture,
-    R.damping,
-    R.waveSpeed,
-    R.normalScale,
-    R.refractionStrength,
-    R.specularIntensity,
-    R.crestIntensity,
-    R.causticIntensity,
-    R.simulationResolution
-  ]), V(() => {
-    const S = d.current, K = E.current;
+    T.mode,
+    T.texture,
+    T.textureFit,
+    T.damping,
+    T.waveSpeed,
+    T.normalScale,
+    T.refractionStrength,
+    T.specularIntensity,
+    T.crestIntensity,
+    T.causticIntensity,
+    T.simulationResolution
+  ]), q(() => {
+    const S = h.current, K = v.current;
     if (!S || !K)
       return;
     k.current = typeof document.hasFocus == "function" ? document.hasFocus() : !0;
-    let b = null, ie, ee = G, xe = !1, te;
+    let M = null, ae, te = G, pe = !1, re;
     const Y = () => {
-      v.current !== null && (window.cancelAnimationFrame(v.current), v.current = null), A.current !== null && (window.clearTimeout(A.current), A.current = null);
-    }, Oe = (o, u) => {
+      p.current !== null && (window.cancelAnimationFrame(p.current), p.current = null), A.current !== null && (window.clearTimeout(A.current), A.current = null);
+    }, ze = (o, l) => {
       m.current.configure({
         width: o,
-        height: u,
+        height: l,
         interactionRadius: g.current.interactionRadius,
         wakeStrength: g.current.wakeStrength,
         troughStrength: g.current.troughStrength,
@@ -1014,56 +1045,56 @@ const gt = $e(function(e, n) {
         cursorSmoothing: g.current.cursorSmoothing,
         segmentSpacing: g.current.segmentSpacing
       });
-    }, He = (o, u) => {
-      const F = Math.max(1, o), T = Math.max(1, u);
-      $.current = { width: F, height: T }, Oe(F, T), b == null || b.resize(
+    }, Ke = (o, l) => {
+      const F = Math.max(1, o), y = Math.max(1, l);
+      Q.current = { width: F, height: y }, ze(F, y), M == null || M.resize(
         F,
-        T,
+        y,
         window.devicePixelRatio,
         g.current.simulationResolution
       );
-    }, pe = () => {
-      b == null || b.render(g.current, performance.now() * 1e-3);
+    }, Ee = () => {
+      M == null || M.render(g.current, performance.now() * 1e-3);
     }, X = () => {
-      ie = void 0, ee = G;
-    }, re = () => {
-      Y(), m.current.reset(), I.current = null, X(), te === void 0 && (te = performance.now());
-    }, Q = () => {
+      ae = void 0, te = G;
+    }, ne = () => {
+      Y(), m.current.reset(), I.current = null, X(), re === void 0 && (re = performance.now());
+    }, j = () => {
       const o = g.current;
-      let u = !1;
-      if (!(!B.current && !M.current && U.current && (o.runInBackground || !document.hidden && k.current))) {
+      let l = !1;
+      if (!(!B.current && !b.current && U.current && (o.runInBackground || !document.hidden && k.current))) {
         X();
         return;
       }
-      if (te !== void 0) {
-        const T = performance.now() - te;
-        z.current += T, N.current += T, D.current += T, te = void 0, u = !0;
+      if (re !== void 0) {
+        const y = performance.now() - re;
+        z.current += y, W.current += y, D.current += y, re = void 0, l = !0;
       }
-      (!o.runInBackground || u) && X(), pe(), w.current();
-    }, Ee = (o) => {
-      v.current = null;
-      const u = g.current;
-      if (!b || M.current || !U.current || !u.runInBackground && (document.hidden || !k.current)) {
+      (!o.runInBackground || l) && X(), Ee(), w.current();
+    }, _e = (o) => {
+      p.current = null;
+      const l = g.current;
+      if (!M || b.current || !U.current || !l.runInBackground && (document.hidden || !k.current)) {
         X();
         return;
       }
       if (B.current) {
-        P.current = [], b.render(u, o * 1e-3), X();
+        P.current = [], M.render(l, o * 1e-3), X();
         return;
       }
-      const F = u.runInBackground ? Pe : lt, T = ie === void 0 ? G : h(
-        o - ie,
+      const F = l.runInBackground ? Ce : ft, y = ae === void 0 ? G : d(
+        o - ae,
         0,
-        u.runInBackground ? G * Pe : 64
+        l.runInBackground ? G * Ce : 64
       );
-      ie = o, ee = Math.min(
-        ee + T,
+      ae = o, te = Math.min(
+        te + y,
         G * F
       );
-      let Z = P.current.splice(0), be = 0;
-      for (; ee >= G && be < F; )
-        b.step(Z, u, 1), Z = [], ee -= G, be += 1;
-      if (b.render(u, o * 1e-3), P.current.length > 0) {
+      let J = P.current.splice(0), Ie = 0;
+      for (; te >= G && Ie < F; )
+        M.step(J, l, 1), J = [], te -= G, Ie += 1;
+      if (M.render(l, o * 1e-3), P.current.length > 0) {
         w.current();
         return;
       }
@@ -1071,8 +1102,8 @@ const gt = $e(function(e, n) {
         w.current();
         return;
       }
-      if (xe) {
-        o < N.current ? w.current() : X();
+      if (pe) {
+        o < W.current ? w.current() : X();
         return;
       }
       if (o < D.current) {
@@ -1080,122 +1111,122 @@ const gt = $e(function(e, n) {
         return;
       }
       try {
-        b.hasVisibleActivity() ? (D.current = o + ht, w.current()) : X();
+        M.hasVisibleActivity() ? (D.current = o + mt, w.current()) : X();
       } catch {
-        xe = !0, o < N.current ? w.current() : X();
+        pe = !0, o < W.current ? w.current() : X();
       }
     }, le = () => {
-      M.current || v.current !== null || A.current !== null || (g.current.runInBackground && document.hidden ? A.current = window.setTimeout(() => {
-        A.current = null, Ee(performance.now());
-      }, G) : v.current = window.requestAnimationFrame(Ee));
+      b.current || p.current !== null || A.current !== null || (g.current.runInBackground && document.hidden ? A.current = window.setTimeout(() => {
+        A.current = null, _e(performance.now());
+      }, G) : p.current = window.requestAnimationFrame(_e));
     };
     w.current = le;
     try {
-      b = new rt(K, () => {
+      M = new nt(K, () => {
         w.current();
-      }), _.current = b, b.setTextureSource(g.current.texture);
+      }), x.current = M, M.setTextureSource(g.current.texture);
     } catch {
-      return K.style.display = "none", _.current = null, w.current = () => {
+      return K.style.display = "none", x.current = null, w.current = () => {
       }, () => {
       };
     }
-    const ae = () => {
+    const he = () => {
       const o = K.getBoundingClientRect();
-      return He(o.width, o.height), o;
-    }, ze = () => {
-      ae(), pe();
-    }, he = (o) => {
-      if (M.current || o.length === 0)
+      return Ke(o.width, o.height), o;
+    }, Se = () => {
+      he(), Ee();
+    }, de = (o) => {
+      if (b.current || o.length === 0)
         return;
-      const u = P.current;
-      for (const Z of o)
-        u.push(Z);
-      u.length > Be && u.splice(0, u.length - Be);
-      const T = performance.now() + g.current.idleTimeout;
-      z.current = Math.max(z.current, T), N.current = Math.max(
-        N.current,
-        T + ut(g.current.damping)
+      const l = P.current;
+      for (const J of o)
+        l.push(J);
+      l.length > Ne && l.splice(0, l.length - Ne);
+      const y = performance.now() + g.current.idleTimeout;
+      z.current = Math.max(z.current, y), W.current = Math.max(
+        W.current,
+        y + dt(g.current.damping)
       ), D.current = 0, le();
     };
-    H.current = he;
-    const _e = (o) => {
-      const u = g.current;
-      if (B.current || M.current || !U.current || u.interactionMode === "event" || !u.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
+    H.current = de;
+    const Te = (o) => {
+      const l = g.current;
+      if (B.current || b.current || !U.current || l.interactionMode === "event" || !l.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
         return;
       m.current.reset();
-      const F = ae(), [T] = Ue(o, F, performance.now());
-      T && ((u.interactionMode === "click" || u.interactionMode === "drag") && he(
-        Ce(
+      const F = he(), [y] = Pe(o, F, performance.now());
+      y && ((l.interactionMode === "click" || l.interactionMode === "drag") && de(
+        We(
           {
-            x: T.x / $.current.width,
-            y: T.y / $.current.height
+            x: y.x / Q.current.width,
+            y: y.y / Q.current.height
           },
-          u,
-          $.current
+          l,
+          Q.current
         )
-      ), u.interactionMode === "drag" ? (I.current = o.pointerId, m.current.addSample(T)) : u.interactionMode === "move" && m.current.addSample(T));
-    }, Se = (o) => {
-      const u = g.current;
-      if (B.current || M.current || !U.current || u.interactionMode !== "move" && (u.interactionMode !== "drag" || I.current !== o.pointerId) || !u.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
+      ), l.interactionMode === "drag" ? (I.current = o.pointerId, m.current.addSample(y)) : l.interactionMode === "move" && m.current.addSample(y));
+    }, ye = (o) => {
+      const l = g.current;
+      if (B.current || b.current || !U.current || l.interactionMode !== "move" && (l.interactionMode !== "drag" || I.current !== o.pointerId) || !l.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
         return;
-      const F = ae(), T = Ue(o, F, performance.now());
-      for (const Z of T)
-        he(m.current.addSample(Z));
-    }, j = (o) => {
+      const F = he(), y = Pe(o, F, performance.now());
+      for (const J of y)
+        de(m.current.addSample(J));
+    }, Z = (o) => {
       I.current !== null && I.current !== o.pointerId || (I.current = null, m.current.reset());
-    }, Te = (o) => {
-      const u = g.current.pauseKey;
-      !u || o.code !== u || o.repeat || o.altKey || o.ctrlKey || o.metaKey || dt(o.target) || (o.preventDefault(), M.current = !M.current, M.current ? re() : (Y(), Q()));
-    }, ye = () => {
-      Y(), document.hidden && !g.current.runInBackground ? re() : Q();
-    }, Re = () => {
-      k.current = !1, g.current.runInBackground ? (Y(), Q()) : re();
+    }, Re = (o) => {
+      const l = g.current.pauseKey;
+      !l || o.code !== l || o.repeat || o.altKey || o.ctrlKey || o.metaKey || gt(o.target) || (o.preventDefault(), b.current = !b.current, b.current ? ne() : (Y(), j()));
     }, we = () => {
-      k.current = !0, Y(), Q();
-    }, Ke = () => {
-      Y(), !g.current.runInBackground && (document.hidden || !k.current) ? re() : Q();
+      Y(), document.hidden && !g.current.runInBackground ? ne() : j();
+    }, be = () => {
+      k.current = !1, g.current.runInBackground ? (Y(), j()) : ne();
+    }, Me = () => {
+      k.current = !0, Y(), j();
+    }, Ye = () => {
+      Y(), !g.current.runInBackground && (document.hidden || !k.current) ? ne() : j();
     };
-    W.current = Ke, ze();
-    const Me = new ResizeObserver(() => {
-      ae(), le();
+    N.current = Ye, Se();
+    const Ae = new ResizeObserver(() => {
+      Se(), le();
     });
-    Me.observe(K);
-    let ne;
-    return "IntersectionObserver" in window && (ne = new IntersectionObserver((o) => {
-      const u = o[0];
-      U.current = u ? u.isIntersecting : !0, U.current ? Q() : re();
-    }), ne.observe(S)), S.addEventListener("pointerdown", _e, {
+    Ae.observe(K);
+    let ie;
+    return "IntersectionObserver" in window && (ie = new IntersectionObserver((o) => {
+      const l = o[0];
+      U.current = l ? l.isIntersecting : !0, U.current ? j() : ne();
+    }), ie.observe(S)), S.addEventListener("pointerdown", Te, {
       passive: !0
-    }), S.addEventListener("pointermove", Se, {
+    }), S.addEventListener("pointermove", ye, {
       passive: !0
-    }), S.addEventListener("pointerup", j, {
+    }), S.addEventListener("pointerup", Z, {
       passive: !0
-    }), S.addEventListener("pointerleave", j, {
+    }), S.addEventListener("pointerleave", Z, {
       passive: !0
-    }), S.addEventListener("pointercancel", j, {
+    }), S.addEventListener("pointercancel", Z, {
       passive: !0
-    }), window.addEventListener("blur", Re), window.addEventListener("focus", we), document.addEventListener("keydown", Te), document.addEventListener("visibilitychange", ye), () => {
+    }), window.addEventListener("blur", be), window.addEventListener("focus", Me), document.addEventListener("keydown", Re), document.addEventListener("visibilitychange", we), () => {
       var o;
-      Y(), Me.disconnect(), ne == null || ne.disconnect(), S.removeEventListener("pointerdown", _e), S.removeEventListener("pointermove", Se), S.removeEventListener("pointerup", j), S.removeEventListener("pointerleave", j), S.removeEventListener("pointercancel", j), window.removeEventListener("blur", Re), window.removeEventListener("focus", we), document.removeEventListener("keydown", Te), document.removeEventListener("visibilitychange", ye), (o = _.current) == null || o.dispose(), _.current = null, w.current = () => {
-      }, W.current = () => {
+      Y(), Ae.disconnect(), ie == null || ie.disconnect(), S.removeEventListener("pointerdown", Te), S.removeEventListener("pointermove", ye), S.removeEventListener("pointerup", Z), S.removeEventListener("pointerleave", Z), S.removeEventListener("pointercancel", Z), window.removeEventListener("blur", be), window.removeEventListener("focus", Me), document.removeEventListener("keydown", Re), document.removeEventListener("visibilitychange", we), (o = x.current) == null || o.dispose(), x.current = null, w.current = () => {
+      }, N.current = () => {
       }, H.current = () => {
       };
     };
-  }, []), V(() => {
+  }, []), q(() => {
     m.current.reset(), I.current = null;
-  }, [R.interactionMode]), V(() => {
-    W.current();
-  }, [R.runInBackground]), V(() => {
-    !R.pauseKey && M.current && (M.current = !1, W.current());
-  }, [R.pauseKey]);
-  const Ge = {
-    ...c,
+  }, [T.interactionMode]), q(() => {
+    N.current();
+  }, [T.runInBackground]), q(() => {
+    !T.pauseKey && b.current && (b.current = !1, N.current());
+  }, [T.pauseKey]);
+  const He = {
+    ...u,
     position: "relative",
     overflow: "hidden",
     isolation: "isolate"
   };
-  return /* @__PURE__ */ qe("div", { ref: d, className: l, style: Ge, children: [
-    t ? /* @__PURE__ */ de(
+  return /* @__PURE__ */ $e("div", { ref: h, className: s, style: He, children: [
+    t ? /* @__PURE__ */ fe(
       "div",
       {
         style: {
@@ -1208,10 +1239,10 @@ const gt = $e(function(e, n) {
         children: t
       }
     ) : null,
-    /* @__PURE__ */ de(
+    /* @__PURE__ */ fe(
       "canvas",
       {
-        ref: E,
+        ref: v,
         "aria-hidden": "true",
         style: {
           position: "absolute",
@@ -1220,24 +1251,24 @@ const gt = $e(function(e, n) {
           width: "100%",
           height: "100%",
           pointerEvents: "none",
-          mixBlendMode: R.mode === "dom" ? "screen" : "normal"
+          mixBlendMode: T.mode === "dom" ? "screen" : "normal"
         }
       }
     ),
-    /* @__PURE__ */ de(
+    /* @__PURE__ */ fe(
       "div",
       {
         style: {
           position: "relative",
           zIndex: 2
         },
-        children: Xe
+        children: Oe
       }
     )
   ] });
-}), Et = gt;
+}), Tt = pt;
 export {
-  gt as WaterDistortion,
-  Et as WaterLayer
+  pt as WaterDistortion,
+  Tt as WaterLayer
 };
 //# sourceMappingURL=water-distortion.js.map