shaders 3.0.442 → 3.0.444

package/dist/react/ParticleFlow.js

@@ -0,0 +1,220 @@
+import { ShaderContext } from "./Shader.js";
+import { useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { createGpuUniformsMap, resolveBoundingBox } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { componentDefinition } from "../core/shaders/ParticleFlow/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
+}
+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 && !isPropDriver(value)) baseProps[key] = value;
+	return baseProps;
+}
+var MARKER_STYLE = { display: "contents" };
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var defaultProps = {
+	blendMode: "normal",
+	visible: true
+};
+try {
+	if (componentDefinition && componentDefinition.props) Object.entries(componentDefinition.props).forEach(([key, config]) => {
+		const propConfig = config;
+		if (propConfig && typeof propConfig === "object" && "default" in propConfig) defaultProps[key] = propConfig.default;
+	});
+} catch (e) {
+	console.warn("Error extracting default props:", e);
+}
+const ShaderComponent = (props) => {
+	const context = useContext(ShaderContext);
+	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 reactId = useId();
+	const instanceId = useMemo(() => {
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || reactId.replace(/[^a-zA-Z0-9_]/g, "");
+	}, [props.id, reactId]);
+	const effectiveProps = useMemo(() => {
+		return computeEffectiveProps(props, defaultProps);
+	}, [props]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const effectiveBoundingBox = useMemo(() => resolveBoundingBox(props.boundingBox), [props.boundingBox]);
+	const markerRef = useRef(null);
+	const isCapturesDOM = !!componentDefinition.capturesDOM;
+	const captureCanvasRef = useRef(null);
+	const [domMounted, setDomMounted] = useState(false);
+	const [captureSize, setCaptureSize] = useState(() => ({
+		w: typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0,
+		h: typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0
+	}));
+	useEffect(() => {
+		if (!isCapturesDOM) return;
+		setDomMounted(true);
+		const onResize = () => {
+			const d = Math.min(window.devicePixelRatio, 2);
+			setCaptureSize({
+				w: Math.round(window.innerWidth * d),
+				h: Math.round(window.innerHeight * d)
+			});
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [isCapturesDOM]);
+	const detectedOrderRef = useRef(void 0);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null) {
+		setColorSpaceMode(shaderColorSpace);
+		uniformsRef.current = createGpuUniformsMap(componentDefinition, effectiveProps, instanceId);
+	}
+	const childContextValue = useMemo(() => {
+		return {
+			...context,
+			shaderParentId: instanceId
+		};
+	}, [context, instanceId]);
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			const metadata = {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				maps: mapsFromProps,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform,
+				boundingBox: effectiveBoundingBox
+			};
+			parentRegister(instanceId, componentDefinition.fragment, parentId, metadata, uniformsRef.current, componentDefinition, isCapturesDOM ? captureCanvasRef.current ?? void 0 : void 0);
+			return () => {
+				parentRegister(instanceId, null, null, null, null);
+			};
+		} catch (error) {
+			console.error("Error registering shader node:", error);
+			return () => {};
+		}
+	}, [
+		instanceId,
+		parentId,
+		parentRegister,
+		domMounted
+	]);
+	useEffect(() => {
+		if (props.renderOrder === void 0 && markerRef.current) {
+			const parent = markerRef.current.parentElement;
+			if (parent) {
+				const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+				const position = Array.from(siblings).indexOf(markerRef.current);
+				if (position >= 0) {
+					detectedOrderRef.current = position;
+					parentMetadataUpdate(instanceId, { renderOrder: position });
+				}
+			}
+		}
+	}, []);
+	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;
+				if (uniformData.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;
+					}
+				}
+			});
+		} catch (error) {
+			console.error("Error updating uniforms:", error);
+		}
+	}, [
+		effectiveProps,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		try {
+			parentMetadataUpdate(instanceId, {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				maps: mapsFromProps,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform,
+				boundingBox: effectiveBoundingBox
+			});
+		} catch (error) {
+			console.error("Error updating metadata:", error);
+		}
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		mapsFromProps,
+		effectiveTransform,
+		effectiveBoundingBox,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	if (props.ref && typeof props.ref === "function") try {
+		props.ref(null);
+	} catch (e) {}
+	const captureCanvas = isCapturesDOM && domMounted ? createPortal(/* @__PURE__ */ jsx("canvas", {
+		ref: captureCanvasRef,
+		"layoutsubtree": "",
+		width: captureSize.w,
+		height: captureSize.h,
+		style: {
+			position: "fixed",
+			inset: 0,
+			width: "100vw",
+			height: "100vh",
+			zIndex: -9999
+		},
+		children: props.children
+	}), document.body) : null;
+	return /* @__PURE__ */ jsxs(ShaderContext.Provider, {
+		value: childContextValue,
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: markerRef,
+			style: MARKER_STYLE,
+			"data-shader-id": instanceId,
+			children: !isCapturesDOM && props.children
+		}), captureCanvas]
+	});
+};
+var ParticleFlow_default = ShaderComponent;
+export { ShaderComponent, ParticleFlow_default as default };

package/dist/react/Preview.js

@@ -113,11 +113,16 @@ var componentMap = {
 	Ascii: lazy(() => import("./Ascii.js")),
 	Aurora: lazy(() => import("./Aurora.js")),
 	BarShift: lazy(() => import("./BarShift.js")),
+	BarnDoors: lazy(() => import("./BarnDoors.js")),
 	Beam: lazy(() => import("./Beam.js")),
+	Bend: lazy(() => import("./Bend.js")),
 	Blob: lazy(() => import("./Blob.js")),
+	BlockDissolve: lazy(() => import("./BlockDissolve.js")),
 	BlockNoise: lazy(() => import("./BlockNoise.js")),
 	BlueNoise: lazy(() => import("./BlueNoise.js")),
 	Blur: lazy(() => import("./Blur.js")),
+	Boids: lazy(() => import("./Boids.js")),
+	BokehBlur: lazy(() => import("./BokehBlur.js")),
 	BrickPattern: lazy(() => import("./BrickPattern.js")),
 	BrightnessContrast: lazy(() => import("./BrightnessContrast.js")),
 	BrushedMetal: lazy(() => import("./BrushedMetal.js")),
@@ -126,6 +131,7 @@ var componentMap = {
 	CarbonFiber: lazy(() => import("./CarbonFiber.js")),
 	Chalkboard: lazy(() => import("./Chalkboard.js")),
 	ChannelBlur: lazy(() => import("./ChannelBlur.js")),
+	CheckerWipe: lazy(() => import("./CheckerWipe.js")),
 	Checkerboard: lazy(() => import("./Checkerboard.js")),
 	Chevron: lazy(() => import("./Chevron.js")),
 	ChromaFlow: lazy(() => import("./ChromaFlow.js")),
@@ -143,10 +149,11 @@ var componentMap = {
 	CurlNoise: lazy(() => import("./CurlNoise.js")),
 	CursorRipples: lazy(() => import("./CursorRipples.js")),
 	CursorTrail: lazy(() => import("./CursorTrail.js")),
-	DOMTexture: lazy(() => import("./DOMTexture.js")),
 	DataMosh: lazy(() => import("./DataMosh.js")),
 	DiamondGradient: lazy(() => import("./DiamondGradient.js")),
+	DiamondWipe: lazy(() => import("./DiamondWipe.js")),
 	DiffuseBlur: lazy(() => import("./DiffuseBlur.js")),
+	DisplacementMap: lazy(() => import("./DisplacementMap.js")),
 	Dither: lazy(() => import("./Dither.js")),
 	DotGrid: lazy(() => import("./DotGrid.js")),
 	DropShadow: lazy(() => import("./DropShadow.js")),
@@ -158,6 +165,7 @@ var componentMap = {
 	Exposure: lazy(() => import("./Exposure.js")),
 	FallingLines: lazy(() => import("./FallingLines.js")),
 	FilmGrain: lazy(() => import("./FilmGrain.js")),
+	FilmStock: lazy(() => import("./FilmStock.js")),
 	Flip: lazy(() => import("./Flip.js")),
 	FloatingParticles: lazy(() => import("./FloatingParticles.js")),
 	FlowField: lazy(() => import("./FlowField.js")),
@@ -180,6 +188,8 @@ var componentMap = {
 	Grid: lazy(() => import("./Grid.js")),
 	GridDistortion: lazy(() => import("./GridDistortion.js")),
 	Group: lazy(() => import("./Group.js")),
+	HTMLInCanvas: lazy(() => import("./HTMLInCanvas.js")),
+	DOMTexture: lazy(() => import("./HTMLInCanvas.js")),
 	Halftone: lazy(() => import("./Halftone.js")),
 	Heart: lazy(() => import("./Heart.js")),
 	Heatmap: lazy(() => import("./Heatmap.js")),
@@ -188,7 +198,9 @@ var componentMap = {
 	Holographic: lazy(() => import("./Holographic.js")),
 	HueShift: lazy(() => import("./HueShift.js")),
 	ImageTexture: lazy(() => import("./ImageTexture.js")),
+	InkFlow: lazy(() => import("./InkFlow.js")),
 	Invert: lazy(() => import("./Invert.js")),
+	IrisWipe: lazy(() => import("./IrisWipe.js")),
 	IsometricCubes: lazy(() => import("./IsometricCubes.js")),
 	Kaleidoscope: lazy(() => import("./Kaleidoscope.js")),
 	KeyFrames: lazy(() => import("./KeyFrames.js")),
@@ -197,16 +209,21 @@ var componentMap = {
 	LightLeak: lazy(() => import("./LightLeak.js")),
 	LinearBlur: lazy(() => import("./LinearBlur.js")),
 	LinearGradient: lazy(() => import("./LinearGradient.js")),
+	LinearWipe: lazy(() => import("./LinearWipe.js")),
 	LiquidMetal: lazy(() => import("./LiquidMetal.js")),
 	Liquify: lazy(() => import("./Liquify.js")),
+	MagneticFilings: lazy(() => import("./MagneticFilings.js")),
 	Marble: lazy(() => import("./Marble.js")),
 	Mirror: lazy(() => import("./Mirror.js")),
 	MultiPointGradient: lazy(() => import("./MultiPointGradient.js")),
 	Neon: lazy(() => import("./Neon.js")),
+	NoiseDissolve: lazy(() => import("./NoiseDissolve.js")),
 	ObjectTracker: lazy(() => import("./ObjectTracker.js")),
 	PagePeel: lazy(() => import("./PagePeel.js")),
 	Paper: lazy(() => import("./Paper.js")),
 	Parallelogram: lazy(() => import("./Parallelogram.js")),
+	ParticleField: lazy(() => import("./ParticleField.js")),
+	ParticleFlow: lazy(() => import("./ParticleFlow.js")),
 	Particles: lazy(() => import("./Particles.js")),
 	PerlinNoise: lazy(() => import("./PerlinNoise.js")),
 	Perspective: lazy(() => import("./Perspective.js")),
@@ -221,11 +238,14 @@ var componentMap = {
 	Prism: lazy(() => import("./Prism.js")),
 	ProgressiveBlur: lazy(() => import("./ProgressiveBlur.js")),
 	RadialGradient: lazy(() => import("./RadialGradient.js")),
+	RadialWipe: lazy(() => import("./RadialWipe.js")),
+	RandomBars: lazy(() => import("./RandomBars.js")),
 	ReactionDiffusion: lazy(() => import("./ReactionDiffusion.js")),
 	RectangularCoordinates: lazy(() => import("./RectangularCoordinates.js")),
 	ReflectivePlane: lazy(() => import("./ReflectivePlane.js")),
 	Repeater: lazy(() => import("./Repeater.js")),
 	Ring: lazy(() => import("./Ring.js")),
+	RippleWipe: lazy(() => import("./RippleWipe.js")),
 	Ripples: lazy(() => import("./Ripples.js")),
 	RoundedRect: lazy(() => import("./RoundedRect.js")),
 	Saturation: lazy(() => import("./Saturation.js")),
@@ -234,6 +254,7 @@ var componentMap = {
 	Shatter: lazy(() => import("./Shatter.js")),
 	SimplexNoise: lazy(() => import("./SimplexNoise.js")),
 	SineWave: lazy(() => import("./SineWave.js")),
+	SliceWipe: lazy(() => import("./SliceWipe.js")),
 	Smoke: lazy(() => import("./Smoke.js")),
 	SmokeFill: lazy(() => import("./SmokeFill.js")),
 	SmokeFlow: lazy(() => import("./SmokeFlow.js")),
@@ -254,6 +275,7 @@ var componentMap = {
 	Text: lazy(() => import("./Text.js")),
 	ThinFilm: lazy(() => import("./ThinFilm.js")),
 	TiltShift: lazy(() => import("./TiltShift.js")),
+	TimeTrail: lazy(() => import("./TimeTrail.js")),
 	Tint: lazy(() => import("./Tint.js")),
 	Trapezoid: lazy(() => import("./Trapezoid.js")),
 	TriangularGrid: lazy(() => import("./TriangularGrid.js")),
@@ -261,6 +283,7 @@ var componentMap = {
 	Truchet: lazy(() => import("./Truchet.js")),
 	Twirl: lazy(() => import("./Twirl.js")),
 	VHS: lazy(() => import("./VHS.js")),
+	VenetianBlinds: lazy(() => import("./VenetianBlinds.js")),
 	Vesica: lazy(() => import("./Vesica.js")),
 	Vibrance: lazy(() => import("./Vibrance.js")),
 	VideoTexture: lazy(() => import("./VideoTexture.js")),

package/dist/react/RadialWipe.js

@@ -0,0 +1,220 @@
+import { ShaderContext } from "./Shader.js";
+import { useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { createGpuUniformsMap, resolveBoundingBox } from "../core/index.js";
+import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { componentDefinition } from "../core/shaders/RadialWipe/index.js";
+function isPropDriver(value) {
+	return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
+}
+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 && !isPropDriver(value)) baseProps[key] = value;
+	return baseProps;
+}
+var MARKER_STYLE = { display: "contents" };
+var DEFAULT_TRANSFORM = {
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	scale: 1,
+	anchorX: .5,
+	anchorY: .5,
+	edges: "transparent"
+};
+var defaultProps = {
+	blendMode: "normal",
+	visible: true
+};
+try {
+	if (componentDefinition && componentDefinition.props) Object.entries(componentDefinition.props).forEach(([key, config]) => {
+		const propConfig = config;
+		if (propConfig && typeof propConfig === "object" && "default" in propConfig) defaultProps[key] = propConfig.default;
+	});
+} catch (e) {
+	console.warn("Error extracting default props:", e);
+}
+const ShaderComponent = (props) => {
+	const context = useContext(ShaderContext);
+	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 reactId = useId();
+	const instanceId = useMemo(() => {
+		return (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || reactId.replace(/[^a-zA-Z0-9_]/g, "");
+	}, [props.id, reactId]);
+	const effectiveProps = useMemo(() => {
+		return computeEffectiveProps(props, defaultProps);
+	}, [props]);
+	const effectiveTransform = useMemo(() => ({
+		...DEFAULT_TRANSFORM,
+		...props.transform
+	}), [props.transform]);
+	const effectiveBoundingBox = useMemo(() => resolveBoundingBox(props.boundingBox), [props.boundingBox]);
+	const markerRef = useRef(null);
+	const isCapturesDOM = !!componentDefinition.capturesDOM;
+	const captureCanvasRef = useRef(null);
+	const [domMounted, setDomMounted] = useState(false);
+	const [captureSize, setCaptureSize] = useState(() => ({
+		w: typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0,
+		h: typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0
+	}));
+	useEffect(() => {
+		if (!isCapturesDOM) return;
+		setDomMounted(true);
+		const onResize = () => {
+			const d = Math.min(window.devicePixelRatio, 2);
+			setCaptureSize({
+				w: Math.round(window.innerWidth * d),
+				h: Math.round(window.innerHeight * d)
+			});
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [isCapturesDOM]);
+	const detectedOrderRef = useRef(void 0);
+	const uniformsRef = useRef(null);
+	if (uniformsRef.current === null) {
+		setColorSpaceMode(shaderColorSpace);
+		uniformsRef.current = createGpuUniformsMap(componentDefinition, effectiveProps, instanceId);
+	}
+	const childContextValue = useMemo(() => {
+		return {
+			...context,
+			shaderParentId: instanceId
+		};
+	}, [context, instanceId]);
+	useEffect(() => {
+		if (!uniformsRef.current) return;
+		try {
+			const metadata = {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				maps: mapsFromProps,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform,
+				boundingBox: effectiveBoundingBox
+			};
+			parentRegister(instanceId, componentDefinition.fragment, parentId, metadata, uniformsRef.current, componentDefinition, isCapturesDOM ? captureCanvasRef.current ?? void 0 : void 0);
+			return () => {
+				parentRegister(instanceId, null, null, null, null);
+			};
+		} catch (error) {
+			console.error("Error registering shader node:", error);
+			return () => {};
+		}
+	}, [
+		instanceId,
+		parentId,
+		parentRegister,
+		domMounted
+	]);
+	useEffect(() => {
+		if (props.renderOrder === void 0 && markerRef.current) {
+			const parent = markerRef.current.parentElement;
+			if (parent) {
+				const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
+				const position = Array.from(siblings).indexOf(markerRef.current);
+				if (position >= 0) {
+					detectedOrderRef.current = position;
+					parentMetadataUpdate(instanceId, { renderOrder: position });
+				}
+			}
+		}
+	}, []);
+	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;
+				if (uniformData.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;
+					}
+				}
+			});
+		} catch (error) {
+			console.error("Error updating uniforms:", error);
+		}
+	}, [
+		effectiveProps,
+		instanceId,
+		parentUniformUpdate
+	]);
+	useEffect(() => {
+		try {
+			parentMetadataUpdate(instanceId, {
+				blendMode: props.blendMode || "normal",
+				opacity: props.opacity,
+				visible: props.visible === false ? false : true,
+				id: props.id,
+				mask: props.maskSource ? {
+					source: props.maskSource,
+					type: props.maskType || "alpha"
+				} : void 0,
+				maps: mapsFromProps,
+				renderOrder: props.renderOrder ?? detectedOrderRef.current,
+				transform: effectiveTransform,
+				boundingBox: effectiveBoundingBox
+			});
+		} catch (error) {
+			console.error("Error updating metadata:", error);
+		}
+	}, [
+		props.blendMode,
+		props.opacity,
+		props.visible,
+		props.maskSource,
+		props.maskType,
+		props.renderOrder,
+		props.id,
+		mapsFromProps,
+		effectiveTransform,
+		effectiveBoundingBox,
+		instanceId,
+		parentMetadataUpdate
+	]);
+	if (props.ref && typeof props.ref === "function") try {
+		props.ref(null);
+	} catch (e) {}
+	const captureCanvas = isCapturesDOM && domMounted ? createPortal(/* @__PURE__ */ jsx("canvas", {
+		ref: captureCanvasRef,
+		"layoutsubtree": "",
+		width: captureSize.w,
+		height: captureSize.h,
+		style: {
+			position: "fixed",
+			inset: 0,
+			width: "100vw",
+			height: "100vh",
+			zIndex: -9999
+		},
+		children: props.children
+	}), document.body) : null;
+	return /* @__PURE__ */ jsxs(ShaderContext.Provider, {
+		value: childContextValue,
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: markerRef,
+			style: MARKER_STYLE,
+			"data-shader-id": instanceId,
+			children: !isCapturesDOM && props.children
+		}), captureCanvas]
+	});
+};
+var RadialWipe_default = ShaderComponent;
+export { ShaderComponent, RadialWipe_default as default };