shaders 2.3.66 → 2.3.68

package/dist/react/TiltShift.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/TiltShift/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/Tint.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/Tint/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/Tritone.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/Tritone/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/Twirl.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/Twirl/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/Vibrance.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/Vibrance/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/VideoTexture.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/VideoTexture/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/WaveDistortion.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/WaveDistortion/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/WebcamTexture.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/WebcamTexture/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/ZoomBlur.js

@@ -4,9 +4,12 @@ import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { jsx } from "react/jsx-runtime";
 import { componentDefinition } from "../core/shaders/ZoomBlur/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && value.type === "map";
+}
 function computeEffectiveProps(props, defaultProps$1) {
 	let baseProps = { ...defaultProps$1 };
-	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0) baseProps[key] = value;
+	for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && value !== void 0 && !isPropDriver(value)) baseProps[key] = value;
 	return baseProps;
 }
 var MARKER_STYLE = { display: "contents" };
@@ -36,7 +39,7 @@ const ShaderComponent = (props) => {
 	if (!context) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
 	const { shaderParentId: parentId, shaderNodeRegister: parentRegister, shaderUniformUpdate: parentUniformUpdate, shaderMetadataUpdate: parentMetadataUpdate, shaderColorSpace } = context;
 	const instanceId = useMemo(() => {
-		return props.id || Math.random().toString(36).substring(2, 10);
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || Math.random().toString(36).substring(2, 10);
 	}, [props.id]);
 	const effectiveProps = useMemo(() => {
 		return computeEffectiveProps(props, defaultProps);
@@ -70,6 +73,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			};
@@ -100,14 +104,20 @@ const ShaderComponent = (props) => {
 		}
 	}, []);
 	const prevPropsRef = useRef({});
+	const mapsFromProps = useMemo(() => {
+		const maps = {};
+		for (const [key, value] of Object.entries(props)) if (key !== "children" && key !== "ref" && isPropDriver(value)) maps[key] = value;
+		return Object.keys(maps).length > 0 ? maps : void 0;
+	}, [props]);
 	useEffect(() => {
 		if (!uniformsRef.current) return;
 		try {
 			Object.entries(uniformsRef.current).forEach(([propName, uniformData]) => {
 				if (!uniformData || typeof uniformData !== "object") return;
-				const { uniform, transform } = uniformData;
+				const { uniform } = uniformData;
 				if (uniform?.value !== void 0 && propName in effectiveProps) {
 					const newValue = effectiveProps[propName];
+					if (isPropDriver(newValue)) return;
 					if (newValue !== prevPropsRef.current[propName]) {
 						parentUniformUpdate(instanceId, propName, newValue);
 						prevPropsRef.current[propName] = newValue;
@@ -133,6 +143,7 @@ const ShaderComponent = (props) => {
 					source: props.maskSource,
 					type: props.maskType || "alpha"
 				} : void 0,
+				maps: mapsFromProps,
 				renderOrder: props.renderOrder ?? detectedOrderRef.current,
 				transform: effectiveTransform
 			});
@@ -147,6 +158,7 @@ const ShaderComponent = (props) => {
 		props.maskType,
 		props.renderOrder,
 		props.id,
+		mapsFromProps,
 		effectiveTransform,
 		instanceId,
 		parentMetadataUpdate

package/dist/react/components/AngularBlur.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { BlendMode, TransformConfig } from '../../core';
+import { BlendMode, PropDriver, TransformConfig } from '../../core';
 import { ComponentProps } from '../../core/shaders/AngularBlur';
 
 export type { ComponentProps };
@@ -22,7 +22,9 @@ interface BaseShaderProps {
  * Component-specific props that merge base props with shader-specific props
  * Note: ComponentProps are made optional since they have defaults from the shader definition
  */
-type ShaderComponentProps = BaseShaderProps & Partial<ComponentProps>;
+type ShaderComponentProps = BaseShaderProps & Partial<Omit<ComponentProps, 'intensity'>> & {
+    intensity?: ComponentProps['intensity'] | PropDriver;
+};
 /**
  * The main React wrapper component for Shader shader nodes
  */

package/dist/react/components/AngularBlur.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AngularBlur.d.ts","sourceRoot":"","sources":["../../src/components/AngularBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGpF,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC;AAwDtE;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmL1D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AngularBlur.d.ts","sourceRoot":"","sources":["../../src/components/AngularBlur.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAGH,KAAK,SAAS,EAKd,KAAK,UAAU,EACf,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGpF,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACxB;AAMD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,GAAG;IACzF,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;CACtD,CAAC;AAwDF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmM1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/react/components/Ascii.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { BlendMode, TransformConfig } from '../../core';
+import { BlendMode, PropDriver, TransformConfig } from '../../core';
 import { ComponentProps } from '../../core/shaders/Ascii';
 
 export type { ComponentProps };
@@ -22,7 +22,10 @@ interface BaseShaderProps {
  * Component-specific props that merge base props with shader-specific props
  * Note: ComponentProps are made optional since they have defaults from the shader definition
  */
-type ShaderComponentProps = BaseShaderProps & Partial<ComponentProps>;
+type ShaderComponentProps = BaseShaderProps & Partial<Omit<ComponentProps, 'spacing' | 'gamma'>> & {
+    spacing?: ComponentProps['spacing'] | PropDriver;
+    gamma?: ComponentProps['gamma'] | PropDriver;
+};
 /**
  * The main React wrapper component for Shader shader nodes
  */