shaders 2.5.91 → 2.5.93

package/dist/svelte/source/components/CRTScreen.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/CRTScreen/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
      */
@@ -165,7 +173,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');
     }
@@ -186,6 +194,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;
 
@@ -255,7 +284,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -290,5 +320,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/ChannelBlur.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/ChannelBlur/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/Checkerboard.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/Checkerboard/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/components/ChromaFlow.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/ChromaFlow/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/ChromaticAberration.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/ChromaticAberration/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
      */
@@ -162,7 +170,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');
     }
@@ -183,6 +191,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;
 
@@ -252,7 +281,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -287,5 +317,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/Circle.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/Circle/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
      */
@@ -161,7 +169,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');
     }
@@ -182,6 +190,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;
 
@@ -251,7 +280,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -286,5 +316,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/ConcentricSpin.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/ConcentricSpin/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
      */
@@ -162,7 +170,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');
     }
@@ -183,6 +191,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;
 
@@ -252,7 +281,8 @@
                     transform: effectiveTransform
                 },
                 uniforms,
-                componentDefinition
+                componentDefinition,
+                isCapturesDOM ? captureCanvas : undefined
             );
 
             // Set flag to enable effects after successful registration
@@ -287,5 +317,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/ConicGradient.svelte

@@ -15,6 +15,14 @@
     // @ts-ignore - this import is replaced at build time
     import { componentDefinition, type ComponentProps } from '../../../core/shaders/ConicGradient/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}