@rippleflow/water-distortion 0.1.3 → 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 +6 -2
- package/dist/WaterDistortion.d.ts +3 -2
- package/dist/WaterDistortion.d.ts.map +1 -1
- package/dist/core/waterRenderer.d.ts +4 -0
- package/dist/core/waterRenderer.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/water-distortion.cjs +20 -27
- package/dist/water-distortion.cjs.map +1 -1
- package/dist/water-distortion.js +379 -348
- package/dist/water-distortion.js.map +1 -1
- package/package.json +1 -1
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` |
|
|
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,7 +151,9 @@ 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
|
|
|
152
|
-
|
|
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
|
+
|
|
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
|
|
155
159
|
|
|
@@ -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;
|
|
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":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC3D,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;
|
|
1
|
+
{"version":3,"file":"waterRenderer.d.ts","sourceRoot":"","sources":["../../src/core/waterRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AA+RD,qBAAa,wBAAwB;IA4BjC,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,aAAa;IA5BhC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAU;IAC7B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAU;IACnC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAU;IACzC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAc;IAChD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAc;IAC9C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAe;IACjD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAe;IAC9C,OAAO,CAAC,aAAa,CAA2C;IAChE,OAAO,CAAC,YAAY,CAAmD;IACvE,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,cAAc,CAA2B;IACjD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA2C;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA2C;IACzE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAA2C;gBAG1D,MAAM,EAAE,iBAAiB,EACzB,aAAa,GAAE,MAAM,IAAsB;IA2B9D,MAAM,CACJ,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,oBAAoB,EAAE,MAAM,GAC3B,IAAI;IA6CP,gBAAgB,CAAC,MAAM,EAAE,kBAAkB,GAAG,SAAS,GAAG,IAAI;IA0C9D,IAAI,CACF,YAAY,EAAE,SAAS,gBAAgB,EAAE,EACzC,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,MAAM,GACZ,IAAI;IAoBP,MAAM,CAAC,QAAQ,EAAE,qBAAqB,EAAE,WAAW,SAAI,GAAG,IAAI;IAoC9D,kBAAkB,IAAI,OAAO;IAoC7B,KAAK,IAAI,IAAI;IAmBb,OAAO,IAAI,IAAI;IAYf,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAiD1B,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,2BAA2B;IAqBnC,OAAO,CAAC,wBAAwB;IAsBhC,OAAO,CAAC,qBAAqB;IAoC7B,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,qBAAqB;IA8C7B,OAAO,CAAC,mBAAmB;CA+B5B;AAsTD,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,EACxB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,UAAU,GAAE,uBAAqD,GAChE,OAAO,CAyCT"}
|
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
|
package/dist/index.d.ts.map
CHANGED
|
@@ -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
|
|
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
|
-
|
|
9
|
+
`,Qe=`
|
|
10
10
|
precision highp float;
|
|
11
11
|
|
|
12
|
-
#define MAX_WAKE_SEGMENTS ${
|
|
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
|
-
`,
|
|
102
|
+
`,Ze=`
|
|
103
103
|
precision highp float;
|
|
104
104
|
|
|
105
105
|
varying vec2 v_uv;
|
|
@@ -108,8 +108,8 @@ 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
|
-
uniform float u_textureEnabled;
|
|
113
113
|
uniform float u_normalScale;
|
|
114
114
|
uniform float u_refractionStrength;
|
|
115
115
|
uniform float u_specularIntensity;
|
|
@@ -117,21 +117,9 @@ uniform float u_crestIntensity;
|
|
|
117
117
|
uniform float u_causticIntensity;
|
|
118
118
|
uniform float u_time;
|
|
119
119
|
|
|
120
|
-
const float DOM_CAUSTIC_GAIN = ${
|
|
121
|
-
const float DOM_SCREEN_COMPENSATION = ${
|
|
122
|
-
const float DOM_MAX_ALPHA = ${
|
|
123
|
-
|
|
124
|
-
vec3 proceduralBackground(vec2 uv) {
|
|
125
|
-
vec3 deep = vec3(0.055, 0.075, 0.070);
|
|
126
|
-
vec3 teal = vec3(0.060, 0.320, 0.310);
|
|
127
|
-
vec3 coral = vec3(0.680, 0.230, 0.190);
|
|
128
|
-
vec3 gold = vec3(0.850, 0.710, 0.360);
|
|
129
|
-
float diagonal = smoothstep(0.05, 0.95, uv.x * 0.72 + uv.y * 0.28);
|
|
130
|
-
vec3 color = mix(deep, teal, diagonal);
|
|
131
|
-
color = mix(color, coral, smoothstep(0.18, 0.76, uv.x - uv.y * 0.18) * 0.36);
|
|
132
|
-
color = mix(color, gold, smoothstep(0.58, 1.0, uv.y + uv.x * 0.16) * 0.24);
|
|
133
|
-
return color;
|
|
134
|
-
}
|
|
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)};
|
|
135
123
|
|
|
136
124
|
vec4 causticLayer(vec2 uv, vec2 bend, mat2 rotation, float scale, vec2 drift) {
|
|
137
125
|
vec2 p = rotation * (uv * scale + drift * u_time);
|
|
@@ -151,15 +139,20 @@ void main() {
|
|
|
151
139
|
float dy = up - down;
|
|
152
140
|
float signedCurvature = left + right + down + up - height * 4.0;
|
|
153
141
|
vec3 normal = normalize(vec3(-dx * u_normalScale, 1.0, -dy * u_normalScale));
|
|
154
|
-
vec2
|
|
155
|
-
|
|
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,
|
|
156
151
|
vec2(0.001),
|
|
157
152
|
vec2(0.999)
|
|
158
153
|
);
|
|
159
154
|
|
|
160
|
-
vec3 base =
|
|
161
|
-
? texture2D(u_background, refractedUv).rgb
|
|
162
|
-
: proceduralBackground(refractedUv);
|
|
155
|
+
vec3 base = texture2D(u_background, refractedUv).rgb;
|
|
163
156
|
|
|
164
157
|
float gradient = length(vec2(dx, dy)) * u_normalScale;
|
|
165
158
|
float crest = smoothstep(0.012, 0.24, gradient);
|
|
@@ -245,7 +238,7 @@ void main() {
|
|
|
245
238
|
}
|
|
246
239
|
|
|
247
240
|
vec3 color = base + highlight - vec3(0.015, 0.055, 0.070) * visibleTrough * 0.45;
|
|
248
|
-
gl_FragColor = vec4(color,
|
|
241
|
+
gl_FragColor = vec4(color, textureAlpha);
|
|
249
242
|
}
|
|
250
|
-
`;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,_=d>=1?s:Math.max(1,Math.round(s*d)),S=d>=1?Math.max(1,Math.round(s/d)):s;_===this.simWidth&&S===this.simHeight||(this.simWidth=_,this.simHeight=S,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"&&e.texture&&!this.textureReady)&&(t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.stateTextures[this.readIndex]),t.activeTexture(t.TEXTURE1),t.bindTexture(t.TEXTURE_2D,this.backgroundTexture),t.activeTexture(t.TEXTURE2),t.bindTexture(t.TEXTURE_2D,this.causticTexture),this.prepareQuad(this.materialProgram),this.setMaterialUniforms(e,n),t.drawArrays(t.TRIANGLE_STRIP,0,4)))}hasVisibleActivity(){if(!this.framebuffers)return!1;const e=this.gl,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,_=Math.max(0,e.length-Z);c.fill(0),s.fill(0),d.fill(0);for(let S=0;S<l;S+=1){const g=e[_+S],x=S*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(p(i,a,"u_state"),0),i.uniform2f(p(i,a,"u_texel"),1/this.simWidth,1/this.simHeight),i.uniform1f(p(i,a,"u_delta"),t),i.uniform1f(p(i,a,"u_damping"),n.damping),i.uniform1f(p(i,a,"u_stiffness"),n.waveSpeed),i.uniform1f(p(i,a,"u_aspect"),this.cssWidth/this.cssHeight),i.uniform1i(p(i,a,"u_wakeCount"),l),i.uniform4fv(p(i,a,"u_wakeA[0]"),c),i.uniform4fv(p(i,a,"u_wakeB[0]"),s),i.uniform4fv(p(i,a,"u_wakeShape[0]"),d)}setMaterialUniforms(e,n){const t=this.gl,i=this.materialProgram.program,a=e.mode!=="dom";t.uniform1i(p(t,i,"u_state"),0),t.uniform1i(p(t,i,"u_background"),1),t.uniform1i(p(t,i,"u_causticMap"),2),t.uniform2f(p(t,i,"u_texel"),1/this.simWidth,1/this.simHeight),t.uniform1f(p(t,i,"u_domMode"),e.mode==="dom"?1:0),t.uniform1f(p(t,i,"u_textureEnabled"),a&&this.textureReady?1:0),t.uniform1f(p(t,i,"u_normalScale"),e.normalScale),t.uniform1f(p(t,i,"u_refractionStrength"),e.refractionStrength),t.uniform1f(p(t,i,"u_specularIntensity"),e.specularIntensity),t.uniform1f(p(t,i,"u_crestIntensity"),e.crestIntensity),t.uniform1f(p(t,i,"u_causticIntensity"),e.causticIntensity),t.uniform1f(p(t,i,"u_time"),n%1e3)}}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,_=Number.POSITIVE_INFINITY,S=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?(_=d,d=U,S=M,g=I):U<_&&(_=U)}const x=_-d,A=1-Ie(.025,.13,x),w=1-Ie(.08,.34,x),W=.74+fe(S,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 p(r,e,n){const t=r.getUniformLocation(e,n);if(!t)throw new Error(`WaterDistortion could not bind uniform ${n}.`);return t}function q(r,e){if(!r)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,_=r[d]??0,S=r[d+1]??0;if(_<-t.trough||Math.abs(S)>t.velocity)return!0;const g=s>0?l(s-1,c):_,x=s<i-1?l(s+1,c):_,A=c>0?l(s,c-1):_,w=c<a-1?l(s,c+1):_,W=Math.hypot(x-g,w-A),H=Math.abs(g+x+A+w-_*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 _=d/s,S=(d+1)/s;this.disturbances.push(ge(De(t,i,_),De(t,i,S),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),_=f.useRef(null),S=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(T){B.current||M.current||H.current(Be(T,v.current,V.current))}}),[]),f.useEffect(()=>{var T;B.current=ue,ue&&(g.current.reset(),I.current=null,P.current=[],z.current=0,N.current=0,U.current=0,(T=S.current)==null||T.clear()),w.current()},[ue]),f.useEffect(()=>{const T=S.current;if(!T)return;const{width:K,height:b}=V.current;T.resize(K,b,window.devicePixelRatio,y.simulationResolution),T.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 T=d.current,K=_.current;if(!T||!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()}),S.current=b,b.setTextureSource(v.current.texture)}catch{return K.style.display="none",S.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(T)),T.addEventListener("pointerdown",pe,{passive:!0}),T.addEventListener("pointermove",_e,{passive:!0}),T.addEventListener("pointerup",$,{passive:!0}),T.addEventListener("pointerleave",$,{passive:!0}),T.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(),T.removeEventListener("pointerdown",pe),T.removeEventListener("pointermove",_e),T.removeEventListener("pointerup",$),T.removeEventListener("pointerleave",$),T.removeEventListener("pointercancel",$),window.removeEventListener("blur",Re),window.removeEventListener("focus",ye),document.removeEventListener("keydown",Se),document.removeEventListener("visibilitychange",Te),(o=S.current)==null||o.dispose(),S.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:_,"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;
|
|
251
244
|
//# sourceMappingURL=water-distortion.cjs.map
|