@rippleflow/water-distortion 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -68,6 +68,7 @@ For true shader refraction, provide a texture source:
68
68
  <WaterDistortion
69
69
  mode="texture"
70
70
  texture="/hero-background.jpg"
71
+ textureFit="cover"
71
72
  wakeStrength={0.8}
72
73
  underlay={<img src="/hero-background.jpg" alt="" />}
73
74
  >
@@ -86,6 +87,7 @@ For true shader refraction, provide a texture source:
86
87
  | `foreground` | `ReactNode` | `undefined` | Explicit foreground prop; takes precedence over `children`. |
87
88
  | `mode` | `"dom" \| "texture" \| "canvas"` | `"texture"` | Chooses live-DOM overlay mode or true WebGL background sampling. |
88
89
  | `texture` | `TexImageSource \| string` | `undefined` | Image/canvas/video source sampled by WebGL in `texture` or `canvas` mode. URL strings are loaded with `crossOrigin="anonymous"`. |
90
+ | `textureFit` | `"fill" \| "cover" \| "contain" \| "none"` | `"fill"` | Sizes and centers the sampled texture like CSS `object-fit`. `contain` and undersized `none` leave uncovered areas transparent. |
89
91
  | `interactionMode` | `"move" \| "click" \| "drag" \| "event"` | `"move"` | Chooses pointer-movement wakes, one ripple per pointer down, press ripples plus held-drag wakes, or programmatic ripples only. |
90
92
  | `runInBackground` | `boolean` | `false` | Continues stepping while hidden or unfocused and catches up elapsed time when the browser throttles background callbacks. |
91
93
  | `pauseKey` | `string` | `undefined` | Toggles simulation pausing when this [`KeyboardEvent.code`](https://developer.mozilla.org/docs/Web/API/KeyboardEvent/code) is pressed, such as `Space` or `KeyP`. Keyboard input in interactive controls is ignored. |
@@ -109,7 +111,7 @@ For true shader refraction, provide a texture source:
109
111
  | `specularIntensity` | `number` | `1` | Strength of fixed-light specular highlights. |
110
112
  | `crestIntensity` | `number` | `0.2` | Visibility of height-gradient crests and troughs. |
111
113
  | `causticIntensity` | `number` | `0` | Experimental ripple-driven caustic light that fades when the simulated surface is calm. |
112
- | `simulationResolution` | `number` | `192` | Longest side of the simulation texture. Clamped to `64...384`. |
114
+ | `simulationResolution` | `number` | `192` | Target longest side of the simulation texture. Clamped to `64...384`. Each axis stays at least 32 texels; at extreme aspect ratios the long axis grows beyond this target to preserve simulation scale. |
113
115
  | `idleTimeout` | `number` | `900` | Minimum active time after input before the renderer begins checking whether ripples have faded enough to sleep. |
114
116
  | `className` | `string` | `undefined` | Applied to the container. |
115
117
  | `style` | `CSSProperties` | `undefined` | Merged onto the container. The component enforces relative positioning, hidden overflow, and isolation. |
@@ -149,6 +151,8 @@ Browsers do not provide an efficient, general API for sampling arbitrary live DO
149
151
 
150
152
  Use `texture` or `canvas` when you can provide an image, video, canvas, or URL that WebGL can sample. This path gives the best visual quality because the shader offsets the sampled background with `normal.xy` from the water heightfield.
151
153
 
154
+ Use `textureFit="fill"` for the original stretched behavior, `cover` to preserve aspect ratio while cropping, `contain` to show the entire source with transparent letterboxing, or `none` to keep its intrinsic size centered at one source pixel per CSS pixel.
155
+
152
156
  The canvas remains transparent when no `texture` is supplied, while a URL is loading, or if loading or WebGL upload fails, allowing the `underlay` to remain visible. A successful URL load automatically requests a fresh render.
153
157
 
154
158
  ## How It Works
@@ -1,5 +1,5 @@
1
1
  import type { CSSProperties, ReactNode } from "react";
2
- import { type WaterRenderMode, type WaterTextureSource } from "./core/waterRenderer";
2
+ import { type WaterRenderMode, type WaterTextureFit, type WaterTextureSource } from "./core/waterRenderer";
3
3
  export type ReducedMotionBehavior = "respect" | "disable" | "ignore";
4
4
  export type WaterInteractionMode = "move" | "click" | "drag" | "event";
5
5
  export interface WaterRipplePosition {
@@ -17,6 +17,7 @@ export interface WaterDistortionProps {
17
17
  foreground?: ReactNode;
18
18
  mode?: WaterRenderMode;
19
19
  texture?: WaterTextureSource;
20
+ textureFit?: WaterTextureFit;
20
21
  rippleStrength?: number;
21
22
  wakeStrength?: number;
22
23
  interactionRadius?: number;
@@ -52,5 +53,5 @@ export interface WaterDistortionProps {
52
53
  }
53
54
  export declare const WaterDistortion: import("react").ForwardRefExoticComponent<WaterDistortionProps & import("react").RefAttributes<WaterDistortionHandle>>;
54
55
  export declare const WaterLayer: import("react").ForwardRefExoticComponent<WaterDistortionProps & import("react").RefAttributes<WaterDistortionHandle>>;
55
- export type { WaterRenderMode, WaterTextureSource };
56
+ export type { WaterRenderMode, WaterTextureFit, WaterTextureSource };
56
57
  //# sourceMappingURL=WaterDistortion.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"WaterDistortion.d.ts","sourceRoot":"","sources":["../src/WaterDistortion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAStD,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAS9B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACrE,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkOD,eAAO,MAAM,eAAe,wHA0qB1B,CAAC;AAEH,eAAO,MAAM,UAAU,wHAAkB,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC"}
1
+ {"version":3,"file":"WaterDistortion.d.ts","sourceRoot":"","sources":["../src/WaterDistortion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAStD,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACxB,MAAM,sBAAsB,CAAC;AAS9B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACrE,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAoOD,eAAO,MAAM,eAAe,wHA2qB1B,CAAC;AAEH,eAAO,MAAM,UAAU,wHAAkB,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC"}
@@ -1,8 +1,10 @@
1
1
  import type { WaterDisturbance } from "./waterInteraction";
2
2
  export type WaterRenderMode = "dom" | "texture" | "canvas";
3
+ export type WaterTextureFit = "fill" | "cover" | "contain" | "none";
3
4
  export type WaterTextureSource = TexImageSource | string;
4
5
  export interface WaterRendererSettings {
5
6
  mode: WaterRenderMode;
7
+ textureFit: WaterTextureFit;
6
8
  damping: number;
7
9
  waveSpeed: number;
8
10
  normalScale: number;
@@ -41,6 +43,8 @@ export declare class HeightfieldWaterRenderer {
41
43
  private textureImage;
42
44
  private textureReady;
43
45
  private textureNeedsUpload;
46
+ private textureWidth;
47
+ private textureHeight;
44
48
  private activityPixels;
45
49
  private readonly wakeAUniforms;
46
50
  private readonly wakeBUniforms;
@@ -1 +1 @@
1
- {"version":3,"file":"waterRenderer.d.ts","sourceRoot":"","sources":["../../src/core/waterRenderer.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"waterRenderer.d.ts","sourceRoot":"","sources":["../../src/core/waterRenderer.ts"],"names":[],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { WaterDistortion, WaterLayer } from "./WaterDistortion";
2
- export type { ReducedMotionBehavior, WaterDistortionHandle, WaterDistortionProps, WaterInteractionMode, WaterRenderMode, WaterRipplePosition, WaterTextureSource } from "./WaterDistortion";
2
+ export type { ReducedMotionBehavior, WaterDistortionHandle, WaterDistortionProps, WaterInteractionMode, WaterRenderMode, WaterRipplePosition, WaterTextureFit, WaterTextureSource } from "./WaterDistortion";
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EACnB,MAAM,mBAAmB,CAAC"}
@@ -1,4 +1,4 @@
1
- "use strict";var Ye=Object.defineProperty;var qe=(r,e,n)=>e in r?Ye(r,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[e]=n;var m=(r,e,n)=>qe(r,typeof e!="symbol"?e+"":e,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ae=require("react/jsx-runtime"),f=require("react");function h(r,e,n){return Math.min(n,Math.max(e,r))}function Ve(r,e){return Math.hypot(e.x-r.x,e.y-r.y)}function O(r,e,n){return r+(e-r)*n}const Z=24,C=128,oe=8,se=Math.PI*2,de={causticGain:.1,screenCompensation:1.35,maxAlpha:.9},je={gradient:8e-4,curvature:8e-4,trough:.006,velocity:8e-4},be=`
1
+ "use strict";var qe=Object.defineProperty;var Ve=(r,e,n)=>e in r?qe(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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ae=require("react/jsx-runtime"),m=require("react");function d(r,e,n){return Math.min(n,Math.max(e,r))}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,q=32,C=128,oe=8,se=Math.PI*2,fe={causticGain:.1,screenCompensation:1.35,maxAlpha:.9},$e={gradient:8e-4,curvature:8e-4,trough:.006,velocity:8e-4},Ie=`
2
2
  attribute vec2 a_position;
3
3
  varying vec2 v_uv;
4
4
 
@@ -6,10 +6,10 @@ void main() {
6
6
  v_uv = a_position * 0.5 + 0.5;
7
7
  gl_Position = vec4(a_position, 0.0, 1.0);
8
8
  }
9
- `,$e=`
9
+ `,Qe=`
10
10
  precision highp float;
11
11
 
12
- #define MAX_WAKE_SEGMENTS ${Z}
12
+ #define MAX_WAKE_SEGMENTS ${J}
13
13
 
14
14
  varying vec2 v_uv;
15
15
 
@@ -99,7 +99,7 @@ void main() {
99
99
 
100
100
  gl_FragColor = vec4(height, velocity, 0.0, 1.0);
101
101
  }
102
- `,Qe=`
102
+ `,Ze=`
103
103
  precision highp float;
104
104
 
105
105
  varying vec2 v_uv;
@@ -108,6 +108,7 @@ uniform sampler2D u_state;
108
108
  uniform sampler2D u_background;
109
109
  uniform sampler2D u_causticMap;
110
110
  uniform vec2 u_texel;
111
+ uniform vec2 u_backgroundScale;
111
112
  uniform float u_domMode;
112
113
  uniform float u_normalScale;
113
114
  uniform float u_refractionStrength;
@@ -116,9 +117,9 @@ uniform float u_crestIntensity;
116
117
  uniform float u_causticIntensity;
117
118
  uniform float u_time;
118
119
 
119
- const float DOM_CAUSTIC_GAIN = ${de.causticGain.toFixed(2)};
120
- const float DOM_SCREEN_COMPENSATION = ${de.screenCompensation.toFixed(2)};
121
- const float DOM_MAX_ALPHA = ${de.maxAlpha.toFixed(2)};
120
+ const float DOM_CAUSTIC_GAIN = ${fe.causticGain.toFixed(2)};
121
+ const float DOM_SCREEN_COMPENSATION = ${fe.screenCompensation.toFixed(2)};
122
+ const float DOM_MAX_ALPHA = ${fe.maxAlpha.toFixed(2)};
122
123
 
123
124
  vec4 causticLayer(vec2 uv, vec2 bend, mat2 rotation, float scale, vec2 drift) {
124
125
  vec2 p = rotation * (uv * scale + drift * u_time);
@@ -138,8 +139,15 @@ void main() {
138
139
  float dy = up - down;
139
140
  float signedCurvature = left + right + down + up - height * 4.0;
140
141
  vec3 normal = normalize(vec3(-dx * u_normalScale, 1.0, -dy * u_normalScale));
141
- vec2 refractedUv = clamp(
142
- v_uv + normal.xz * u_refractionStrength * 0.025,
142
+ vec2 backgroundUv = (v_uv - vec2(0.5)) * u_backgroundScale + vec2(0.5);
143
+ vec2 refractedUv = (
144
+ v_uv + normal.xz * u_refractionStrength * 0.025 - vec2(0.5)
145
+ ) * u_backgroundScale + vec2(0.5);
146
+ vec2 textureBounds =
147
+ step(vec2(0.0), backgroundUv) * step(backgroundUv, vec2(1.0));
148
+ float textureAlpha = textureBounds.x * textureBounds.y;
149
+ refractedUv = clamp(
150
+ refractedUv,
143
151
  vec2(0.001),
144
152
  vec2(0.999)
145
153
  );
@@ -230,7 +238,7 @@ void main() {
230
238
  }
231
239
 
232
240
  vec3 color = base + highlight - vec3(0.015, 0.055, 0.070) * visibleTrough * 0.45;
233
- gl_FragColor = vec4(color, 1.0);
241
+ gl_FragColor = vec4(color, textureAlpha);
234
242
  }
235
- `;class Ze{constructor(e,n=()=>{}){m(this,"gl");m(this,"isWebGL2");m(this,"canLinearFloat");m(this,"quadBuffer");m(this,"simulationProgram");m(this,"materialProgram");m(this,"backgroundTexture");m(this,"causticTexture");m(this,"stateTextures");m(this,"framebuffers");m(this,"readIndex",0);m(this,"simWidth",1);m(this,"simHeight",1);m(this,"cssWidth",1);m(this,"cssHeight",1);m(this,"textureSource");m(this,"textureImage");m(this,"textureReady",!1);m(this,"textureNeedsUpload",!1);m(this,"activityPixels");m(this,"wakeAUniforms",new Float32Array(Z*4));m(this,"wakeBUniforms",new Float32Array(Z*4));m(this,"wakeShapeUniforms",new Float32Array(Z*4));this.canvas=e,this.requestRender=n;const{gl:t,isWebGL2:i,canLinearFloat:a}=et(e);this.gl=t,this.isWebGL2=i,this.canLinearFloat=a,this.quadBuffer=q(t.createBuffer(),"WebGL buffer"),this.simulationProgram=Fe(t,be,$e),this.materialProgram=Fe(t,be,Qe),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,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,p=d>=1?s:Math.max(1,Math.round(s*d)),_=d>=1?Math.max(1,Math.round(s/d)):s;p===this.simWidth&&_===this.simHeight||(this.simWidth=p,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 n=new Image;n.crossOrigin="anonymous",n.onload=()=>{this.textureSource===e&&(this.textureImage=n,this.textureNeedsUpload=!0,this.requestRender())},n.onerror=()=>{this.textureSource===e&&(this.textureImage=void 0,this.textureReady=!1,this.textureNeedsUpload=!1)},n.src=e}step(e,n,t){if(!this.stateTextures||!this.framebuffers)return;const i=this.gl,a=1-this.readIndex;i.useProgram(this.simulationProgram.program),i.bindFramebuffer(i.FRAMEBUFFER,this.framebuffers[a]),i.viewport(0,0,this.simWidth,this.simHeight),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,this.stateTextures[this.readIndex]),this.prepareQuad(this.simulationProgram),this.setSimulationUniforms(e,n,t),i.drawArrays(i.TRIANGLE_STRIP,0,4),i.bindFramebuffer(i.FRAMEBUFFER,null),this.readIndex=a}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"&&!this.textureReady)&&(t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.stateTextures[this.readIndex]),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,this.backgroundTexture),t.activeTexture(t.TEXTURE2),t.bindTexture(t.TEXTURE_2D,this.causticTexture),this.prepareQuad(this.materialProgram),this.setMaterialUniforms(e,n),t.drawArrays(t.TRIANGLE_STRIP,0,4)))}hasVisibleActivity(){if(!this.framebuffers)return!1;const e=this.gl,n=this.framebuffers[this.readIndex],t=this.simWidth*this.simHeight*4;(!this.activityPixels||this.activityPixels.length!==t)&&(this.activityPixels=new Float32Array(t)),e.bindFramebuffer(e.FRAMEBUFFER,n);try{e.readPixels(0,0,this.simWidth,this.simHeight,e.RGBA,e.FLOAT,this.activityPixels)}finally{e.bindFramebuffer(e.FRAMEBUFFER,null)}return rt(this.activityPixels,this.simWidth,this.simHeight)}clear(){const e=this.gl;if(this.framebuffers){e.viewport(0,0,this.simWidth,this.simHeight);for(const n of this.framebuffers)e.bindFramebuffer(e.FRAMEBUFFER,n),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT)}e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,this.canvas.width,this.canvas.height),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT)}dispose(){var n,t;const e=this.gl;(n=this.stateTextures)==null||n.forEach(i=>e.deleteTexture(i)),(t=this.framebuffers)==null||t.forEach(i=>e.deleteFramebuffer(i)),e.deleteTexture(this.backgroundTexture),e.deleteTexture(this.causticTexture),e.deleteBuffer(this.quadBuffer),e.deleteProgram(this.simulationProgram.program),e.deleteProgram(this.materialProgram.program)}recreateState(){var l,c;const e=this.gl;(l=this.stateTextures)==null||l.forEach(s=>e.deleteTexture(s)),(c=this.framebuffers)==null||c.forEach(s=>e.deleteFramebuffer(s));const 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");if(e.bindTexture(e.TEXTURE_2D,n),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 t=e;t.texImage2D(t.TEXTURE_2D,0,t.RGBA32F,this.simWidth,this.simHeight,0,t.RGBA,t.FLOAT,null)}else e.texImage2D(e.TEXTURE_2D,0,e.RGBA,this.simWidth,this.simHeight,0,e.RGBA,e.FLOAT,null);return n}createFramebuffer(e){const n=this.gl,t=q(n.createFramebuffer(),"WebGL framebuffer");if(n.bindFramebuffer(n.FRAMEBUFFER,t),n.framebufferTexture2D(n.FRAMEBUFFER,n.COLOR_ATTACHMENT0,n.TEXTURE_2D,e,0),n.checkFramebufferStatus(n.FRAMEBUFFER)!==n.FRAMEBUFFER_COMPLETE)throw new Error("WaterDistortion could not create a float simulation target.");return n.bindFramebuffer(n.FRAMEBUFFER,null),t}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,Je()),e.generateMipmap(e.TEXTURE_2D)}uploadTextureIfNeeded(e){if(e.mode==="dom"||!this.textureImage||!this.textureNeedsUpload&&!tt(this.textureImage))return;const n=this.gl;try{n.bindTexture(n.TEXTURE_2D,this.backgroundTexture),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,1),n.texImage2D(n.TEXTURE_2D,0,n.RGBA,n.RGBA,n.UNSIGNED_BYTE,this.textureImage),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,0),this.textureReady=!0,this.textureNeedsUpload=!1}catch{this.textureReady=!1,this.textureNeedsUpload=!1}}prepareQuad(e){const n=this.gl;n.bindBuffer(n.ARRAY_BUFFER,this.quadBuffer),n.enableVertexAttribArray(e.position),n.vertexAttribPointer(e.position,2,n.FLOAT,!1,0,0)}setSimulationUniforms(e,n,t){const i=this.gl,a=this.simulationProgram.program,l=Math.min(e.length,Z),c=this.wakeAUniforms,s=this.wakeBUniforms,d=this.wakeShapeUniforms,p=Math.max(0,e.length-Z);c.fill(0),s.fill(0),d.fill(0);for(let _=0;_<l;_+=1){const g=e[p+_],x=_*4;c[x]=g.ax,c[x+1]=g.ay,c[x+2]=g.radius,c[x+3]=g.wakeStrength,s[x]=g.bx,s[x+1]=g.by,s[x+2]=g.wakeLength,s[x+3]=g.velocity,d[x]=g.troughStrength,d[x+1]=g.ridgeStrength,d[x+2]=g.ridgeOffset}i.uniform1i(T(i,a,"u_state"),0),i.uniform2f(T(i,a,"u_texel"),1/this.simWidth,1/this.simHeight),i.uniform1f(T(i,a,"u_delta"),t),i.uniform1f(T(i,a,"u_damping"),n.damping),i.uniform1f(T(i,a,"u_stiffness"),n.waveSpeed),i.uniform1f(T(i,a,"u_aspect"),this.cssWidth/this.cssHeight),i.uniform1i(T(i,a,"u_wakeCount"),l),i.uniform4fv(T(i,a,"u_wakeA[0]"),c),i.uniform4fv(T(i,a,"u_wakeB[0]"),s),i.uniform4fv(T(i,a,"u_wakeShape[0]"),d)}setMaterialUniforms(e,n){const t=this.gl,i=this.materialProgram.program;t.uniform1i(T(t,i,"u_state"),0),t.uniform1i(T(t,i,"u_background"),1),t.uniform1i(T(t,i,"u_causticMap"),2),t.uniform2f(T(t,i,"u_texel"),1/this.simWidth,1/this.simHeight),t.uniform1f(T(t,i,"u_domMode"),e.mode==="dom"?1:0),t.uniform1f(T(t,i,"u_normalScale"),e.normalScale),t.uniform1f(T(t,i,"u_refractionStrength"),e.refractionStrength),t.uniform1f(T(t,i,"u_specularIntensity"),e.specularIntensity),t.uniform1f(T(t,i,"u_crestIntensity"),e.crestIntensity),t.uniform1f(T(t,i,"u_causticIntensity"),e.causticIntensity),t.uniform1f(T(t,i,"u_time"),n%1e3)}}function Je(){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+.5)/C,i=(e+.5)/C,a=Math.round(ce(t,i,0)*255),l=Math.round(ce(t,i,11)*255),c=Math.round(ce(t,i,23)*255),s=Math.round(ce(t,i,37)*255),d=(e*C+n)*4;r[d]=a,r[d+1]=l,r[d+2]=c,r[d+3]=s}return r}function ce(r,e,n){const t=Math.sin(se*(e*2+n*.013))*.12+Math.sin(se*(r*3+e+n*.021))*.06,i=Math.cos(se*(r*2+n*.017))*.12+Math.sin(se*(e*3-r+n*.019))*.06,a=r*oe+t,l=e*oe+i,c=Math.floor(a),s=Math.floor(l);let d=Number.POSITIVE_INFINITY,p=Number.POSITIVE_INFINITY,_=0,g=0;for(let P=-1;P<=1;P+=1)for(let D=-1;D<=1;D+=1){const k=c+D,B=s+P,M=Ae(k,oe),I=Ae(B,oe),z=k+.16+fe(M,I,n)*.68,N=B+.16+fe(M,I,n+1)*.68,U=Math.hypot(a-z,l-N);U<d?(p=d,d=U,_=M,g=I):U<p&&(p=U)}const x=p-d,A=1-Ie(.025,.13,x),w=1-Ie(.08,.34,x),W=.74+fe(_,g,n+2)*.26,H=A*A*.58+w*.34;return Ce(Math.pow(H*W,1.12))}function fe(r,e,n){const t=Math.sin(r*127.1+e*311.7+n*74.7)*43758.5453123;return t-Math.floor(t)}function Ae(r,e){return(r%e+e)%e}function Ie(r,e,n){const t=Ce((n-r)/(e-r));return t*t*(3-t*2)}function Ce(r){return Math.min(1,Math.max(0,r))}function et(r){const e={alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!1,preserveDrawingBuffer:!1},n=r.getContext("webgl2",e);if(n){if(!n.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float render targets.");return{gl:n,isWebGL2:!0,canLinearFloat:!!n.getExtension("OES_texture_float_linear")}}const t=r.getContext("webgl",e)||r.getContext("experimental-webgl",e);if(!t)throw new Error("WaterDistortion requires WebGL.");if(!t.getExtension("OES_texture_float")||!t.getExtension("WEBGL_color_buffer_float")&&!t.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float texture support.");return{gl:t,isWebGL2:!1,canLinearFloat:!!t.getExtension("OES_texture_float_linear")}}function Fe(r,e,n){const t=Le(r,r.VERTEX_SHADER,e),i=Le(r,r.FRAGMENT_SHADER,n),a=q(r.createProgram(),"WebGL program");if(r.attachShader(a,t),r.attachShader(a,i),r.linkProgram(a),r.deleteShader(t),r.deleteShader(i),!r.getProgramParameter(a,r.LINK_STATUS)){const c=r.getProgramInfoLog(a)||"Unknown shader link error.";throw r.deleteProgram(a),new Error(c)}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 Le(r,e,n){const t=q(r.createShader(e),"WebGL shader");if(r.shaderSource(t,n),r.compileShader(t),!r.getShaderParameter(t,r.COMPILE_STATUS)){const i=r.getShaderInfoLog(t)||"Unknown shader compile error.";throw r.deleteShader(t),new Error(i)}return t}function T(r,e,n){const t=r.getUniformLocation(e,n);if(!t)throw new Error(`WaterDistortion could not bind uniform ${n}.`);return t}function q(r,e){if(!r)throw new Error(`WaterDistortion could not create ${e}.`);return r}function tt(r){return typeof HTMLCanvasElement<"u"&&r instanceof HTMLCanvasElement||typeof HTMLVideoElement<"u"&&r instanceof HTMLVideoElement||typeof OffscreenCanvas<"u"&&r instanceof OffscreenCanvas}function rt(r,e,n,t=je){const i=Math.max(0,Math.floor(e)),a=Math.max(0,Math.floor(n));if(i===0||a===0)return!1;const l=(c,s)=>r[(s*i+c)*4]??0;for(let c=0;c<a;c+=1)for(let s=0;s<i;s+=1){const d=(c*i+s)*4,p=r[d]??0,_=r[d+1]??0;if(p<-t.trough||Math.abs(_)>t.velocity)return!0;const g=s>0?l(s-1,c):p,x=s<i-1?l(s+1,c):p,A=c>0?l(s,c-1):p,w=c<a-1?l(s,c+1):p,W=Math.hypot(x-g,w-A),H=Math.abs(g+x+A+w-p*4);if(W>t.gradient||H>t.curvature)return!0}return!1}const L={width:1,height:1,interactionRadius:25,wakeStrength:.54,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18},nt=24;function me(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(.01,r.velocityScale??L.velocityScale),velocityClamp:Math.max(.05,r.velocityClamp??L.velocityClamp),cursorSmoothing:h(r.cursorSmoothing??L.cursorSmoothing,0,.9),segmentSpacing:Math.max(1,r.segmentSpacing??L.segmentSpacing)}}function ke(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}))}class it{constructor(e={}){m(this,"options");m(this,"previous");m(this,"smoothedVelocity",0);m(this,"disturbances",[]);this.options=me(e)}configure(e){this.options=me({...this.options,...e})}reset(){this.previous=void 0,this.smoothedVelocity=0,this.disturbances.length=0}addSample(e){this.disturbances.length=0;const n=this.clampSample(e),t=this.previous;if(!t)return this.previous=n,this.disturbances;n.time<=t.time&&(n.time=t.time+.01);const i=this.smoothSample(t,n),a=Ve(t,i);if(a<.35)return this.previous=i,this.disturbances;const l=a/Math.max(.01,i.time-t.time),c=h(1-this.options.cursorSmoothing,.12,1);this.smoothedVelocity=O(this.smoothedVelocity,l,c),this.previous=i;const s=Math.min(nt,Math.max(1,Math.ceil(a/this.options.segmentSpacing)));for(let d=0;d<s;d+=1){const p=d/s,_=(d+1)/s;this.disturbances.push(ge(De(t,i,p),De(t,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,n){const t=1-this.options.cursorSmoothing;return{x:O(e.x,n.x,t),y:O(e.y,n.y,t),time:n.time}}}function ge(r,e,n,t){const i=me(t),a=h(n*i.velocityScale/i.velocityClamp,0,1),l=h(r.y/i.height,0,1),c=h(e.y/i.height,0,1),s=i.wakeLength*O(.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(.18,1,a),troughStrength:i.troughStrength,ridgeStrength:i.ridgeStrength,ridgeOffset:i.ridgeOffset/i.height,wakeLength:s/i.height,velocity:a}}function De(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 at(r){const e=h(r,.85,.998),n=Math.ceil(Math.log(.012)/Math.log(e));return h(n*(1e3/60),900,5200)}const E={mode:"texture",damping:.98,waveSpeed:.4,normalScale:20,refractionStrength:.7,specularIntensity:1,crestIntensity:.2,causticIntensity:0,simulationResolution:192,wakeStrength:.54,interactionRadius:25,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18,idleTimeout:900,interactionMode:"move",runInBackground:!1,pauseKey:void 0},G=1e3/60,ot=4,Ue=360,Pe=24,st=200;function ct(r){return r instanceof Element&&r.closest("a, button, input, select, textarea, [contenteditable]:not([contenteditable=false])")!==null}function ut(r){const e=r.strength===void 0?void 0:r.strength/48;return{mode:r.mode??E.mode,texture:r.texture,damping:h(r.damping??r.dissipation??E.damping,.85,.998),waveSpeed:h(r.waveSpeed??E.waveSpeed,.05,1),normalScale:h(r.normalScale??E.normalScale,1,80),refractionStrength:h(r.refractionStrength??E.refractionStrength,0,2.5),specularIntensity:h(r.specularIntensity??E.specularIntensity,0,3),crestIntensity:h(r.crestIntensity??E.crestIntensity,0,3),causticIntensity:h(r.causticIntensity??E.causticIntensity,0,3),simulationResolution:h(Math.round(r.simulationResolution??E.simulationResolution),64,384),wakeStrength:h(r.wakeStrength??r.rippleStrength??e??E.wakeStrength,0,3),interactionRadius:h(r.interactionRadius??E.interactionRadius,2,80),troughStrength:h(r.troughStrength??E.troughStrength,0,3),ridgeStrength:h(r.ridgeStrength??E.ridgeStrength,0,3),ridgeOffset:h(r.ridgeOffset??E.ridgeOffset,0,80),wakeLength:h(r.wakeLength??E.wakeLength,1,240),velocityScale:h(r.velocityScale??E.velocityScale,.01,4),velocityClamp:h(r.velocityClamp??E.velocityClamp,.05,8),cursorSmoothing:h(r.cursorSmoothing??E.cursorSmoothing,0,.9),segmentSpacing:h(r.segmentSpacing??E.segmentSpacing,1,96),idleTimeout:Math.max(120,r.idleTimeout??E.idleTimeout),interactionMode:r.interactionMode??E.interactionMode,runInBackground:r.runInBackground??E.runInBackground,pauseKey:r.pauseKey||E.pauseKey}}function Be(r,e,n){const t=h(r.x,0,1)*n.width,i=h(r.y,0,1)*n.height,a=Math.max(.5,e.interactionRadius*.08),l=e.velocityClamp/e.velocityScale,c={...e,width:n.width,height:n.height,wakeLength:e.interactionRadius*1.5};return[ge({x:t-a,y:i},{x:t+a,y:i},l,c),ge({x:t,y:i-a},{x:t,y:i+a},l,c)]}function lt(r){const[e,n]=f.useState(!1);return f.useEffect(()=>{if(!r||typeof window>"u"||!window.matchMedia){n(!1);return}const t=window.matchMedia("(prefers-reduced-motion: reduce)");n(t.matches);const i=a=>{n(a.matches)};return t.addEventListener("change",i),()=>{t.removeEventListener("change",i)}},[r]),e}const We=f.forwardRef(function(e,n){const{underlay:t,children:i,foreground:a,className:l,style:c,reducedMotion:s="respect"}=e,d=f.useRef(null),p=f.useRef(null),_=f.useRef(null),g=f.useRef(new it),x=f.useRef(null),A=f.useRef(null),w=f.useRef(()=>{}),W=f.useRef(()=>{}),H=f.useRef(()=>{}),P=f.useRef([]),D=f.useRef(!0),k=f.useRef(!0),B=f.useRef(!1),M=f.useRef(!1),I=f.useRef(null),z=f.useRef(0),N=f.useRef(0),U=f.useRef(0),y=ut(e),v=f.useRef(y),V=f.useRef({width:1,height:1}),Ne=lt(s==="respect"),ue=s==="disable"||s==="respect"&&Ne,Xe=a??i;v.current=y,f.useImperativeHandle(n,()=>({triggerRipple(S){B.current||M.current||H.current(Be(S,v.current,V.current))}}),[]),f.useEffect(()=>{var S;B.current=ue,ue&&(g.current.reset(),I.current=null,P.current=[],z.current=0,N.current=0,U.current=0,(S=_.current)==null||S.clear()),w.current()},[ue]),f.useEffect(()=>{const S=_.current;if(!S)return;const{width:K,height:b}=V.current;S.resize(K,b,window.devicePixelRatio,y.simulationResolution),S.setTextureSource(y.texture),w.current()},[y.mode,y.texture,y.damping,y.waveSpeed,y.normalScale,y.refractionStrength,y.specularIntensity,y.crestIntensity,y.causticIntensity,y.simulationResolution]),f.useEffect(()=>{const S=d.current,K=p.current;if(!S||!K)return;k.current=typeof document.hasFocus=="function"?document.hasFocus():!0;let b=null,ne,J=G,ve=!1,ee;const Y=()=>{x.current!==null&&(window.cancelAnimationFrame(x.current),x.current=null),A.current!==null&&(window.clearTimeout(A.current),A.current=null)},Oe=(o,u)=>{g.current.configure({width:o,height:u,interactionRadius:v.current.interactionRadius,wakeStrength:v.current.wakeStrength,troughStrength:v.current.troughStrength,ridgeStrength:v.current.ridgeStrength,ridgeOffset:v.current.ridgeOffset,wakeLength:v.current.wakeLength,velocityScale:v.current.velocityScale,velocityClamp:v.current.velocityClamp,cursorSmoothing:v.current.cursorSmoothing,segmentSpacing:v.current.segmentSpacing})},He=(o,u)=>{const F=Math.max(1,o),R=Math.max(1,u);V.current={width:F,height:R},Oe(F,R),b==null||b.resize(F,R,window.devicePixelRatio,v.current.simulationResolution)},xe=()=>{b==null||b.render(v.current,performance.now()*.001)},X=()=>{ne=void 0,J=G},te=()=>{Y(),g.current.reset(),I.current=null,X(),ee===void 0&&(ee=performance.now())},j=()=>{const o=v.current;let u=!1;if(!(!B.current&&!M.current&&D.current&&(o.runInBackground||!document.hidden&&k.current))){X();return}if(ee!==void 0){const R=performance.now()-ee;z.current+=R,N.current+=R,U.current+=R,ee=void 0,u=!0}(!o.runInBackground||u)&&X(),xe(),w.current()},Ee=o=>{x.current=null;const u=v.current;if(!b||M.current||!D.current||!u.runInBackground&&(document.hidden||!k.current)){X();return}if(B.current){P.current=[],b.render(u,o*.001),X();return}const F=u.runInBackground?Ue:ot,R=ne===void 0?G:h(o-ne,0,u.runInBackground?G*Ue:64);ne=o,J=Math.min(J+R,G*F);let Q=P.current.splice(0),Me=0;for(;J>=G&&Me<F;)b.step(Q,u,1),Q=[],J-=G,Me+=1;if(b.render(u,o*.001),P.current.length>0){w.current();return}if(o<z.current){w.current();return}if(ve){o<N.current?w.current():X();return}if(o<U.current){w.current();return}try{b.hasVisibleActivity()?(U.current=o+st,w.current()):X()}catch{ve=!0,o<N.current?w.current():X()}},le=()=>{M.current||x.current!==null||A.current!==null||(v.current.runInBackground&&document.hidden?A.current=window.setTimeout(()=>{A.current=null,Ee(performance.now())},G):x.current=window.requestAnimationFrame(Ee))};w.current=le;try{b=new Ze(K,()=>{w.current()}),_.current=b,b.setTextureSource(v.current.texture)}catch{return K.style.display="none",_.current=null,w.current=()=>{},()=>{}}const ie=()=>{const o=K.getBoundingClientRect();return He(o.width,o.height),o},ze=()=>{ie(),xe()},he=o=>{if(M.current||o.length===0)return;const u=P.current;for(const Q of o)u.push(Q);u.length>Pe&&u.splice(0,u.length-Pe);const R=performance.now()+v.current.idleTimeout;z.current=Math.max(z.current,R),N.current=Math.max(N.current,R+at(v.current.damping)),U.current=0,le()};H.current=he;const pe=o=>{const u=v.current;if(B.current||M.current||!D.current||u.interactionMode==="event"||!u.runInBackground&&(document.hidden||!k.current)||o.pointerType==="touch"&&!o.isPrimary)return;g.current.reset();const F=ie(),[R]=ke(o,F,performance.now());R&&((u.interactionMode==="click"||u.interactionMode==="drag")&&he(Be({x:R.x/V.current.width,y:R.y/V.current.height},u,V.current)),u.interactionMode==="drag"?(I.current=o.pointerId,g.current.addSample(R)):u.interactionMode==="move"&&g.current.addSample(R))},_e=o=>{const u=v.current;if(B.current||M.current||!D.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=ie(),R=ke(o,F,performance.now());for(const Q of R)he(g.current.addSample(Q))},$=o=>{I.current!==null&&I.current!==o.pointerId||(I.current=null,g.current.reset())},Se=o=>{const u=v.current.pauseKey;!u||o.code!==u||o.repeat||o.altKey||o.ctrlKey||o.metaKey||ct(o.target)||(o.preventDefault(),M.current=!M.current,M.current?te():(Y(),j()))},Te=()=>{Y(),document.hidden&&!v.current.runInBackground?te():j()},Re=()=>{k.current=!1,v.current.runInBackground?(Y(),j()):te()},ye=()=>{k.current=!0,Y(),j()},Ke=()=>{Y(),!v.current.runInBackground&&(document.hidden||!k.current)?te():j()};W.current=Ke,ze();const we=new ResizeObserver(()=>{ie(),le()});we.observe(K);let re;return"IntersectionObserver"in window&&(re=new IntersectionObserver(o=>{const u=o[0];D.current=u?u.isIntersecting:!0,D.current?j():te()}),re.observe(S)),S.addEventListener("pointerdown",pe,{passive:!0}),S.addEventListener("pointermove",_e,{passive:!0}),S.addEventListener("pointerup",$,{passive:!0}),S.addEventListener("pointerleave",$,{passive:!0}),S.addEventListener("pointercancel",$,{passive:!0}),window.addEventListener("blur",Re),window.addEventListener("focus",ye),document.addEventListener("keydown",Se),document.addEventListener("visibilitychange",Te),()=>{var o;Y(),we.disconnect(),re==null||re.disconnect(),S.removeEventListener("pointerdown",pe),S.removeEventListener("pointermove",_e),S.removeEventListener("pointerup",$),S.removeEventListener("pointerleave",$),S.removeEventListener("pointercancel",$),window.removeEventListener("blur",Re),window.removeEventListener("focus",ye),document.removeEventListener("keydown",Se),document.removeEventListener("visibilitychange",Te),(o=_.current)==null||o.dispose(),_.current=null,w.current=()=>{},W.current=()=>{},H.current=()=>{}}},[]),f.useEffect(()=>{g.current.reset(),I.current=null},[y.interactionMode]),f.useEffect(()=>{W.current()},[y.runInBackground]),f.useEffect(()=>{!y.pauseKey&&M.current&&(M.current=!1,W.current())},[y.pauseKey]);const Ge={...c,position:"relative",overflow:"hidden",isolation:"isolate"};return ae.jsxs("div",{ref:d,className:l,style:Ge,children:[t?ae.jsx("div",{style:{position:"absolute",inset:0,zIndex:0,pointerEvents:"none",transform:"translateZ(0)"},children:t}):null,ae.jsx("canvas",{ref:p,"aria-hidden":"true",style:{position:"absolute",inset:0,zIndex:1,width:"100%",height:"100%",pointerEvents:"none",mixBlendMode:y.mode==="dom"?"screen":"normal"}}),ae.jsx("div",{style:{position:"relative",zIndex:2},children:Xe})]})}),ht=We;exports.WaterDistortion=We;exports.WaterLayer=ht;
243
+ `;class Je{constructor(e,n=()=>{}){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,"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));this.canvas=e,this.requestRender=n;const{gl:t,isWebGL2:i,canLinearFloat:a}=nt(e);this.gl=t,this.isWebGL2=i,this.canLinearFloat=a,this.quadBuffer=V(t.createBuffer(),"WebGL buffer"),this.simulationProgram=ke(t,Ie,Qe),this.materialProgram=ke(t,Ie,Ze),this.backgroundTexture=V(t.createTexture(),"WebGL texture"),this.causticTexture=V(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,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)),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(q,Math.round(i)),h=this.cssWidth/this.cssHeight;let x=c,E=c;h>=1?(E=Math.round(c/h),E<q&&(E=q,x=Math.round(q*h))):(x=Math.round(c*h),x<q&&(x=q,E=Math.round(q/h))),!(x===this.simWidth&&E===this.simHeight)&&(this.simWidth=x,this.simHeight=E,this.recreateState())}setTextureSource(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;return}const n=new Image;n.crossOrigin="anonymous",n.onload=()=>{this.textureSource===e&&(this.textureImage=n,this.textureNeedsUpload=!0,this.requestRender())},n.onerror=()=>{this.textureSource===e&&(this.textureImage=void 0,this.textureReady=!1,this.textureNeedsUpload=!1)},n.src=e}step(e,n,t){if(!this.stateTextures||!this.framebuffers)return;const i=this.gl,a=1-this.readIndex;i.useProgram(this.simulationProgram.program),i.bindFramebuffer(i.FRAMEBUFFER,this.framebuffers[a]),i.viewport(0,0,this.simWidth,this.simHeight),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,this.stateTextures[this.readIndex]),this.prepareQuad(this.simulationProgram),this.setSimulationUniforms(e,n,t),i.drawArrays(i.TRIANGLE_STRIP,0,4),i.bindFramebuffer(i.FRAMEBUFFER,null),this.readIndex=a}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"&&!this.textureReady)&&(t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.stateTextures[this.readIndex]),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,this.backgroundTexture),t.activeTexture(t.TEXTURE2),t.bindTexture(t.TEXTURE_2D,this.causticTexture),this.prepareQuad(this.materialProgram),this.setMaterialUniforms(e,n),t.drawArrays(t.TRIANGLE_STRIP,0,4)))}hasVisibleActivity(){if(!this.framebuffers)return!1;const e=this.gl,n=this.framebuffers[this.readIndex],t=this.simWidth*this.simHeight*4;(!this.activityPixels||this.activityPixels.length!==t)&&(this.activityPixels=new Float32Array(t)),e.bindFramebuffer(e.FRAMEBUFFER,n);try{e.readPixels(0,0,this.simWidth,this.simHeight,e.RGBA,e.FLOAT,this.activityPixels)}finally{e.bindFramebuffer(e.FRAMEBUFFER,null)}return at(this.activityPixels,this.simWidth,this.simHeight)}clear(){const e=this.gl;if(this.framebuffers){e.viewport(0,0,this.simWidth,this.simHeight);for(const n of this.framebuffers)e.bindFramebuffer(e.FRAMEBUFFER,n),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT)}e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,this.canvas.width,this.canvas.height),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT)}dispose(){var n,t;const e=this.gl;(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 s,u;const e=this.gl;(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=V(e.createTexture(),"WebGL texture");if(e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,this.canLinearFloat?e.LINEAR:e.NEAREST),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 t=e;t.texImage2D(t.TEXTURE_2D,0,t.RGBA32F,this.simWidth,this.simHeight,0,t.RGBA,t.FLOAT,null)}else e.texImage2D(e.TEXTURE_2D,0,e.RGBA,this.simWidth,this.simHeight,0,e.RGBA,e.FLOAT,null);return n}createFramebuffer(e){const n=this.gl,t=V(n.createFramebuffer(),"WebGL framebuffer");if(n.bindFramebuffer(n.FRAMEBUFFER,t),n.framebufferTexture2D(n.FRAMEBUFFER,n.COLOR_ATTACHMENT0,n.TEXTURE_2D,e,0),n.checkFramebufferStatus(n.FRAMEBUFFER)!==n.FRAMEBUFFER_COMPLETE)throw new Error("WaterDistortion could not create a float simulation target.");return n.bindFramebuffer(n.FRAMEBUFFER,null),t}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,rt()),e.generateMipmap(e.TEXTURE_2D)}uploadTextureIfNeeded(e){if(e.mode==="dom"||!this.textureImage||!this.textureNeedsUpload&&!it(this.textureImage))return;const n=this.gl;try{n.bindTexture(n.TEXTURE_2D,this.backgroundTexture),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,1),n.texImage2D(n.TEXTURE_2D,0,n.RGBA,n.RGBA,n.UNSIGNED_BYTE,this.textureImage),n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL,0),[this.textureWidth,this.textureHeight]=tt(this.textureImage),this.textureReady=!0,this.textureNeedsUpload=!1}catch{this.textureReady=!1,this.textureNeedsUpload=!1,this.textureWidth=0,this.textureHeight=0}}prepareQuad(e){const n=this.gl;n.bindBuffer(n.ARRAY_BUFFER,this.quadBuffer),n.enableVertexAttribArray(e.position),n.vertexAttribPointer(e.position,2,n.FLOAT,!1,0,0)}setSimulationUniforms(e,n,t){const i=this.gl,a=this.simulationProgram.program,s=Math.min(e.length,J),u=this.wakeAUniforms,c=this.wakeBUniforms,h=this.wakeShapeUniforms,x=Math.max(0,e.length-J);u.fill(0),c.fill(0),h.fill(0);for(let E=0;E<s;E+=1){const g=e[x+E],p=E*4;u[p]=g.ax,u[p+1]=g.ay,u[p+2]=g.radius,u[p+3]=g.wakeStrength,c[p]=g.bx,c[p+1]=g.by,c[p+2]=g.wakeLength,c[p+3]=g.velocity,h[p]=g.troughStrength,h[p+1]=g.ridgeStrength,h[p+2]=g.ridgeOffset}i.uniform1i(S(i,a,"u_state"),0),i.uniform2f(S(i,a,"u_texel"),1/this.simWidth,1/this.simHeight),i.uniform1f(S(i,a,"u_delta"),t),i.uniform1f(S(i,a,"u_damping"),n.damping),i.uniform1f(S(i,a,"u_stiffness"),n.waveSpeed),i.uniform1f(S(i,a,"u_aspect"),this.cssWidth/this.cssHeight),i.uniform1i(S(i,a,"u_wakeCount"),s),i.uniform4fv(S(i,a,"u_wakeA[0]"),u),i.uniform4fv(S(i,a,"u_wakeB[0]"),c),i.uniform4fv(S(i,a,"u_wakeShape[0]"),h)}setMaterialUniforms(e,n){const t=this.gl,i=this.materialProgram.program,[a,s]=et(e.textureFit,this.textureWidth,this.textureHeight,this.cssWidth,this.cssHeight);t.uniform1i(S(t,i,"u_state"),0),t.uniform1i(S(t,i,"u_background"),1),t.uniform1i(S(t,i,"u_causticMap"),2),t.uniform2f(S(t,i,"u_texel"),1/this.simWidth,1/this.simHeight),t.uniform2f(S(t,i,"u_backgroundScale"),a,s),t.uniform1f(S(t,i,"u_domMode"),e.mode==="dom"?1:0),t.uniform1f(S(t,i,"u_normalScale"),e.normalScale),t.uniform1f(S(t,i,"u_refractionStrength"),e.refractionStrength),t.uniform1f(S(t,i,"u_specularIntensity"),e.specularIntensity),t.uniform1f(S(t,i,"u_crestIntensity"),e.crestIntensity),t.uniform1f(S(t,i,"u_causticIntensity"),e.causticIntensity),t.uniform1f(S(t,i,"u_time"),n%1e3)}}function et(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 tt(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 rt(){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+.5)/C,i=(e+.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*.013))*.12+Math.sin(se*(r*3+e+n*.021))*.06,i=Math.cos(se*(r*2+n*.017))*.12+Math.sin(se*(e*3-r+n*.019))*.06,a=r*oe+t,s=e*oe+i,u=Math.floor(a),c=Math.floor(s);let h=Number.POSITIVE_INFINITY,x=Number.POSITIVE_INFINITY,E=0,g=0;for(let P=-1;P<=1;P+=1)for(let U=-1;U<=1;U+=1){const k=u+U,B=c+P,b=Fe(k,oe),I=Fe(B,oe),z=k+.16+me(b,I,n)*.68,W=B+.16+me(b,I,n+1)*.68,D=Math.hypot(a-z,s-W);D<h?(x=h,h=D,E=b,g=I):D<x&&(x=D)}const p=x-h,A=1-Le(.025,.13,p),w=1-Le(.08,.34,p),N=.74+me(E,g,n+2)*.26,H=A*A*.58+w*.34;return We(Math.pow(H*N,1.12))}function me(r,e,n){const t=Math.sin(r*127.1+e*311.7+n*74.7)*43758.5453123;return t-Math.floor(t)}function Fe(r,e){return(r%e+e)%e}function Le(r,e,n){const t=We((n-r)/(e-r));return t*t*(3-t*2)}function We(r){return Math.min(1,Math.max(0,r))}function nt(r){const e={alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!1,preserveDrawingBuffer:!1},n=r.getContext("webgl2",e);if(n){if(!n.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float render targets.");return{gl:n,isWebGL2:!0,canLinearFloat:!!n.getExtension("OES_texture_float_linear")}}const t=r.getContext("webgl",e)||r.getContext("experimental-webgl",e);if(!t)throw new Error("WaterDistortion requires WebGL.");if(!t.getExtension("OES_texture_float")||!t.getExtension("WEBGL_color_buffer_float")&&!t.getExtension("EXT_color_buffer_float"))throw new Error("WaterDistortion requires float texture support.");return{gl:t,isWebGL2:!1,canLinearFloat:!!t.getExtension("OES_texture_float_linear")}}function ke(r,e,n){const t=Ue(r,r.VERTEX_SHADER,e),i=Ue(r,r.FRAGMENT_SHADER,n),a=V(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 u=r.getProgramInfoLog(a)||"Unknown shader link error.";throw r.deleteProgram(a),new Error(u)}const s=r.getAttribLocation(a,"a_position");if(s<0)throw new Error("WaterDistortion could not bind its quad attribute.");return{program:a,position:s}}function Ue(r,e,n){const t=V(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 S(r,e,n){const t=r.getUniformLocation(e,n);if(!t)throw new Error(`WaterDistortion could not bind uniform ${n}.`);return t}function V(r,e){if(!r)throw new Error(`WaterDistortion could not create ${e}.`);return r}function it(r){return typeof HTMLCanvasElement<"u"&&r instanceof HTMLCanvasElement||typeof HTMLVideoElement<"u"&&r instanceof HTMLVideoElement||typeof OffscreenCanvas<"u"&&r instanceof OffscreenCanvas}function at(r,e,n,t=$e){const i=Math.max(0,Math.floor(e)),a=Math.max(0,Math.floor(n));if(i===0||a===0)return!1;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,x=r[h]??0,E=r[h+1]??0;if(x<-t.trough||Math.abs(E)>t.velocity)return!0;const g=c>0?s(c-1,u):x,p=c<i-1?s(c+1,u):x,A=u>0?s(c,u-1):x,w=u<a-1?s(c,u+1):x,N=Math.hypot(p-g,w-A),H=Math.abs(g+p+A+w-x*4);if(N>t.gradient||H>t.curvature)return!0}return!1}const L={width:1,height:1,interactionRadius:25,wakeStrength:.54,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18},ot=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(.01,r.velocityScale??L.velocityScale),velocityClamp:Math.max(.05,r.velocityClamp??L.velocityClamp),cursorSmoothing:d(r.cursorSmoothing??L.cursorSmoothing,0,.9),segmentSpacing:Math.max(1,r.segmentSpacing??L.segmentSpacing)}}function De(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(s=>({x:s.clientX-e.left,y:s.clientY-e.top,time:s.timeStamp+a}))}class st{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 n=this.clampSample(e),t=this.previous;if(!t)return this.previous=n,this.disturbances;n.time<=t.time&&(n.time=t.time+.01);const i=this.smoothSample(t,n),a=je(t,i);if(a<.35)return this.previous=i,this.disturbances;const s=a/Math.max(.01,i.time-t.time),u=d(1-this.options.cursorSmoothing,.12,1);this.smoothedVelocity=O(this.smoothedVelocity,s,u),this.previous=i;const c=Math.min(ot,Math.max(1,Math.ceil(a/this.options.segmentSpacing)));for(let h=0;h<c;h+=1){const x=h/c,E=(h+1)/c;this.disturbances.push(ve(Pe(t,i,x),Pe(t,i,E),this.smoothedVelocity,this.options))}return this.disturbances}clampSample(e){return{x:d(e.x,0,this.options.width),y:d(e.y,0,this.options.height),time:e.time}}smoothSample(e,n){const t=1-this.options.cursorSmoothing;return{x:O(e.x,n.x,t),y:O(e.y,n.y,t),time:n.time}}}function ve(r,e,n,t){const i=ge(t),a=d(n*i.velocityScale/i.velocityClamp,0,1),s=d(r.y/i.height,0,1),u=d(e.y/i.height,0,1),c=i.wakeLength*O(.55,1.35,a);return{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(.18,1,a),troughStrength:i.troughStrength,ridgeStrength:i.ridgeStrength,ridgeOffset:i.ridgeOffset/i.height,wakeLength:c/i.height,velocity:a}}function Pe(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 ct(r){const e=d(r,.85,.998),n=Math.ceil(Math.log(.012)/Math.log(e));return d(n*(1e3/60),900,5200)}const _={mode:"texture",textureFit:"fill",damping:.98,waveSpeed:.4,normalScale:20,refractionStrength:.7,specularIntensity:1,crestIntensity:.2,causticIntensity:0,simulationResolution:192,wakeStrength:.54,interactionRadius:25,troughStrength:.92,ridgeStrength:.46,ridgeOffset:10,wakeLength:84,velocityScale:1,velocityClamp:1.35,cursorSmoothing:.2,segmentSpacing:18,idleTimeout:900,interactionMode:"move",runInBackground:!1,pauseKey:void 0},G=1e3/60,ut=4,Be=360,Ce=24,lt=200;function ht(r){return r instanceof Element&&r.closest("a, button, input, select, textarea, [contenteditable]:not([contenteditable=false])")!==null}function dt(r){const e=r.strength===void 0?void 0:r.strength/48;return{mode:r.mode??_.mode,texture:r.texture,textureFit:r.textureFit??_.textureFit,damping:d(r.damping??r.dissipation??_.damping,.85,.998),waveSpeed:d(r.waveSpeed??_.waveSpeed,.05,1),normalScale:d(r.normalScale??_.normalScale,1,80),refractionStrength:d(r.refractionStrength??_.refractionStrength,0,2.5),specularIntensity:d(r.specularIntensity??_.specularIntensity,0,3),crestIntensity:d(r.crestIntensity??_.crestIntensity,0,3),causticIntensity:d(r.causticIntensity??_.causticIntensity,0,3),simulationResolution:d(Math.round(r.simulationResolution??_.simulationResolution),64,384),wakeStrength:d(r.wakeStrength??r.rippleStrength??e??_.wakeStrength,0,3),interactionRadius:d(r.interactionRadius??_.interactionRadius,2,80),troughStrength:d(r.troughStrength??_.troughStrength,0,3),ridgeStrength:d(r.ridgeStrength??_.ridgeStrength,0,3),ridgeOffset:d(r.ridgeOffset??_.ridgeOffset,0,80),wakeLength:d(r.wakeLength??_.wakeLength,1,240),velocityScale:d(r.velocityScale??_.velocityScale,.01,4),velocityClamp:d(r.velocityClamp??_.velocityClamp,.05,8),cursorSmoothing:d(r.cursorSmoothing??_.cursorSmoothing,0,.9),segmentSpacing:d(r.segmentSpacing??_.segmentSpacing,1,96),idleTimeout:Math.max(120,r.idleTimeout??_.idleTimeout),interactionMode:r.interactionMode??_.interactionMode,runInBackground:r.runInBackground??_.runInBackground,pauseKey:r.pauseKey||_.pauseKey}}function Ne(r,e,n){const t=d(r.x,0,1)*n.width,i=d(r.y,0,1)*n.height,a=Math.max(.5,e.interactionRadius*.08),s=e.velocityClamp/e.velocityScale,u={...e,width:n.width,height:n.height,wakeLength:e.interactionRadius*1.5};return[ve({x:t-a,y:i},{x:t+a,y:i},s,u),ve({x:t,y:i-a},{x:t,y:i+a},s,u)]}function ft(r){const[e,n]=m.useState(!1);return m.useEffect(()=>{if(!r||typeof window>"u"||!window.matchMedia){n(!1);return}const t=window.matchMedia("(prefers-reduced-motion: reduce)");n(t.matches);const i=a=>{n(a.matches)};return t.addEventListener("change",i),()=>{t.removeEventListener("change",i)}},[r]),e}const Xe=m.forwardRef(function(e,n){const{underlay:t,children:i,foreground:a,className:s,style:u,reducedMotion:c="respect"}=e,h=m.useRef(null),x=m.useRef(null),E=m.useRef(null),g=m.useRef(new st),p=m.useRef(null),A=m.useRef(null),w=m.useRef(()=>{}),N=m.useRef(()=>{}),H=m.useRef(()=>{}),P=m.useRef([]),U=m.useRef(!0),k=m.useRef(!0),B=m.useRef(!1),b=m.useRef(!1),I=m.useRef(null),z=m.useRef(0),W=m.useRef(0),D=m.useRef(0),R=dt(e),v=m.useRef(R),j=m.useRef({width:1,height:1}),Ge=ft(c==="respect"),ue=c==="disable"||c==="respect"&&Ge,Oe=a??i;v.current=R,m.useImperativeHandle(n,()=>({triggerRipple(T){B.current||b.current||H.current(Ne(T,v.current,j.current))}}),[]),m.useEffect(()=>{var T;B.current=ue,ue&&(g.current.reset(),I.current=null,P.current=[],z.current=0,W.current=0,D.current=0,(T=E.current)==null||T.clear()),w.current()},[ue]),m.useEffect(()=>{const T=E.current;if(!T)return;const{width:K,height:M}=j.current;T.resize(K,M,window.devicePixelRatio,R.simulationResolution),T.setTextureSource(R.texture),w.current()},[R.mode,R.texture,R.textureFit,R.damping,R.waveSpeed,R.normalScale,R.refractionStrength,R.specularIntensity,R.crestIntensity,R.causticIntensity,R.simulationResolution]),m.useEffect(()=>{const T=h.current,K=x.current;if(!T||!K)return;k.current=typeof document.hasFocus=="function"?document.hasFocus():!0;let M=null,ie,ee=G,xe=!1,te;const Y=()=>{p.current!==null&&(window.cancelAnimationFrame(p.current),p.current=null),A.current!==null&&(window.clearTimeout(A.current),A.current=null)},ze=(o,l)=>{g.current.configure({width:o,height:l,interactionRadius:v.current.interactionRadius,wakeStrength:v.current.wakeStrength,troughStrength:v.current.troughStrength,ridgeStrength:v.current.ridgeStrength,ridgeOffset:v.current.ridgeOffset,wakeLength:v.current.wakeLength,velocityScale:v.current.velocityScale,velocityClamp:v.current.velocityClamp,cursorSmoothing:v.current.cursorSmoothing,segmentSpacing:v.current.segmentSpacing})},Ke=(o,l)=>{const F=Math.max(1,o),y=Math.max(1,l);j.current={width:F,height:y},ze(F,y),M==null||M.resize(F,y,window.devicePixelRatio,v.current.simulationResolution)},Ee=()=>{M==null||M.render(v.current,performance.now()*.001)},X=()=>{ie=void 0,ee=G},re=()=>{Y(),g.current.reset(),I.current=null,X(),te===void 0&&(te=performance.now())},$=()=>{const o=v.current;let l=!1;if(!(!B.current&&!b.current&&U.current&&(o.runInBackground||!document.hidden&&k.current))){X();return}if(te!==void 0){const y=performance.now()-te;z.current+=y,W.current+=y,D.current+=y,te=void 0,l=!0}(!o.runInBackground||l)&&X(),Ee(),w.current()},pe=o=>{p.current=null;const l=v.current;if(!M||b.current||!U.current||!l.runInBackground&&(document.hidden||!k.current)){X();return}if(B.current){P.current=[],M.render(l,o*.001),X();return}const F=l.runInBackground?Be:ut,y=ie===void 0?G:d(o-ie,0,l.runInBackground?G*Be:64);ie=o,ee=Math.min(ee+y,G*F);let Z=P.current.splice(0),Ae=0;for(;ee>=G&&Ae<F;)M.step(Z,l,1),Z=[],ee-=G,Ae+=1;if(M.render(l,o*.001),P.current.length>0){w.current();return}if(o<z.current){w.current();return}if(xe){o<W.current?w.current():X();return}if(o<D.current){w.current();return}try{M.hasVisibleActivity()?(D.current=o+lt,w.current()):X()}catch{xe=!0,o<W.current?w.current():X()}},le=()=>{b.current||p.current!==null||A.current!==null||(v.current.runInBackground&&document.hidden?A.current=window.setTimeout(()=>{A.current=null,pe(performance.now())},G):p.current=window.requestAnimationFrame(pe))};w.current=le;try{M=new Je(K,()=>{w.current()}),E.current=M,M.setTextureSource(v.current.texture)}catch{return K.style.display="none",E.current=null,w.current=()=>{},()=>{}}const he=()=>{const o=K.getBoundingClientRect();return Ke(o.width,o.height),o},_e=()=>{he(),Ee()},de=o=>{if(b.current||o.length===0)return;const l=P.current;for(const Z of o)l.push(Z);l.length>Ce&&l.splice(0,l.length-Ce);const y=performance.now()+v.current.idleTimeout;z.current=Math.max(z.current,y),W.current=Math.max(W.current,y+ct(v.current.damping)),D.current=0,le()};H.current=de;const Se=o=>{const l=v.current;if(B.current||b.current||!U.current||l.interactionMode==="event"||!l.runInBackground&&(document.hidden||!k.current)||o.pointerType==="touch"&&!o.isPrimary)return;g.current.reset();const F=he(),[y]=De(o,F,performance.now());y&&((l.interactionMode==="click"||l.interactionMode==="drag")&&de(Ne({x:y.x/j.current.width,y:y.y/j.current.height},l,j.current)),l.interactionMode==="drag"?(I.current=o.pointerId,g.current.addSample(y)):l.interactionMode==="move"&&g.current.addSample(y))},Te=o=>{const l=v.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=he(),y=De(o,F,performance.now());for(const Z of y)de(g.current.addSample(Z))},Q=o=>{I.current!==null&&I.current!==o.pointerId||(I.current=null,g.current.reset())},Re=o=>{const l=v.current.pauseKey;!l||o.code!==l||o.repeat||o.altKey||o.ctrlKey||o.metaKey||ht(o.target)||(o.preventDefault(),b.current=!b.current,b.current?re():(Y(),$()))},ye=()=>{Y(),document.hidden&&!v.current.runInBackground?re():$()},we=()=>{k.current=!1,v.current.runInBackground?(Y(),$()):re()},be=()=>{k.current=!0,Y(),$()},Ye=()=>{Y(),!v.current.runInBackground&&(document.hidden||!k.current)?re():$()};N.current=Ye,_e();const Me=new ResizeObserver(()=>{_e(),le()});Me.observe(K);let ne;return"IntersectionObserver"in window&&(ne=new IntersectionObserver(o=>{const l=o[0];U.current=l?l.isIntersecting:!0,U.current?$():re()}),ne.observe(T)),T.addEventListener("pointerdown",Se,{passive:!0}),T.addEventListener("pointermove",Te,{passive:!0}),T.addEventListener("pointerup",Q,{passive:!0}),T.addEventListener("pointerleave",Q,{passive:!0}),T.addEventListener("pointercancel",Q,{passive:!0}),window.addEventListener("blur",we),window.addEventListener("focus",be),document.addEventListener("keydown",Re),document.addEventListener("visibilitychange",ye),()=>{var o;Y(),Me.disconnect(),ne==null||ne.disconnect(),T.removeEventListener("pointerdown",Se),T.removeEventListener("pointermove",Te),T.removeEventListener("pointerup",Q),T.removeEventListener("pointerleave",Q),T.removeEventListener("pointercancel",Q),window.removeEventListener("blur",we),window.removeEventListener("focus",be),document.removeEventListener("keydown",Re),document.removeEventListener("visibilitychange",ye),(o=E.current)==null||o.dispose(),E.current=null,w.current=()=>{},N.current=()=>{},H.current=()=>{}}},[]),m.useEffect(()=>{g.current.reset(),I.current=null},[R.interactionMode]),m.useEffect(()=>{N.current()},[R.runInBackground]),m.useEffect(()=>{!R.pauseKey&&b.current&&(b.current=!1,N.current())},[R.pauseKey]);const He={...u,position:"relative",overflow:"hidden",isolation:"isolate"};return ae.jsxs("div",{ref:h,className:s,style:He,children:[t?ae.jsx("div",{style:{position:"absolute",inset:0,zIndex:0,pointerEvents:"none",transform:"translateZ(0)"},children:t}):null,ae.jsx("canvas",{ref:x,"aria-hidden":"true",style:{position:"absolute",inset:0,zIndex:1,width:"100%",height:"100%",pointerEvents:"none",mixBlendMode:R.mode==="dom"?"screen":"normal"}}),ae.jsx("div",{style:{position:"relative",zIndex:2},children:Oe})]})}),mt=Xe;exports.WaterDistortion=Xe;exports.WaterLayer=mt;
236
244
  //# sourceMappingURL=water-distortion.cjs.map