@rippleflow/water-distortion 0.1.2

package/dist/water-distortion.js

@@ -0,0 +1,1240 @@
+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);
+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 Ze(r, e) {
+  return Math.hypot(e.x - r.x, e.y - r.y);
+}
+function O(r, e, t) {
+  return r + (e - r) * t;
+}
+const J = 24, C = 128, oe = 8, se = Math.PI * 2, fe = {
+  causticGain: 0.1,
+  screenCompensation: 1.35,
+  maxAlpha: 0.9
+}, Je = {
+  gradient: 8e-4,
+  curvature: 8e-4,
+  trough: 6e-3,
+  velocity: 8e-4
+}, Ae = `
+attribute vec2 a_position;
+varying vec2 v_uv;
+
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`, et = `
+precision highp float;
+
+#define MAX_WAKE_SEGMENTS ${J}
+
+varying vec2 v_uv;
+
+uniform sampler2D u_state;
+uniform vec2 u_texel;
+uniform float u_delta;
+uniform float u_damping;
+uniform float u_stiffness;
+uniform float u_aspect;
+uniform int u_wakeCount;
+uniform vec4 u_wakeA[MAX_WAKE_SEGMENTS];
+uniform vec4 u_wakeB[MAX_WAKE_SEGMENTS];
+uniform vec4 u_wakeShape[MAX_WAKE_SEGMENTS];
+
+float segmentWake(vec2 uv, vec4 wakeA, vec4 wakeB, vec4 shape) {
+  vec2 a = wakeA.xy;
+  vec2 b = wakeB.xy;
+  vec2 scale = vec2(u_aspect, 1.0);
+  vec2 p = uv * scale;
+  vec2 start = a * scale;
+  vec2 end = b * scale;
+  vec2 segment = end - start;
+  float segmentLength = max(length(segment), 0.000001);
+  vec2 dir = segment / segmentLength;
+  vec2 normal = vec2(-dir.y, dir.x);
+  float longitudinal = dot(p - start, dir);
+  float clampedLongitudinal = clamp(longitudinal, 0.0, segmentLength);
+  vec2 closest = start + dir * clampedLongitudinal;
+  vec2 delta = p - closest;
+  float perpendicular = abs(dot(delta, normal));
+  float safeRadius = max(wakeA.z, 0.00001);
+  float wakeStrength = wakeA.w;
+  float wakeLength = max(wakeB.z, safeRadius);
+  float troughStrength = shape.x;
+  float ridgeStrength = shape.y;
+  float ridgeOffset = max(shape.z, safeRadius * 0.35);
+  float minFeatureWidth = u_texel.y * 2.25;
+  float troughWidth = max(safeRadius * 0.82, minFeatureWidth);
+  float ridgeWidth = max(safeRadius * 0.9, minFeatureWidth);
+  float signedFromHead = dot(p - end, dir);
+  float behindDistance = max(-signedFromHead, 0.0);
+  float aheadDistance = max(signedFromHead, 0.0);
+  float frontMask = 1.0 - smoothstep(safeRadius * 0.35, safeRadius * 1.8, aheadDistance);
+  float trailMask = 1.0 - smoothstep(safeRadius * 0.5, wakeLength, behindDistance);
+  float segmentMask =
+    smoothstep(-safeRadius, safeRadius * 0.35, longitudinal) *
+    (1.0 - smoothstep(segmentLength + wakeLength * 0.18, segmentLength + wakeLength, longitudinal));
+  float pressureMask = frontMask * segmentMask;
+  float centerTrough = exp(-pow(perpendicular / troughWidth, 2.0));
+  float sideFade = 1.0 - smoothstep(safeRadius * 0.9, safeRadius * 2.35, perpendicular);
+  float sideRidges =
+    exp(-pow((perpendicular - ridgeOffset) / ridgeWidth, 2.0)) *
+    sideFade;
+  float trough = -centerTrough * troughStrength * pressureMask * (0.58 + trailMask * 0.42);
+  float ridges = sideRidges * ridgeStrength * 0.5 * pressureMask * (0.36 + trailMask * 0.64);
+
+  return wakeStrength * (trough + ridges);
+}
+
+void main() {
+  vec4 state = texture2D(u_state, v_uv);
+  float height = state.r;
+  float velocity = state.g;
+
+  float left = texture2D(u_state, v_uv - vec2(u_texel.x, 0.0)).r;
+  float right = texture2D(u_state, v_uv + vec2(u_texel.x, 0.0)).r;
+  float down = texture2D(u_state, v_uv - vec2(0.0, u_texel.y)).r;
+  float up = texture2D(u_state, v_uv + vec2(0.0, u_texel.y)).r;
+  float neighborAverage = (left + right + down + up) * 0.25;
+
+  velocity += (neighborAverage - height) * u_stiffness * u_delta;
+
+  for (int i = 0; i < MAX_WAKE_SEGMENTS; i++) {
+    if (i >= u_wakeCount) {
+      break;
+    }
+
+    float wake = segmentWake(v_uv, u_wakeA[i], u_wakeB[i], u_wakeShape[i]);
+
+    velocity += wake * 0.12;
+    height += wake * 0.014;
+  }
+
+  velocity *= pow(u_damping, u_delta);
+  height *= pow(0.9985, u_delta);
+  height += velocity * u_delta;
+
+  gl_FragColor = vec4(height, velocity, 0.0, 1.0);
+}
+`, tt = `
+precision highp float;
+
+varying vec2 v_uv;
+
+uniform sampler2D u_state;
+uniform sampler2D u_background;
+uniform sampler2D u_causticMap;
+uniform vec2 u_texel;
+uniform float u_domMode;
+uniform float u_textureEnabled;
+uniform float u_normalScale;
+uniform float u_refractionStrength;
+uniform float u_specularIntensity;
+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;
+}
+
+vec4 causticLayer(vec2 uv, vec2 bend, mat2 rotation, float scale, vec2 drift) {
+  vec2 p = rotation * (uv * scale + drift * u_time);
+
+  return texture2D(u_causticMap, p + bend * 0.22);
+}
+
+void main() {
+  vec4 center = texture2D(u_state, v_uv);
+  float height = center.r;
+  float velocity = center.g;
+  float left = texture2D(u_state, v_uv - vec2(u_texel.x, 0.0)).r;
+  float right = texture2D(u_state, v_uv + vec2(u_texel.x, 0.0)).r;
+  float down = texture2D(u_state, v_uv - vec2(0.0, u_texel.y)).r;
+  float up = texture2D(u_state, v_uv + vec2(0.0, u_texel.y)).r;
+  float dx = right - left;
+  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(0.001),
+    vec2(0.999)
+  );
+
+  vec3 base = u_textureEnabled > 0.5
+    ? texture2D(u_background, refractedUv).rgb
+    : proceduralBackground(refractedUv);
+
+  float gradient = length(vec2(dx, dy)) * u_normalScale;
+  float crest = smoothstep(0.012, 0.24, gradient);
+  float trough = smoothstep(0.018, 0.09, -height);
+  float heightActivity = smoothstep(0.0005, 0.018, abs(height));
+  float aspect = u_texel.y / u_texel.x;
+  vec2 causticUv = vec2(v_uv.x * aspect, v_uv.y);
+  float rawActivity =
+    gradient * 0.72 +
+    abs(signedCurvature) * u_normalScale * 0.42 +
+    abs(velocity) * 14.0 +
+    heightActivity * 0.22;
+  float edgeFade = smoothstep(0.0, 0.52, rawActivity);
+  float visibleCrest = crest * edgeFade;
+  float visibleTrough = trough * edgeFade;
+  vec2 causticBend = normal.xz * (0.22 + visibleCrest * 0.08);
+  float slopeActivity = smoothstep(0.004, 0.18, gradient);
+  float convergence = smoothstep(0.004, 0.065, max(signedCurvature * u_normalScale, 0.0));
+  float defocus = smoothstep(0.004, 0.065, max(-signedCurvature * u_normalScale, 0.0));
+  float velocityActivity = smoothstep(0.0006, 0.006, abs(velocity));
+  float activitySignal =
+    slopeActivity * 0.38 +
+    convergence * 0.58 +
+    velocityActivity * 0.28 +
+    heightActivity * 0.22;
+  float activityGate = edgeFade * smoothstep(0.0, 0.58, activitySignal);
+  float causticFocus =
+    activityGate *
+    (1.0 - defocus * 0.65) *
+    mix(0.35, 1.25, convergence);
+  vec4 causticA = causticLayer(
+    causticUv,
+    causticBend,
+    mat2(0.94, -0.34, 0.34, 0.94),
+    1.45,
+    vec2(0.032, -0.021)
+  );
+  vec4 causticB = causticLayer(
+    causticUv,
+    -causticBend * 0.72,
+    mat2(0.62, 0.78, -0.78, 0.62),
+    2.05,
+    vec2(-0.019, 0.034)
+  );
+  float sparklePhase = sin(u_time * 8.0 + causticA.b * 6.28318 + causticB.a * 3.14159);
+  float primaryLines = smoothstep(0.10, 0.76, causticA.r * 0.72 + causticB.g * 0.18);
+  float softFill = smoothstep(0.08, 0.62, causticA.g) * 0.2;
+  float sparkle = smoothstep(
+    0.62,
+    0.96,
+    max(causticA.a, causticB.b) * (0.9 + sparklePhase * 0.1)
+  );
+  float detailModulation = mix(0.58, 1.2, causticB.b);
+  float brightnessModulation = mix(0.7, 1.12, causticA.b);
+  float causticPattern = clamp(
+    (primaryLines * detailModulation + softFill + sparkle * 0.1) *
+      brightnessModulation,
+    0.0,
+    1.0
+  );
+  float caustic = causticPattern * causticFocus;
+  float baseLuminance = dot(base, vec3(0.2126, 0.7152, 0.0722));
+  float causticEnergy = 1.0 - exp(-caustic * u_causticIntensity * 0.82);
+  float textureCausticGain = mix(0.12, 0.045, smoothstep(0.46, 0.9, baseLuminance));
+  vec3 lightDirection = normalize(vec3(-0.32, 0.64, 0.42));
+  vec3 viewDirection = vec3(0.0, 1.0, 0.0);
+  vec3 halfDirection = normalize(lightDirection + viewDirection);
+  float specular = pow(max(dot(normal, halfDirection), 0.0), 82.0) * activityGate;
+
+  float causticGain = u_domMode > 0.5 ? DOM_CAUSTIC_GAIN : textureCausticGain;
+  vec3 highlight =
+    vec3(1.0, 0.98, 0.88) * specular * u_specularIntensity +
+    vec3(0.75, 0.95, 1.0) * visibleCrest * u_crestIntensity * 0.11 +
+    vec3(0.84, 1.0, 0.92) * causticEnergy * causticGain;
+
+  if (u_domMode > 0.5) {
+    float domEnergy = max(max(highlight.r, highlight.g), highlight.b);
+    vec3 overlay = highlight / max(domEnergy, 0.00001);
+    float alpha = clamp(domEnergy * DOM_SCREEN_COMPENSATION, 0.0, DOM_MAX_ALPHA);
+
+    gl_FragColor = vec4(overlay, alpha);
+    return;
+  }
+
+  vec3 color = base + highlight - vec3(0.015, 0.055, 0.070) * visibleTrough * 0.45;
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+class rt {
+  constructor(e) {
+    f(this, "gl");
+    f(this, "isWebGL2");
+    f(this, "canLinearFloat");
+    f(this, "quadBuffer");
+    f(this, "simulationProgram");
+    f(this, "materialProgram");
+    f(this, "backgroundTexture");
+    f(this, "causticTexture");
+    f(this, "stateTextures");
+    f(this, "framebuffers");
+    f(this, "readIndex", 0);
+    f(this, "simWidth", 1);
+    f(this, "simHeight", 1);
+    f(this, "cssWidth", 1);
+    f(this, "cssHeight", 1);
+    f(this, "textureSource");
+    f(this, "textureImage");
+    f(this, "textureReady", !1);
+    f(this, "textureNeedsUpload", !1);
+    f(this, "activityPixels");
+    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(
+      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));
+    (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());
+  }
+  setTextureSource(e) {
+    if (e === this.textureSource || (this.textureSource = e, this.textureImage = void 0, this.textureReady = !1, this.textureNeedsUpload = !1, !e))
+      return;
+    if (typeof e != "string") {
+      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 = () => {
+      this.textureSource === e && (this.textureImage = void 0, this.textureReady = !1, this.textureNeedsUpload = !1);
+    }, t.src = e;
+  }
+  step(e, t, n) {
+    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;
+  }
+  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));
+  }
+  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);
+    try {
+      e.readPixels(
+        0,
+        0,
+        this.simWidth,
+        this.simHeight,
+        e.RGBA,
+        e.FLOAT,
+        this.activityPixels
+      );
+    } finally {
+      e.bindFramebuffer(e.FRAMEBUFFER, null);
+    }
+    return ot(
+      this.activityPixels,
+      this.simWidth,
+      this.simHeight
+    );
+  }
+  clear() {
+    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);
+    }
+    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;
+    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);
+  }
+  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();
+  }
+  createStateTexture() {
+    const e = this.gl, t = q(e.createTexture(), "WebGL texture");
+    if (e.bindTexture(e.TEXTURE_2D, t), e.texParameteri(
+      e.TEXTURE_2D,
+      e.TEXTURE_MIN_FILTER,
+      this.canLinearFloat ? e.LINEAR : e.NEAREST
+    ), e.texParameteri(
+      e.TEXTURE_2D,
+      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,
+        0,
+        n.RGBA32F,
+        this.simWidth,
+        this.simHeight,
+        0,
+        n.RGBA,
+        n.FLOAT,
+        null
+      );
+    } else
+      e.texImage2D(
+        e.TEXTURE_2D,
+        0,
+        e.RGBA,
+        this.simWidth,
+        this.simHeight,
+        0,
+        e.RGBA,
+        e.FLOAT,
+        null
+      );
+    return t;
+  }
+  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,
+      e,
+      0
+    ), t.checkFramebufferStatus(t.FRAMEBUFFER) !== t.FRAMEBUFFER_COMPLETE)
+      throw new Error("WaterDistortion could not create a float simulation target.");
+    return t.bindFramebuffer(t.FRAMEBUFFER, null), n;
+  }
+  initializeBackgroundTexture() {
+    const e = this.gl;
+    e.bindTexture(e.TEXTURE_2D, this.backgroundTexture), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), 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), e.texImage2D(
+      e.TEXTURE_2D,
+      0,
+      e.RGBA,
+      1,
+      1,
+      0,
+      e.RGBA,
+      e.UNSIGNED_BYTE,
+      new Uint8Array([18, 28, 26, 255])
+    );
+  }
+  initializeCausticTexture() {
+    const e = this.gl;
+    e.bindTexture(e.TEXTURE_2D, this.causticTexture), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR_MIPMAP_LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.REPEAT), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.REPEAT), e.texImage2D(
+      e.TEXTURE_2D,
+      0,
+      e.RGBA,
+      C,
+      C,
+      0,
+      e.RGBA,
+      e.UNSIGNED_BYTE,
+      nt()
+    ), e.generateMipmap(e.TEXTURE_2D);
+  }
+  uploadTextureIfNeeded(e) {
+    if (e.mode === "dom" || !this.textureImage || !this.textureNeedsUpload && !at(this.textureImage))
+      return;
+    const t = this.gl;
+    try {
+      t.bindTexture(t.TEXTURE_2D, this.backgroundTexture), t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL, 1), t.texImage2D(
+        t.TEXTURE_2D,
+        0,
+        t.RGBA,
+        t.RGBA,
+        t.UNSIGNED_BYTE,
+        this.textureImage
+      ), t.pixelStorei(t.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);
+  }
+  setSimulationUniforms(e, t, n) {
+    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);
+  }
+  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"),
+      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);
+  }
+}
+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;
+      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);
+  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);
+      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;
+  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 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 We(r) {
+  return Math.min(1, Math.max(0, r));
+}
+function it(r) {
+  const e = {
+    alpha: !0,
+    antialias: !1,
+    depth: !1,
+    stencil: !1,
+    premultipliedAlpha: !1,
+    preserveDrawingBuffer: !1
+  }, t = r.getContext("webgl2", e);
+  if (t) {
+    if (!t.getExtension("EXT_color_buffer_float"))
+      throw new Error("WaterDistortion requires float render targets.");
+    return {
+      gl: t,
+      isWebGL2: !0,
+      canLinearFloat: !!t.getExtension("OES_texture_float_linear")
+    };
+  }
+  const n = r.getContext("webgl", e) || r.getContext(
+    "experimental-webgl",
+    e
+  );
+  if (!n)
+    throw new Error("WaterDistortion requires WebGL.");
+  if (!n.getExtension("OES_texture_float") || !n.getExtension("WEBGL_color_buffer_float") && !n.getExtension("EXT_color_buffer_float"))
+    throw new Error("WaterDistortion requires float texture support.");
+  return {
+    gl: n,
+    isWebGL2: !1,
+    canLinearFloat: !!n.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)) {
+    const c = r.getProgramInfoLog(a) || "Unknown shader link error.";
+    throw r.deleteProgram(a), new Error(c);
+  }
+  const l = r.getAttribLocation(a, "a_position");
+  if (l < 0)
+    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);
+  }
+  return n;
+}
+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 q(r, e) {
+  if (!r)
+    throw new Error(`WaterDistortion could not create ${e}.`);
+  return r;
+}
+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));
+  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)
+        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)
+        return !0;
+    }
+  return !1;
+}
+const L = {
+  width: 1,
+  height: 1,
+  interactionRadius: 25,
+  wakeStrength: 0.54,
+  troughStrength: 0.92,
+  ridgeStrength: 0.46,
+  ridgeOffset: 10,
+  wakeLength: 84,
+  velocityScale: 1,
+  velocityClamp: 1.35,
+  cursorSmoothing: 0.2,
+  segmentSpacing: 18
+}, st = 24;
+function ge(r) {
+  return {
+    width: Math.max(1, r.width ?? L.width),
+    height: Math.max(1, r.height ?? L.height),
+    interactionRadius: Math.max(
+      1,
+      r.interactionRadius ?? L.interactionRadius
+    ),
+    wakeStrength: Math.max(
+      0,
+      r.wakeStrength ?? L.wakeStrength
+    ),
+    troughStrength: Math.max(
+      0,
+      r.troughStrength ?? L.troughStrength
+    ),
+    ridgeStrength: Math.max(
+      0,
+      r.ridgeStrength ?? L.ridgeStrength
+    ),
+    ridgeOffset: Math.max(0, r.ridgeOffset ?? L.ridgeOffset),
+    wakeLength: Math.max(1, r.wakeLength ?? L.wakeLength),
+    velocityScale: Math.max(
+      0.01,
+      r.velocityScale ?? L.velocityScale
+    ),
+    velocityClamp: Math.max(
+      0.05,
+      r.velocityClamp ?? L.velocityClamp
+    ),
+    cursorSmoothing: h(
+      r.cursorSmoothing ?? L.cursorSmoothing,
+      0,
+      0.9
+    ),
+    segmentSpacing: Math.max(
+      1,
+      r.segmentSpacing ?? L.segmentSpacing
+    )
+  };
+}
+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;
+  return i.map((l) => ({
+    x: l.clientX - e.left,
+    y: l.clientY - e.top,
+    time: l.timeStamp + a
+  }));
+}
+class ct {
+  constructor(e = {}) {
+    f(this, "options");
+    f(this, "previous");
+    f(this, "smoothedVelocity", 0);
+    f(this, "disturbances", []);
+    this.options = ge(e);
+  }
+  configure(e) {
+    this.options = ge({
+      ...this.options,
+      ...e
+    });
+  }
+  reset() {
+    this.previous = void 0, this.smoothedVelocity = 0, this.disturbances.length = 0;
+  }
+  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);
+    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);
+    this.smoothedVelocity = O(
+      this.smoothedVelocity,
+      l,
+      c
+    ), this.previous = i;
+    const s = Math.min(
+      st,
+      Math.max(1, Math.ceil(a / this.options.segmentSpacing))
+    );
+    for (let d = 0; d < s; d += 1) {
+      const E = d / s, _ = (d + 1) / s;
+      this.disturbances.push(
+        ve(
+          De(n, i, E),
+          De(n, i, _),
+          this.smoothedVelocity,
+          this.options
+        )
+      );
+    }
+    return this.disturbances;
+  }
+  clampSample(e) {
+    return {
+      x: h(e.x, 0, this.options.width),
+      y: h(e.y, 0, this.options.height),
+      time: e.time
+    };
+  }
+  smoothSample(e, t) {
+    const n = 1 - this.options.cursorSmoothing;
+    return {
+      x: O(e.x, t.x, n),
+      y: O(e.y, t.y, n),
+      time: t.time
+    };
+  }
+}
+function ve(r, e, t, n) {
+  const i = ge(n), a = h(
+    t * 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);
+  return {
+    ax: h(r.x / i.width, 0, 1),
+    ay: 1 - l,
+    bx: h(e.x / i.width, 0, 1),
+    by: 1 - c,
+    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,
+    velocity: a
+  };
+}
+function De(r, e, t) {
+  return {
+    x: O(r.x, e.x, t),
+    y: O(r.y, e.y, t),
+    time: O(r.time, e.time, t)
+  };
+}
+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 x = {
+  mode: "texture",
+  damping: 0.98,
+  waveSpeed: 0.4,
+  normalScale: 20,
+  refractionStrength: 0.7,
+  specularIntensity: 1,
+  crestIntensity: 0.2,
+  causticIntensity: 0,
+  simulationResolution: 192,
+  wakeStrength: 0.54,
+  interactionRadius: 25,
+  troughStrength: 0.92,
+  ridgeStrength: 0.46,
+  ridgeOffset: 10,
+  wakeLength: 84,
+  velocityScale: 1,
+  velocityClamp: 1.35,
+  cursorSmoothing: 0.2,
+  segmentSpacing: 18,
+  idleTimeout: 900,
+  interactionMode: "move",
+  runInBackground: !1,
+  pauseKey: void 0
+}, G = 1e3 / 60, lt = 4, Pe = 360, Be = 24, ht = 200;
+function dt(r) {
+  return r instanceof Element && r.closest(
+    "a, button, input, select, textarea, [contenteditable]:not([contenteditable=false])"
+  ) !== null;
+}
+function ft(r) {
+  const e = r.strength === void 0 ? void 0 : r.strength / 48;
+  return {
+    mode: r.mode ?? x.mode,
+    texture: r.texture,
+    damping: h(
+      r.damping ?? r.dissipation ?? x.damping,
+      0.85,
+      0.998
+    ),
+    waveSpeed: h(r.waveSpeed ?? x.waveSpeed, 0.05, 1),
+    normalScale: h(
+      r.normalScale ?? x.normalScale,
+      1,
+      80
+    ),
+    refractionStrength: h(
+      r.refractionStrength ?? x.refractionStrength,
+      0,
+      2.5
+    ),
+    specularIntensity: h(
+      r.specularIntensity ?? x.specularIntensity,
+      0,
+      3
+    ),
+    crestIntensity: h(
+      r.crestIntensity ?? x.crestIntensity,
+      0,
+      3
+    ),
+    causticIntensity: h(
+      r.causticIntensity ?? x.causticIntensity,
+      0,
+      3
+    ),
+    simulationResolution: h(
+      Math.round(
+        r.simulationResolution ?? x.simulationResolution
+      ),
+      64,
+      384
+    ),
+    wakeStrength: h(
+      r.wakeStrength ?? r.rippleStrength ?? e ?? x.wakeStrength,
+      0,
+      3
+    ),
+    interactionRadius: h(
+      r.interactionRadius ?? x.interactionRadius,
+      2,
+      80
+    ),
+    troughStrength: h(
+      r.troughStrength ?? x.troughStrength,
+      0,
+      3
+    ),
+    ridgeStrength: h(
+      r.ridgeStrength ?? x.ridgeStrength,
+      0,
+      3
+    ),
+    ridgeOffset: h(
+      r.ridgeOffset ?? x.ridgeOffset,
+      0,
+      80
+    ),
+    wakeLength: h(
+      r.wakeLength ?? x.wakeLength,
+      1,
+      240
+    ),
+    velocityScale: h(
+      r.velocityScale ?? x.velocityScale,
+      0.01,
+      4
+    ),
+    velocityClamp: h(
+      r.velocityClamp ?? x.velocityClamp,
+      0.05,
+      8
+    ),
+    cursorSmoothing: h(
+      r.cursorSmoothing ?? x.cursorSmoothing,
+      0,
+      0.9
+    ),
+    segmentSpacing: h(
+      r.segmentSpacing ?? x.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
+  };
+}
+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 = {
+    ...e,
+    width: t.width,
+    height: t.height,
+    wakeLength: e.interactionRadius * 1.5
+  };
+  return [
+    ve(
+      { x: n - a, y: i },
+      { x: n + a, y: i },
+      l,
+      c
+    ),
+    ve(
+      { x: n, y: i - a },
+      { x: n, y: i + a },
+      l,
+      c
+    )
+  ];
+}
+function mt(r) {
+  const [e, t] = je(!1);
+  return V(() => {
+    if (!r || typeof window > "u" || !window.matchMedia) {
+      t(!1);
+      return;
+    }
+    const n = window.matchMedia("(prefers-reduced-motion: reduce)");
+    t(n.matches);
+    const i = (a) => {
+      t(a.matches);
+    };
+    return n.addEventListener("change", i), () => {
+      n.removeEventListener("change", i);
+    };
+  }, [r]), e;
+}
+const gt = $e(function(e, t) {
+  const {
+    underlay: n,
+    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(
+    t,
+    () => ({
+      triggerRipple(S) {
+        B.current || M.current || H.current(
+          Ce(
+            S,
+            g.current,
+            $.current
+          )
+        );
+      }
+    }),
+    []
+  ), V(() => {
+    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;
+    if (!S)
+      return;
+    const { width: K, height: b } = $.current;
+    S.resize(
+      K,
+      b,
+      window.devicePixelRatio,
+      R.simulationResolution
+    ), S.setTextureSource(R.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;
+    if (!S || !K)
+      return;
+    k.current = typeof document.hasFocus == "function" ? document.hasFocus() : !0;
+    let b = null, ie, ee = G, xe = !1, te;
+    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) => {
+      m.current.configure({
+        width: o,
+        height: u,
+        interactionRadius: g.current.interactionRadius,
+        wakeStrength: g.current.wakeStrength,
+        troughStrength: g.current.troughStrength,
+        ridgeStrength: g.current.ridgeStrength,
+        ridgeOffset: g.current.ridgeOffset,
+        wakeLength: g.current.wakeLength,
+        velocityScale: g.current.velocityScale,
+        velocityClamp: g.current.velocityClamp,
+        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(
+        F,
+        T,
+        window.devicePixelRatio,
+        g.current.simulationResolution
+      );
+    }, pe = () => {
+      b == null || b.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 = () => {
+      const o = g.current;
+      let u = !1;
+      if (!(!B.current && !M.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;
+      }
+      (!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)) {
+        X();
+        return;
+      }
+      if (B.current) {
+        P.current = [], b.render(u, o * 1e-3), X();
+        return;
+      }
+      const F = u.runInBackground ? Pe : lt, T = ie === void 0 ? G : h(
+        o - ie,
+        0,
+        u.runInBackground ? G * Pe : 64
+      );
+      ie = o, ee = Math.min(
+        ee + T,
+        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) {
+        w.current();
+        return;
+      }
+      if (o < z.current) {
+        w.current();
+        return;
+      }
+      if (xe) {
+        o < N.current ? w.current() : X();
+        return;
+      }
+      if (o < D.current) {
+        w.current();
+        return;
+      }
+      try {
+        b.hasVisibleActivity() ? (D.current = o + ht, w.current()) : X();
+      } catch {
+        xe = !0, o < N.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));
+    };
+    w.current = le;
+    try {
+      b = new rt(K), _.current = b, b.setTextureSource(g.current.texture);
+    } catch {
+      return K.style.display = "none", _.current = null, w.current = () => {
+      }, () => {
+      };
+    }
+    const ae = () => {
+      const o = K.getBoundingClientRect();
+      return He(o.width, o.height), o;
+    }, ze = () => {
+      ae(), pe();
+    }, he = (o) => {
+      if (M.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)
+      ), 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)
+        return;
+      m.current.reset();
+      const F = ae(), [T] = Ue(o, F, performance.now());
+      T && ((u.interactionMode === "click" || u.interactionMode === "drag") && he(
+        Ce(
+          {
+            x: T.x / $.current.width,
+            y: T.y / $.current.height
+          },
+          u,
+          $.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)
+        return;
+      const F = ae(), T = Ue(o, F, performance.now());
+      for (const Z of T)
+        he(m.current.addSample(Z));
+    }, j = (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();
+    }, we = () => {
+      k.current = !0, Y(), Q();
+    }, Ke = () => {
+      Y(), !g.current.runInBackground && (document.hidden || !k.current) ? re() : Q();
+    };
+    W.current = Ke, ze();
+    const Me = new ResizeObserver(() => {
+      ae(), 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, {
+      passive: !0
+    }), S.addEventListener("pointermove", Se, {
+      passive: !0
+    }), S.addEventListener("pointerup", j, {
+      passive: !0
+    }), S.addEventListener("pointerleave", j, {
+      passive: !0
+    }), S.addEventListener("pointercancel", j, {
+      passive: !0
+    }), window.addEventListener("blur", Re), window.addEventListener("focus", we), document.addEventListener("keydown", Te), document.addEventListener("visibilitychange", ye), () => {
+      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 = () => {
+      }, H.current = () => {
+      };
+    };
+  }, []), V(() => {
+    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,
+    position: "relative",
+    overflow: "hidden",
+    isolation: "isolate"
+  };
+  return /* @__PURE__ */ qe("div", { ref: d, className: l, style: Ge, children: [
+    n ? /* @__PURE__ */ de(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 0,
+          pointerEvents: "none",
+          transform: "translateZ(0)"
+        },
+        children: n
+      }
+    ) : null,
+    /* @__PURE__ */ de(
+      "canvas",
+      {
+        ref: E,
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          inset: 0,
+          zIndex: 1,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          mixBlendMode: R.mode === "dom" ? "screen" : "normal"
+        }
+      }
+    ),
+    /* @__PURE__ */ de(
+      "div",
+      {
+        style: {
+          position: "relative",
+          zIndex: 2
+        },
+        children: Xe
+      }
+    )
+  ] });
+}), Et = gt;
+export {
+  gt as WaterDistortion,
+  Et as WaterLayer
+};
+//# sourceMappingURL=water-distortion.js.map