@wave3d/core 0.2.2 → 0.4.1

package/dist/renderer/WaveRenderer.js

@@ -1,6 +1,7 @@
 import { ensureStudioConfig } from "../config/model.js";
-import { fragmentShader, lineFragmentShader, postFragmentShader, postVertexShader, vertexShader } from "./shaders.js";
+import { ditherFragmentShader, fragmentShader, halftoneCmykFragmentShader, halftoneFragmentShader, heatmapFragmentShader, innerLightFragmentShader, lineFragmentShader, paperTextureFragmentShader, postFragmentShader, postVertexShader, vertexShader } from "./shaders.js";
 import { WaveGeometry } from "./WaveGeometry.js";
+import { InteractionController, SCENE_APPLIERS, WAVE_APPLIERS, anyPointerFxActive, interactionActive, wavePointerFxActive, waveRipplesActive } from "./interaction.js";
 import { PALETTE_MAPS, buildBackgroundGradientCanvas, buildBackgroundImageCanvas, buildBackgroundMeshCanvas, buildPaletteTexture, canvasToTexture, configurePaletteTexture, drawBackgroundMediaFrame, loadPaletteImage, paletteMapCanvas, paletteSignature } from "./palette.js";
 import { buildHeroPaletteCanvas, buildHeroPaletteTexture } from "./heroPalette.js";
 import * as THREE from "three";
@@ -148,6 +149,12 @@ var WaveRenderer = class {
 	postPass;
 	/** Optional bloom pass — created lazily when bloomStrength first goes >0, removed at 0. */
 	bloomPass;
+	ditherPass;
+	innerLightPass;
+	halftonePass;
+	heatmapPass;
+	paperTexturePass;
+	halftoneCmykPass;
 	container;
 	respectReducedMotion;
 	skipIntroRamp;
@@ -169,6 +176,18 @@ var WaveRenderer = class {
 	clipSphere = new THREE.Sphere();
 	clipTmpA = new THREE.Vector3();
 	clipTmpB = new THREE.Vector3();
+	/** Created by syncInteraction() when interaction turns on, disposed when it turns off. */
+	interaction;
+	/** Extra ortho-zoom MULTIPLIER from a cameraZoom binding (1 = none); applied in applyZoom().
+	*  Protected so the studio's writeCameraToConfig() can divide it back out (keep it out of config). */
+	interactionZoom = 1;
+	/** Extra time-offset DELTA from a timeOffset binding (0 = none); added in updateTime(). */
+	interactionTimeOffset = 0;
+	/** Scene-binding out-params: appliers write into this, applyBindings() reads it back. */
+	interactionSceneOut = {
+		timeOffset: 0,
+		zoom: 1
+	};
 	timer = new THREE.Timer();
 	time = 0;
 	rafId = 0;
@@ -276,6 +295,14 @@ var WaveRenderer = class {
 			bandParams.push(new THREE.Vector4());
 			bandParaPow.push(0);
 		}
+		const rippleOrigin = [];
+		const rippleAge = [];
+		const rippleAmp = [];
+		for (let i = 0; i < 4; i++) {
+			rippleOrigin.push(new THREE.Vector2());
+			rippleAge.push(0);
+			rippleAmp.push(0);
+		}
 		return {
 			uTime: { value: 0 },
 			uSpeed: { value: .05 },
@@ -342,7 +369,23 @@ var WaveRenderer = class {
 			uLineThickness: { value: 1 },
 			uLineDerivativePower: { value: .95 },
 			uMaxWidth: { value: 1232 },
-			uClearColor: { value: new THREE.Vector3(1, 1, 1) }
+			uClearColor: { value: new THREE.Vector3(1, 1, 1) },
+			uPointer: { value: new THREE.Vector2(0, 0) },
+			uPointerActive: { value: 0 },
+			uPointerRadius: { value: .6 },
+			uPointerAspect: { value: 1 },
+			uPointerAgitate: { value: 0 },
+			uPointerPush: { value: 0 },
+			uPointerWake: { value: 0 },
+			uPointerVel: { value: new THREE.Vector2(0, 0) },
+			uShapeFlow: { value: 0 },
+			uPointerThin: { value: 0 },
+			uPointerHue: { value: 0 },
+			uPointerLighten: { value: 0 },
+			uPointerRipple: { value: 0 },
+			uRippleOrigin: { value: rippleOrigin },
+			uRippleAge: { value: rippleAge },
+			uRippleAmp: { value: rippleAmp }
 		};
 	}
 	/** Vertex-shader #defines for a wave: TWIST_MOTION (per-wave animated twist wobble) and
@@ -352,9 +395,14 @@ var WaveRenderer = class {
 		const defines = {};
 		if (sc?.twistMotion) defines.TWIST_MOTION = "";
 		if ((this.config.loopSeconds ?? 0) > 0) defines.LOOP_MOTION = "";
-		if ((sc?.detailAmount ?? 0) !== 0) defines.DETAIL_OCTAVE = "";
+		const bindsDetail = sc?.interaction?.bindings?.some((b) => b.target === "detailAmount") ?? false;
+		if ((sc?.detailAmount ?? 0) !== 0 || bindsDetail) defines.DETAIL_OCTAVE = "";
 		if ((sc?.depthTint ?? 0) > 0) defines.DEPTH_TINT = "";
 		if ((sc?.edgeFeather ?? .1) !== .1) defines.EDGE_FEATHER = "";
+		if (sc && wavePointerFxActive(this.config, sc)) {
+			defines.POINTER_FX = "";
+			if (waveRipplesActive(this.config, sc)) defines.POINTER_RIPPLES = "";
+		}
 		return defines;
 	}
 	addWave() {
@@ -442,6 +490,7 @@ var WaveRenderer = class {
 	refresh() {
 		this.applyBackground();
 		this.applyPost();
+		this.syncInteraction();
 		if (!this.isCameraExternallyDriven()) {
 			const p = this.config.cameraPosition;
 			const tg = this.config.cameraTarget;
@@ -562,6 +611,23 @@ var WaveRenderer = class {
 			wave.mesh.position.set(sc.position.x, sc.position.y, sc.position.z);
 			u.uOpacity.value = sc.opacity;
 		});
+		const sharedRadius = (this.config.interaction?.radius ?? .3) * 2;
+		const sharedFlow = this.config.interaction?.ribbonFlow ?? .8;
+		this.waves.forEach((wave, i) => {
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			if (!wavePointerFxActive(this.config, sc)) return;
+			const u = wave.material.uniforms;
+			const h = sc.interaction?.hover;
+			u.uPointerRadius.value = sharedRadius;
+			u.uPointerAgitate.value = h?.agitate ?? 0;
+			u.uPointerPush.value = h?.push ?? 0;
+			u.uPointerWake.value = h?.wake ?? 0;
+			u.uPointerThin.value = h?.thin ?? 0;
+			u.uPointerHue.value = h?.hueShift ?? 0;
+			u.uPointerLighten.value = h?.lighten ?? 0;
+			u.uPointerRipple.value = sc.interaction?.press?.ripple ?? 0;
+			u.uShapeFlow.value = sharedFlow;
+		});
 		this.updatePaletteTextures();
 		this.syncVideoPlayback();
 		this.group.scale.set(this.config.mirrorH ? -1 : 1, this.config.mirrorV ? -1 : 1, 1);
@@ -833,6 +899,12 @@ var WaveRenderer = class {
 		u.uGrainAmount.value = this.config.grain;
 		u.uBlurSamples.value = Math.round(this.config.blurSamples ?? 6);
 		this.applyBloom();
+		this.applyInnerLight();
+		this.applyHalftone();
+		this.applyHeatmap();
+		this.applyHalftoneCmyk();
+		this.applyPaperTexture();
+		this.applyDither();
 	}
 	/** Insert / tune / remove the bloom pass. strength 0 removes it from the composer entirely, so
 	*  cost and pixels are identical to bloom-off; the pass (and its mip-chain render targets) is
@@ -855,6 +927,172 @@ var WaveRenderer = class {
 			this.bloomPass = void 0;
 		}
 	}
+	/** Insert / tune / remove the dithering pass — a self-contained "layered" post shader (an ordered
+	*  Bayer dither, in the spirit of paper-design/shaders). Like bloom, dither 0 removes the pass
+	*  entirely so cost and pixels match dither-off, and it's created lazily on first enable. It is
+	*  appended AFTER OutputPass so it runs last and quantizes display-space colour (tone-mapped +
+	*  sRGB) — dithering the linear composer buffer would crush the steps in the shadows. */
+	applyDither() {
+		const strength = this.config.dither ?? 0;
+		if (strength > 0) {
+			if (!this.ditherPass) {
+				this.ditherPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uResolution: { value: this.renderer.getDrawingBufferSize(new THREE.Vector2()) },
+						uDitherStrength: { value: strength },
+						uDitherScale: { value: this.config.ditherScale ?? 2 },
+						uDitherSteps: { value: this.config.ditherSteps ?? 4 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: ditherFragmentShader
+				});
+				this.composer.addPass(this.ditherPass);
+			}
+			const u = this.ditherPass.uniforms;
+			u.uDitherStrength.value = strength;
+			u.uDitherScale.value = Math.max(1, this.config.ditherScale ?? 2);
+			u.uDitherSteps.value = Math.max(2, Math.round(this.config.ditherSteps ?? 4));
+		} else if (this.ditherPass) {
+			this.composer.removePass(this.ditherPass);
+			this.ditherPass.dispose();
+			this.ditherPass = void 0;
+		}
+	}
+	/** Insert / tune / remove the innerLight pass — volumetric light streaks scattered from the bright
+	*  wave toward a light point (innerLightX/Y in UV). Scene zone (index 1) so it scatters the raw wave
+	*  like bloom. innerLight 0 removes the pass entirely; created lazily on first enable. */
+	applyInnerLight() {
+		const strength = this.config.innerLight ?? 0;
+		if (strength > 0) {
+			const cx = this.config.innerLightX ?? .5;
+			const cy = this.config.innerLightY ?? .15;
+			if (!this.innerLightPass) {
+				this.innerLightPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uInnerLight: { value: strength },
+						uInnerLightDensity: { value: this.config.innerLightDensity ?? .5 },
+						uInnerLightDecay: { value: this.config.innerLightDecay ?? .95 },
+						uInnerLightCenter: { value: new THREE.Vector2(cx, cy) }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: innerLightFragmentShader
+				});
+				this.composer.insertPass(this.innerLightPass, 1);
+			}
+			const u = this.innerLightPass.uniforms;
+			u.uInnerLight.value = strength;
+			u.uInnerLightDensity.value = this.config.innerLightDensity ?? .5;
+			u.uInnerLightDecay.value = this.config.innerLightDecay ?? .95;
+			u.uInnerLightCenter.value.set(cx, cy);
+		} else if (this.innerLightPass) {
+			this.composer.removePass(this.innerLightPass);
+			this.innerLightPass.dispose();
+			this.innerLightPass = void 0;
+		}
+	}
+	/** Insert / tune / remove the halftone pass — a rotated dot screen (dot size scales with local
+	*  brightness) over the finished image. halftone 0 removes the pass; created lazily on enable. */
+	applyHalftone() {
+		const strength = this.config.halftone ?? 0;
+		if (strength > 0) {
+			if (!this.halftonePass) {
+				this.halftonePass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uResolution: { value: this.renderer.getDrawingBufferSize(new THREE.Vector2()) },
+						uHalftone: { value: strength },
+						uHalftoneCell: { value: this.config.halftoneCell ?? 6 },
+						uHalftoneAngle: { value: this.config.halftoneAngle ?? .4 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: halftoneFragmentShader
+				});
+				this.composer.addPass(this.halftonePass);
+			}
+			const u = this.halftonePass.uniforms;
+			u.uHalftone.value = strength;
+			u.uHalftoneCell.value = Math.max(2, this.config.halftoneCell ?? 6);
+			u.uHalftoneAngle.value = this.config.halftoneAngle ?? .4;
+		} else if (this.halftonePass) {
+			this.composer.removePass(this.halftonePass);
+			this.halftonePass.dispose();
+			this.halftonePass = void 0;
+		}
+	}
+	/** Heatmap: recolour the final image by luminance → thermal palette. Finish zone. */
+	applyHeatmap() {
+		const strength = this.config.heatmap ?? 0;
+		if (strength > 0) {
+			if (!this.heatmapPass) {
+				this.heatmapPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uHeatmap: { value: strength }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: heatmapFragmentShader
+				});
+				this.composer.addPass(this.heatmapPass);
+			}
+			this.heatmapPass.uniforms.uHeatmap.value = strength;
+		} else if (this.heatmapPass) {
+			this.composer.removePass(this.heatmapPass);
+			this.heatmapPass.dispose();
+			this.heatmapPass = void 0;
+		}
+	}
+	/** Paper texture: fibrous substrate shading multiplied over the image. Finish zone. */
+	applyPaperTexture() {
+		const strength = this.config.paperTexture ?? 0;
+		if (strength > 0) {
+			if (!this.paperTexturePass) {
+				this.paperTexturePass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uPaper: { value: strength },
+						uPaperScale: { value: this.config.paperTextureScale ?? 2 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: paperTextureFragmentShader
+				});
+				this.composer.addPass(this.paperTexturePass);
+			}
+			const u = this.paperTexturePass.uniforms;
+			u.uPaper.value = strength;
+			u.uPaperScale.value = Math.max(.5, this.config.paperTextureScale ?? 2);
+		} else if (this.paperTexturePass) {
+			this.composer.removePass(this.paperTexturePass);
+			this.paperTexturePass.dispose();
+			this.paperTexturePass = void 0;
+		}
+	}
+	/** CMYK halftone: four rotated dot screens (cyan/magenta/yellow/black). Finish zone. */
+	applyHalftoneCmyk() {
+		const strength = this.config.halftoneCmyk ?? 0;
+		if (strength > 0) {
+			if (!this.halftoneCmykPass) {
+				this.halftoneCmykPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uHalftoneCmyk: { value: strength },
+						uHalftoneCmykCell: { value: this.config.halftoneCmykCell ?? 6 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: halftoneCmykFragmentShader
+				});
+				this.composer.addPass(this.halftoneCmykPass);
+			}
+			const u = this.halftoneCmykPass.uniforms;
+			u.uHalftoneCmyk.value = strength;
+			u.uHalftoneCmykCell.value = Math.max(2, this.config.halftoneCmykCell ?? 6);
+		} else if (this.halftoneCmykPass) {
+			this.composer.removePass(this.halftoneCmykPass);
+			this.halftoneCmykPass.dispose();
+			this.halftoneCmykPass = void 0;
+		}
+	}
 	onResize = () => {
 		this.resize();
 	};
@@ -887,6 +1125,8 @@ var WaveRenderer = class {
 		const dw = w * dpr;
 		const dh = h * dpr;
 		this.postPass.uniforms.uResolution.value.set(dw, dh);
+		if (this.ditherPass) this.ditherPass.uniforms.uResolution.value.set(dw, dh);
+		if (this.halftonePass) this.halftonePass.uniforms.uResolution.value.set(dw, dh);
 		for (const s of this.waves) s.material.uniforms.uResolution.value.set(dw, dh);
 		this.camera.left = -dw / 2;
 		this.camera.right = dw / 2;
@@ -933,6 +1173,7 @@ var WaveRenderer = class {
 		}
 		if (!this.running) {
 			this.introTimeRamp = 1;
+			this.interaction?.settle();
 			this.renderOnce();
 		}
 		this.syncVideoPlayback();
@@ -940,7 +1181,9 @@ var WaveRenderer = class {
 	loop = () => {
 		if (!this.running) return;
 		this.timer.update();
-		this.time += this.timer.getDelta();
+		const dt = this.timer.getDelta();
+		this.time += dt;
+		this.interaction?.update(dt);
 		if (this.introTimeRamp < 1) this.introTimeRamp = Math.min(1, this.introTimeRamp + .016);
 		this.renderOnce();
 		this.rafId = requestAnimationFrame(this.loop);
@@ -949,7 +1192,7 @@ var WaveRenderer = class {
 	*  time = elapsed·introTimeRamp + timeOffset — the ramp eases the animation in on load. */
 	updateTime() {
 		const ramp = this.config.introRamp === false || this.skipIntroRamp ? 1 : this.introTimeRamp;
-		const t = this.time * ramp + (this.config.timeOffset ?? 0);
+		const t = this.time * ramp + (this.config.timeOffset ?? 0) + this.interactionTimeOffset;
 		for (let i = 0; i < this.waves.length; i++) {
 			const u = this.waves[i].material.uniforms;
 			u.uTime.value = t;
@@ -967,10 +1210,156 @@ var WaveRenderer = class {
 	renderOnce() {
 		this.updateBackgroundVideoFrame();
 		this.updateTime();
+		this.applyInteraction();
 		this.updateClipPlanes();
 		this.composer.render();
 		this.onAfterRenderFrame();
 	}
+	/** Create/dispose the interaction controller as config toggles interaction on/off. Called from
+	*  refresh(); the compiled define set (POINTER_FX etc.) is handled separately by waveDefines(). */
+	syncInteraction() {
+		const active = interactionActive(this.config);
+		if (active && !this.interaction) this.interaction = new InteractionController(this.container, () => this.config);
+		else if (!active && this.interaction) {
+			this.interaction.dispose();
+			this.interaction = void 0;
+			this.interactionTimeOffset = 0;
+			if (this.interactionZoom !== 1) {
+				this.interactionZoom = 1;
+				this.applyZoom();
+			}
+		}
+	}
+	/** Per-frame interaction write: dynamic pointer-field uniforms + bindings. No-op without a
+	*  controller. While capturing it writes the REST state instead (pointer field zeroed, every bound
+	*  param at its authored base) — merely skipping the write would freeze whatever live hover/scroll
+	*  state the previous frame left in the uniforms, so exports wouldn't be deterministic. */
+	applyInteraction() {
+		if (!this.interaction) return;
+		if (this.capturing) {
+			this.applyInteractionRest();
+			return;
+		}
+		if (anyPointerFxActive(this.config)) this.applyPointerField(this.interaction);
+		this.applyBindings(this.interaction);
+	}
+	/** Write the capture-frame interaction state: exactly what this config renders with no input —
+	*  pointer presence + ripple envelopes zeroed (vPointerFall gates every hover effect to 0) and each
+	*  bound param at its authored base. Live controller state is left untouched, so the frame after
+	*  the capture resumes mid-gesture; the trailing renderOnce() in captureImage restores the preview.
+	*  interactionZoom is deliberately NOT reset — captureImage strips it from camera.zoom itself, and
+	*  the post-capture restore depends on it being unchanged. */
+	applyInteractionRest() {
+		for (let i = 0; i < this.waves.length; i++) {
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			if (!wavePointerFxActive(this.config, sc)) continue;
+			const u = this.waves[i].material.uniforms;
+			u.uPointerActive.value = 0;
+			const rAmp = u.uRippleAmp.value;
+			for (let r = 0; r < 4; r++) rAmp[r] = 0;
+		}
+		const sceneBindings = this.config.interaction?.bindings;
+		if (sceneBindings) {
+			this.interactionSceneOut.timeOffset = this.config.timeOffset ?? 0;
+			this.interactionSceneOut.zoom = this.config.cameraZoom ?? 1;
+			const sceneArgs = {
+				post: this.postPass.uniforms,
+				out: this.interactionSceneOut
+			};
+			for (const b of sceneBindings) {
+				const applier = SCENE_APPLIERS[b.target];
+				applier.apply(applier.base(this.config), sceneArgs);
+			}
+		}
+		if (this.interactionTimeOffset !== 0) {
+			this.interactionTimeOffset = 0;
+			this.updateTime();
+		}
+		for (let i = 0; i < this.waves.length; i++) {
+			const sc = this.config.waves[i];
+			const bindings = sc?.interaction?.bindings;
+			if (!sc || !bindings || bindings.length === 0) continue;
+			const wave = this.waves[i];
+			for (const b of bindings) {
+				const applier = WAVE_APPLIERS[b.target];
+				applier.apply(applier.base(sc), {
+					u: wave.material.uniforms,
+					mesh: wave.mesh
+				});
+			}
+		}
+	}
+	/** Write the dynamic pointer-field uniforms to every wave that HAS a pointer field. Position /
+	*  presence are PER WAVE (each trails the cursor at its own hover smoothing); ripple origins/ages
+	*  are shared. Per-wave amplitudes were already pushed statically in refresh(). */
+	applyPointerField(ic) {
+		const dw = this.camera.right - this.camera.left;
+		const dh = this.camera.top - this.camera.bottom;
+		const aspect = dh !== 0 ? dw / dh : 1;
+		const ripples = ic.sample().ripples;
+		const agitateDrive = Math.min(1, .2 + .85 * ic.pointerFlux());
+		const vel = ic.pointerVelocity();
+		for (let i = 0; i < this.waves.length; i++) {
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			if (!wavePointerFxActive(this.config, sc)) continue;
+			const u = this.waves[i].material.uniforms;
+			u.uPointerAgitate.value = (sc.interaction?.hover?.agitate ?? 0) * agitateDrive;
+			u.uPointerVel.value.copy(vel);
+			const f = ic.fieldFor(i);
+			if (f) {
+				u.uPointer.value.copy(f.ndc);
+				u.uPointerActive.value = f.presence;
+			} else u.uPointerActive.value = 0;
+			u.uPointerAspect.value = aspect;
+			const rOrigin = u.uRippleOrigin.value;
+			const rAge = u.uRippleAge.value;
+			const rAmp = u.uRippleAmp.value;
+			for (let r = 0; r < 4; r++) {
+				rOrigin[r].copy(ripples[r].origin);
+				rAge[r] = ripples[r].age;
+				rAmp[r] = ripples[r].amp;
+			}
+		}
+	}
+	/** Evaluate bindings via the applier tables: value = mix(from ?? base, to, smoothedSource). Scene
+	*  bindings drive scene params; each wave's bindings drive that wave's uniforms. */
+	applyBindings(ic) {
+		this.interactionSceneOut.timeOffset = this.config.timeOffset ?? 0;
+		this.interactionSceneOut.zoom = this.config.cameraZoom ?? 1;
+		const sceneArgs = {
+			post: this.postPass.uniforms,
+			out: this.interactionSceneOut
+		};
+		for (const b of this.config.interaction?.bindings ?? []) {
+			const applier = SCENE_APPLIERS[b.target];
+			const value = THREE.MathUtils.lerp(b.from ?? applier.base(this.config), b.to, ic.bindingValue(b));
+			applier.apply(value, sceneArgs);
+		}
+		for (let i = 0; i < this.waves.length; i++) {
+			const sc = this.config.waves[i];
+			const bindings = sc?.interaction?.bindings;
+			if (!sc || !bindings || bindings.length === 0) continue;
+			const wave = this.waves[i];
+			for (const b of bindings) {
+				const applier = WAVE_APPLIERS[b.target];
+				const value = THREE.MathUtils.lerp(b.from ?? applier.base(sc), b.to, ic.bindingValue(b));
+				applier.apply(value, {
+					u: wave.material.uniforms,
+					mesh: wave.mesh
+				});
+			}
+		}
+		this.interactionTimeOffset = this.interactionSceneOut.timeOffset - (this.config.timeOffset ?? 0);
+		const nextZoom = this.interactionSceneOut.zoom / (this.config.cameraZoom || 1);
+		if (nextZoom !== this.interactionZoom) {
+			this.interactionZoom = nextZoom;
+			this.applyZoom();
+		}
+	}
+	/** Feed a `custom:<name>` interaction input (developer API). No-op when interaction is off. */
+	setInteractionInput(name, value) {
+		this.interaction?.setInput(name, value);
+	}
 	/** Re-evaluate play/pause after `config.paused` changes. */
 	refreshPlayback() {
 		this.updateRunning();
@@ -1005,7 +1394,7 @@ var WaveRenderer = class {
 	applyZoom() {
 		const dw = this.camera.right - this.camera.left;
 		const dh = this.camera.top - this.camera.bottom;
-		this.camera.zoom = Math.max(dw / FRAME_W, dh / 750) * (this.config.cameraZoom ?? 1);
+		this.camera.zoom = Math.max(dw / FRAME_W, dh / 750) * (this.config.cameraZoom ?? 1) * this.interactionZoom;
 		this.camera.updateProjectionMatrix();
 	}
 	/** Fit the orthographic near/far planes to the scene before every render, so no part of a wave
@@ -1025,14 +1414,21 @@ var WaveRenderer = class {
 	*  it's a handful of vector ops over 1–8 meshes with no allocation. */
 	updateClipPlanes() {
 		this.clipBox.makeEmpty();
-		for (const wave of this.waves) {
+		for (let i = 0; i < this.waves.length; i++) {
+			const wave = this.waves[i];
 			const mesh = wave.mesh;
 			mesh.updateWorldMatrix(true, false);
 			const bs = mesh.geometry.boundingSphere;
 			if (!bs) continue;
 			const center = this.clipTmpA.setFromMatrixPosition(mesh.matrixWorld);
 			const disp = Math.abs(Number(wave.material.uniforms.uDispAmount.value) || 0);
-			const radius = (bs.center.length() + bs.radius + disp) * mesh.matrixWorld.getMaxScaleOnAxis() * 1.2;
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			let pointerDisp = 0;
+			if (wavePointerFxActive(this.config, sc)) {
+				const h = sc.interaction?.hover;
+				pointerDisp = (h?.agitate ?? 0) + Math.abs(h?.push ?? 0) + (h?.wake ?? 0) + (sc.interaction?.press?.ripple ?? 0);
+			}
+			const radius = (bs.center.length() + bs.radius + disp + pointerDisp) * mesh.matrixWorld.getMaxScaleOnAxis() * 1.2;
 			this.clipBox.expandByPoint(this.clipTmpB.copy(center).addScalar(radius));
 			this.clipBox.expandByPoint(this.clipTmpB.copy(center).addScalar(-radius));
 		}
@@ -1065,12 +1461,22 @@ var WaveRenderer = class {
 			this.introTimeRamp = 1;
 		}
 		let blob = null;
+		const prevZoom = this.camera.zoom;
+		const strippingZoom = this.interactionZoom !== 1;
 		try {
 			this.capturing = true;
+			if (strippingZoom) {
+				this.camera.zoom = prevZoom / this.interactionZoom;
+				this.camera.updateProjectionMatrix();
+			}
 			this.renderOnce();
 			blob = await new Promise((resolve) => this.canvas.toBlob(resolve, mime, quality));
 		} finally {
 			this.capturing = false;
+			if (strippingZoom) {
+				this.camera.zoom = prevZoom;
+				this.camera.updateProjectionMatrix();
+			}
 			if (transparent !== prevBg) {
 				this.config.transparentBackground = prevBg;
 				this.applyBackground();
@@ -1104,6 +1510,8 @@ var WaveRenderer = class {
 	dispose() {
 		cancelAnimationFrame(this.rafId);
 		this.running = false;
+		this.interaction?.dispose();
+		this.interaction = void 0;
 		this.resizeObserver.disconnect();
 		this.intersectionObserver.disconnect();
 		this.motionQuery.removeEventListener("change", this.onMotionChange);
@@ -1118,6 +1526,12 @@ var WaveRenderer = class {
 			s.palette.dispose();
 		}
 		this.bloomPass?.dispose();
+		this.ditherPass?.dispose();
+		this.innerLightPass?.dispose();
+		this.halftonePass?.dispose();
+		this.heatmapPass?.dispose();
+		this.paperTexturePass?.dispose();
+		this.halftoneCmykPass?.dispose();
 		this.composer.dispose();
 		this.renderer.dispose();
 		this.renderer.domElement.remove();