@paper-design/shaders-react 0.0.0-canary.821d62d → 0.0.0-canary.b448849

package/dist/html-in-canvas.d.ts

@@ -0,0 +1,21 @@
+/** Props of the element that holds the children. It's what gets drawn, so it takes their layout and the visuals */
+export type ShaderContentProps = React.ComponentProps<'div'> & {
+    [key: `data-${string}`]: unknown;
+};
+/** Axes on which the shader takes the size of its content instead of its own size styles */
+export type ShaderSizeToContent = 'width' | 'height' | 'both';
+export declare function willDrawHtmlChildren(children: React.ReactNode): boolean;
+/**
+ * Draws the children into u_image where the browser supports it, otherwise they're shown on top of the shader.
+ * Either way they're held by the same content element, so they lay out the same.
+ *
+ * The content element fills the shader, except on the axes sized to content: there it takes the size of the children,
+ * and the shader follows it. The canvas can't be sized by what's inside it, so the content size is measured and
+ * set on the shader element. Resize observer callbacks run before paint, so this settles within the same frame.
+ */
+export declare function useHtmlChildren(acceptsHtmlChildren: boolean, children: React.ReactNode, contentProps: ShaderContentProps | undefined, sizeToContent: ShaderSizeToContent | undefined, shaderRef: React.RefObject<HTMLElement | null>): {
+    hasHtmlChildren: boolean;
+    addHtmlUniform: <T extends object>(uniforms: T) => T;
+    renderedChildren: React.ReactNode;
+    sizeStyle: React.CSSProperties | undefined;
+};

package/dist/html-in-canvas.js

@@ -0,0 +1,83 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+"use client";
+import { Children, createContext, useContext, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { isHtmlInCanvasSupported } from "@paper-design/shaders";
+import { useMergeRefs } from "./use-merge-refs.js";
+import { jsx } from "react/jsx-runtime";
+const subscribeToNothing = () => () => {
+};
+const isSupportedOnServer = () => true;
+const InsideShaderCanvasContext = createContext(false);
+function hasChildren(children) {
+  return Children.toArray(children).length > 0;
+}
+function willDrawHtmlChildren(children) {
+  return hasChildren(children) && isHtmlInCanvasSupported();
+}
+function useHtmlChildren(acceptsHtmlChildren, children, contentProps, sizeToContent, shaderRef) {
+  const contentRef = useRef(null);
+  const mergedContentRef = useMergeRefs([contentRef, contentProps?.ref]);
+  const isSupported = useSyncExternalStore(subscribeToNothing, isHtmlInCanvasSupported, isSupportedOnServer);
+  const isInsideShaderCanvas = useContext(InsideShaderCanvasContext);
+  const isWrapped = acceptsHtmlChildren && hasChildren(children);
+  const hasHtmlChildren = isWrapped && isSupported;
+  const fitsWidth = isWrapped && (sizeToContent === "width" || sizeToContent === "both");
+  const fitsHeight = isWrapped && (sizeToContent === "height" || sizeToContent === "both");
+  useLayoutEffect(() => {
+    const content2 = contentRef.current;
+    const shader = shaderRef.current;
+    if (!content2 || !shader || !fitsWidth && !fitsHeight) {
+      return;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      const size = entry?.borderBoxSize[0];
+      if (!size) return;
+      shader.style.setProperty("--paper-shader-content-width", `${size.inlineSize}px`);
+      shader.style.setProperty("--paper-shader-content-height", `${size.blockSize}px`);
+    });
+    observer.observe(content2);
+    return () => {
+      observer.disconnect();
+    };
+  }, [fitsWidth, fitsHeight, hasHtmlChildren, shaderRef]);
+  const addHtmlUniform = (uniforms) => hasHtmlChildren && contentRef.current ? { ...uniforms, u_image: contentRef.current } : uniforms;
+  if (!isWrapped) {
+    return { hasHtmlChildren, addHtmlUniform, renderedChildren: children, sizeStyle: void 0 };
+  }
+  const contentStyle = { ...contentProps?.style };
+  if (fitsWidth) {
+    contentStyle.width = "max-content";
+  }
+  if (fitsHeight) {
+    contentStyle.height = "auto";
+  }
+  let sizeStyle;
+  if (fitsWidth || fitsHeight) {
+    sizeStyle = {};
+    if (fitsWidth) {
+      sizeStyle.width = "var(--paper-shader-content-width)";
+    }
+    if (fitsHeight) {
+      sizeStyle.height = "var(--paper-shader-content-height)";
+    }
+  }
+  const content = /* @__PURE__ */ jsx("div", { ...contentProps, ref: mergedContentRef, style: contentStyle, ...{ drawable: "" }, children });
+  if (!hasHtmlChildren) {
+    return { hasHtmlChildren, addHtmlUniform, renderedChildren: content, sizeStyle };
+  }
+  return {
+    hasHtmlChildren,
+    addHtmlUniform,
+    renderedChildren: /* @__PURE__ */ jsx(InsideShaderCanvasContext.Provider, { value: true, children: isInsideShaderCanvas ? content : /* @__PURE__ */ jsx("canvas", { ...{ content: "drawable", layoutsubtree: "" }, children: content }) }),
+    sizeStyle
+  };
+}
+export {
+  useHtmlChildren,
+  willDrawHtmlChildren
+};
+//# sourceMappingURL=html-in-canvas.js.map

package/dist/html-in-canvas.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/html-in-canvas.tsx"],
+  "sourcesContent": ["'use client';\n\nimport { Children, createContext, useContext, useLayoutEffect, useRef, useSyncExternalStore } from 'react';\nimport { isHtmlInCanvasSupported } from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\n\nconst subscribeToNothing = () => () => {};\n// Assumed on the server, so that supporting browsers don't re-render the canvas after hydration\nconst isSupportedOnServer = () => true;\n\n/** Whether the children are drawn by a shader canvas above, so nested shaders render through it instead of their own */\nconst InsideShaderCanvasContext = createContext(false);\n\n/** Props of the element that holds the children. It's what gets drawn, so it takes their layout and the visuals */\nexport type ShaderContentProps = React.ComponentProps<'div'> & { [key: `data-${string}`]: unknown };\n\n/** Axes on which the shader takes the size of its content instead of its own size styles */\nexport type ShaderSizeToContent = 'width' | 'height' | 'both';\n\nfunction hasChildren(children: React.ReactNode): boolean {\n  return Children.toArray(children).length > 0;\n}\n\nexport function willDrawHtmlChildren(children: React.ReactNode): boolean {\n  return hasChildren(children) && isHtmlInCanvasSupported();\n}\n\n/**\n * Draws the children into u_image where the browser supports it, otherwise they're shown on top of the shader.\n * Either way they're held by the same content element, so they lay out the same.\n *\n * The content element fills the shader, except on the axes sized to content: there it takes the size of the children,\n * and the shader follows it. The canvas can't be sized by what's inside it, so the content size is measured and\n * set on the shader element. Resize observer callbacks run before paint, so this settles within the same frame.\n */\nexport function useHtmlChildren(\n  acceptsHtmlChildren: boolean,\n  children: React.ReactNode,\n  contentProps: ShaderContentProps | undefined,\n  sizeToContent: ShaderSizeToContent | undefined,\n  shaderRef: React.RefObject<HTMLElement | null>\n): {\n  hasHtmlChildren: boolean;\n  addHtmlUniform: <T extends object>(uniforms: T) => T;\n  renderedChildren: React.ReactNode;\n  sizeStyle: React.CSSProperties | undefined;\n} {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const mergedContentRef = useMergeRefs([contentRef, contentProps?.ref]);\n  const isSupported = useSyncExternalStore(subscribeToNothing, isHtmlInCanvasSupported, isSupportedOnServer);\n  const isInsideShaderCanvas = useContext(InsideShaderCanvasContext);\n  const isWrapped = acceptsHtmlChildren && hasChildren(children);\n  const hasHtmlChildren = isWrapped && isSupported;\n\n  const fitsWidth = isWrapped && (sizeToContent === 'width' || sizeToContent === 'both');\n  const fitsHeight = isWrapped && (sizeToContent === 'height' || sizeToContent === 'both');\n\n  useLayoutEffect(() => {\n    const content = contentRef.current;\n    const shader = shaderRef.current;\n    if (!content || !shader || (!fitsWidth && !fitsHeight)) {\n      return;\n    }\n\n    const observer = new ResizeObserver(([entry]) => {\n      const size = entry?.borderBoxSize[0];\n      if (!size) return;\n      shader.style.setProperty('--paper-shader-content-width', `${size.inlineSize}px`);\n      shader.style.setProperty('--paper-shader-content-height', `${size.blockSize}px`);\n    });\n    observer.observe(content);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [fitsWidth, fitsHeight, hasHtmlChildren, shaderRef]);\n\n  const addHtmlUniform = <T extends object>(uniforms: T): T =>\n    hasHtmlChildren && contentRef.current ? { ...uniforms, u_image: contentRef.current } : uniforms;\n\n  if (!isWrapped) {\n    return { hasHtmlChildren, addHtmlUniform, renderedChildren: children, sizeStyle: undefined };\n  }\n\n  // Sized to content: the content element takes the size of the children, which can overflow the canvas\n  const contentStyle: React.CSSProperties = { ...contentProps?.style };\n  if (fitsWidth) {\n    contentStyle.width = 'max-content';\n  }\n  if (fitsHeight) {\n    contentStyle.height = 'auto';\n  }\n\n  // The shader takes the measured content size\n  let sizeStyle: React.CSSProperties | undefined;\n  if (fitsWidth || fitsHeight) {\n    sizeStyle = {};\n    if (fitsWidth) {\n      sizeStyle.width = 'var(--paper-shader-content-width)';\n    }\n    if (fitsHeight) {\n      sizeStyle.height = 'var(--paper-shader-content-height)';\n    }\n  }\n\n  const content = (\n    <div {...contentProps} ref={mergedContentRef} style={contentStyle} {...{ drawable: '' }}>\n      {children}\n    </div>\n  );\n\n  if (!hasHtmlChildren) {\n    return { hasHtmlChildren, addHtmlUniform, renderedChildren: content, sizeStyle };\n  }\n\n  // Nested in the HTML of another shader, the content stays drawable HTML that the root shader canvas captures\n  return {\n    hasHtmlChildren,\n    addHtmlUniform,\n    renderedChildren: (\n      <InsideShaderCanvasContext.Provider value={true}>\n        {isInsideShaderCanvas ? content : <canvas {...{ content: 'drawable', layoutsubtree: '' }}>{content}</canvas>}\n      </InsideShaderCanvasContext.Provider>\n    ),\n    sizeStyle,\n  };\n}\n"],
+  "mappings": ";;;;;;AAEA,SAAS,UAAU,eAAe,YAAY,iBAAiB,QAAQ,4BAA4B;AACnG,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAsGzB;AApGJ,MAAM,qBAAqB,MAAM,MAAM;AAAC;AAExC,MAAM,sBAAsB,MAAM;AAGlC,MAAM,4BAA4B,cAAc,KAAK;AAQrD,SAAS,YAAY,UAAoC;AACvD,SAAO,SAAS,QAAQ,QAAQ,EAAE,SAAS;AAC7C;AAEO,SAAS,qBAAqB,UAAoC;AACvE,SAAO,YAAY,QAAQ,KAAK,wBAAwB;AAC1D;AAUO,SAAS,gBACd,qBACA,UACA,cACA,eACA,WAMA;AACA,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,mBAAmB,aAAa,CAAC,YAAY,cAAc,GAAG,CAAC;AACrE,QAAM,cAAc,qBAAqB,oBAAoB,yBAAyB,mBAAmB;AACzG,QAAM,uBAAuB,WAAW,yBAAyB;AACjE,QAAM,YAAY,uBAAuB,YAAY,QAAQ;AAC7D,QAAM,kBAAkB,aAAa;AAErC,QAAM,YAAY,cAAc,kBAAkB,WAAW,kBAAkB;AAC/E,QAAM,aAAa,cAAc,kBAAkB,YAAY,kBAAkB;AAEjF,kBAAgB,MAAM;AACpB,UAAMA,WAAU,WAAW;AAC3B,UAAM,SAAS,UAAU;AACzB,QAAI,CAACA,YAAW,CAAC,UAAW,CAAC,aAAa,CAAC,YAAa;AACtD;AAAA,IACF;AAEA,UAAM,WAAW,IAAI,eAAe,CAAC,CAAC,KAAK,MAAM;AAC/C,YAAM,OAAO,OAAO,cAAc,CAAC;AACnC,UAAI,CAAC,KAAM;AACX,aAAO,MAAM,YAAY,gCAAgC,GAAG,KAAK,UAAU,IAAI;AAC/E,aAAO,MAAM,YAAY,iCAAiC,GAAG,KAAK,SAAS,IAAI;AAAA,IACjF,CAAC;AACD,aAAS,QAAQA,QAAO;AAExB,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,iBAAiB,SAAS,CAAC;AAEtD,QAAM,iBAAiB,CAAmB,aACxC,mBAAmB,WAAW,UAAU,EAAE,GAAG,UAAU,SAAS,WAAW,QAAQ,IAAI;AAEzF,MAAI,CAAC,WAAW;AACd,WAAO,EAAE,iBAAiB,gBAAgB,kBAAkB,UAAU,WAAW,OAAU;AAAA,EAC7F;AAGA,QAAM,eAAoC,EAAE,GAAG,cAAc,MAAM;AACnE,MAAI,WAAW;AACb,iBAAa,QAAQ;AAAA,EACvB;AACA,MAAI,YAAY;AACd,iBAAa,SAAS;AAAA,EACxB;AAGA,MAAI;AACJ,MAAI,aAAa,YAAY;AAC3B,gBAAY,CAAC;AACb,QAAI,WAAW;AACb,gBAAU,QAAQ;AAAA,IACpB;AACA,QAAI,YAAY;AACd,gBAAU,SAAS;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,UACJ,oBAAC,SAAK,GAAG,cAAc,KAAK,kBAAkB,OAAO,cAAe,GAAG,EAAE,UAAU,GAAG,GACnF,UACH;AAGF,MAAI,CAAC,iBAAiB;AACpB,WAAO,EAAE,iBAAiB,gBAAgB,kBAAkB,SAAS,UAAU;AAAA,EACjF;AAGA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,kBACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,MACxC,iCAAuB,UAAU,oBAAC,YAAQ,GAAG,EAAE,SAAS,YAAY,eAAe,GAAG,GAAI,mBAAQ,GACrG;AAAA,IAEF;AAAA,EACF;AACF;",
+  "names": ["content"]
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { ShaderMount } from './shader-mount.js';
 export type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';
+export type { ShaderContentProps, ShaderSizeToContent } from './html-in-canvas.js';
 export { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';
 export type { MeshGradientProps } from './shaders/mesh-gradient.js';
 export type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["'use client';\n\nexport { ShaderMount } from './shader-mount.js';\nexport type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';\n\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';\nexport type { MeshGradientProps } from './shaders/mesh-gradient.js';\nexport type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';\n\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';\nexport type { SmokeRingProps } from './shaders/smoke-ring.js';\nexport type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';\n\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseProps } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';\n\nexport { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';\nexport type { DotOrbitProps } from './shaders/dot-orbit.js';\nexport type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';\n\nexport { DotGrid, dotGridPresets } from './shaders/dot-grid.js';\nexport type { DotGridProps } from './shaders/dot-grid.js';\nexport type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';\n\nexport { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseProps } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';\n\nexport { Metaballs, metaballsPresets } from './shaders/metaballs.js';\nexport type { MetaballsProps } from './shaders/metaballs.js';\nexport type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';\n\nexport { Waves, wavesPresets } from './shaders/waves.js';\nexport type { WavesProps } from './shaders/waves.js';\nexport type { WavesUniforms, WavesParams } from '@paper-design/shaders';\n\nexport { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseProps } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';\n\nexport { Voronoi, voronoiPresets } from './shaders/voronoi.js';\nexport type { VoronoiProps } from './shaders/voronoi.js';\nexport type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';\n\nexport { Warp, warpPresets } from './shaders/warp.js';\nexport type { WarpProps } from './shaders/warp.js';\nexport type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';\n\nexport { GodRays, godRaysPresets } from './shaders/god-rays.js';\nexport type { GodRaysProps } from './shaders/god-rays.js';\nexport type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';\n\nexport { Spiral, spiralPresets } from './shaders/spiral.js';\nexport type { SpiralProps } from './shaders/spiral.js';\nexport type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';\n\nexport { Swirl, swirlPresets } from './shaders/swirl.js';\nexport type { SwirlProps } from './shaders/swirl.js';\nexport type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';\n\nexport { Dithering, ditheringPresets } from './shaders/dithering.js';\nexport type { DitheringProps } from './shaders/dithering.js';\nexport type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';\n\nexport { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';\nexport type { GrainGradientProps } from './shaders/grain-gradient.js';\nexport type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';\n\nexport { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';\nexport type { PulsingBorderProps } from './shaders/pulsing-border.js';\nexport type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';\n\nexport { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';\nexport type { ColorPanelsProps } from './shaders/color-panels.js';\nexport type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';\n\nexport { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';\n\nexport { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';\n\nexport { PaperTexture, paperTexturePresets } from './shaders/paper-texture.js';\nexport type { PaperTextureProps } from './shaders/paper-texture.js';\nexport type { PaperTextureUniforms, PaperTextureParams } from '@paper-design/shaders';\n\nexport { FlutedGlass, flutedGlassPresets } from './shaders/fluted-glass.js';\nexport { type FlutedGlassProps } from './shaders/fluted-glass.js';\nexport { type FlutedGlassUniforms, type FlutedGlassParams } from '@paper-design/shaders';\n\nexport { Water, waterPresets } from './shaders/water.js';\nexport type { WaterProps } from './shaders/water.js';\nexport type { WaterUniforms, WaterParams } from '@paper-design/shaders';\n\nexport { ImageDithering, imageDitheringPresets } from './shaders/image-dithering.js';\nexport type { ImageDitheringProps } from './shaders/image-dithering.js';\nexport type { ImageDitheringUniforms, ImageDitheringParams } from '@paper-design/shaders';\n\nexport { LensDistortion, lensDistortionPresets } from './shaders/lens-distortion.js';\nexport type { LensDistortionProps } from './shaders/lens-distortion.js';\nexport type { LensDistortionUniforms, LensDistortionParams } from '@paper-design/shaders';\n\nexport { Heatmap, heatmapPresets } from './shaders/heatmap.js';\nexport type { HeatmapProps } from './shaders/heatmap.js';\nexport type { HeatmapUniforms, HeatmapParams } from '@paper-design/shaders';\n\nexport { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';\nexport type { LiquidMetalProps } from './shaders/liquid-metal.js';\nexport type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';\n\nexport { HalftoneDots, halftoneDotsPresets } from './shaders/halftone-dots.js';\nexport type { HalftoneDotsProps } from './shaders/halftone-dots.js';\nexport type { HalftoneDotsUniforms, HalftoneDotsParams } from '@paper-design/shaders';\n\nexport { HalftoneCmyk, halftoneCmykPresets } from './shaders/halftone-cmyk.js';\nexport type { HalftoneCmykProps } from './shaders/halftone-cmyk.js';\nexport type { HalftoneCmykUniforms, HalftoneCmykParams } from '@paper-design/shaders';\n\nexport { GemSmoke, gemSmokePresets } from './shaders/gem-smoke.js';\nexport type { GemSmokeProps } from './shaders/gem-smoke.js';\nexport type { GemSmokeUniforms, GemSmokeParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n  colorPanelsMeta,\n  dotOrbitMeta,\n  godRaysMeta,\n  grainGradientMeta,\n  meshGradientMeta,\n  metaballsMeta,\n  paperTextureMeta,\n  pulsingBorderMeta,\n  simplexNoiseMeta,\n  smokeRingMeta,\n  swirlMeta,\n  voronoiMeta,\n  warpMeta,\n  heatmapMeta,\n  lensDistortionMeta,\n  staticMeshGradientMeta,\n  staticRadialGradientMeta,\n} from '@paper-design/shaders';\n"],
-  "mappings": ";;;;;;AAEA,SAAS,mBAAmB;AAG5B,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,YAAY,yBAAyB;AAI9C,SAAS,UAAU,uBAAuB;AAI1C,SAAS,SAAS,sBAAsB;AAIxC,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,OAAO,oBAAoB;AAIpC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,MAAM,mBAAmB;AAIlC,SAAS,SAAS,sBAAsB;AAIxC,SAAS,QAAQ,qBAAqB;AAItC,SAAS,OAAO,oBAAoB;AAIpC,SAAS,WAAW,wBAAwB;AAI5C,SAAS,eAAe,4BAA4B;AAIpD,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,oBAAoB,iCAAiC;AAI9D,SAAS,sBAAsB,mCAAmC;AAIlE,SAAS,cAAc,2BAA2B;AAIlD,SAAS,aAAa,0BAA0B;AAChD,eAAsC;AACtC,eAAiE;AAEjE,SAAS,OAAO,oBAAoB;AAIpC,SAAS,gBAAgB,6BAA6B;AAItD,SAAS,gBAAgB,6BAA6B;AAItD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,cAAc,2BAA2B;AAIlD,SAAS,cAAc,2BAA2B;AAIlD,SAAS,UAAU,uBAAuB;AAI1C,SAAS,sBAAsB,gCAAgC;AAG/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["'use client';\n\nexport { ShaderMount } from './shader-mount.js';\nexport type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';\nexport type { ShaderContentProps, ShaderSizeToContent } from './html-in-canvas.js';\n\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';\nexport type { MeshGradientProps } from './shaders/mesh-gradient.js';\nexport type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';\n\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';\nexport type { SmokeRingProps } from './shaders/smoke-ring.js';\nexport type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';\n\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseProps } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';\n\nexport { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';\nexport type { DotOrbitProps } from './shaders/dot-orbit.js';\nexport type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';\n\nexport { DotGrid, dotGridPresets } from './shaders/dot-grid.js';\nexport type { DotGridProps } from './shaders/dot-grid.js';\nexport type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';\n\nexport { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseProps } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';\n\nexport { Metaballs, metaballsPresets } from './shaders/metaballs.js';\nexport type { MetaballsProps } from './shaders/metaballs.js';\nexport type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';\n\nexport { Waves, wavesPresets } from './shaders/waves.js';\nexport type { WavesProps } from './shaders/waves.js';\nexport type { WavesUniforms, WavesParams } from '@paper-design/shaders';\n\nexport { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseProps } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';\n\nexport { Voronoi, voronoiPresets } from './shaders/voronoi.js';\nexport type { VoronoiProps } from './shaders/voronoi.js';\nexport type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';\n\nexport { Warp, warpPresets } from './shaders/warp.js';\nexport type { WarpProps } from './shaders/warp.js';\nexport type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';\n\nexport { GodRays, godRaysPresets } from './shaders/god-rays.js';\nexport type { GodRaysProps } from './shaders/god-rays.js';\nexport type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';\n\nexport { Spiral, spiralPresets } from './shaders/spiral.js';\nexport type { SpiralProps } from './shaders/spiral.js';\nexport type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';\n\nexport { Swirl, swirlPresets } from './shaders/swirl.js';\nexport type { SwirlProps } from './shaders/swirl.js';\nexport type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';\n\nexport { Dithering, ditheringPresets } from './shaders/dithering.js';\nexport type { DitheringProps } from './shaders/dithering.js';\nexport type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';\n\nexport { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';\nexport type { GrainGradientProps } from './shaders/grain-gradient.js';\nexport type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';\n\nexport { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';\nexport type { PulsingBorderProps } from './shaders/pulsing-border.js';\nexport type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';\n\nexport { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';\nexport type { ColorPanelsProps } from './shaders/color-panels.js';\nexport type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';\n\nexport { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';\n\nexport { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';\n\nexport { PaperTexture, paperTexturePresets } from './shaders/paper-texture.js';\nexport type { PaperTextureProps } from './shaders/paper-texture.js';\nexport type { PaperTextureUniforms, PaperTextureParams } from '@paper-design/shaders';\n\nexport { FlutedGlass, flutedGlassPresets } from './shaders/fluted-glass.js';\nexport { type FlutedGlassProps } from './shaders/fluted-glass.js';\nexport { type FlutedGlassUniforms, type FlutedGlassParams } from '@paper-design/shaders';\n\nexport { Water, waterPresets } from './shaders/water.js';\nexport type { WaterProps } from './shaders/water.js';\nexport type { WaterUniforms, WaterParams } from '@paper-design/shaders';\n\nexport { ImageDithering, imageDitheringPresets } from './shaders/image-dithering.js';\nexport type { ImageDitheringProps } from './shaders/image-dithering.js';\nexport type { ImageDitheringUniforms, ImageDitheringParams } from '@paper-design/shaders';\n\nexport { LensDistortion, lensDistortionPresets } from './shaders/lens-distortion.js';\nexport type { LensDistortionProps } from './shaders/lens-distortion.js';\nexport type { LensDistortionUniforms, LensDistortionParams } from '@paper-design/shaders';\n\nexport { Heatmap, heatmapPresets } from './shaders/heatmap.js';\nexport type { HeatmapProps } from './shaders/heatmap.js';\nexport type { HeatmapUniforms, HeatmapParams } from '@paper-design/shaders';\n\nexport { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';\nexport type { LiquidMetalProps } from './shaders/liquid-metal.js';\nexport type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';\n\nexport { HalftoneDots, halftoneDotsPresets } from './shaders/halftone-dots.js';\nexport type { HalftoneDotsProps } from './shaders/halftone-dots.js';\nexport type { HalftoneDotsUniforms, HalftoneDotsParams } from '@paper-design/shaders';\n\nexport { HalftoneCmyk, halftoneCmykPresets } from './shaders/halftone-cmyk.js';\nexport type { HalftoneCmykProps } from './shaders/halftone-cmyk.js';\nexport type { HalftoneCmykUniforms, HalftoneCmykParams } from '@paper-design/shaders';\n\nexport { GemSmoke, gemSmokePresets } from './shaders/gem-smoke.js';\nexport type { GemSmokeProps } from './shaders/gem-smoke.js';\nexport type { GemSmokeUniforms, GemSmokeParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n  colorPanelsMeta,\n  dotOrbitMeta,\n  godRaysMeta,\n  grainGradientMeta,\n  meshGradientMeta,\n  metaballsMeta,\n  paperTextureMeta,\n  pulsingBorderMeta,\n  simplexNoiseMeta,\n  smokeRingMeta,\n  swirlMeta,\n  voronoiMeta,\n  warpMeta,\n  heatmapMeta,\n  lensDistortionMeta,\n  staticMeshGradientMeta,\n  staticRadialGradientMeta,\n} from '@paper-design/shaders';\n"],
+  "mappings": ";;;;;;AAEA,SAAS,mBAAmB;AAI5B,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,YAAY,yBAAyB;AAI9C,SAAS,UAAU,uBAAuB;AAI1C,SAAS,SAAS,sBAAsB;AAIxC,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,OAAO,oBAAoB;AAIpC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,MAAM,mBAAmB;AAIlC,SAAS,SAAS,sBAAsB;AAIxC,SAAS,QAAQ,qBAAqB;AAItC,SAAS,OAAO,oBAAoB;AAIpC,SAAS,WAAW,wBAAwB;AAI5C,SAAS,eAAe,4BAA4B;AAIpD,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,oBAAoB,iCAAiC;AAI9D,SAAS,sBAAsB,mCAAmC;AAIlE,SAAS,cAAc,2BAA2B;AAIlD,SAAS,aAAa,0BAA0B;AAChD,eAAsC;AACtC,eAAiE;AAEjE,SAAS,OAAO,oBAAoB;AAIpC,SAAS,gBAAgB,6BAA6B;AAItD,SAAS,gBAAgB,6BAA6B;AAItD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,cAAc,2BAA2B;AAIlD,SAAS,cAAc,2BAA2B;AAIlD,SAAS,UAAU,uBAAuB;AAI1C,SAAS,sBAAsB,gCAAgC;AAG/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/shader-mount.d.ts

@@ -1,4 +1,5 @@
 import { type PaperShaderElement, type ShaderMotionParams } from '@paper-design/shaders';
+import { type ShaderContentProps, type ShaderSizeToContent } from './html-in-canvas.js';
 /**
  * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images
  *
@@ -6,7 +7,7 @@ import { type PaperShaderElement, type ShaderMotionParams } from '@paper-design/
  * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
  */
 interface ShaderMountUniformsReact {
-    [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;
+    [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | HTMLElement | undefined;
 }
 export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {
     ref?: React.Ref<PaperShaderElement>;
@@ -16,6 +17,12 @@ export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'col
     minPixelRatio?: number;
     maxPixelCount?: number;
     webGlContextAttributes?: WebGLContextAttributes;
+    /** Set by shaders that can draw their children into u_image (experimental) */
+    acceptsHtmlChildren?: boolean;
+    /** Props of the element that holds the children and is drawn with them: layout, padding, background, border */
+    contentProps?: ShaderContentProps;
+    /** Size the shader to its children on these axes instead of its own width and height styles */
+    sizeToContent?: ShaderSizeToContent;
     /** Inline CSS width style */
     width?: string | number;
     /** Inline CSS height style */
@@ -26,6 +33,10 @@ export interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>,
     minPixelRatio?: number;
     maxPixelCount?: number;
     webGlContextAttributes?: WebGLContextAttributes;
+    /** Props of the element that holds the children and is drawn with them, for shaders that accept HTML children */
+    contentProps?: ShaderContentProps;
+    /** Size the shader to its children on these axes, for shaders that accept HTML children */
+    sizeToContent?: ShaderSizeToContent;
     /** Inline CSS width style */
     width?: string | number;
     /** Inline CSS height style */

package/dist/shader-mount.js

@@ -11,6 +11,7 @@ import {
 } from "@paper-design/shaders";
 import { useMergeRefs } from "./use-merge-refs.js";
 import { setMinImageSize } from "./set-min-image-size.js";
+import { useHtmlChildren } from "./html-in-canvas.js";
 import { jsx } from "react/jsx-runtime";
 async function processUniforms(uniformsProp) {
   const processedUniforms = {};
@@ -82,6 +83,10 @@ const ShaderMount = forwardRef(
     minPixelRatio,
     maxPixelCount,
     mipmaps,
+    acceptsHtmlChildren = false,
+    contentProps,
+    sizeToContent,
+    children,
     style,
     ...divProps
   }, forwardedRef) {
@@ -89,10 +94,19 @@ const ShaderMount = forwardRef(
     const divRef = useRef(null);
     const shaderMountRef = useRef(null);
     const webGlContextAttributesRef = useRef(webGlContextAttributes);
+    const { hasHtmlChildren, addHtmlUniform, renderedChildren, sizeStyle } = useHtmlChildren(
+      acceptsHtmlChildren,
+      children,
+      contentProps,
+      sizeToContent,
+      divRef
+    );
+    const getUniforms = () => addHtmlUniform(uniformsProp);
     useEffect(() => {
+      let isStale = false;
       const initShader = async () => {
-        const uniforms = await processUniforms(uniformsProp);
-        if (divRef.current && !shaderMountRef.current) {
+        const uniforms = await processUniforms(getUniforms());
+        if (!isStale && divRef.current && !shaderMountRef.current) {
           shaderMountRef.current = new ShaderMountVanilla(
             divRef.current,
             fragmentShader,
@@ -109,14 +123,15 @@ const ShaderMount = forwardRef(
       };
       initShader();
       return () => {
+        isStale = true;
         shaderMountRef.current?.dispose();
         shaderMountRef.current = null;
       };
-    }, [fragmentShader]);
+    }, [fragmentShader, hasHtmlChildren]);
     useEffect(() => {
       let isStale = false;
       const updateUniforms = async () => {
-        const uniforms = await processUniforms(uniformsProp);
+        const uniforms = await processUniforms(getUniforms());
         if (!isStale) {
           shaderMountRef.current?.setUniforms(uniforms);
         }
@@ -139,18 +154,12 @@ const ShaderMount = forwardRef(
       shaderMountRef.current?.setFrame(frame);
     }, [frame, isInitialized]);
     const mergedRef = useMergeRefs([divRef, forwardedRef]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: mergedRef,
-        style: width !== void 0 || height !== void 0 ? {
-          width: typeof width === "string" && isNaN(+width) === false ? +width : width,
-          height: typeof height === "string" && isNaN(+height) === false ? +height : height,
-          ...style
-        } : style,
-        ...divProps
-      }
-    );
+    const shaderStyle = width !== void 0 || height !== void 0 ? {
+      width: typeof width === "string" && isNaN(+width) === false ? +width : width,
+      height: typeof height === "string" && isNaN(+height) === false ? +height : height,
+      ...style
+    } : style;
+    return /* @__PURE__ */ jsx("div", { ref: mergedRef, style: sizeStyle ? { ...shaderStyle, ...sizeStyle } : shaderStyle, ...divProps, children: renderedChildren });
   }
 );
 ShaderMount.displayName = "ShaderMount";

package/dist/shader-mount.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/shader-mount.tsx"],
-  "sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n  ShaderMount as ShaderMountVanilla,\n  emptyPixel,\n  type PaperShaderElement,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\nimport { setMinImageSize } from './set-min-image-size.js';\n\n/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\ninterface ShaderMountUniformsReact {\n  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n  ref?: React.Ref<PaperShaderElement>;\n  fragmentShader: string;\n  uniforms: ShaderMountUniformsReact;\n  mipmaps?: string[];\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n\n  /** Inline CSS width style */\n  width?: string | number;\n  /** Inline CSS height style */\n  height?: string | number;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {\n  ref?: React.Ref<PaperShaderElement>;\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n\n  /** Inline CSS width style */\n  width?: string | number;\n  /** Inline CSS height style */\n  height?: string | number;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n  const processedUniforms = {} as ShaderMountUniforms;\n  const imageLoadPromises: Promise<void>[] = [];\n\n  const isValidUrl = (url: string): boolean => {\n    try {\n      // Handle absolute paths\n      if (url.startsWith('/')) return true;\n      // Check if it's a valid URL\n      new URL(url);\n      return true;\n    } catch {\n      return false;\n    }\n  };\n\n  const isExternalUrl = (url: string): boolean => {\n    try {\n      if (url.startsWith('/')) return false;\n      const urlObject = new URL(url, window.location.origin);\n      return urlObject.origin !== window.location.origin;\n    } catch {\n      return false;\n    }\n  };\n\n  Object.entries(uniformsProp).forEach(([key, value]) => {\n    if (typeof value === 'string') {\n      // Use a transparent pixel for empty strings\n      const url = value || emptyPixel;\n\n      // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n      if (!isValidUrl(url)) {\n        console.warn(`Uniform \"${key}\" has invalid URL \"${url}\". Skipping image loading.`);\n        return;\n      }\n\n      const imagePromise = new Promise<void>((resolve, reject) => {\n        const img = new Image();\n        if (isExternalUrl(url)) {\n          img.crossOrigin = 'anonymous';\n        }\n        img.onload = () => {\n          setMinImageSize(img);\n          processedUniforms[key] = img;\n          resolve();\n        };\n        img.onerror = () => {\n          console.error(`Could not set uniforms. Failed to load image at ${url}`);\n          reject();\n        };\n        img.src = url;\n      });\n\n      imageLoadPromises.push(imagePromise);\n    } else if (value instanceof HTMLImageElement) {\n      const imagePromise = value.decode().then(() => {\n        setMinImageSize(value);\n        processedUniforms[key] = value;\n      });\n      imageLoadPromises.push(imagePromise);\n    } else {\n      processedUniforms[key] = value;\n    }\n  });\n\n  await Promise.all(imageLoadPromises);\n  return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(\n  function ShaderMountImpl(\n    {\n      fragmentShader,\n      uniforms: uniformsProp,\n      webGlContextAttributes,\n      speed = 0,\n      frame = 0,\n      width,\n      height,\n      minPixelRatio,\n      maxPixelCount,\n      mipmaps,\n      style,\n      ...divProps\n    },\n    forwardedRef\n  ) {\n    const [isInitialized, setIsInitialized] = useState(false);\n    const divRef = useRef<PaperShaderElement>(null);\n    const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n    const webGlContextAttributesRef = useRef(webGlContextAttributes);\n\n    // Initialize the ShaderMountVanilla\n    useEffect(() => {\n      const initShader = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n\n        if (divRef.current && !shaderMountRef.current) {\n          shaderMountRef.current = new ShaderMountVanilla(\n            divRef.current,\n            fragmentShader,\n            uniforms,\n            webGlContextAttributesRef.current,\n            speed,\n            frame,\n            minPixelRatio,\n            maxPixelCount,\n            mipmaps\n          );\n\n          setIsInitialized(true);\n        }\n      };\n\n      initShader();\n\n      return () => {\n        shaderMountRef.current?.dispose();\n        shaderMountRef.current = null;\n      };\n    }, [fragmentShader]);\n\n    // Uniforms\n    useEffect(() => {\n      let isStale = false;\n\n      const updateUniforms = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n\n        if (!isStale) {\n          // We only use the freshest uniforms otherwise we can get into race conditions\n          // if some uniforms (images!) take longer to load in subsequent effect runs.\n          shaderMountRef.current?.setUniforms(uniforms);\n        }\n      };\n\n      updateUniforms();\n\n      return () => {\n        isStale = true;\n      };\n    }, [uniformsProp, isInitialized]);\n\n    // Speed\n    useEffect(() => {\n      shaderMountRef.current?.setSpeed(speed);\n    }, [speed, isInitialized]);\n\n    // Max Pixel Count\n    useEffect(() => {\n      shaderMountRef.current?.setMaxPixelCount(maxPixelCount);\n    }, [maxPixelCount, isInitialized]);\n\n    // Min Pixel Ratio\n    useEffect(() => {\n      shaderMountRef.current?.setMinPixelRatio(minPixelRatio);\n    }, [minPixelRatio, isInitialized]);\n\n    // Frame\n    useEffect(() => {\n      shaderMountRef.current?.setFrame(frame);\n    }, [frame, isInitialized]);\n\n    const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n    return (\n      <div\n        ref={mergedRef}\n        style={\n          width !== undefined || height !== undefined\n            ? {\n                width: typeof width === 'string' && isNaN(+width) === false ? +width : width,\n                height: typeof height === 'string' && isNaN(+height) === false ? +height : height,\n                ...style,\n              }\n            : style\n        }\n        {...divProps}\n      />\n    );\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n  ShaderMount as ShaderMountVanilla,\n  emptyPixel,\n  type PaperShaderElement,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\nimport { setMinImageSize } from './set-min-image-size.js';\nimport { useHtmlChildren, type ShaderContentProps, type ShaderSizeToContent } from './html-in-canvas.js';\n\n/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\ninterface ShaderMountUniformsReact {\n  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | HTMLElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n  ref?: React.Ref<PaperShaderElement>;\n  fragmentShader: string;\n  uniforms: ShaderMountUniformsReact;\n  mipmaps?: string[];\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n  /** Set by shaders that can draw their children into u_image (experimental) */\n  acceptsHtmlChildren?: boolean;\n  /** Props of the element that holds the children and is drawn with them: layout, padding, background, border */\n  contentProps?: ShaderContentProps;\n  /** Size the shader to its children on these axes instead of its own width and height styles */\n  sizeToContent?: ShaderSizeToContent;\n\n  /** Inline CSS width style */\n  width?: string | number;\n  /** Inline CSS height style */\n  height?: string | number;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {\n  ref?: React.Ref<PaperShaderElement>;\n  minPixelRatio?: number;\n  maxPixelCount?: number;\n  webGlContextAttributes?: WebGLContextAttributes;\n  /** Props of the element that holds the children and is drawn with them, for shaders that accept HTML children */\n  contentProps?: ShaderContentProps;\n  /** Size the shader to its children on these axes, for shaders that accept HTML children */\n  sizeToContent?: ShaderSizeToContent;\n\n  /** Inline CSS width style */\n  width?: string | number;\n  /** Inline CSS height style */\n  height?: string | number;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n  const processedUniforms = {} as ShaderMountUniforms;\n  const imageLoadPromises: Promise<void>[] = [];\n\n  const isValidUrl = (url: string): boolean => {\n    try {\n      // Handle absolute paths\n      if (url.startsWith('/')) return true;\n      // Check if it's a valid URL\n      new URL(url);\n      return true;\n    } catch {\n      return false;\n    }\n  };\n\n  const isExternalUrl = (url: string): boolean => {\n    try {\n      if (url.startsWith('/')) return false;\n      const urlObject = new URL(url, window.location.origin);\n      return urlObject.origin !== window.location.origin;\n    } catch {\n      return false;\n    }\n  };\n\n  Object.entries(uniformsProp).forEach(([key, value]) => {\n    if (typeof value === 'string') {\n      // Use a transparent pixel for empty strings\n      const url = value || emptyPixel;\n\n      // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n      if (!isValidUrl(url)) {\n        console.warn(`Uniform \"${key}\" has invalid URL \"${url}\". Skipping image loading.`);\n        return;\n      }\n\n      const imagePromise = new Promise<void>((resolve, reject) => {\n        const img = new Image();\n        if (isExternalUrl(url)) {\n          img.crossOrigin = 'anonymous';\n        }\n        img.onload = () => {\n          setMinImageSize(img);\n          processedUniforms[key] = img;\n          resolve();\n        };\n        img.onerror = () => {\n          console.error(`Could not set uniforms. Failed to load image at ${url}`);\n          reject();\n        };\n        img.src = url;\n      });\n\n      imageLoadPromises.push(imagePromise);\n    } else if (value instanceof HTMLImageElement) {\n      const imagePromise = value.decode().then(() => {\n        setMinImageSize(value);\n        processedUniforms[key] = value;\n      });\n      imageLoadPromises.push(imagePromise);\n    } else {\n      processedUniforms[key] = value;\n    }\n  });\n\n  await Promise.all(imageLoadPromises);\n  return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(\n  function ShaderMountImpl(\n    {\n      fragmentShader,\n      uniforms: uniformsProp,\n      webGlContextAttributes,\n      speed = 0,\n      frame = 0,\n      width,\n      height,\n      minPixelRatio,\n      maxPixelCount,\n      mipmaps,\n      acceptsHtmlChildren = false,\n      contentProps,\n      sizeToContent,\n      children,\n      style,\n      ...divProps\n    },\n    forwardedRef\n  ) {\n    const [isInitialized, setIsInitialized] = useState(false);\n    const divRef = useRef<PaperShaderElement>(null);\n    const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n    const webGlContextAttributesRef = useRef(webGlContextAttributes);\n    const { hasHtmlChildren, addHtmlUniform, renderedChildren, sizeStyle } = useHtmlChildren(\n      acceptsHtmlChildren,\n      children,\n      contentProps,\n      sizeToContent,\n      divRef\n    );\n\n    const getUniforms = (): ShaderMountUniformsReact => addHtmlUniform(uniformsProp);\n\n    // Initialize the ShaderMountVanilla\n    useEffect(() => {\n      let isStale = false;\n\n      const initShader = async () => {\n        const uniforms = await processUniforms(getUniforms());\n\n        if (!isStale && divRef.current && !shaderMountRef.current) {\n          shaderMountRef.current = new ShaderMountVanilla(\n            divRef.current,\n            fragmentShader,\n            uniforms,\n            webGlContextAttributesRef.current,\n            speed,\n            frame,\n            minPixelRatio,\n            maxPixelCount,\n            mipmaps\n          );\n\n          setIsInitialized(true);\n        }\n      };\n\n      initShader();\n\n      return () => {\n        isStale = true;\n        shaderMountRef.current?.dispose();\n        shaderMountRef.current = null;\n      };\n    }, [fragmentShader, hasHtmlChildren]);\n\n    // Uniforms\n    useEffect(() => {\n      let isStale = false;\n\n      const updateUniforms = async () => {\n        const uniforms = await processUniforms(getUniforms());\n\n        if (!isStale) {\n          // We only use the freshest uniforms otherwise we can get into race conditions\n          // if some uniforms (images!) take longer to load in subsequent effect runs.\n          shaderMountRef.current?.setUniforms(uniforms);\n        }\n      };\n\n      updateUniforms();\n\n      return () => {\n        isStale = true;\n      };\n    }, [uniformsProp, isInitialized]);\n\n    // Speed\n    useEffect(() => {\n      shaderMountRef.current?.setSpeed(speed);\n    }, [speed, isInitialized]);\n\n    // Max Pixel Count\n    useEffect(() => {\n      shaderMountRef.current?.setMaxPixelCount(maxPixelCount);\n    }, [maxPixelCount, isInitialized]);\n\n    // Min Pixel Ratio\n    useEffect(() => {\n      shaderMountRef.current?.setMinPixelRatio(minPixelRatio);\n    }, [minPixelRatio, isInitialized]);\n\n    // Frame\n    useEffect(() => {\n      shaderMountRef.current?.setFrame(frame);\n    }, [frame, isInitialized]);\n\n    const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n    const shaderStyle =\n      width !== undefined || height !== undefined\n        ? {\n            width: typeof width === 'string' && isNaN(+width) === false ? +width : width,\n            height: typeof height === 'string' && isNaN(+height) === false ? +height : height,\n            ...style,\n          }\n        : style;\n    return (\n      <div ref={mergedRef} style={sizeStyle ? { ...shaderStyle, ...sizeStyle } : shaderStyle} {...divProps}>\n        {renderedChildren}\n      </div>\n    );\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/fluted-glass.js

@@ -218,6 +218,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
       speed,
       frame,
       fragmentShader: flutedGlassFragmentShader,
+      acceptsHtmlChildren: true,
       mipmaps: ["u_image"],
       uniforms
     }

package/dist/shaders/fluted-glass.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/fluted-glass.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  flutedGlassFragmentShader,\n  ShaderFitOptions,\n  type FlutedGlassUniforms,\n  type FlutedGlassParams,\n  defaultObjectSizing,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type ImageShaderPreset,\n  getShaderColorFromString,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n  /** @deprecated use `size` instead */\n  count?: number;\n}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.25,\n    size: 0.5,\n    angle: 0,\n    distortionShape: 'prism',\n    highlights: 0.1,\n    shape: 'lines',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0,\n    edges: 0.25,\n    stretch: 0,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n  name: 'Waves',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 1.2,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.9,\n    angle: 0,\n    distortionShape: 'contour',\n    highlights: 0,\n    shape: 'wave',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0.1,\n    edges: 0.5,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0.05,\n  },\n};\n\nexport const abstractPreset: FlutedGlassPreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 4,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.7,\n    angle: 30,\n    distortionShape: 'flat',\n    highlights: 0,\n    shape: 'linesIrregular',\n    distortion: 1,\n    shift: 0,\n    blur: 1,\n    edges: 0.5,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0.1,\n    grainOverlay: 0.1,\n  },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n  name: 'Folds',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.4,\n    size: 0.4,\n    angle: 0,\n    distortionShape: 'cascade',\n    highlights: 0,\n    shape: 'lines',\n    distortion: 0.75,\n    shift: 0,\n    blur: 0.25,\n    edges: 0.5,\n    stretch: 0,\n    margin: 0.1,\n    marginLeft: 0.1,\n    marginRight: 0.1,\n    marginTop: 0.1,\n    marginBottom: 0.1,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, abstractPreset, wavesPreset, foldsPreset];\n\nexport const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorShadow = defaultPreset.params.colorShadow,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  shadows = defaultPreset.params.shadows,\n  angle = defaultPreset.params.angle,\n  distortion = defaultPreset.params.distortion,\n  distortionShape = defaultPreset.params.distortionShape,\n  highlights = defaultPreset.params.highlights,\n  shape = defaultPreset.params.shape,\n  shift = defaultPreset.params.shift,\n  blur = defaultPreset.params.blur,\n  edges = defaultPreset.params.edges,\n  margin,\n  marginLeft = margin ?? defaultPreset.params.marginLeft,\n  marginRight = margin ?? defaultPreset.params.marginRight,\n  marginTop = margin ?? defaultPreset.params.marginTop,\n  marginBottom = margin ?? defaultPreset.params.marginBottom,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  stretch = defaultPreset.params.stretch,\n\n  // integer `count` was deprecated in favor of the normalized `size` param\n  count,\n  size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: FlutedGlassProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorShadow: getShaderColorFromString(colorShadow),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_shadows: shadows,\n    u_size: size,\n    u_angle: angle,\n    u_distortion: distortion,\n    u_shift: shift,\n    u_blur: blur,\n    u_edges: edges,\n    u_stretch: stretch,\n    u_distortionShape: GlassDistortionShapes[distortionShape],\n    u_highlights: highlights,\n    u_shape: GlassGridShapes[shape],\n    u_marginLeft: marginLeft,\n    u_marginRight: marginRight,\n    u_marginTop: marginTop,\n    u_marginBottom: marginBottom,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies FlutedGlassUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={flutedGlassFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
-  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAwNH;AA/MG,MAAM,gBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,cAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,iBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,cAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,qBAA0C,CAAC,eAAe,gBAAgB,aAAa,WAAW;AAExG,MAAM,cAA0C,KAAK,SAAS,gBAAgB;AAAA;AAAA,EAEnF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,cAAc,cAAc,OAAO;AAAA,EACnC,iBAAiB,cAAc,OAAO;AAAA,EACtC,QAAQ;AAAA,EACR,UAAU,cAAc,OAAO;AAAA,EAC/B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,kBAAkB,cAAc,OAAO;AAAA,EACvC,aAAa,cAAc,OAAO;AAAA,EAClC,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA,EAC5B,QAAQ,cAAc,OAAO;AAAA,EAC7B;AAAA,EACA,aAAa,UAAU,cAAc,OAAO;AAAA,EAC5C,cAAc,UAAU,cAAc,OAAO;AAAA,EAC7C,YAAY,UAAU,cAAc,OAAO;AAAA,EAC3C,eAAe,UAAU,cAAc,OAAO;AAAA,EAC9C,aAAa,cAAc,OAAO;AAAA,EAClC,eAAe,cAAc,OAAO;AAAA,EACpC,UAAU,cAAc,OAAO;AAAA;AAAA,EAG/B;AAAA,EACA,OAAO,UAAU,SAAY,cAAc,OAAO,OAAO,KAAK,IAAI,KAAK,QAAQ,MAAM,IAAI,CAAC,IAAI,MAAM;AAAA;AAAA,EAGpG,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAqB;AACnB,QAAM,WAAW;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,aAAa,yBAAyB,SAAS;AAAA,IAC/C,eAAe,yBAAyB,WAAW;AAAA,IACnD,kBAAkB,yBAAyB,cAAc;AAAA,IACzD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,mBAAmB,sBAAsB,eAAe;AAAA,IACxD,cAAc;AAAA,IACd,SAAS,gBAAgB,KAAK;AAAA,IAC9B,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,gBAAgB;AAAA;AAAA,IAGhB,OAAO,iBAAiB,GAAG;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,SAAS,CAAC,SAAS;AAAA,MACnB;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  flutedGlassFragmentShader,\n  ShaderFitOptions,\n  type FlutedGlassUniforms,\n  type FlutedGlassParams,\n  defaultObjectSizing,\n  GlassDistortionShapes,\n  GlassGridShapes,\n  type ImageShaderPreset,\n  getShaderColorFromString,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {\n  /** @deprecated use `size` instead */\n  count?: number;\n}\n\ntype FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.25,\n    size: 0.5,\n    angle: 0,\n    distortionShape: 'prism',\n    highlights: 0.1,\n    shape: 'lines',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0,\n    edges: 0.25,\n    stretch: 0,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n  name: 'Waves',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 1.2,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.9,\n    angle: 0,\n    distortionShape: 'contour',\n    highlights: 0,\n    shape: 'wave',\n    distortion: 0.5,\n    shift: 0,\n    blur: 0.1,\n    edges: 0.5,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0,\n    grainOverlay: 0.05,\n  },\n};\n\nexport const abstractPreset: FlutedGlassPreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 4,\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0,\n    size: 0.7,\n    angle: 30,\n    distortionShape: 'flat',\n    highlights: 0,\n    shape: 'linesIrregular',\n    distortion: 1,\n    shift: 0,\n    blur: 1,\n    edges: 0.5,\n    stretch: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n    grainMixer: 0.1,\n    grainOverlay: 0.1,\n  },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n  name: 'Folds',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#00000000',\n    colorShadow: '#000000',\n    colorHighlight: '#ffffff',\n    shadows: 0.4,\n    size: 0.4,\n    angle: 0,\n    distortionShape: 'cascade',\n    highlights: 0,\n    shape: 'lines',\n    distortion: 0.75,\n    shift: 0,\n    blur: 0.25,\n    edges: 0.5,\n    stretch: 0,\n    margin: 0.1,\n    marginLeft: 0.1,\n    marginRight: 0.1,\n    marginTop: 0.1,\n    marginBottom: 0.1,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, abstractPreset, wavesPreset, foldsPreset];\n\nexport const FlutedGlass: React.FC<FlutedGlassProps> = memo(function FlutedGlassImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorShadow = defaultPreset.params.colorShadow,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  shadows = defaultPreset.params.shadows,\n  angle = defaultPreset.params.angle,\n  distortion = defaultPreset.params.distortion,\n  distortionShape = defaultPreset.params.distortionShape,\n  highlights = defaultPreset.params.highlights,\n  shape = defaultPreset.params.shape,\n  shift = defaultPreset.params.shift,\n  blur = defaultPreset.params.blur,\n  edges = defaultPreset.params.edges,\n  margin,\n  marginLeft = margin ?? defaultPreset.params.marginLeft,\n  marginRight = margin ?? defaultPreset.params.marginRight,\n  marginTop = margin ?? defaultPreset.params.marginTop,\n  marginBottom = margin ?? defaultPreset.params.marginBottom,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  stretch = defaultPreset.params.stretch,\n\n  // integer `count` was deprecated in favor of the normalized `size` param\n  count,\n  size = count === undefined ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: FlutedGlassProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorShadow: getShaderColorFromString(colorShadow),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_shadows: shadows,\n    u_size: size,\n    u_angle: angle,\n    u_distortion: distortion,\n    u_shift: shift,\n    u_blur: blur,\n    u_edges: edges,\n    u_stretch: stretch,\n    u_distortionShape: GlassDistortionShapes[distortionShape],\n    u_highlights: highlights,\n    u_shape: GlassGridShapes[shape],\n    u_marginLeft: marginLeft,\n    u_marginRight: marginRight,\n    u_marginTop: marginTop,\n    u_marginBottom: marginBottom,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies FlutedGlassUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={flutedGlassFragmentShader}\n      acceptsHtmlChildren\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/halftone-cmyk.js

@@ -221,6 +221,7 @@ const HalftoneCmyk = memo(function HalftoneCmykImpl({
       speed,
       frame,
       fragmentShader: halftoneCmykFragmentShader,
+      acceptsHtmlChildren: true,
       uniforms
     }
   );

package/dist/shaders/halftone-cmyk.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/halftone-cmyk.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  halftoneCmykFragmentShader,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  ShaderFitOptions,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n  HalftoneCmykTypes,\n} from '@paper-design/shaders';\n\nexport interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykParams {}\n\ntype HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;\n\nexport const defaultPreset: HalftoneCmykPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#fbfaf5',\n    colorC: '#00b4ff',\n    colorM: '#fc519f',\n    colorY: '#ffd800',\n    colorK: '#231f20',\n    size: 0.2,\n    contrast: 1,\n    softness: 1,\n    grainSize: 0.5,\n    grainMixer: 0,\n    grainOverlay: 0,\n    gridNoise: 0.2,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 0.3,\n    gainM: 0,\n    gainY: 0.2,\n    gainK: 0,\n    type: 'ink',\n  },\n};\n\nexport const dropsPreset: HalftoneCmykPreset = {\n  name: 'Drops',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#eeefd7',\n    colorC: '#00b2ff',\n    colorM: '#fc4f4f',\n    colorY: '#ffd900',\n    colorK: '#231f20',\n    size: 0.88,\n    contrast: 1.15,\n    softness: 0,\n    grainSize: 0.01,\n    grainMixer: 0.05,\n    grainOverlay: 0.25,\n    gridNoise: 0.5,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 1.0,\n    gainM: 0.44,\n    gainY: -1.0,\n    gainK: 0,\n    type: 'ink',\n  },\n};\n\nexport const newspaper: HalftoneCmykPreset = {\n  name: 'Newspaper',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#f2f1e8',\n    colorC: '#7a7a75',\n    colorM: '#7a7a75',\n    colorY: '#7a7a75',\n    colorK: '#231f20',\n    size: 0.01,\n    contrast: 2,\n    softness: 0.2,\n    grainSize: 0,\n    grainMixer: 0,\n    grainOverlay: 0.2,\n    gridNoise: 0.6,\n    floodC: 0,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0.1,\n    gainC: -0.17,\n    gainM: -0.45,\n    gainY: -0.45,\n    gainK: 0,\n    type: 'dots',\n  },\n};\n\nexport const vintagePreset: HalftoneCmykPreset = {\n  name: 'Vintage',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#fffaf0',\n    colorC: '#59afc5',\n    colorM: '#d8697c',\n    colorY: '#fad85c',\n    colorK: '#2d2824',\n    size: 0.2,\n    contrast: 1.25,\n    softness: 0.4,\n    grainSize: 0.5,\n    grainMixer: 0.15,\n    grainOverlay: 0.1,\n    gridNoise: 0.45,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 0.3,\n    gainM: 0,\n    gainY: 0.2,\n    gainK: 0,\n    type: 'sharp',\n  },\n};\n\nexport const halftoneCmykPresets: HalftoneCmykPreset[] = [defaultPreset, dropsPreset, newspaper, vintagePreset];\n\nexport const HalftoneCmyk: React.FC<HalftoneCmykProps> = memo(function HalftoneCmykImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorC = defaultPreset.params.colorC,\n  colorM = defaultPreset.params.colorM,\n  colorY = defaultPreset.params.colorY,\n  colorK = defaultPreset.params.colorK,\n  image = '',\n  size = defaultPreset.params.size,\n  contrast = defaultPreset.params.contrast,\n  softness = defaultPreset.params.softness,\n  grainSize = defaultPreset.params.grainSize,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  gridNoise = defaultPreset.params.gridNoise,\n  floodC = defaultPreset.params.floodC,\n  floodM = defaultPreset.params.floodM,\n  floodY = defaultPreset.params.floodY,\n  floodK = defaultPreset.params.floodK,\n  gainC = defaultPreset.params.gainC,\n  gainM = defaultPreset.params.gainM,\n  gainY = defaultPreset.params.gainY,\n  gainK = defaultPreset.params.gainK,\n  type = defaultPreset.params.type,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: HalftoneCmykProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_noiseTexture: getShaderNoiseTexture(),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorC: getShaderColorFromString(colorC),\n    u_colorM: getShaderColorFromString(colorM),\n    u_colorY: getShaderColorFromString(colorY),\n    u_colorK: getShaderColorFromString(colorK),\n    u_size: size,\n    u_contrast: contrast,\n    u_softness: softness,\n    u_grainSize: grainSize,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_gridNoise: gridNoise,\n    u_floodC: floodC,\n    u_floodM: floodM,\n    u_floodY: floodY,\n    u_floodK: floodK,\n    u_gainC: gainC,\n    u_gainM: gainM,\n    u_gainY: gainY,\n    u_gainK: gainK,\n    u_type: HalftoneCmykTypes[type],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies HalftoneCmykUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={halftoneCmykFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  halftoneCmykFragmentShader,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  ShaderFitOptions,\n  type HalftoneCmykUniforms,\n  type HalftoneCmykParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n  HalftoneCmykTypes,\n} from '@paper-design/shaders';\n\nexport interface HalftoneCmykProps extends ShaderComponentProps, HalftoneCmykParams {}\n\ntype HalftoneCmykPreset = ImageShaderPreset<HalftoneCmykParams>;\n\nexport const defaultPreset: HalftoneCmykPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#fbfaf5',\n    colorC: '#00b4ff',\n    colorM: '#fc519f',\n    colorY: '#ffd800',\n    colorK: '#231f20',\n    size: 0.2,\n    contrast: 1,\n    softness: 1,\n    grainSize: 0.5,\n    grainMixer: 0,\n    grainOverlay: 0,\n    gridNoise: 0.2,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 0.3,\n    gainM: 0,\n    gainY: 0.2,\n    gainK: 0,\n    type: 'ink',\n  },\n};\n\nexport const dropsPreset: HalftoneCmykPreset = {\n  name: 'Drops',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#eeefd7',\n    colorC: '#00b2ff',\n    colorM: '#fc4f4f',\n    colorY: '#ffd900',\n    colorK: '#231f20',\n    size: 0.88,\n    contrast: 1.15,\n    softness: 0,\n    grainSize: 0.01,\n    grainMixer: 0.05,\n    grainOverlay: 0.25,\n    gridNoise: 0.5,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 1.0,\n    gainM: 0.44,\n    gainY: -1.0,\n    gainK: 0,\n    type: 'ink',\n  },\n};\n\nexport const newspaper: HalftoneCmykPreset = {\n  name: 'Newspaper',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#f2f1e8',\n    colorC: '#7a7a75',\n    colorM: '#7a7a75',\n    colorY: '#7a7a75',\n    colorK: '#231f20',\n    size: 0.01,\n    contrast: 2,\n    softness: 0.2,\n    grainSize: 0,\n    grainMixer: 0,\n    grainOverlay: 0.2,\n    gridNoise: 0.6,\n    floodC: 0,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0.1,\n    gainC: -0.17,\n    gainM: -0.45,\n    gainY: -0.45,\n    gainK: 0,\n    type: 'dots',\n  },\n};\n\nexport const vintagePreset: HalftoneCmykPreset = {\n  name: 'Vintage',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#fffaf0',\n    colorC: '#59afc5',\n    colorM: '#d8697c',\n    colorY: '#fad85c',\n    colorK: '#2d2824',\n    size: 0.2,\n    contrast: 1.25,\n    softness: 0.4,\n    grainSize: 0.5,\n    grainMixer: 0.15,\n    grainOverlay: 0.1,\n    gridNoise: 0.45,\n    floodC: 0.15,\n    floodM: 0,\n    floodY: 0,\n    floodK: 0,\n    gainC: 0.3,\n    gainM: 0,\n    gainY: 0.2,\n    gainK: 0,\n    type: 'sharp',\n  },\n};\n\nexport const halftoneCmykPresets: HalftoneCmykPreset[] = [defaultPreset, dropsPreset, newspaper, vintagePreset];\n\nexport const HalftoneCmyk: React.FC<HalftoneCmykProps> = memo(function HalftoneCmykImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorC = defaultPreset.params.colorC,\n  colorM = defaultPreset.params.colorM,\n  colorY = defaultPreset.params.colorY,\n  colorK = defaultPreset.params.colorK,\n  image = '',\n  size = defaultPreset.params.size,\n  contrast = defaultPreset.params.contrast,\n  softness = defaultPreset.params.softness,\n  grainSize = defaultPreset.params.grainSize,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  gridNoise = defaultPreset.params.gridNoise,\n  floodC = defaultPreset.params.floodC,\n  floodM = defaultPreset.params.floodM,\n  floodY = defaultPreset.params.floodY,\n  floodK = defaultPreset.params.floodK,\n  gainC = defaultPreset.params.gainC,\n  gainM = defaultPreset.params.gainM,\n  gainY = defaultPreset.params.gainY,\n  gainK = defaultPreset.params.gainK,\n  type = defaultPreset.params.type,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: HalftoneCmykProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_noiseTexture: getShaderNoiseTexture(),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorC: getShaderColorFromString(colorC),\n    u_colorM: getShaderColorFromString(colorM),\n    u_colorY: getShaderColorFromString(colorY),\n    u_colorK: getShaderColorFromString(colorK),\n    u_size: size,\n    u_contrast: contrast,\n    u_softness: softness,\n    u_grainSize: grainSize,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_gridNoise: gridNoise,\n    u_floodC: floodC,\n    u_floodM: floodM,\n    u_floodY: floodY,\n    u_floodK: floodK,\n    u_gainC: gainC,\n    u_gainM: gainM,\n    u_gainY: gainY,\n    u_gainK: gainK,\n    u_type: HalftoneCmykTypes[type],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies HalftoneCmykUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={halftoneCmykFragmentShader}\n      acceptsHtmlChildren\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/halftone-dots.js

@@ -162,6 +162,7 @@ const HalftoneDots = memo(function HalftoneDotsImpl({
       speed,
       frame,
       fragmentShader: halftoneDotsFragmentShader,
+      acceptsHtmlChildren: true,
       uniforms
     }
   );

package/dist/shaders/halftone-dots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/halftone-dots.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  halftoneDotsFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n} from '@paper-design/shaders';\n\nexport interface HalftoneDotsProps extends ShaderComponentProps, HalftoneDotsParams {}\n\ntype HalftoneDotsPreset = ImageShaderPreset<HalftoneDotsParams>;\n\nexport const defaultPreset: HalftoneDotsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#f2f1e8',\n    colorFront: '#2b2b2b',\n    size: 0.5,\n    radius: 1.25,\n    contrast: 0.4,\n    originalColors: false,\n    inverted: false,\n    grainMixer: 0.2,\n    grainOverlay: 0.2,\n    grainSize: 0.5,\n    grid: 'hex',\n    type: 'gooey',\n  },\n};\n\nexport const ledPreset: HalftoneDotsPreset = {\n  name: 'LED screen',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#29ff7b',\n    size: 0.5,\n    radius: 1.5,\n    contrast: 0.3,\n    originalColors: false,\n    inverted: false,\n    grainMixer: 0,\n    grainOverlay: 0,\n    grainSize: 0.5,\n    grid: 'square',\n    type: 'soft',\n  },\n};\n\nexport const netPreset: HalftoneDotsPreset = {\n  name: 'Mosaic',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#b2aeae',\n    size: 0.6,\n    radius: 2,\n    contrast: 0.01,\n    originalColors: true,\n    inverted: false,\n    grainMixer: 0,\n    grainOverlay: 0,\n    grainSize: 0.5,\n    grid: 'hex',\n    type: 'classic',\n  },\n};\n\nexport const roundAndSquarePreset: HalftoneDotsPreset = {\n  name: 'Round and square',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#141414',\n    colorFront: '#ff8000',\n    size: 0.8,\n    radius: 1,\n    contrast: 1,\n    originalColors: false,\n    inverted: true,\n    grainMixer: 0.05,\n    grainOverlay: 0.3,\n    grainSize: 0.5,\n    grid: 'square',\n    type: 'holes',\n  },\n};\n\nexport const halftoneDotsPresets: HalftoneDotsPreset[] = [defaultPreset, ledPreset, netPreset, roundAndSquarePreset];\n\nexport const HalftoneDots: React.FC<HalftoneDotsProps> = memo(function HalftoneDotsImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  image = '',\n  size = defaultPreset.params.size,\n  radius = defaultPreset.params.radius,\n  contrast = defaultPreset.params.contrast,\n  originalColors = defaultPreset.params.originalColors,\n  inverted = defaultPreset.params.inverted,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  grainSize = defaultPreset.params.grainSize,\n  grid = defaultPreset.params.grid,\n  type = defaultPreset.params.type,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: HalftoneDotsProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_size: size,\n    u_radius: radius,\n    u_contrast: contrast,\n    u_originalColors: originalColors,\n    u_inverted: inverted,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_grainSize: grainSize,\n    u_grid: HalftoneDotsGrids[grid],\n    u_type: HalftoneDotsTypes[type],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies HalftoneDotsUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={halftoneDotsFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  halftoneDotsFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type HalftoneDotsUniforms,\n  type HalftoneDotsParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n  HalftoneDotsTypes,\n  HalftoneDotsGrids,\n} from '@paper-design/shaders';\n\nexport interface HalftoneDotsProps extends ShaderComponentProps, HalftoneDotsParams {}\n\ntype HalftoneDotsPreset = ImageShaderPreset<HalftoneDotsParams>;\n\nexport const defaultPreset: HalftoneDotsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#f2f1e8',\n    colorFront: '#2b2b2b',\n    size: 0.5,\n    radius: 1.25,\n    contrast: 0.4,\n    originalColors: false,\n    inverted: false,\n    grainMixer: 0.2,\n    grainOverlay: 0.2,\n    grainSize: 0.5,\n    grid: 'hex',\n    type: 'gooey',\n  },\n};\n\nexport const ledPreset: HalftoneDotsPreset = {\n  name: 'LED screen',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#29ff7b',\n    size: 0.5,\n    radius: 1.5,\n    contrast: 0.3,\n    originalColors: false,\n    inverted: false,\n    grainMixer: 0,\n    grainOverlay: 0,\n    grainSize: 0.5,\n    grid: 'square',\n    type: 'soft',\n  },\n};\n\nexport const netPreset: HalftoneDotsPreset = {\n  name: 'Mosaic',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#b2aeae',\n    size: 0.6,\n    radius: 2,\n    contrast: 0.01,\n    originalColors: true,\n    inverted: false,\n    grainMixer: 0,\n    grainOverlay: 0,\n    grainSize: 0.5,\n    grid: 'hex',\n    type: 'classic',\n  },\n};\n\nexport const roundAndSquarePreset: HalftoneDotsPreset = {\n  name: 'Round and square',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorBack: '#141414',\n    colorFront: '#ff8000',\n    size: 0.8,\n    radius: 1,\n    contrast: 1,\n    originalColors: false,\n    inverted: true,\n    grainMixer: 0.05,\n    grainOverlay: 0.3,\n    grainSize: 0.5,\n    grid: 'square',\n    type: 'holes',\n  },\n};\n\nexport const halftoneDotsPresets: HalftoneDotsPreset[] = [defaultPreset, ledPreset, netPreset, roundAndSquarePreset];\n\nexport const HalftoneDots: React.FC<HalftoneDotsProps> = memo(function HalftoneDotsImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  image = '',\n  size = defaultPreset.params.size,\n  radius = defaultPreset.params.radius,\n  contrast = defaultPreset.params.contrast,\n  originalColors = defaultPreset.params.originalColors,\n  inverted = defaultPreset.params.inverted,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  grainSize = defaultPreset.params.grainSize,\n  grid = defaultPreset.params.grid,\n  type = defaultPreset.params.type,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: HalftoneDotsProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_size: size,\n    u_radius: radius,\n    u_contrast: contrast,\n    u_originalColors: originalColors,\n    u_inverted: inverted,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_grainSize: grainSize,\n    u_grid: HalftoneDotsGrids[grid],\n    u_type: HalftoneDotsTypes[type],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies HalftoneDotsUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={halftoneDotsFragmentShader}\n      acceptsHtmlChildren\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AA2JH;AArJG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEO,MAAM,YAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEO,MAAM,YAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEO,MAAM,uBAA2C;AAAA,EACtD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEO,MAAM,sBAA4C,CAAC,eAAe,WAAW,WAAW,oBAAoB;AAE5G,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,YAAY,cAAc,OAAO;AAAA,EACjC,QAAQ;AAAA,EACR,OAAO,cAAc,OAAO;AAAA,EAC5B,SAAS,cAAc,OAAO;AAAA,EAC9B,WAAW,cAAc,OAAO;AAAA,EAChC,iBAAiB,cAAc,OAAO;AAAA,EACtC,WAAW,cAAc,OAAO;AAAA,EAChC,aAAa,cAAc,OAAO;AAAA,EAClC,eAAe,cAAc,OAAO;AAAA,EACpC,YAAY,cAAc,OAAO;AAAA,EACjC,OAAO,cAAc,OAAO;AAAA,EAC5B,OAAO,cAAc,OAAO;AAAA;AAAA,EAG5B,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAsB;AACpB,QAAM,WAAW;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,cAAc,yBAAyB,UAAU;AAAA,IACjD,aAAa,yBAAyB,SAAS;AAAA,IAC/C,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,QAAQ,kBAAkB,IAAI;AAAA,IAC9B,QAAQ,kBAAkB,IAAI;AAAA;AAAA,IAG9B,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,qBAAmB;AAAA,MACnB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
   "names": []
 }

package/dist/shaders/image-dithering.js

@@ -139,6 +139,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
       speed,
       frame,
       fragmentShader: imageDitheringFragmentShader,
+      acceptsHtmlChildren: true,
       uniforms
     }
   );

package/dist/shaders/image-dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/image-dithering.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  imageDitheringFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type ImageDitheringUniforms,\n  type ImageDitheringParams,\n  defaultObjectSizing,\n  DitheringTypes,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {\n  /** @deprecated use `size` instead */\n  pxSize?: number;\n}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    // scale: 0.95,\n    speed: 0,\n    frame: 0,\n    colorFront: '#94ffaf',\n    colorBack: '#000c38',\n    colorHighlight: '#eaff94',\n    type: '8x8',\n    size: 2,\n    colorSteps: 2,\n    originalColors: false,\n    inverted: false,\n  },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n  name: 'Retro',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorFront: '#eeeeee',\n    colorBack: '#5452ff',\n    colorHighlight: '#eeeeee',\n    type: '2x2',\n    size: 3,\n    colorSteps: 1,\n    originalColors: true,\n    inverted: false,\n  },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n  name: 'Noise',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorFront: '#a2997c',\n    colorBack: '#000000',\n    colorHighlight: '#ededed',\n    type: 'random',\n    size: 1,\n    colorSteps: 1,\n    originalColors: false,\n    inverted: false,\n  },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n  name: 'Natural',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorFront: '#ffffff',\n    colorBack: '#000000',\n    colorHighlight: '#ffffff',\n    type: '8x8',\n    size: 2,\n    colorSteps: 5,\n    originalColors: true,\n    inverted: false,\n  },\n} as const;\n\nexport const imageDitheringPresets: ImageDitheringPreset[] = [defaultPreset, noisePreset, retroPreset, naturalPreset];\n\nexport const ImageDithering: React.FC<ImageDitheringProps> = memo(function ImageDitheringImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  type = defaultPreset.params.type,\n  colorSteps = defaultPreset.params.colorSteps,\n  originalColors = defaultPreset.params.originalColors,\n  inverted = defaultPreset.params.inverted,\n  pxSize,\n  size = pxSize === undefined ? defaultPreset.params.size : pxSize,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: ImageDitheringProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_type: DitheringTypes[type],\n    u_pxSize: size,\n    u_colorSteps: colorSteps,\n    u_originalColors: originalColors,\n    u_inverted: inverted,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies ImageDitheringUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={imageDitheringFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  imageDitheringFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type ImageDitheringUniforms,\n  type ImageDitheringParams,\n  defaultObjectSizing,\n  DitheringTypes,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {\n  /** @deprecated use `size` instead */\n  pxSize?: number;\n}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    // scale: 0.95,\n    speed: 0,\n    frame: 0,\n    colorFront: '#94ffaf',\n    colorBack: '#000c38',\n    colorHighlight: '#eaff94',\n    type: '8x8',\n    size: 2,\n    colorSteps: 2,\n    originalColors: false,\n    inverted: false,\n  },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n  name: 'Retro',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorFront: '#eeeeee',\n    colorBack: '#5452ff',\n    colorHighlight: '#eeeeee',\n    type: '2x2',\n    size: 3,\n    colorSteps: 1,\n    originalColors: true,\n    inverted: false,\n  },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n  name: 'Noise',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorFront: '#a2997c',\n    colorBack: '#000000',\n    colorHighlight: '#ededed',\n    type: 'random',\n    size: 1,\n    colorSteps: 1,\n    originalColors: false,\n    inverted: false,\n  },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n  name: 'Natural',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    colorFront: '#ffffff',\n    colorBack: '#000000',\n    colorHighlight: '#ffffff',\n    type: '8x8',\n    size: 2,\n    colorSteps: 5,\n    originalColors: true,\n    inverted: false,\n  },\n} as const;\n\nexport const imageDitheringPresets: ImageDitheringPreset[] = [defaultPreset, noisePreset, retroPreset, naturalPreset];\n\nexport const ImageDithering: React.FC<ImageDitheringProps> = memo(function ImageDitheringImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  type = defaultPreset.params.type,\n  colorSteps = defaultPreset.params.colorSteps,\n  originalColors = defaultPreset.params.originalColors,\n  inverted = defaultPreset.params.inverted,\n  pxSize,\n  size = pxSize === undefined ? defaultPreset.params.size : pxSize,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: ImageDitheringProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_type: DitheringTypes[type],\n    u_pxSize: size,\n    u_colorSteps: colorSteps,\n    u_originalColors: originalColors,\n    u_inverted: inverted,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies ImageDitheringUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={imageDitheringFragmentShader}\n      acceptsHtmlChildren\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/lens-distortion.js

@@ -215,6 +215,7 @@ const LensDistortion = memo(function LensDistortionImpl({
       speed,
       frame,
       fragmentShader: lensDistortionFragmentShader,
+      acceptsHtmlChildren: true,
       mipmaps: ["u_image"],
       uniforms
     }

package/dist/shaders/lens-distortion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/lens-distortion.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  lensDistortionFragmentShader,\n  ShaderFitOptions,\n  type LensDistortionUniforms,\n  type LensDistortionParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface LensDistortionProps extends ShaderComponentProps, LensDistortionParams {}\n\ntype LensDistortionPreset = ImageShaderPreset<LensDistortionParams>;\n\nexport const defaultPreset: LensDistortionPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.6,\n    bias: 1,\n    angle: 0,\n    perspective: 0.1,\n    count: 35,\n    dispersion: 1,\n    dispersionShift: 0,\n    dispersionColor: 0.6,\n    focusCenter: 0.8,\n    focusEdges: 1,\n    swirl: 0.35,\n    noise: 0,\n    noiseFrequency: 0.25,\n    noiseOffset: 0,\n    lensBulge: 0,\n    lensCircle: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const fisheyePreset: LensDistortionPreset = {\n  name: 'Fisheye',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.7,\n    bias: 1,\n    angle: 0,\n    perspective: 0.75,\n    count: 15,\n    dispersion: 1,\n    dispersionShift: 0,\n    dispersionColor: 0.7,\n    focusCenter: 0.9,\n    focusEdges: 1,\n    swirl: 1,\n    noise: 0,\n    noiseFrequency: 0.25,\n    noiseOffset: 0,\n    lensBulge: 0.95,\n    lensCircle: 1,\n    grainMixer: 0.5,\n    grainOverlay: 0,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const duotonePreset: LensDistortionPreset = {\n  name: 'Duotone',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.1,\n    bias: 0,\n    angle: 0,\n    perspective: 0,\n    count: 2,\n    dispersion: 1,\n    dispersionShift: 0,\n    dispersionColor: 0.1,\n    focusCenter: 0,\n    focusEdges: 0,\n    swirl: 0,\n    noise: 0,\n    noiseFrequency: 0.25,\n    noiseOffset: 0,\n    lensBulge: 0,\n    lensCircle: 0,\n    grainMixer: 0.1,\n    grainOverlay: 0.3,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const smokePreset: LensDistortionPreset = {\n  name: 'Smoke',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.65,\n    bias: -1,\n    angle: 0,\n    perspective: 0.4,\n    count: 50,\n    dispersion: 0,\n    dispersionShift: 0,\n    dispersionColor: 0.31,\n    focusCenter: 0,\n    focusEdges: 0.6,\n    swirl: 0,\n    noise: 1,\n    noiseFrequency: 0.35,\n    noiseOffset: 0.3,\n    lensBulge: 0,\n    lensCircle: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const lensDistortionPresets: LensDistortionPreset[] = [\n  defaultPreset,\n  fisheyePreset,\n  duotonePreset,\n  smokePreset,\n];\n\nexport const LensDistortion: React.FC<LensDistortionProps> = memo(function LensDistortionImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  spread = defaultPreset.params.spread,\n  bias = defaultPreset.params.bias,\n  angle = defaultPreset.params.angle,\n  perspective = defaultPreset.params.perspective,\n  count = defaultPreset.params.count,\n  dispersion = defaultPreset.params.dispersion,\n  dispersionShift = defaultPreset.params.dispersionShift,\n  dispersionColor = defaultPreset.params.dispersionColor,\n  focusCenter = defaultPreset.params.focusCenter,\n  focusEdges = defaultPreset.params.focusEdges,\n  swirl = defaultPreset.params.swirl,\n  noise = defaultPreset.params.noise,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noiseOffset = defaultPreset.params.noiseOffset,\n  lensBulge = defaultPreset.params.lensBulge,\n  lensCircle = defaultPreset.params.lensCircle,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  imageX = defaultPreset.params.imageX,\n  imageY = defaultPreset.params.imageY,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: LensDistortionProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_spread: spread,\n    u_bias: bias,\n    u_angle: angle,\n    u_perspective: perspective,\n    u_count: count,\n    u_dispersion: dispersion,\n    u_dispersionShift: dispersionShift,\n    u_dispersionColor: dispersionColor,\n    u_focusCenter: focusCenter,\n    u_focusEdges: focusEdges,\n    u_swirl: swirl,\n    u_noise: noise,\n    u_noiseFrequency: noiseFrequency,\n    u_noiseOffset: noiseOffset,\n    u_lensBulge: lensBulge,\n    u_lensCircle: lensCircle,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_imageX: imageX,\n    u_imageY: imageY,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies LensDistortionUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={lensDistortionFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  lensDistortionFragmentShader,\n  ShaderFitOptions,\n  type LensDistortionUniforms,\n  type LensDistortionParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface LensDistortionProps extends ShaderComponentProps, LensDistortionParams {}\n\ntype LensDistortionPreset = ImageShaderPreset<LensDistortionParams>;\n\nexport const defaultPreset: LensDistortionPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.6,\n    bias: 1,\n    angle: 0,\n    perspective: 0.1,\n    count: 35,\n    dispersion: 1,\n    dispersionShift: 0,\n    dispersionColor: 0.6,\n    focusCenter: 0.8,\n    focusEdges: 1,\n    swirl: 0.35,\n    noise: 0,\n    noiseFrequency: 0.25,\n    noiseOffset: 0,\n    lensBulge: 0,\n    lensCircle: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const fisheyePreset: LensDistortionPreset = {\n  name: 'Fisheye',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.7,\n    bias: 1,\n    angle: 0,\n    perspective: 0.75,\n    count: 15,\n    dispersion: 1,\n    dispersionShift: 0,\n    dispersionColor: 0.7,\n    focusCenter: 0.9,\n    focusEdges: 1,\n    swirl: 1,\n    noise: 0,\n    noiseFrequency: 0.25,\n    noiseOffset: 0,\n    lensBulge: 0.95,\n    lensCircle: 1,\n    grainMixer: 0.5,\n    grainOverlay: 0,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const duotonePreset: LensDistortionPreset = {\n  name: 'Duotone',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.1,\n    bias: 0,\n    angle: 0,\n    perspective: 0,\n    count: 2,\n    dispersion: 1,\n    dispersionShift: 0,\n    dispersionColor: 0.1,\n    focusCenter: 0,\n    focusEdges: 0,\n    swirl: 0,\n    noise: 0,\n    noiseFrequency: 0.25,\n    noiseOffset: 0,\n    lensBulge: 0,\n    lensCircle: 0,\n    grainMixer: 0.1,\n    grainOverlay: 0.3,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const smokePreset: LensDistortionPreset = {\n  name: 'Smoke',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    fit: 'contain',\n    speed: 0,\n    frame: 0,\n    spread: 0.65,\n    bias: -1,\n    angle: 0,\n    perspective: 0.4,\n    count: 50,\n    dispersion: 0,\n    dispersionShift: 0,\n    dispersionColor: 0.31,\n    focusCenter: 0,\n    focusEdges: 0.6,\n    swirl: 0,\n    noise: 1,\n    noiseFrequency: 0.35,\n    noiseOffset: 0.3,\n    lensBulge: 0,\n    lensCircle: 0,\n    grainMixer: 0,\n    grainOverlay: 0,\n    imageX: 0,\n    imageY: 0,\n  },\n} as const;\n\nexport const lensDistortionPresets: LensDistortionPreset[] = [\n  defaultPreset,\n  fisheyePreset,\n  duotonePreset,\n  smokePreset,\n];\n\nexport const LensDistortion: React.FC<LensDistortionProps> = memo(function LensDistortionImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  spread = defaultPreset.params.spread,\n  bias = defaultPreset.params.bias,\n  angle = defaultPreset.params.angle,\n  perspective = defaultPreset.params.perspective,\n  count = defaultPreset.params.count,\n  dispersion = defaultPreset.params.dispersion,\n  dispersionShift = defaultPreset.params.dispersionShift,\n  dispersionColor = defaultPreset.params.dispersionColor,\n  focusCenter = defaultPreset.params.focusCenter,\n  focusEdges = defaultPreset.params.focusEdges,\n  swirl = defaultPreset.params.swirl,\n  noise = defaultPreset.params.noise,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noiseOffset = defaultPreset.params.noiseOffset,\n  lensBulge = defaultPreset.params.lensBulge,\n  lensCircle = defaultPreset.params.lensCircle,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  imageX = defaultPreset.params.imageX,\n  imageY = defaultPreset.params.imageY,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: LensDistortionProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_spread: spread,\n    u_bias: bias,\n    u_angle: angle,\n    u_perspective: perspective,\n    u_count: count,\n    u_dispersion: dispersion,\n    u_dispersionShift: dispersionShift,\n    u_dispersionColor: dispersionColor,\n    u_focusCenter: focusCenter,\n    u_focusEdges: focusEdges,\n    u_swirl: swirl,\n    u_noise: noise,\n    u_noiseFrequency: noiseFrequency,\n    u_noiseOffset: noiseOffset,\n    u_lensBulge: lensBulge,\n    u_lensCircle: lensCircle,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_imageX: imageX,\n    u_imageY: imageY,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies LensDistortionUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={lensDistortionFragmentShader}\n      acceptsHtmlChildren\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/paper-texture.js

@@ -6,6 +6,7 @@
 import { memo } from "react";
 import { ShaderMount } from "../shader-mount.js";
 import { colorPropsAreEqual } from "../color-props-are-equal.js";
+import { willDrawHtmlChildren } from "../html-in-canvas.js";
 import {
   defaultObjectSizing,
   getShaderColorFromString,
@@ -18,41 +19,39 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultObjectSizing,
-    blending: 1,
-    distortion: 0.75,
     fit: "contain",
     scale: 0.9,
     speed: 0,
     frame: 0,
     colorBack: "#d3d2ab",
-    colorPaper: "#ffffffb5",
-    colorShadow: "#b3b3b3",
+    colorPaper: "#ffffff",
+    colorShadow: "#cccccc",
+    blending: 1,
+    distortion: 0.75,
+    clip: false,
+    angle: 300,
+    seed: 4,
     roughness: 0.4,
-    roughnessSize: 0.25,
+    roughnessSize: 0.5,
     roughnessRows: 0,
     fiber: 0.4,
     fiberSize: 0.5,
-    crumples: 0,
-    crumpleCount: 6,
-    wrinkles: 1,
-    wrinkleSize: 0.65,
-    folds: 0,
-    foldSizeX: 0.6,
-    foldSizeY: 0.44,
+    folds: 0.5,
+    foldSizeX: 1,
+    foldSizeY: 1,
     foldOffsetX: 0,
     foldOffsetY: 0,
-    angle: 300,
-    drops: 1,
-    seed: 234,
-    clip: false
+    wrinkles: 1,
+    wrinkleSize: 0.65,
+    crumples: 0,
+    crumpleCount: 6,
+    drops: 0.4
   }
 };
 const creasedPreset = {
   name: "Creased",
   params: {
     ...defaultObjectSizing,
-    blending: 1,
-    distortion: -0.5,
     fit: "contain",
     scale: 0.9,
     speed: 0,
@@ -60,32 +59,32 @@ const creasedPreset = {
     colorBack: "#d3d2ab",
     colorPaper: "#ffffff",
     colorShadow: "#b3b3b3",
+    blending: 1,
+    distortion: -0.5,
+    clip: false,
+    angle: 60,
+    seed: 49,
     roughness: 0.4,
     roughnessSize: 0.25,
     roughnessRows: 0,
     fiber: 0.4,
     fiberSize: 0.5,
-    crumples: 1,
-    crumpleCount: 7,
-    wrinkles: 0,
-    wrinkleSize: 0.65,
     folds: 0,
     foldSizeX: 0.6,
     foldSizeY: 0.89,
     foldOffsetX: 0.59,
     foldOffsetY: 1,
-    angle: 236,
-    drops: 0,
-    seed: 185,
-    clip: false
+    wrinkles: 0,
+    wrinkleSize: 0.65,
+    crumples: 1,
+    crumpleCount: 4,
+    drops: 0
   }
 };
 const spreadPreset = {
   name: "Spread",
   params: {
     ...defaultObjectSizing,
-    blending: 1,
-    distortion: -0.3,
     fit: "contain",
     scale: 0.9,
     speed: 0,
@@ -93,32 +92,32 @@ const spreadPreset = {
     colorBack: "#ffffff00",
     colorPaper: "#ffffffb5",
     colorShadow: "#b3b3b3",
+    blending: 1,
+    distortion: -0.3,
+    clip: true,
+    angle: 236,
+    seed: 613,
     roughness: 0.15,
     roughnessSize: 0.25,
     roughnessRows: 0,
     fiber: 0.5,
     fiberSize: 0.5,
-    crumples: 0,
-    crumpleCount: 9,
-    wrinkles: 0,
-    wrinkleSize: 0.65,
     folds: 1,
     foldSizeX: 0.4,
     foldSizeY: 0.89,
     foldOffsetX: 0,
     foldOffsetY: 0,
-    angle: 236,
-    drops: 0,
-    seed: 613,
-    clip: true
+    wrinkles: 0,
+    wrinkleSize: 0.65,
+    crumples: 0,
+    crumpleCount: 9,
+    drops: 0
   }
 };
 const flatPreset = {
   name: "Flat",
   params: {
     ...defaultObjectSizing,
-    blending: 1,
-    distortion: 0,
     fit: "contain",
     scale: 0.9,
     speed: 0,
@@ -126,24 +125,26 @@ const flatPreset = {
     colorBack: "#d4cdab",
     colorPaper: "#ffffffa8",
     colorShadow: "#b3b3b3",
+    blending: 1,
+    distortion: 0,
+    clip: false,
+    angle: 0,
+    seed: 455,
     roughness: 1,
     roughnessSize: 0.5,
     roughnessRows: 0.6,
     fiber: 0.7,
     fiberSize: 1,
-    crumples: 0,
-    crumpleCount: 6,
-    wrinkles: 0,
-    wrinkleSize: 0,
     folds: 0,
     foldSizeX: 0,
     foldSizeY: 0.44,
     foldOffsetX: 0,
     foldOffsetY: 0,
-    angle: 0,
-    drops: 0.5,
-    seed: 455,
-    clip: false
+    wrinkles: 0,
+    wrinkleSize: 0,
+    crumples: 0,
+    crumpleCount: 6,
+    drops: 0.2
   }
 };
 const paperTexturePresets = [
@@ -156,33 +157,32 @@ const PaperTexture = memo(function PaperTextureImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
+  image = "",
   colorBack = defaultPreset.params.colorBack,
   colorPaper = defaultPreset.params.colorPaper,
   colorShadow = defaultPreset.params.colorShadow,
-  image = "",
+  blending = defaultPreset.params.blending,
+  distortion = defaultPreset.params.distortion,
+  clip = defaultPreset.params.clip,
+  angle = defaultPreset.params.angle,
+  seed = defaultPreset.params.seed,
   roughness = defaultPreset.params.roughness,
   roughnessSize = defaultPreset.params.roughnessSize,
   roughnessRows = defaultPreset.params.roughnessRows,
   fiber = defaultPreset.params.fiber,
-  crumples = defaultPreset.params.crumples,
-  wrinkles = defaultPreset.params.wrinkles,
-  wrinkleSize = defaultPreset.params.wrinkleSize,
+  fiberScale,
+  fiberSize = fiberScale === void 0 ? defaultPreset.params.fiberSize : 0.2 / fiberScale,
   folds = defaultPreset.params.folds,
   foldSizeX = defaultPreset.params.foldSizeX,
   foldSizeY = defaultPreset.params.foldSizeY,
   foldOffsetX = defaultPreset.params.foldOffsetX,
   foldOffsetY = defaultPreset.params.foldOffsetY,
-  angle = defaultPreset.params.angle,
-  drops = defaultPreset.params.drops,
-  seed = defaultPreset.params.seed,
-  blending = defaultPreset.params.blending,
-  distortion = defaultPreset.params.distortion,
-  clip = defaultPreset.params.clip,
-  // Reworked props
-  fiberScale,
-  fiberSize = fiberScale === void 0 ? defaultPreset.params.fiberSize : 0.2 / fiberScale,
+  wrinkles = defaultPreset.params.wrinkles,
+  wrinkleSize = defaultPreset.params.wrinkleSize,
+  crumples = defaultPreset.params.crumples,
   foldsNumber,
   crumpleCount = foldsNumber === void 0 ? defaultPreset.params.crumpleCount : foldsNumber,
+  drops = defaultPreset.params.drops,
   // Sizing props
   fit = defaultPreset.params.fit,
   scale = defaultPreset.params.scale,
@@ -199,30 +199,30 @@ const PaperTexture = memo(function PaperTextureImpl({
   const uniforms = {
     // Own uniforms
     u_image: image,
-    u_isImage: Boolean(image),
+    u_isImage: willDrawHtmlChildren(props.children) || Boolean(image),
     u_colorBack: getShaderColorFromString(colorBack),
     u_colorPaper: getShaderColorFromString(colorPaper),
     u_colorShadow: getShaderColorFromString(colorShadow),
+    u_blending: blending,
+    u_distortion: distortion,
+    u_clip: clip,
+    u_angle: angle,
+    u_seed: seed,
     u_roughness: roughness,
     u_roughnessSize: roughnessSize,
     u_roughnessRows: roughnessRows,
     u_fiber: fiber,
     u_fiberSize: fiberSize,
-    u_crumpleCount: crumpleCount,
+    u_folds: folds,
     u_foldSizeX: foldSizeX,
     u_foldSizeY: foldSizeY,
     u_foldOffsetX: foldOffsetX,
     u_foldOffsetY: foldOffsetY,
-    u_angle: angle,
-    u_crumples: crumples,
     u_wrinkles: wrinkles,
     u_wrinkleSize: wrinkleSize,
-    u_folds: folds,
+    u_crumples: crumples,
+    u_crumpleCount: crumpleCount,
     u_drops: drops,
-    u_seed: seed,
-    u_blending: blending,
-    u_distortion: distortion,
-    u_clip: clip,
     ...noiseTexture,
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
@@ -242,6 +242,7 @@ const PaperTexture = memo(function PaperTextureImpl({
       speed,
       frame,
       fragmentShader: paperTextureFragmentShader,
+      acceptsHtmlChildren: true,
       mipmaps: ["u_image"],
       uniforms
     }

package/dist/shaders/paper-texture.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/paper-texture.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  paperTextureFragmentShader,\n  ShaderFitOptions,\n  type ImageShaderPreset,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {\n  /** @deprecated use `fiberSize` instead */\n  fiberScale?: number;\n  /** @deprecated use `crumpleCount` instead */\n  foldsNumber?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    blending: 1,\n    distortion: 0.75,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#d3d2ab',\n    colorPaper: '#ffffffb5',\n    colorShadow: '#b3b3b3',\n    roughness: 0.4,\n    roughnessSize: 0.25,\n    roughnessRows: 0,\n    fiber: 0.4,\n    fiberSize: 0.5,\n    crumples: 0,\n    crumpleCount: 6,\n    wrinkles: 1,\n    wrinkleSize: 0.65,\n    folds: 0,\n    foldSizeX: 0.6,\n    foldSizeY: 0.44,\n    foldOffsetX: 0,\n    foldOffsetY: 0,\n    angle: 300,\n    drops: 1,\n    seed: 234,\n    clip: false,\n  },\n};\n\nexport const creasedPreset: PaperTexturePreset = {\n  name: 'Creased',\n  params: {\n    ...defaultObjectSizing,\n    blending: 1,\n    distortion: -0.5,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#d3d2ab',\n    colorPaper: '#ffffff',\n    colorShadow: '#b3b3b3',\n    roughness: 0.4,\n    roughnessSize: 0.25,\n    roughnessRows: 0,\n    fiber: 0.4,\n    fiberSize: 0.5,\n    crumples: 1,\n    crumpleCount: 7,\n    wrinkles: 0,\n    wrinkleSize: 0.65,\n    folds: 0,\n    foldSizeX: 0.6,\n    foldSizeY: 0.89,\n    foldOffsetX: 0.59,\n    foldOffsetY: 1,\n    angle: 236,\n    drops: 0,\n    seed: 185,\n    clip: false,\n  },\n};\n\nexport const spreadPreset: PaperTexturePreset = {\n  name: 'Spread',\n  params: {\n    ...defaultObjectSizing,\n    blending: 1,\n    distortion: -0.3,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#ffffff00',\n    colorPaper: '#ffffffb5',\n    colorShadow: '#b3b3b3',\n    roughness: 0.15,\n    roughnessSize: 0.25,\n    roughnessRows: 0,\n    fiber: 0.5,\n    fiberSize: 0.5,\n    crumples: 0,\n    crumpleCount: 9,\n    wrinkles: 0,\n    wrinkleSize: 0.65,\n    folds: 1,\n    foldSizeX: 0.4,\n    foldSizeY: 0.89,\n    foldOffsetX: 0,\n    foldOffsetY: 0,\n    angle: 236,\n    drops: 0,\n    seed: 613,\n    clip: true,\n  },\n};\n\nexport const flatPreset: PaperTexturePreset = {\n  name: 'Flat',\n  params: {\n    ...defaultObjectSizing,\n    blending: 1,\n    distortion: 0,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#d4cdab',\n    colorPaper: '#ffffffa8',\n    colorShadow: '#b3b3b3',\n    roughness: 1,\n    roughnessSize: 0.5,\n    roughnessRows: 0.6,\n    fiber: 0.7,\n    fiberSize: 1,\n    crumples: 0,\n    crumpleCount: 6,\n    wrinkles: 0,\n    wrinkleSize: 0,\n    folds: 0,\n    foldSizeX: 0,\n    foldSizeY: 0.44,\n    foldOffsetX: 0,\n    foldOffsetY: 0,\n    angle: 0,\n    drops: 0.5,\n    seed: 455,\n    clip: false,\n  },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n  defaultPreset,\n  spreadPreset,\n  creasedPreset,\n  flatPreset,\n] as const;\n\nexport const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperTextureImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorPaper = defaultPreset.params.colorPaper,\n  colorShadow = defaultPreset.params.colorShadow,\n  image = '',\n  roughness = defaultPreset.params.roughness,\n  roughnessSize = defaultPreset.params.roughnessSize,\n  roughnessRows = defaultPreset.params.roughnessRows,\n  fiber = defaultPreset.params.fiber,\n  crumples = defaultPreset.params.crumples,\n  wrinkles = defaultPreset.params.wrinkles,\n  wrinkleSize = defaultPreset.params.wrinkleSize,\n  folds = defaultPreset.params.folds,\n  foldSizeX = defaultPreset.params.foldSizeX,\n  foldSizeY = defaultPreset.params.foldSizeY,\n  foldOffsetX = defaultPreset.params.foldOffsetX,\n  foldOffsetY = defaultPreset.params.foldOffsetY,\n  angle = defaultPreset.params.angle,\n  drops = defaultPreset.params.drops,\n  seed = defaultPreset.params.seed,\n  blending = defaultPreset.params.blending,\n  distortion = defaultPreset.params.distortion,\n  clip = defaultPreset.params.clip,\n\n  // Reworked props\n  fiberScale,\n  fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n  foldsNumber,\n  crumpleCount = foldsNumber === undefined ? defaultPreset.params.crumpleCount : foldsNumber,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: PaperTextureProps) {\n  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_isImage: Boolean(image),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorPaper: getShaderColorFromString(colorPaper),\n    u_colorShadow: getShaderColorFromString(colorShadow),\n    u_roughness: roughness,\n    u_roughnessSize: roughnessSize,\n    u_roughnessRows: roughnessRows,\n    u_fiber: fiber,\n    u_fiberSize: fiberSize,\n    u_crumpleCount: crumpleCount,\n    u_foldSizeX: foldSizeX,\n    u_foldSizeY: foldSizeY,\n    u_foldOffsetX: foldOffsetX,\n    u_foldOffsetY: foldOffsetY,\n    u_angle: angle,\n    u_crumples: crumples,\n    u_wrinkles: wrinkles,\n    u_wrinkleSize: wrinkleSize,\n    u_folds: folds,\n    u_drops: drops,\n    u_seed: seed,\n    u_blending: blending,\n    u_distortion: distortion,\n    u_clip: clip,\n    ...noiseTexture,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies PaperTextureUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={paperTextureFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport { willDrawHtmlChildren } from '../html-in-canvas.js';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  paperTextureFragmentShader,\n  ShaderFitOptions,\n  type ImageShaderPreset,\n  type PaperTextureParams,\n  type PaperTextureUniforms,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {\n  /** @deprecated use `fiberSize` instead */\n  fiberScale?: number;\n  /** @deprecated use `crumpleCount` instead */\n  foldsNumber?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#d3d2ab',\n    colorPaper: '#ffffff',\n    colorShadow: '#cccccc',\n    blending: 1,\n    distortion: 0.75,\n    clip: false,\n    angle: 300,\n    seed: 4,\n    roughness: 0.4,\n    roughnessSize: 0.5,\n    roughnessRows: 0,\n    fiber: 0.4,\n    fiberSize: 0.5,\n    folds: 0.5,\n    foldSizeX: 1,\n    foldSizeY: 1,\n    foldOffsetX: 0,\n    foldOffsetY: 0,\n    wrinkles: 1,\n    wrinkleSize: 0.65,\n    crumples: 0,\n    crumpleCount: 6,\n    drops: 0.4,\n  },\n};\n\nexport const creasedPreset: PaperTexturePreset = {\n  name: 'Creased',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#d3d2ab',\n    colorPaper: '#ffffff',\n    colorShadow: '#b3b3b3',\n    blending: 1,\n    distortion: -0.5,\n    clip: false,\n    angle: 60,\n    seed: 49,\n    roughness: 0.4,\n    roughnessSize: 0.25,\n    roughnessRows: 0,\n    fiber: 0.4,\n    fiberSize: 0.5,\n    folds: 0,\n    foldSizeX: 0.6,\n    foldSizeY: 0.89,\n    foldOffsetX: 0.59,\n    foldOffsetY: 1,\n    wrinkles: 0,\n    wrinkleSize: 0.65,\n    crumples: 1,\n    crumpleCount: 4,\n    drops: 0,\n  },\n};\n\nexport const spreadPreset: PaperTexturePreset = {\n  name: 'Spread',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#ffffff00',\n    colorPaper: '#ffffffb5',\n    colorShadow: '#b3b3b3',\n    blending: 1,\n    distortion: -0.3,\n    clip: true,\n    angle: 236,\n    seed: 613,\n    roughness: 0.15,\n    roughnessSize: 0.25,\n    roughnessRows: 0,\n    fiber: 0.5,\n    fiberSize: 0.5,\n    folds: 1,\n    foldSizeX: 0.4,\n    foldSizeY: 0.89,\n    foldOffsetX: 0,\n    foldOffsetY: 0,\n    wrinkles: 0,\n    wrinkleSize: 0.65,\n    crumples: 0,\n    crumpleCount: 9,\n    drops: 0,\n  },\n};\n\nexport const flatPreset: PaperTexturePreset = {\n  name: 'Flat',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    scale: 0.9,\n    speed: 0,\n    frame: 0,\n    colorBack: '#d4cdab',\n    colorPaper: '#ffffffa8',\n    colorShadow: '#b3b3b3',\n    blending: 1,\n    distortion: 0,\n    clip: false,\n    angle: 0,\n    seed: 455,\n    roughness: 1,\n    roughnessSize: 0.5,\n    roughnessRows: 0.6,\n    fiber: 0.7,\n    fiberSize: 1,\n    folds: 0,\n    foldSizeX: 0,\n    foldSizeY: 0.44,\n    foldOffsetX: 0,\n    foldOffsetY: 0,\n    wrinkles: 0,\n    wrinkleSize: 0,\n    crumples: 0,\n    crumpleCount: 6,\n    drops: 0.2,\n  },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n  defaultPreset,\n  spreadPreset,\n  creasedPreset,\n  flatPreset,\n] as const;\n\nexport const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperTextureImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  colorBack = defaultPreset.params.colorBack,\n  colorPaper = defaultPreset.params.colorPaper,\n  colorShadow = defaultPreset.params.colorShadow,\n  blending = defaultPreset.params.blending,\n  distortion = defaultPreset.params.distortion,\n  clip = defaultPreset.params.clip,\n  angle = defaultPreset.params.angle,\n  seed = defaultPreset.params.seed,\n  roughness = defaultPreset.params.roughness,\n  roughnessSize = defaultPreset.params.roughnessSize,\n  roughnessRows = defaultPreset.params.roughnessRows,\n  fiber = defaultPreset.params.fiber,\n  fiberScale,\n  fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n  folds = defaultPreset.params.folds,\n  foldSizeX = defaultPreset.params.foldSizeX,\n  foldSizeY = defaultPreset.params.foldSizeY,\n  foldOffsetX = defaultPreset.params.foldOffsetX,\n  foldOffsetY = defaultPreset.params.foldOffsetY,\n  wrinkles = defaultPreset.params.wrinkles,\n  wrinkleSize = defaultPreset.params.wrinkleSize,\n  crumples = defaultPreset.params.crumples,\n  foldsNumber,\n  crumpleCount = foldsNumber === undefined ? defaultPreset.params.crumpleCount : foldsNumber,\n  drops = defaultPreset.params.drops,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: PaperTextureProps) {\n  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_isImage: willDrawHtmlChildren(props.children) || Boolean(image),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorPaper: getShaderColorFromString(colorPaper),\n    u_colorShadow: getShaderColorFromString(colorShadow),\n    u_blending: blending,\n    u_distortion: distortion,\n    u_clip: clip,\n    u_angle: angle,\n    u_seed: seed,\n    u_roughness: roughness,\n    u_roughnessSize: roughnessSize,\n    u_roughnessRows: roughnessRows,\n    u_fiber: fiber,\n    u_fiberSize: fiberSize,\n    u_folds: folds,\n    u_foldSizeX: foldSizeX,\n    u_foldSizeY: foldSizeY,\n    u_foldOffsetX: foldOffsetX,\n    u_foldOffsetY: foldOffsetY,\n    u_wrinkles: wrinkles,\n    u_wrinkleSize: wrinkleSize,\n    u_crumples: crumples,\n    u_crumpleCount: crumpleCount,\n    u_drops: drops,\n    ...noiseTexture,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies PaperTextureUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={paperTextureFragmentShader}\n      acceptsHtmlChildren\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/water.js

@@ -142,6 +142,7 @@ const Water = memo(function WaterImpl({
       speed,
       frame,
       fragmentShader: waterFragmentShader,
+      acceptsHtmlChildren: true,
       mipmaps: ["u_image"],
       uniforms
     }

package/dist/shaders/water.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/water.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  waterFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type WaterUniforms,\n  type WaterParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WaterProps extends ShaderComponentProps, WaterParams {\n  /** @deprecated use `size` instead */\n  effectScale?: number;\n}\n\ntype WaterPreset = ImageShaderPreset<WaterParams>;\n\nexport const defaultPreset: WaterPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.8,\n    speed: 1,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0.07,\n    layering: 0.5,\n    edges: 0.8,\n    waves: 0.3,\n    caustic: 0.1,\n    size: 1,\n  },\n};\n\nexport const abstractPreset: WaterPreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 3,\n    speed: 1,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0,\n    layering: 0,\n    edges: 1,\n    waves: 1,\n    caustic: 0.4,\n    size: 0.15,\n  },\n};\n\nexport const streamingPreset: WaterPreset = {\n  name: 'Streaming',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    scale: 0.4,\n    speed: 2,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0,\n    layering: 0,\n    edges: 0,\n    waves: 0.5,\n    caustic: 0,\n    size: 0.5,\n  },\n};\n\nexport const slowMoPreset: WaterPreset = {\n  name: 'Slow-mo',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 1,\n    speed: 0.1,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0.4,\n    layering: 0,\n    edges: 0,\n    waves: 0,\n    caustic: 0.2,\n    size: 0.7,\n  },\n};\n\nexport const waterPresets: WaterPreset[] = [defaultPreset, slowMoPreset, abstractPreset, streamingPreset];\n\nexport const Water: React.FC<WaterProps> = memo(function WaterImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  highlights = defaultPreset.params.highlights,\n  layering = defaultPreset.params.layering,\n  waves = defaultPreset.params.waves,\n  edges = defaultPreset.params.edges,\n  caustic = defaultPreset.params.caustic,\n\n  // `effectScale` was deprecated in favor of `size`\n  // (it was a reverse value by mistake, so we took the opportunity to rename the param too)\n  effectScale,\n  size = effectScale === undefined ? defaultPreset.params.size : 10 / 9 / effectScale - 1 / 9,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: WaterProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_highlights: highlights,\n    u_layering: layering,\n    u_waves: waves,\n    u_edges: edges,\n    u_caustic: caustic,\n    u_size: size,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies WaterUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={waterFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  waterFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type WaterUniforms,\n  type WaterParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WaterProps extends ShaderComponentProps, WaterParams {\n  /** @deprecated use `size` instead */\n  effectScale?: number;\n}\n\ntype WaterPreset = ImageShaderPreset<WaterParams>;\n\nexport const defaultPreset: WaterPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.8,\n    speed: 1,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0.07,\n    layering: 0.5,\n    edges: 0.8,\n    waves: 0.3,\n    caustic: 0.1,\n    size: 1,\n  },\n};\n\nexport const abstractPreset: WaterPreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 3,\n    speed: 1,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0,\n    layering: 0,\n    edges: 1,\n    waves: 1,\n    caustic: 0.4,\n    size: 0.15,\n  },\n};\n\nexport const streamingPreset: WaterPreset = {\n  name: 'Streaming',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'contain',\n    scale: 0.4,\n    speed: 2,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0,\n    layering: 0,\n    edges: 0,\n    waves: 0.5,\n    caustic: 0,\n    size: 0.5,\n  },\n};\n\nexport const slowMoPreset: WaterPreset = {\n  name: 'Slow-mo',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 1,\n    speed: 0.1,\n    frame: 0,\n    colorBack: '#909090',\n    colorHighlight: '#ffffff',\n    highlights: 0.4,\n    layering: 0,\n    edges: 0,\n    waves: 0,\n    caustic: 0.2,\n    size: 0.7,\n  },\n};\n\nexport const waterPresets: WaterPreset[] = [defaultPreset, slowMoPreset, abstractPreset, streamingPreset];\n\nexport const Water: React.FC<WaterProps> = memo(function WaterImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorHighlight = defaultPreset.params.colorHighlight,\n  image = '',\n  highlights = defaultPreset.params.highlights,\n  layering = defaultPreset.params.layering,\n  waves = defaultPreset.params.waves,\n  edges = defaultPreset.params.edges,\n  caustic = defaultPreset.params.caustic,\n\n  // `effectScale` was deprecated in favor of `size`\n  // (it was a reverse value by mistake, so we took the opportunity to rename the param too)\n  effectScale,\n  size = effectScale === undefined ? defaultPreset.params.size : 10 / 9 / effectScale - 1 / 9,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: WaterProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_highlights: highlights,\n    u_layering: layering,\n    u_waves: waves,\n    u_edges: edges,\n    u_caustic: caustic,\n    u_size: size,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies WaterUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={waterFragmentShader}\n      acceptsHtmlChildren\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.0-canary.821d62d",
+  "version": "0.0.0-canary.b448849",
   "license": "Apache-2.0",
   "type": "module",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {
-    "@paper-design/shaders": "0.0.0-canary.821d62d"
+    "@paper-design/shaders": "0.0.0-canary.b448849"
   },
   "devDependencies": {
     "@types/react": "19.1.0"