shaders 2.4.78 → 2.5.81

package/dist/core/Liquify-Cr-1qPxN.js

@@ -0,0 +1,228 @@
+import { t as applyEdgeHandling } from "./edges-CfGcQniB.js";
+import { c as transformEdges } from "./transformations-B5lM6fYX.js";
+import { t as unpremultiplyAlpha } from "./alpha-C4ptedXe.js";
+import { DataTexture, FloatType, LinearFilter, RGFormat } from "three";
+import { convertToTexture, float, screenUV, texture, vec2, vec4 } from "three/tsl";
+var GRID_SIZE = 64;
+const componentDefinition = {
+	name: "Liquify",
+	category: "Interactive",
+	description: "Liquid-like interactive deformation effect",
+	requiresRTT: true,
+	requiresChild: true,
+	props: {
+		intensity: {
+			default: 10,
+			description: "Scale of the fabric displacement effect",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 20,
+				step: .1,
+				label: "Intensity",
+				group: "Effect"
+			}
+		},
+		stiffness: {
+			default: 3,
+			description: "Fabric rigidity (higher = stiffer canvas, lower = stretchy silk)",
+			ui: {
+				type: "range",
+				min: 1,
+				max: 30,
+				step: .5,
+				label: "Stiffness",
+				group: "Effect"
+			}
+		},
+		damping: {
+			default: 3,
+			description: "How quickly fabric motion settles",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 10,
+				step: .1,
+				label: "Damping",
+				group: "Effect"
+			}
+		},
+		radius: {
+			default: 1,
+			description: "Cursor influence area",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 1.5,
+				step: .1,
+				label: "Radius",
+				group: "Effect"
+			}
+		},
+		edges: {
+			default: "stretch",
+			description: "How to handle edges when distortion pushes content out of bounds",
+			transform: transformEdges,
+			compileTime: true,
+			ui: {
+				type: "select",
+				options: [
+					{
+						label: "Stretch",
+						value: "stretch"
+					},
+					{
+						label: "Transparent",
+						value: "transparent"
+					},
+					{
+						label: "Mirror",
+						value: "mirror"
+					},
+					{
+						label: "Wrap",
+						value: "wrap"
+					}
+				],
+				label: "Edges",
+				group: "Effect"
+			}
+		}
+	},
+	fragmentNode: ({ uniforms, onBeforeRender, childNode, onCleanup, dimensions }) => {
+		const displacementX = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const displacementY = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const velocityX = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const velocityY = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const tempVelocityX = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const tempVelocityY = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const tempDisplacementX = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const tempDisplacementY = new Float32Array(GRID_SIZE * GRID_SIZE);
+		const displacementData = new Float32Array(GRID_SIZE * GRID_SIZE * 2);
+		const displacementTexture = new DataTexture(displacementData, GRID_SIZE, GRID_SIZE, RGFormat, FloatType);
+		displacementTexture.magFilter = LinearFilter;
+		displacementTexture.minFilter = LinearFilter;
+		displacementTexture.needsUpdate = true;
+		const displacementField = texture(displacementTexture);
+		let prevX = .5;
+		let prevY = .5;
+		let lastTime = Date.now();
+		const SUBSTEPS = 2;
+		onBeforeRender(({ pointer }) => {
+			const currentTime = Date.now();
+			const dt = Math.min((currentTime - lastTime) / 1e3, .016);
+			lastTime = currentTime;
+			if (dt <= 0) return;
+			const aspect = dimensions.width / dimensions.height;
+			const stiffness = uniforms.stiffness.uniform.value;
+			const damping = uniforms.damping.uniform.value;
+			const radius = uniforms.radius.uniform.value * .08;
+			const rawVelX = (pointer.x - prevX) / dt;
+			const rawVelY = (pointer.y - prevY) / dt;
+			const speed = Math.sqrt(rawVelX * rawVelX + rawVelY * rawVelY);
+			const clampedSpeed = Math.min(speed, 3);
+			let dirX = 0;
+			let dirY = 0;
+			if (speed > .01) {
+				dirX = rawVelX / speed;
+				dirY = rawVelY / speed;
+			}
+			const subDt = dt / SUBSTEPS;
+			for (let s = 0; s < SUBSTEPS; s++) {
+				if (s === 0 && clampedSpeed > .01) {
+					const influenceRadius = radius * 3;
+					const minI = Math.max(1, Math.floor((pointer.y - influenceRadius) * GRID_SIZE));
+					const maxI = Math.min(GRID_SIZE - 2, Math.ceil((pointer.y + influenceRadius) * GRID_SIZE));
+					const minJ = Math.max(1, Math.floor((pointer.x - influenceRadius) * GRID_SIZE));
+					const maxJ = Math.min(GRID_SIZE - 2, Math.ceil((pointer.x + influenceRadius) * GRID_SIZE));
+					for (let i = minI; i <= maxI; i++) for (let j = minJ; j <= maxJ; j++) {
+						const idx = i * GRID_SIZE + j;
+						const cellX = (j + .5) / GRID_SIZE;
+						const cellY = (i + .5) / GRID_SIZE;
+						const ddx = aspect >= 1 ? (cellX - pointer.x) * aspect : cellX - pointer.x;
+						const ddy = aspect >= 1 ? cellY - pointer.y : (cellY - pointer.y) / aspect;
+						const dist = Math.sqrt(ddx * ddx + ddy * ddy);
+						if (dist < influenceRadius) {
+							const forceMag = Math.exp(-dist * dist / (radius * radius)) * clampedSpeed * dt * 2;
+							velocityX[idx] += dirX * forceMag;
+							velocityY[idx] += dirY * forceMag;
+						}
+					}
+				}
+				const dampFactor = Math.max(0, Math.min(1, 1 - damping * subDt));
+				const shearK = stiffness * .35;
+				tempVelocityX.set(velocityX);
+				tempVelocityY.set(velocityY);
+				tempDisplacementX.set(displacementX);
+				tempDisplacementY.set(displacementY);
+				for (let i = 1; i < GRID_SIZE - 1; i++) for (let j = 1; j < GRID_SIZE - 1; j++) {
+					const idx = i * GRID_SIZE + j;
+					let fx = 0;
+					let fy = 0;
+					const idxL = idx - 1;
+					const idxR = idx + 1;
+					const idxU = idx - GRID_SIZE;
+					const idxD = idx + GRID_SIZE;
+					fx += stiffness * (displacementX[idxL] - displacementX[idx]);
+					fx += stiffness * (displacementX[idxR] - displacementX[idx]);
+					fx += stiffness * (displacementX[idxU] - displacementX[idx]);
+					fx += stiffness * (displacementX[idxD] - displacementX[idx]);
+					fy += stiffness * (displacementY[idxL] - displacementY[idx]);
+					fy += stiffness * (displacementY[idxR] - displacementY[idx]);
+					fy += stiffness * (displacementY[idxU] - displacementY[idx]);
+					fy += stiffness * (displacementY[idxD] - displacementY[idx]);
+					const idxUL = idx - GRID_SIZE - 1;
+					const idxUR = idx - GRID_SIZE + 1;
+					const idxDL = idx + GRID_SIZE - 1;
+					const idxDR = idx + GRID_SIZE + 1;
+					fx += shearK * (displacementX[idxUL] - displacementX[idx]);
+					fx += shearK * (displacementX[idxUR] - displacementX[idx]);
+					fx += shearK * (displacementX[idxDL] - displacementX[idx]);
+					fx += shearK * (displacementX[idxDR] - displacementX[idx]);
+					fy += shearK * (displacementY[idxUL] - displacementY[idx]);
+					fy += shearK * (displacementY[idxUR] - displacementY[idx]);
+					fy += shearK * (displacementY[idxDL] - displacementY[idx]);
+					fy += shearK * (displacementY[idxDR] - displacementY[idx]);
+					fx -= stiffness * .1 * displacementX[idx];
+					fy -= stiffness * .1 * displacementY[idx];
+					tempVelocityX[idx] = velocityX[idx] * dampFactor + fx * subDt;
+					tempVelocityY[idx] = velocityY[idx] * dampFactor + fy * subDt;
+					tempDisplacementX[idx] = displacementX[idx] + tempVelocityX[idx] * subDt;
+					tempDisplacementY[idx] = displacementY[idx] + tempVelocityY[idx] * subDt;
+					tempDisplacementX[idx] = Math.max(-.5, Math.min(.5, tempDisplacementX[idx]));
+					tempDisplacementY[idx] = Math.max(-.5, Math.min(.5, tempDisplacementY[idx]));
+				}
+				velocityX.set(tempVelocityX);
+				velocityY.set(tempVelocityY);
+				displacementX.set(tempDisplacementX);
+				displacementY.set(tempDisplacementY);
+			}
+			for (let i = 0; i < GRID_SIZE; i++) for (let j = 0; j < GRID_SIZE; j++) {
+				const idx = i * GRID_SIZE + j;
+				const dIdx = idx * 2;
+				displacementData[dIdx] = displacementX[idx];
+				displacementData[dIdx + 1] = displacementY[idx];
+			}
+			displacementTexture.needsUpdate = true;
+			prevX = pointer.x;
+			prevY = pointer.y;
+		});
+		onCleanup(() => {
+			displacementTexture.dispose();
+		});
+		if (!childNode) return vec4(0, 0, 0, 0);
+		const childTexture = convertToTexture(childNode);
+		onCleanup(() => {
+			if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
+		});
+		const displacement = displacementField.sample(screenUV).xy;
+		const intensityScale = uniforms.intensity.uniform.mul(.1);
+		const scaledDisplacement = displacement.mul(intensityScale);
+		const maxDisp = float(.15);
+		const clampedDisplacement = scaledDisplacement.clamp(vec2(maxDisp.negate(), maxDisp.negate()), vec2(maxDisp, maxDisp));
+		const distortedUV = screenUV.sub(clampedDisplacement);
+		return unpremultiplyAlpha(applyEdgeHandling(distortedUV, childTexture.sample(distortedUV), childTexture, uniforms.edges.uniform.value));
+	}
+};
+var Liquify_default = componentDefinition;
+export { componentDefinition as n, Liquify_default as t };

package/dist/core/index.d.ts

@@ -14,7 +14,7 @@ export { grain } from './helpers/grain';
 export { distort } from './helpers/distort';
 export { glow } from './helpers/glow';
 export { edgeMask } from './helpers/edgeMask';
-export type { UniformsMap, PropConfig, NodeMetadata, MaskConfig, MapConfig, MapChannel, PropDriver, MousePositionConfig, MouseMapConfig, AutoAnimateConfig, TransformConfig } from './types';
+export type { UniformsMap, PropConfig, NodeMetadata, MaskConfig, MapConfig, MapChannel, PropDriver, MousePositionConfig, MouseMapConfig, AutoAnimateConfig, TransformConfig, ComponentDefinition } from './types';
 export type { BlendMode } from './blendModes';
 export type { PerformanceStats } from './performanceTracker';
 //# sourceMappingURL=index.d.ts.map

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACzD,YAAY,EACV,YAAY,EACZ,eAAe,EACf,qBAAqB,EACrB,UAAU,EACX,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAG7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAC,MAAM,SAAS,CAAA;AAC1L,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACzD,YAAY,EACV,YAAY,EACZ,eAAe,EACf,qBAAqB,EACrB,UAAU,EACX,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAG7C,YAAY,EAAC,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAC/M,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,YAAY,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA"}

package/dist/core/index.js

@@ -53,7 +53,7 @@ import "./Kaleidoscope-B0McCEhc.js";
 import "./LensFlare-DXgpPyJK.js";
 import "./LinearBlur-CBl0B23J.js";
 import "./LinearGradient-C0FT7-Lc.js";
-import "./Liquify-Cy6ck3_k.js";
+import "./Liquify-Cr-1qPxN.js";
 import "./Mirror-DfZBEOUf.js";
 import "./Neon-E8whPM6C.js";
 import "./Paper-DJwBbPxA.js";
@@ -95,7 +95,7 @@ import "./VideoTexture-DDnc6aVv.js";
 import "./WaveDistortion-Caj3cQz7.js";
 import "./WebcamTexture-rb0dLKSc.js";
 import "./ZoomBlur-DUrSxwl0.js";
-import { t as getAllShaders } from "./shaderRegistry-9huRXSRI.js";
+import { t as getAllShaders } from "./shaderRegistry-DnmRD6xy.js";
 import { Material, Mesh, MeshBasicNodeMaterial, OrthographicCamera, PlaneGeometry, SRGBColorSpace, Scene, Vector2, WebGPURenderer } from "three/webgpu";
 import { WebGLRenderer } from "three";
 import { PI, abs, add, atan, clamp, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
@@ -1336,14 +1336,15 @@ function shaderRenderer() {
 		let transformUniforms = void 0;
 		if (metadata?.transform) {
 			const aspectRatio = currentWidth / Math.max(1, currentHeight);
+			const t = metadata.transform;
 			transformUniforms = {
-				offsetX: uniform(metadata.transform.offsetX),
-				offsetY: uniform(metadata.transform.offsetY),
-				rotation: uniform(metadata.transform.rotation),
-				scale: uniform(metadata.transform.scale),
-				anchorX: uniform(metadata.transform.anchorX),
-				anchorY: uniform(metadata.transform.anchorY),
-				edges: uniform(metadata.transform.edges === "stretch" ? 0 : metadata.transform.edges === "transparent" ? 1 : metadata.transform.edges === "mirror" ? 2 : 3),
+				offsetX: uniform(t.offsetX ?? 0),
+				offsetY: uniform(t.offsetY ?? 0),
+				rotation: uniform(t.rotation ?? 0),
+				scale: uniform(t.scale ?? 1),
+				anchorX: uniform(t.anchorX ?? .5),
+				anchorY: uniform(t.anchorY ?? .5),
+				edges: uniform(t.edges === "stretch" ? 0 : t.edges === "transparent" ? 1 : t.edges === "mirror" ? 2 : t.edges === "wrap" ? 3 : 1),
 				aspectRatio: uniform(aspectRatio)
 			};
 		}
@@ -1512,29 +1513,38 @@ function shaderRenderer() {
 			}
 		}
 		if (metadata.transform !== void 0) {
-			const newTransformState = needsTransformation(metadata.transform);
-			existingNode.metadata.transform = metadata.transform;
-			if (!existingNode.transformUniforms && metadata.transform) {
+			const mergedTransform = {
+				offsetX: metadata.transform.offsetX ?? existingNode.metadata.transform?.offsetX ?? 0,
+				offsetY: metadata.transform.offsetY ?? existingNode.metadata.transform?.offsetY ?? 0,
+				rotation: metadata.transform.rotation ?? existingNode.metadata.transform?.rotation ?? 0,
+				scale: metadata.transform.scale ?? existingNode.metadata.transform?.scale ?? 1,
+				anchorX: metadata.transform.anchorX ?? existingNode.metadata.transform?.anchorX ?? .5,
+				anchorY: metadata.transform.anchorY ?? existingNode.metadata.transform?.anchorY ?? .5,
+				edges: metadata.transform.edges ?? existingNode.metadata.transform?.edges ?? "transparent"
+			};
+			const newTransformState = needsTransformation(mergedTransform);
+			existingNode.metadata.transform = mergedTransform;
+			if (!existingNode.transformUniforms && mergedTransform) {
 				const aspectRatio = currentWidth / Math.max(1, currentHeight);
 				existingNode.transformUniforms = {
-					offsetX: uniform(metadata.transform.offsetX),
-					offsetY: uniform(metadata.transform.offsetY),
-					rotation: uniform(metadata.transform.rotation),
-					scale: uniform(metadata.transform.scale),
-					anchorX: uniform(metadata.transform.anchorX),
-					anchorY: uniform(metadata.transform.anchorY),
-					edges: uniform(metadata.transform.edges === "stretch" ? 0 : metadata.transform.edges === "transparent" ? 1 : metadata.transform.edges === "mirror" ? 2 : 3),
+					offsetX: uniform(mergedTransform.offsetX),
+					offsetY: uniform(mergedTransform.offsetY),
+					rotation: uniform(mergedTransform.rotation),
+					scale: uniform(mergedTransform.scale),
+					anchorX: uniform(mergedTransform.anchorX),
+					anchorY: uniform(mergedTransform.anchorY),
+					edges: uniform(mergedTransform.edges === "stretch" ? 0 : mergedTransform.edges === "transparent" ? 1 : mergedTransform.edges === "mirror" ? 2 : 3),
 					aspectRatio: uniform(aspectRatio)
 				};
 			} else if (existingNode.transformUniforms) {
-				existingNode.transformUniforms.offsetX.value = metadata.transform.offsetX;
-				existingNode.transformUniforms.offsetY.value = metadata.transform.offsetY;
-				existingNode.transformUniforms.rotation.value = metadata.transform.rotation;
-				existingNode.transformUniforms.scale.value = metadata.transform.scale;
-				existingNode.transformUniforms.anchorX.value = metadata.transform.anchorX;
-				existingNode.transformUniforms.anchorY.value = metadata.transform.anchorY;
+				existingNode.transformUniforms.offsetX.value = mergedTransform.offsetX;
+				existingNode.transformUniforms.offsetY.value = mergedTransform.offsetY;
+				existingNode.transformUniforms.rotation.value = mergedTransform.rotation;
+				existingNode.transformUniforms.scale.value = mergedTransform.scale;
+				existingNode.transformUniforms.anchorX.value = mergedTransform.anchorX;
+				existingNode.transformUniforms.anchorY.value = mergedTransform.anchorY;
 				const oldEdgesValue = existingNode.transformUniforms.edges.value;
-				existingNode.transformUniforms.edges.value = metadata.transform.edges === "stretch" ? 0 : metadata.transform.edges === "transparent" ? 1 : metadata.transform.edges === "mirror" ? 2 : 3;
+				existingNode.transformUniforms.edges.value = mergedTransform.edges === "stretch" ? 0 : mergedTransform.edges === "transparent" ? 1 : mergedTransform.edges === "mirror" ? 2 : 3;
 				if (existingNode.transformUniforms.edges.value !== oldEdgesValue) needsRecompose = true;
 			}
 			if (newTransformState && !existingNode.transformRTTActive) {
@@ -1870,7 +1880,7 @@ function shaderRenderer() {
 		pendingRegistrationQueue = [];
 		for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition } of queue) if (fragmentNodeFunc) registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition);
 	};
-	const initialize = async ({ canvas, enablePerformanceTracking: enableTracking = true, colorSpace = "p3-linear", context, gpu, forceFullFrameRate: forceFullFps = false }) => {
+	const initialize = async ({ canvas, resizeTarget, enablePerformanceTracking: enableTracking = true, colorSpace = "p3-linear", context, gpu, forceFullFrameRate: forceFullFps = false }) => {
 		if (isInitialized || isInitializing) return;
 		enablePerformanceTracking = enableTracking;
 		forceFullFrameRate = forceFullFps;
@@ -1952,19 +1962,18 @@ function shaderRenderer() {
 			material.fragmentNode = vec4(0, 0, 0, 0);
 			mesh = new Mesh(new PlaneGeometry(2, 2), material);
 			scene.add(mesh);
-			const parentElement = canvas.parentElement;
-			if (!parentElement) {
-				console.warn("[Shaders] Canvas has no parent element for resize observation");
-				return;
-			}
-			resizeObserver = new ResizeObserver(handleResize);
-			resizeObserver.observe(parentElement);
+			const elementToObserve = resizeTarget ?? canvas.parentElement;
+			if (elementToObserve) {
+				resizeObserver = new ResizeObserver(handleResize);
+				resizeObserver.observe(elementToObserve);
+			} else console.warn("[Shaders] No element available for resize observation — use resize() manually");
 			intersectionObserver = new IntersectionObserver(handleVisibilityChange, { threshold: 0 });
 			intersectionObserver.observe(canvas);
 			const rect = canvas.getBoundingClientRect();
 			isVisible = rect.width > 0 && rect.height > 0 && rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
 			shouldAnimate = true;
-			const { width, height } = canvas.getBoundingClientRect();
+			const width = rect.width > 0 ? rect.width : canvas.width;
+			const height = rect.height > 0 ? rect.height : canvas.height;
 			const roundedWidth = Math.round(width);
 			const roundedHeight = Math.round(height);
 			if (roundedWidth > 0 && roundedHeight > 0) {
@@ -2081,6 +2090,10 @@ function shaderRenderer() {
 		updateUniformValue: updateUniformValue$1,
 		updateNodeMetadata,
 		isInitialized: () => isInitialized,
+		resize: (width, height) => {
+			if (!renderer || !camera || !mesh) return;
+			updateRendererDimensions(width, height);
+		},
 		startAnimation,
 		stopAnimation,
 		renderAndWait,
@@ -2164,7 +2177,7 @@ function createRendererFromJSON(preset, options) {
 		}
 		const nodeId = component.id || `${component.type}_${Date.now()}_${Math.random()}`;
 		nodeIdMap.set(nodeId, component.type);
-		const uniforms = propsToUniforms(component.props || {}, componentDef);
+		const uniforms = createUniformsMap(componentDef, Object.fromEntries(Object.entries(componentDef.props).map(([key, propConfig]) => [key, component.props?.[key] !== void 0 ? component.props[key] : propConfig.default])), nodeId);
 		const metadata = {
 			blendMode: component.props?.blendMode || "normal",
 			opacity: component.props?.opacity,
@@ -2175,29 +2188,22 @@ function createRendererFromJSON(preset, options) {
 				source: component.props.maskSource,
 				type: component.props.maskType || "alpha"
 			} : void 0,
-			transform: component.props?.transform
+			transform: component.props?.transform ? {
+				offsetX: 0,
+				offsetY: 0,
+				rotation: 0,
+				scale: 1,
+				anchorX: .5,
+				anchorY: .5,
+				edges: "transparent",
+				...component.props.transform
+			} : void 0
 		};
 		coreRenderer.registerNode(nodeId, componentDef.fragmentNode, parentId, metadata, uniforms, componentDef);
 		component.children?.forEach((child, index) => {
 			registerComponent(child, nodeId, index);
 		});
 	}
-	function propsToUniforms(props, componentDef) {
-		const uniforms = {};
-		Object.entries(componentDef.props).forEach(([key, propConfig]) => {
-			const value = props[key] !== void 0 ? props[key] : propConfig.default;
-			const transformedValue = propConfig.transform ? propConfig.transform(value) : value;
-			if (transformedValue && typeof transformedValue === "object" && "node" in transformedValue) uniforms[key] = {
-				uniform: transformedValue.node,
-				transform: propConfig.transform
-			};
-			else uniforms[key] = {
-				uniform: uniform(transformedValue),
-				transform: propConfig.transform
-			};
-		});
-		return uniforms;
-	}
 	return {
 		initialize,
 		renderFrame,

package/dist/core/presetRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"presetRenderer.d.ts","sourceRoot":"","sources":["../src/presetRenderer.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,GAAG,CAAC,EAAE;QACJ,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACpB,CAAA;IACD,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;IAExD,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;IACxD,MAAM,EAAE,iBAAiB,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,qBAAqB;yBAgBG,iBAAiB,KAAG,OAAO,CAAC,IAAI,CAAC;uBAoBrC,OAAO,CAAC,IAAI,CAAC;8BAaV,YAAY,KAAG,IAAI;yBAgB1B,UAAU;mBAwBhB,IAAI;EAyHzB"}
+{"version":3,"file":"presetRenderer.d.ts","sourceRoot":"","sources":["../src/presetRenderer.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAEnC,GAAG,CAAC,EAAE;QACJ,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACpB,CAAA;IACD,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;IAExD,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;IACxD,MAAM,EAAE,iBAAiB,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,qBAAqB;yBAgBG,iBAAiB,KAAG,OAAO,CAAC,IAAI,CAAC;uBAoBrC,OAAO,CAAC,IAAI,CAAC;8BAaV,YAAY,KAAG,IAAI;yBAgB1B,UAAU;mBAwBhB,IAAI;EA6FzB"}

package/dist/core/registry.js

@@ -53,7 +53,7 @@ import "./Kaleidoscope-B0McCEhc.js";
 import "./LensFlare-DXgpPyJK.js";
 import "./LinearBlur-CBl0B23J.js";
 import "./LinearGradient-C0FT7-Lc.js";
-import "./Liquify-Cy6ck3_k.js";
+import "./Liquify-Cr-1qPxN.js";
 import "./Mirror-DfZBEOUf.js";
 import "./Neon-E8whPM6C.js";
 import "./Paper-DJwBbPxA.js";
@@ -95,5 +95,5 @@ import "./VideoTexture-DDnc6aVv.js";
 import "./WaveDistortion-Caj3cQz7.js";
 import "./WebcamTexture-rb0dLKSc.js";
 import "./ZoomBlur-DUrSxwl0.js";
-import { a as shaderRegistry, i as getShadersByCategory, n as getShaderByName, r as getShaderCategories, t as getAllShaders } from "./shaderRegistry-9huRXSRI.js";
+import { a as shaderRegistry, i as getShadersByCategory, n as getShaderByName, r as getShaderCategories, t as getAllShaders } from "./shaderRegistry-DnmRD6xy.js";
 export { getAllShaders, getShaderByName, getShaderCategories, getShadersByCategory, shaderRegistry };

package/dist/core/renderer.d.ts

@@ -135,6 +135,9 @@ interface NodeRegistry {
  */
 interface InitializeOptions {
     canvas: HTMLCanvasElement;
+    /** Element to observe for resize events. Defaults to canvas.parentElement.
+     *  Pass the canvas itself when the user controls the canvas directly (e.g. the JS package). */
+    resizeTarget?: HTMLElement;
     enablePerformanceTracking?: boolean;
     colorSpace?: 'p3-linear' | 'srgb';
     context?: WebGLRenderingContext | WebGL2RenderingContext;
@@ -148,13 +151,14 @@ interface InitializeOptions {
  * The core renderer for Shaders
  */
 export declare function shaderRenderer(): {
-    initialize: ({ canvas, enablePerformanceTracking: enableTracking, colorSpace, context, gpu, forceFullFrameRate: forceFullFps }: InitializeOptions) => Promise<void>;
+    initialize: ({ canvas, resizeTarget, enablePerformanceTracking: enableTracking, colorSpace, context, gpu, forceFullFrameRate: forceFullFps }: InitializeOptions) => Promise<void>;
     cleanup: () => void;
     registerNode: (id: string, fragmentNodeFunc: ComponentDefinition["fragmentNode"] | null, parentId: string | null, metadata: NodeMetadata | null, uniforms?: UniformsMap, componentDefinition?: ComponentDefinition) => void;
     removeNode: (id: string) => void;
     updateUniformValue: (nodeId: string, uniformName: string, value: any) => void;
     updateNodeMetadata: (nodeId: string, metadata: Partial<NodeMetadata>) => void;
     isInitialized: () => boolean;
+    resize: (width: number, height: number) => void;
     startAnimation: () => void;
     stopAnimation: () => void;
     renderAndWait: () => Promise<void>;

package/dist/core/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,IAAI,EAMT,cAAc,EACjB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAA;AAInC,OAAO,EAAoB,eAAe,EAAE,mBAAmB,EAA8D,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAC,MAAM,SAAS,CAAA;AACtM,OAAO,EAAqB,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAMzE;;GAEG;AACH,UAAU,QAAQ;IAEd;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;OAEG;IACH,gBAAgB,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IAErD;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,aAAa,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,cAAc,EAAE,GAAG,CAAA;IAEnB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAA;IAEtB;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAA;IAErB;;;OAGG;IACH,gBAAgB,EAAE,eAAe,EAAE,CAAA;IAEnC;;;OAGG;IACH,qBAAqB,EAAE,cAAc,EAAE,CAAA;IAEvC;;;OAGG;IACH,oBAAoB,EAAE,cAAc,EAAE,CAAA;IAEtC;;;OAGG;IACH,eAAe,EAAE,cAAc,EAAE,CAAA;IAEjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE;QAChB,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,QAAQ,EAAE,GAAG,CAAA;QACb,KAAK,EAAE,GAAG,CAAA;QACV,OAAO,EAAE,GAAG,CAAA;QACZ,OAAO,EAAE,GAAG,CAAA;QACZ,KAAK,EAAE,GAAG,CAAA;QACV,WAAW,EAAE,GAAG,CAAA;KACnB,CAAA;IAED;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAE5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAEjE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QACzB,QAAQ,EAAE,GAAG,CAAA;QACb,QAAQ,EAAE,GAAG,CAAA;QACb,SAAS,EAAE,GAAG,CAAA;QACd,SAAS,EAAE,GAAG,CAAA;QACd,KAAK,EAAE,GAAG,CAAA;KACb,CAAC,CAAA;IAEF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAC9B,QAAQ,EAAE,MAAM,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE,MAAM,CAAA;QACjB,eAAe,EAAE,GAAG,CAAA;KACvB,CAAC,CAAA;IAEF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAC9B,eAAe,EAAE,GAAG,CAAA;KACvB,CAAC,CAAA;CAEL;AAED;;GAEG;AACH,UAAU,YAAY;IAClB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAClC;AAED;;GAEG;AACH,UAAU,iBAAiB;IACvB,MAAM,EAAE,iBAAiB,CAAA;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;IACxD,GAAG,CAAC,EAAE;QACF,MAAM,EAAE,SAAS,CAAA;QACjB,OAAO,EAAE,UAAU,CAAA;KACtB,CAAA;IACD,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAiHD;;GAEG;AACH,wBAAgB,cAAc;oIAyqEG,iBAAiB;;uBA59BpB,MAAM,oBAAoB,mBAAmB,CAAC,cAAc,CAAC,GAAG,IAAI,YAAY,MAAM,GAAG,IAAI,YAAY,YAAY,GAAG,IAAI,aAAY,WAAW,wBAA6B,mBAAmB,KAAG,IAAI;qBAiZ5M,MAAM,KAAG,IAAI;iCA7PD,MAAM,eAAe,MAAM,SAAS,GAAG,KAAG,IAAI;iCA8C9C,MAAM,YAAY,OAAO,CAAC,YAAY,CAAC,KAAG,IAAI;;0BAqnBvD,IAAI;yBAyBL,IAAI;yBAhOE,OAAO,CAAC,IAAI,CAAC;+BAsLb,gBAAgB;;eAghBmB,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC;;2BAjBpE,QAAQ,GAAG,OAAO,GAAG,IAAI;;;;mCAlnEnB,MAAM,KAAG,QAAQ,EAAE;oCA+CzC,IAAI,YACF,QAAQ,UACV,MAAM,kBACE,GAAG,CAAC,MAAM,CAAC,gBACb,IAAI,KACnB,IAAI;0CA8SK,IAAI,YACF,QAAQ,KACnB,IAAI;;;;EA6yDV"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"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"}

package/dist/core/{shaderRegistry-9huRXSRI.js → shaderRegistry-DnmRD6xy.js}

@@ -47,7 +47,7 @@ import { n as componentDefinition$45 } from "./Kaleidoscope-B0McCEhc.js";
 import { n as componentDefinition$46 } from "./LensFlare-DXgpPyJK.js";
 import { n as componentDefinition$47 } from "./LinearBlur-CBl0B23J.js";
 import { n as componentDefinition$48 } from "./LinearGradient-C0FT7-Lc.js";
-import { n as componentDefinition$49 } from "./Liquify-Cy6ck3_k.js";
+import { n as componentDefinition$49 } from "./Liquify-Cr-1qPxN.js";
 import { n as componentDefinition$50 } from "./Mirror-DfZBEOUf.js";
 import { n as componentDefinition$51 } from "./Neon-E8whPM6C.js";
 import { n as componentDefinition$52 } from "./Paper-DJwBbPxA.js";

package/dist/core/shaders/Liquify/index.d.ts

@@ -2,23 +2,29 @@ import { ComponentDefinition } from '../../types';
 
 export interface ComponentProps {
     /**
-     * Strength of the distortion effect
+     * Scale of the fabric displacement effect
      *
-     * Accepts a number between 0 and 5.
-     * @default 1
+     * @default 10
      */
     intensity: number;
     /**
-     * Rate of distortion decay (higher = faster)
+     * Fabric rigidity (higher = stiffer canvas, lower = stretchy silk)
+     *
+     * Accepts a number between 1 and 30.
+     * @default 3
+     */
+    stiffness: number;
+    /**
+     * How quickly fabric motion settles
      *
      * Accepts a number between 0 and 10.
      * @default 3
      */
-    decay: number;
+    damping: number;
     /**
-     * Radius of the distortion effect
+     * Cursor influence area
      *
-     * Accepts a number between 0 and 3.
+     * Accepts a number between 0.1 and 1.5.
      * @default 1
      */
     radius: number;

package/dist/core/shaders/Liquify/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Liquify/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AASvE,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CAChB;AAuCD,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAgKnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Liquify/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AASvE,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CAChB;AAID,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CAsQnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/core/shaders/Liquify/index.js

@@ -1,5 +1,5 @@
 import "../../edges-CfGcQniB.js";
 import "../../transformations-B5lM6fYX.js";
 import "../../alpha-C4ptedXe.js";
-import { n as componentDefinition, t as Liquify_default } from "../../Liquify-Cy6ck3_k.js";
+import { n as componentDefinition, t as Liquify_default } from "../../Liquify-Cr-1qPxN.js";
 export { componentDefinition, Liquify_default as default };

package/dist/js/codegen.d.ts

@@ -0,0 +1 @@
+export * from './utils/generatePresetCode'

package/dist/js/codegen.js

@@ -0,0 +1 @@
+export * from './utils/generatePresetCode.js'

package/dist/js/createPreview.d.ts

@@ -0,0 +1,19 @@
+import { ShaderInstance, PreviewOptions } from './types';
+
+/**
+ * Create a watermarked shader preview from a preview token or preset ID.
+ * Fetches the encoded (and server-watermarked) definition from the API,
+ * decodes it, renders it to the canvas, and adds a DOM watermark overlay.
+ *
+ * @example
+ * ```ts
+ * const preview = await createPreview(canvas, {
+ *   presetId: 'abc123'
+ * })
+ *
+ * // Cleanup
+ * preview.destroy()
+ * ```
+ */
+export declare function createPreview(canvas: HTMLCanvasElement, options: PreviewOptions): Promise<ShaderInstance>;
+//# sourceMappingURL=createPreview.d.ts.map

package/dist/js/createPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPreview.d.ts","sourceRoot":"","sources":["../src/createPreview.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAO7D;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,aAAa,CACjC,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,cAAc,GACtB,OAAO,CAAC,cAAc,CAAC,CAuCzB"}