shaders 2.5.92 → 2.5.93

package/dist/svelte/source/components/WaveDistortion.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/WaveDistortion/index.js';
 
+    // Warn once per page load if this is an experimental component
+    let _experimentalWarnedOnce = false;
+    if ((componentDefinition as any).experimental && !_experimentalWarnedOnce) {
+        _experimentalWarnedOnce = true;
+        const _e = (componentDefinition as any).experimental;
+        console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, 'color: #f59e0b; font-weight: bold');
+    }
+
     /**
      * Define component props including blend mode, opacity, visibility, masking, and transformation
      */
@@ -160,7 +168,7 @@
     /**
      * Get the node registration function from parent context
      */
-    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any) => void>('shaderNodeRegister');
+    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any, domCanvas?: HTMLCanvasElement) => void>('shaderNodeRegister');
     if (parentRegister === undefined) {
         throw new Error('Shader components must be used inside an <Shader> component or another shader component');
     }
@@ -181,6 +189,27 @@
         throw new Error('Shader components require shaderMetadataUpdate from parent');
     }
 
+    // capturesDOM — canvas layoutsubtree portal for DOMTexture-style shaders
+    const isCapturesDOM = !!(componentDefinition as any).capturesDOM;
+    let captureCanvas: HTMLCanvasElement | undefined;
+    let captureW = $state(typeof window !== 'undefined' ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+    let captureH = $state(typeof window !== 'undefined' ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+
+    function teleportToBody(node: HTMLElement) {
+        document.body.appendChild(node);
+        return { destroy() { node.remove(); } };
+    }
+
+    if (isCapturesDOM) {
+        const onWinResize = () => {
+            const d = Math.min(window.devicePixelRatio, 2);
+            captureW = Math.round(window.innerWidth * d);
+            captureH = Math.round(window.innerHeight * d);
+        };
+        onMount(() => { window.addEventListener('resize', onWinResize); });
+        onDestroy(() => { window.removeEventListener('resize', onWinResize); });
+    }
+
     // DOM marker ref for determining render order from template position
     let orderMarker: HTMLSpanElement;
 
@@ -250,7 +279,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -285,5 +315,14 @@
 </script>
 
 <span bind:this={orderMarker} style="display:contents" data-shader-id={instanceId}>
-    {@render children?.()}
-</span>
+    {#if !isCapturesDOM}
+        {@render children?.()}
+    {/if}
+</span>
+{#if isCapturesDOM}
+    <canvas use:teleportToBody bind:this={captureCanvas} layoutsubtree
+            width={captureW} height={captureH}
+            style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999">
+        {@render children?.()}
+    </canvas>
+{/if}

package/dist/svelte/source/components/Weave.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/Weave/index.js';
 
+    // Warn once per page load if this is an experimental component
+    let _experimentalWarnedOnce = false;
+    if ((componentDefinition as any).experimental && !_experimentalWarnedOnce) {
+        _experimentalWarnedOnce = true;
+        const _e = (componentDefinition as any).experimental;
+        console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, 'color: #f59e0b; font-weight: bold');
+    }
+
     /**
      * Define component props including blend mode, opacity, visibility, masking, and transformation
      */
@@ -160,7 +168,7 @@
     /**
      * Get the node registration function from parent context
      */
-    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any) => void>('shaderNodeRegister');
+    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any, domCanvas?: HTMLCanvasElement) => void>('shaderNodeRegister');
     if (parentRegister === undefined) {
         throw new Error('Shader components must be used inside an <Shader> component or another shader component');
     }
@@ -181,6 +189,27 @@
         throw new Error('Shader components require shaderMetadataUpdate from parent');
     }
 
+    // capturesDOM — canvas layoutsubtree portal for DOMTexture-style shaders
+    const isCapturesDOM = !!(componentDefinition as any).capturesDOM;
+    let captureCanvas: HTMLCanvasElement | undefined;
+    let captureW = $state(typeof window !== 'undefined' ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+    let captureH = $state(typeof window !== 'undefined' ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+
+    function teleportToBody(node: HTMLElement) {
+        document.body.appendChild(node);
+        return { destroy() { node.remove(); } };
+    }
+
+    if (isCapturesDOM) {
+        const onWinResize = () => {
+            const d = Math.min(window.devicePixelRatio, 2);
+            captureW = Math.round(window.innerWidth * d);
+            captureH = Math.round(window.innerHeight * d);
+        };
+        onMount(() => { window.addEventListener('resize', onWinResize); });
+        onDestroy(() => { window.removeEventListener('resize', onWinResize); });
+    }
+
     // DOM marker ref for determining render order from template position
     let orderMarker: HTMLSpanElement;
 
@@ -250,7 +279,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -285,5 +315,14 @@
 </script>
 
 <span bind:this={orderMarker} style="display:contents" data-shader-id={instanceId}>
-    {@render children?.()}
-</span>
+    {#if !isCapturesDOM}
+        {@render children?.()}
+    {/if}
+</span>
+{#if isCapturesDOM}
+    <canvas use:teleportToBody bind:this={captureCanvas} layoutsubtree
+            width={captureW} height={captureH}
+            style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999">
+        {@render children?.()}
+    </canvas>
+{/if}

package/dist/svelte/source/components/WebcamTexture.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/WebcamTexture/index.js';
 
+    // Warn once per page load if this is an experimental component
+    let _experimentalWarnedOnce = false;
+    if ((componentDefinition as any).experimental && !_experimentalWarnedOnce) {
+        _experimentalWarnedOnce = true;
+        const _e = (componentDefinition as any).experimental;
+        console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, 'color: #f59e0b; font-weight: bold');
+    }
+
     /**
      * Define component props including blend mode, opacity, visibility, masking, and transformation
      */
@@ -157,7 +165,7 @@
     /**
      * Get the node registration function from parent context
      */
-    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any) => void>('shaderNodeRegister');
+    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any, domCanvas?: HTMLCanvasElement) => void>('shaderNodeRegister');
     if (parentRegister === undefined) {
         throw new Error('Shader components must be used inside an <Shader> component or another shader component');
     }
@@ -178,6 +186,27 @@
         throw new Error('Shader components require shaderMetadataUpdate from parent');
     }
 
+    // capturesDOM — canvas layoutsubtree portal for DOMTexture-style shaders
+    const isCapturesDOM = !!(componentDefinition as any).capturesDOM;
+    let captureCanvas: HTMLCanvasElement | undefined;
+    let captureW = $state(typeof window !== 'undefined' ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+    let captureH = $state(typeof window !== 'undefined' ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+
+    function teleportToBody(node: HTMLElement) {
+        document.body.appendChild(node);
+        return { destroy() { node.remove(); } };
+    }
+
+    if (isCapturesDOM) {
+        const onWinResize = () => {
+            const d = Math.min(window.devicePixelRatio, 2);
+            captureW = Math.round(window.innerWidth * d);
+            captureH = Math.round(window.innerHeight * d);
+        };
+        onMount(() => { window.addEventListener('resize', onWinResize); });
+        onDestroy(() => { window.removeEventListener('resize', onWinResize); });
+    }
+
     // DOM marker ref for determining render order from template position
     let orderMarker: HTMLSpanElement;
 
@@ -247,7 +276,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -282,5 +312,14 @@
 </script>
 
 <span bind:this={orderMarker} style="display:contents" data-shader-id={instanceId}>
-    {@render children?.()}
-</span>
+    {#if !isCapturesDOM}
+        {@render children?.()}
+    {/if}
+</span>
+{#if isCapturesDOM}
+    <canvas use:teleportToBody bind:this={captureCanvas} layoutsubtree
+            width={captureW} height={captureH}
+            style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999">
+        {@render children?.()}
+    </canvas>
+{/if}

package/dist/svelte/source/components/ZoomBlur.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/ZoomBlur/index.js';
 
+    // Warn once per page load if this is an experimental component
+    let _experimentalWarnedOnce = false;
+    if ((componentDefinition as any).experimental && !_experimentalWarnedOnce) {
+        _experimentalWarnedOnce = true;
+        const _e = (componentDefinition as any).experimental;
+        console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, 'color: #f59e0b; font-weight: bold');
+    }
+
     /**
      * Define component props including blend mode, opacity, visibility, masking, and transformation
      */
@@ -159,7 +167,7 @@
     /**
      * Get the node registration function from parent context
      */
-    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any) => void>('shaderNodeRegister');
+    const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any, domCanvas?: HTMLCanvasElement) => void>('shaderNodeRegister');
     if (parentRegister === undefined) {
         throw new Error('Shader components must be used inside an <Shader> component or another shader component');
     }
@@ -180,6 +188,27 @@
         throw new Error('Shader components require shaderMetadataUpdate from parent');
     }
 
+    // capturesDOM — canvas layoutsubtree portal for DOMTexture-style shaders
+    const isCapturesDOM = !!(componentDefinition as any).capturesDOM;
+    let captureCanvas: HTMLCanvasElement | undefined;
+    let captureW = $state(typeof window !== 'undefined' ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+    let captureH = $state(typeof window !== 'undefined' ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+
+    function teleportToBody(node: HTMLElement) {
+        document.body.appendChild(node);
+        return { destroy() { node.remove(); } };
+    }
+
+    if (isCapturesDOM) {
+        const onWinResize = () => {
+            const d = Math.min(window.devicePixelRatio, 2);
+            captureW = Math.round(window.innerWidth * d);
+            captureH = Math.round(window.innerHeight * d);
+        };
+        onMount(() => { window.addEventListener('resize', onWinResize); });
+        onDestroy(() => { window.removeEventListener('resize', onWinResize); });
+    }
+
     // DOM marker ref for determining render order from template position
     let orderMarker: HTMLSpanElement;
 
@@ -249,7 +278,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -284,5 +314,14 @@
 </script>
 
 <span bind:this={orderMarker} style="display:contents" data-shader-id={instanceId}>
-    {@render children?.()}
-</span>
+    {#if !isCapturesDOM}
+        {@render children?.()}
+    {/if}
+</span>
+{#if isCapturesDOM}
+    <canvas use:teleportToBody bind:this={captureCanvas} layoutsubtree
+            width={captureW} height={captureH}
+            style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999">
+        {@render children?.()}
+    </canvas>
+{/if}

package/dist/svelte/source/engine/Preview.svelte

@@ -27,6 +27,7 @@ import Cross from '../components/Cross.svelte'
 import Crystal from '../components/Crystal.svelte'
 import CursorRipples from '../components/CursorRipples.svelte'
 import CursorTrail from '../components/CursorTrail.svelte'
+import DOMTexture from '../components/DOMTexture.svelte'
 import DiamondGradient from '../components/DiamondGradient.svelte'
 import DiffuseBlur from '../components/DiffuseBlur.svelte'
 import Dither from '../components/Dither.svelte'
@@ -133,6 +134,7 @@ const componentMap: Record<string, any> = {
   Crystal,
   CursorRipples,
   CursorTrail,
+  DOMTexture,
   DiamondGradient,
   DiffuseBlur,
   Dither,

package/dist/svelte/source/engine/Shader.svelte

@@ -45,13 +45,13 @@
 
   // Provide node registration function for child components
   // Callbacks capture `rendererInstance` by reference — they see the live value after onMount sets it
-  setContext('shaderNodeRegister', (id: string, fragmentNodeFunc: any, parentId: string | null, metadata: any, uniforms: any = null, componentDef: any = null) => {
+  setContext('shaderNodeRegister', (id: string, fragmentNodeFunc: any, parentId: string | null, metadata: any, uniforms: any = null, componentDef: any = null, domCanvas?: HTMLCanvasElement) => {
     if (!rendererInstance) return
     // If fragmentNodeFunc is null, the component is being unmounted, so remove it
     if (fragmentNodeFunc === null) {
       rendererInstance.removeNode(id);
     } else {
-      rendererInstance.registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDef);
+      rendererInstance.registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDef, domCanvas);
     }
   });
 

package/dist/svelte/source/index.js

@@ -20,6 +20,7 @@ export { default as Cross } from './components/Cross.svelte';
 export { default as Crystal } from './components/Crystal.svelte';
 export { default as CursorRipples } from './components/CursorRipples.svelte';
 export { default as CursorTrail } from './components/CursorTrail.svelte';
+export { default as DOMTexture } from './components/DOMTexture.svelte';
 export { default as DiamondGradient } from './components/DiamondGradient.svelte';
 export { default as DiffuseBlur } from './components/DiffuseBlur.svelte';
 export { default as Dither } from './components/Dither.svelte';

package/dist/svelte/utils/generatePresetCode.js

@@ -1,2 +1,2 @@
-import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-GNbu5b-Y.js";
+import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-gaYD5uUH.js";
 export { availableComponents, generatePresetCode };

package/dist/vue/AngularBlur.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/AngularBlur/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "AngularBlur",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -25,6 +26,12 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		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");
 		}
@@ -80,6 +87,33 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -94,7 +128,7 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -150,17 +184,30 @@ var AngularBlur_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });

package/dist/vue/Ascii.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Ascii/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var Ascii_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Ascii",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -30,6 +31,12 @@ var Ascii_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		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");
 		}
@@ -85,6 +92,33 @@ var Ascii_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -99,7 +133,7 @@ var Ascii_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -155,17 +189,30 @@ var Ascii_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });

package/dist/vue/Aurora.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { computed, createElementBlock, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
 import { createUniformsMap } from "../core/index.js";
 import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
 import { componentDefinition } from "../core/shaders/Aurora/index.js";
 var _hoisted_1 = ["data-shader-id"];
+var _hoisted_2 = ["width", "height"];
 var Aurora_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Aurora",
 	props: /* @__PURE__ */ mergeDefaults({
@@ -36,6 +37,12 @@ var Aurora_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		}, {})
 	}),
 	setup(__props) {
+		let _experimentalWarnedOnce = false;
+		if (componentDefinition.experimental && !_experimentalWarnedOnce) {
+			_experimentalWarnedOnce = true;
+			const _e = componentDefinition.experimental;
+			console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
+		}
 		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");
 		}
@@ -91,6 +98,33 @@ var Aurora_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
 		const rendererResetSignal = inject("shaderRendererResetSignal");
 		const orderMarker = ref(null);
+		const isCapturesDOM = !!componentDefinition.capturesDOM;
+		const captureCanvas = ref(null);
+		const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
+		const captureStyle = {
+			position: "fixed",
+			inset: "0",
+			width: "100vw",
+			height: "100vh",
+			zIndex: "-9999"
+		};
+		if (isCapturesDOM) {
+			const onWinResize = () => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+			};
+			onMounted(() => {
+				const d = Math.min(window.devicePixelRatio, 2);
+				captureW.value = Math.round(window.innerWidth * d);
+				captureH.value = Math.round(window.innerHeight * d);
+				window.addEventListener("resize", onWinResize);
+			});
+			onBeforeUnmount(() => {
+				window.removeEventListener("resize", onWinResize);
+			});
+		}
 		let detectedRenderOrder = void 0;
 		const registerWithRenderer = () => {
 			parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
@@ -105,7 +139,7 @@ var Aurora_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				maps: mapsFromProps.value,
 				renderOrder: props.renderOrder ?? detectedRenderOrder,
 				transform: effectiveTransform.value
-			}, uniforms, componentDefinition);
+			}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
 		};
 		onMounted(() => {
 			if (props.renderOrder === void 0 && orderMarker.value) {
@@ -161,17 +195,30 @@ var Aurora_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				scope.stop();
 			});
 		};
-		setupUniformWatchers();
+		if (isCapturesDOM) onMounted(() => {
+			setupUniformWatchers();
+		});
+		else setupUniformWatchers();
 		onBeforeUnmount(() => {
 			parentRegister(instanceId, null, null, null, null, null);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "orderMarker",
 				ref: orderMarker,
 				style: { "display": "contents" },
 				"data-shader-id": unref(instanceId)
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+			}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [createElementVNode("canvas", mergeProps({
+				ref_key: "captureCanvas",
+				ref: captureCanvas
+			}, { "layoutsubtree": "" }, {
+				width: captureW.value,
+				height: captureH.value,
+				style: captureStyle
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
 		};
 	}
 });