@paper-design/shaders-react 0.0.60 → 0.0.62

package/dist/shader-mount.d.ts

@@ -12,6 +12,7 @@ export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'col
     ref?: React.Ref<PaperShaderElement>;
     fragmentShader: string;
     uniforms: ShaderMountUniformsReact;
+    mipmaps?: string[];
     minPixelRatio?: number;
     maxPixelCount?: number;
     webGlContextAttributes?: WebGLContextAttributes;

package/dist/shader-mount.js

@@ -76,6 +76,7 @@ const ShaderMount = forwardRef(
     height,
     minPixelRatio,
     maxPixelCount,
+    mipmaps,
     style,
     ...divProps
   }, forwardedRef) {
@@ -95,7 +96,8 @@ const ShaderMount = forwardRef(
             speed,
             frame,
             minPixelRatio,
-            maxPixelCount
+            maxPixelCount,
+            mipmaps
           );
           setIsInitialized(true);
         }
@@ -136,7 +138,11 @@ const ShaderMount = forwardRef(
       "div",
       {
         ref: mergedRef,
-        style: width !== void 0 || height !== void 0 ? { width, height, ...style } : style,
+        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
       }
     );

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  getEmptyPixel,\n  type PaperShaderElement,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.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  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      if (!value) {\n        processedUniforms[key] = getEmptyPixel();\n        return;\n      }\n\n      // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n      if (!isValidUrl(value)) {\n        console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n        return;\n      }\n\n      const imagePromise = new Promise<void>((resolve, reject) => {\n        const img = new Image();\n        if (isExternalUrl(value)) {\n          img.crossOrigin = 'anonymous';\n        }\n        img.onload = () => {\n          processedUniforms[key] = img;\n          resolve();\n        };\n        img.onerror = () => {\n          console.error(`Could not set uniforms. Failed to load image at ${value}`);\n          reject();\n        };\n        img.src = 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      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          );\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={width !== undefined || height !== undefined ? { width, height, ...style } : style}\n        {...divProps}\n      />\n    );\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
-  "mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,EACf;AAAA,OAIK;AACP,SAAS,oBAAoB;AA0MvB;AAnKN,eAAe,gBAAgB,cAAsE;AACnG,QAAM,oBAAoB,CAAC;AAC3B,QAAM,oBAAqC,CAAC;AAE5C,QAAM,aAAa,CAAC,QAAyB;AAC3C,QAAI;AAEF,UAAI,IAAI,WAAW,GAAG,EAAG,QAAO;AAEhC,UAAI,IAAI,GAAG;AACX,aAAO;AAAA,IACT,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,QAAyB;AAC9C,QAAI;AACF,UAAI,IAAI,WAAW,GAAG,EAAG,QAAO;AAChC,YAAM,YAAY,IAAI,IAAI,KAAK,OAAO,SAAS,MAAM;AACrD,aAAO,UAAU,WAAW,OAAO,SAAS;AAAA,IAC9C,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,QAAQ,YAAY,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACrD,QAAI,OAAO,UAAU,UAAU;AAE7B,UAAI,CAAC,OAAO;AACV,0BAAkB,GAAG,IAAI,cAAc;AACvC;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,KAAK,GAAG;AACtB,gBAAQ,KAAK,YAAY,GAAG,sBAAsB,KAAK,4BAA4B;AACnF;AAAA,MACF;AAEA,YAAM,eAAe,IAAI,QAAc,CAAC,SAAS,WAAW;AAC1D,cAAM,MAAM,IAAI,MAAM;AACtB,YAAI,cAAc,KAAK,GAAG;AACxB,cAAI,cAAc;AAAA,QACpB;AACA,YAAI,SAAS,MAAM;AACjB,4BAAkB,GAAG,IAAI;AACzB,kBAAQ;AAAA,QACV;AACA,YAAI,UAAU,MAAM;AAClB,kBAAQ,MAAM,mDAAmD,KAAK,EAAE;AACxE,iBAAO;AAAA,QACT;AACA,YAAI,MAAM;AAAA,MACZ,CAAC;AACD,wBAAkB,KAAK,YAAY;AAAA,IACrC,OAAO;AACL,wBAAkB,GAAG,IAAI;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,IAAI,iBAAiB;AACnC,SAAO;AACT;AAMO,MAAM,cAA0C;AAAA,EACrD,SAAS,gBACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,UAAM,SAAS,OAA2B,IAAI;AAC9C,UAAM,iBAA6D,OAA2B,IAAI;AAClG,UAAM,4BAA4B,OAAO,sBAAsB;AAG/D,cAAU,MAAM;AACd,YAAM,aAAa,YAAY;AAC7B,cAAM,WAAW,MAAM,gBAAgB,YAAY;AAEnD,YAAI,OAAO,WAAW,CAAC,eAAe,SAAS;AAC7C,yBAAe,UAAU,IAAI;AAAA,YAC3B,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA,0BAA0B;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAEA,2BAAiB,IAAI;AAAA,QACvB;AAAA,MACF;AAEA,iBAAW;AAEX,aAAO,MAAM;AACX,uBAAe,SAAS,QAAQ;AAChC,uBAAe,UAAU;AAAA,MAC3B;AAAA,IACF,GAAG,CAAC,cAAc,CAAC;AAGnB,cAAU,MAAM;AACd,UAAI,UAAU;AAEd,YAAM,iBAAiB,YAAY;AACjC,cAAM,WAAW,MAAM,gBAAgB,YAAY;AAEnD,YAAI,CAAC,SAAS;AAGZ,yBAAe,SAAS,YAAY,QAAQ;AAAA,QAC9C;AAAA,MACF;AAEA,qBAAe;AAEf,aAAO,MAAM;AACX,kBAAU;AAAA,MACZ;AAAA,IACF,GAAG,CAAC,cAAc,aAAa,CAAC;AAGhC,cAAU,MAAM;AACd,qBAAe,SAAS,SAAS,KAAK;AAAA,IACxC,GAAG,CAAC,OAAO,aAAa,CAAC;AAGzB,cAAU,MAAM;AACd,qBAAe,SAAS,iBAAiB,aAAa;AAAA,IACxD,GAAG,CAAC,eAAe,aAAa,CAAC;AAGjC,cAAU,MAAM;AACd,qBAAe,SAAS,iBAAiB,aAAa;AAAA,IACxD,GAAG,CAAC,eAAe,aAAa,CAAC;AAGjC,cAAU,MAAM;AACd,qBAAe,SAAS,SAAS,KAAK;AAAA,IACxC,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,UAAM,YAAY,aAAa,CAAC,QAAQ,YAAY,CAAC;AACrD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,UAAU,UAAa,WAAW,SAAY,EAAE,OAAO,QAAQ,GAAG,MAAM,IAAI;AAAA,QAClF,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;",
+  "sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n  ShaderMount as ShaderMountVanilla,\n  getEmptyPixel,\n  type PaperShaderElement,\n  type ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.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      if (!value) {\n        processedUniforms[key] = getEmptyPixel();\n        return;\n      }\n\n      // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n      if (!isValidUrl(value)) {\n        console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n        return;\n      }\n\n      const imagePromise = new Promise<void>((resolve, reject) => {\n        const img = new Image();\n        if (isExternalUrl(value)) {\n          img.crossOrigin = 'anonymous';\n        }\n        img.onload = () => {\n          processedUniforms[key] = img;\n          resolve();\n        };\n        img.onerror = () => {\n          console.error(`Could not set uniforms. Failed to load image at ${value}`);\n          reject();\n        };\n        img.src = 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": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,EACf;AAAA,OAIK;AACP,SAAS,oBAAoB;AA6MvB;AArKN,eAAe,gBAAgB,cAAsE;AACnG,QAAM,oBAAoB,CAAC;AAC3B,QAAM,oBAAqC,CAAC;AAE5C,QAAM,aAAa,CAAC,QAAyB;AAC3C,QAAI;AAEF,UAAI,IAAI,WAAW,GAAG,EAAG,QAAO;AAEhC,UAAI,IAAI,GAAG;AACX,aAAO;AAAA,IACT,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,QAAyB;AAC9C,QAAI;AACF,UAAI,IAAI,WAAW,GAAG,EAAG,QAAO;AAChC,YAAM,YAAY,IAAI,IAAI,KAAK,OAAO,SAAS,MAAM;AACrD,aAAO,UAAU,WAAW,OAAO,SAAS;AAAA,IAC9C,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,QAAQ,YAAY,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACrD,QAAI,OAAO,UAAU,UAAU;AAE7B,UAAI,CAAC,OAAO;AACV,0BAAkB,GAAG,IAAI,cAAc;AACvC;AAAA,MACF;AAGA,UAAI,CAAC,WAAW,KAAK,GAAG;AACtB,gBAAQ,KAAK,YAAY,GAAG,sBAAsB,KAAK,4BAA4B;AACnF;AAAA,MACF;AAEA,YAAM,eAAe,IAAI,QAAc,CAAC,SAAS,WAAW;AAC1D,cAAM,MAAM,IAAI,MAAM;AACtB,YAAI,cAAc,KAAK,GAAG;AACxB,cAAI,cAAc;AAAA,QACpB;AACA,YAAI,SAAS,MAAM;AACjB,4BAAkB,GAAG,IAAI;AACzB,kBAAQ;AAAA,QACV;AACA,YAAI,UAAU,MAAM;AAClB,kBAAQ,MAAM,mDAAmD,KAAK,EAAE;AACxE,iBAAO;AAAA,QACT;AACA,YAAI,MAAM;AAAA,MACZ,CAAC;AACD,wBAAkB,KAAK,YAAY;AAAA,IACrC,OAAO;AACL,wBAAkB,GAAG,IAAI;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,IAAI,iBAAiB;AACnC,SAAO;AACT;AAMO,MAAM,cAA0C;AAAA,EACrD,SAAS,gBACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,UAAM,SAAS,OAA2B,IAAI;AAC9C,UAAM,iBAA6D,OAA2B,IAAI;AAClG,UAAM,4BAA4B,OAAO,sBAAsB;AAG/D,cAAU,MAAM;AACd,YAAM,aAAa,YAAY;AAC7B,cAAM,WAAW,MAAM,gBAAgB,YAAY;AAEnD,YAAI,OAAO,WAAW,CAAC,eAAe,SAAS;AAC7C,yBAAe,UAAU,IAAI;AAAA,YAC3B,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA,0BAA0B;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAEA,2BAAiB,IAAI;AAAA,QACvB;AAAA,MACF;AAEA,iBAAW;AAEX,aAAO,MAAM;AACX,uBAAe,SAAS,QAAQ;AAChC,uBAAe,UAAU;AAAA,MAC3B;AAAA,IACF,GAAG,CAAC,cAAc,CAAC;AAGnB,cAAU,MAAM;AACd,UAAI,UAAU;AAEd,YAAM,iBAAiB,YAAY;AACjC,cAAM,WAAW,MAAM,gBAAgB,YAAY;AAEnD,YAAI,CAAC,SAAS;AAGZ,yBAAe,SAAS,YAAY,QAAQ;AAAA,QAC9C;AAAA,MACF;AAEA,qBAAe;AAEf,aAAO,MAAM;AACX,kBAAU;AAAA,MACZ;AAAA,IACF,GAAG,CAAC,cAAc,aAAa,CAAC;AAGhC,cAAU,MAAM;AACd,qBAAe,SAAS,SAAS,KAAK;AAAA,IACxC,GAAG,CAAC,OAAO,aAAa,CAAC;AAGzB,cAAU,MAAM;AACd,qBAAe,SAAS,iBAAiB,aAAa;AAAA,IACxD,GAAG,CAAC,eAAe,aAAa,CAAC;AAGjC,cAAU,MAAM;AACd,qBAAe,SAAS,iBAAiB,aAAa;AAAA,IACxD,GAAG,CAAC,eAAe,aAAa,CAAC;AAGjC,cAAU,MAAM;AACd,qBAAe,SAAS,SAAS,KAAK;AAAA,IACxC,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,UAAM,YAAY,aAAa,CAAC,QAAQ,YAAY,CAAC;AACrD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OACE,UAAU,UAAa,WAAW,SAC9B;AAAA,UACE,OAAO,OAAO,UAAU,YAAY,MAAM,CAAC,KAAK,MAAM,QAAQ,CAAC,QAAQ;AAAA,UACvE,QAAQ,OAAO,WAAW,YAAY,MAAM,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS;AAAA,UAC3E,GAAG;AAAA,QACL,IACA;AAAA,QAEL,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;",
   "names": []
 }

package/dist/shaders/fluted-glass.d.ts

@@ -1,13 +1,15 @@
 import { type ShaderComponentProps } from '../shader-mount.js';
 import { type FlutedGlassParams, type ImageShaderPreset } from '@paper-design/shaders';
 export interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {
+    /** @deprecated use `stretch` instead */
+    edges?: number;
     /** @deprecated use `size` instead */
     count?: number;
 }
 type FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;
 export declare const defaultPreset: FlutedGlassPreset;
 export declare const wavesPreset: FlutedGlassPreset;
-export declare const irregularPreset: FlutedGlassPreset;
+export declare const abstractPreset: FlutedGlassPreset;
 export declare const foldsPreset: FlutedGlassPreset;
 export declare const flutedGlassPresets: FlutedGlassPreset[];
 export declare const FlutedGlass: React.FC<FlutedGlassProps>;

package/dist/shaders/fluted-glass.js

@@ -10,7 +10,8 @@ import {
   ShaderFitOptions,
   defaultObjectSizing,
   GlassDistortionShapes,
-  GlassGridShapes
+  GlassGridShapes,
+  getShaderColorFromString
 } from "@paper-design/shaders";
 import { jsx } from "react/jsx-runtime";
 const defaultPreset = {
@@ -18,21 +19,29 @@ const defaultPreset = {
   params: {
     ...defaultObjectSizing,
     fit: "cover",
+    scale: 1.1,
     speed: 0,
     frame: 0,
-    size: 0.15,
+    colorBack: "#00000000",
+    colorShadow: "#000000",
+    colorHighlight: "#ffffff",
+    shadows: 0.25,
+    size: 0.5,
     angle: 0,
-    distortionShape: "lens",
+    distortionShape: "prism",
+    highlights: 0.1,
     shape: "lines",
     distortion: 0.5,
     shift: 0,
-    blur: 3,
-    edges: 0,
+    blur: 0,
+    stretch: 0,
     margin: 0,
     marginLeft: 0,
     marginRight: 0,
     marginTop: 0,
-    marginBottom: 0
+    marginBottom: 0,
+    grainMixer: 0,
+    grainOverlay: 0
   }
 };
 const wavesPreset = {
@@ -40,44 +49,59 @@ const wavesPreset = {
   params: {
     ...defaultObjectSizing,
     fit: "cover",
+    scale: 1.2,
     speed: 0,
     frame: 0,
-    size: 0.3,
+    colorBack: "#00000000",
+    colorShadow: "#000000",
+    colorHighlight: "#ffffff",
+    shadows: 0,
+    size: 0.9,
     angle: 0,
     distortionShape: "contour",
+    highlights: 0,
     shape: "wave",
-    distortion: 0.3,
+    distortion: 0.5,
     shift: 0,
-    blur: 0,
-    edges: 0,
+    blur: 0.1,
+    stretch: 1,
     margin: 0,
     marginLeft: 0,
     marginRight: 0,
     marginTop: 0,
-    marginBottom: 0
+    marginBottom: 0,
+    grainMixer: 0,
+    grainOverlay: 0.05
   }
 };
-const irregularPreset = {
-  name: "Irregular lines",
+const abstractPreset = {
+  name: "Abstract",
   params: {
     ...defaultObjectSizing,
     fit: "cover",
     scale: 4,
     speed: 0,
     frame: 0,
-    size: 0.3,
-    angle: 150,
-    distortionShape: "facete",
+    colorBack: "#00000000",
+    colorShadow: "#000000",
+    colorHighlight: "#ffffff",
+    shadows: 0,
+    size: 0.7,
+    angle: 30,
+    distortionShape: "flat",
+    highlights: 0,
     shape: "linesIrregular",
     distortion: 1,
     shift: 0,
-    blur: 25,
-    edges: 1,
+    blur: 1,
+    stretch: 1,
     margin: 0,
     marginLeft: 0,
     marginRight: 0,
     marginTop: 0,
-    marginBottom: 0
+    marginBottom: 0,
+    grainMixer: 0.1,
+    grainOverlay: 0.1
   }
 };
 const foldsPreset = {
@@ -87,30 +111,42 @@ const foldsPreset = {
     fit: "cover",
     speed: 0,
     frame: 0,
-    size: 0.25,
+    colorBack: "#00000000",
+    colorShadow: "#000000",
+    colorHighlight: "#ffffff",
+    shadows: 0.4,
+    size: 0.4,
     angle: 0,
     distortionShape: "cascade",
+    highlights: 0,
     shape: "lines",
     distortion: 0.75,
     shift: 0,
-    blur: 0,
-    edges: 0,
+    blur: 0.25,
+    stretch: 0,
     margin: 0.2,
     marginLeft: 0.2,
     marginRight: 0.2,
     marginTop: 0.2,
-    marginBottom: 0.2
+    marginBottom: 0.2,
+    grainMixer: 0,
+    grainOverlay: 0
   }
 };
-const flutedGlassPresets = [defaultPreset, irregularPreset, wavesPreset, foldsPreset];
+const flutedGlassPresets = [defaultPreset, abstractPreset, wavesPreset, foldsPreset];
 const FlutedGlass = memo(function FlutedGlassImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
+  colorShadow = defaultPreset.params.colorShadow,
+  colorHighlight = defaultPreset.params.colorHighlight,
   image = "",
+  shadows = defaultPreset.params.shadows,
   angle = defaultPreset.params.angle,
   distortion = defaultPreset.params.distortion,
   distortionShape = defaultPreset.params.distortionShape,
+  highlights = defaultPreset.params.highlights,
   shape = defaultPreset.params.shape,
   shift = defaultPreset.params.shift,
   blur = defaultPreset.params.blur,
@@ -119,7 +155,11 @@ const FlutedGlass = memo(function FlutedGlassImpl({
   marginRight = margin ?? defaultPreset.params.marginRight,
   marginTop = margin ?? defaultPreset.params.marginTop,
   marginBottom = margin ?? defaultPreset.params.marginBottom,
-  edges = defaultPreset.params.edges,
+  grainMixer = defaultPreset.params.grainMixer,
+  grainOverlay = defaultPreset.params.grainOverlay,
+  // `edges` were renamed to `stretch`
+  edges,
+  stretch = edges === void 0 ? defaultPreset.params.stretch : edges,
   // integer `count` was deprecated in favor of the normalized `size` param
   count,
   size = count === void 0 ? defaultPreset.params.size : Math.pow(1 / (count * 1.6), 1 / 6) / 0.7 - 0.5,
@@ -138,18 +178,25 @@ const FlutedGlass = memo(function FlutedGlassImpl({
   const uniforms = {
     // Own uniforms
     u_image: image,
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorShadow: getShaderColorFromString(colorShadow),
+    u_colorHighlight: getShaderColorFromString(colorHighlight),
+    u_shadows: shadows,
     u_size: size,
     u_angle: angle,
     u_distortion: distortion,
     u_shift: shift,
     u_blur: blur,
-    u_edges: edges,
+    u_stretch: stretch,
     u_distortionShape: GlassDistortionShapes[distortionShape],
+    u_highlights: highlights,
     u_shape: GlassGridShapes[shape],
     u_marginLeft: marginLeft,
     u_marginRight: marginRight,
     u_marginTop: marginTop,
     u_marginBottom: marginBottom,
+    u_grainMixer: grainMixer,
+    u_grainOverlay: grainOverlay,
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
     u_scale: scale,
@@ -168,16 +215,17 @@ const FlutedGlass = memo(function FlutedGlassImpl({
       speed,
       frame,
       fragmentShader: flutedGlassFragmentShader,
+      mipmaps: ["u_image"],
       uniforms
     }
   );
 });
 export {
   FlutedGlass,
+  abstractPreset,
   defaultPreset,
   flutedGlassPresets,
   foldsPreset,
-  irregularPreset,
   wavesPreset
 };
 //# sourceMappingURL=fluted-glass.js.map

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} 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    size: 0.15,\n    angle: 0,\n    distortionShape: 'lens',\n    shape: 'lines',\n    distortion: 0.5,\n    shift: 0,\n    blur: 3,\n    edges: 0,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n  },\n};\n\nexport const wavesPreset: FlutedGlassPreset = {\n  name: 'Waves',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    size: 0.3,\n    angle: 0,\n    distortionShape: 'contour',\n    shape: 'wave',\n    distortion: 0.3,\n    shift: 0,\n    blur: 0,\n    edges: 0,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n  },\n};\n\nexport const irregularPreset: FlutedGlassPreset = {\n  name: 'Irregular lines',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 4,\n    speed: 0,\n    frame: 0,\n    size: 0.3,\n    angle: 150,\n    distortionShape: 'facete',\n    shape: 'linesIrregular',\n    distortion: 1,\n    shift: 0,\n    blur: 25,\n    edges: 1,\n    margin: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    marginTop: 0,\n    marginBottom: 0,\n  },\n};\n\nexport const foldsPreset: FlutedGlassPreset = {\n  name: 'Folds',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    size: 0.25,\n    angle: 0,\n    distortionShape: 'cascade',\n    shape: 'lines',\n    distortion: 0.75,\n    shift: 0,\n    blur: 0,\n    edges: 0,\n    margin: 0.2,\n    marginLeft: 0.2,\n    marginRight: 0.2,\n    marginTop: 0.2,\n    marginBottom: 0.2,\n  },\n};\n\nexport const flutedGlassPresets: FlutedGlassPreset[] = [defaultPreset, irregularPreset, 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  image = '',\n  angle = defaultPreset.params.angle,\n  distortion = defaultPreset.params.distortion,\n  distortionShape = defaultPreset.params.distortionShape,\n  shape = defaultPreset.params.shape,\n  shift = defaultPreset.params.shift,\n  blur = defaultPreset.params.blur,\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  edges = defaultPreset.params.edges,\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_size: size,\n    u_angle: angle,\n    u_distortion: distortion,\n    u_shift: shift,\n    u_blur: blur,\n    u_edges: edges,\n    u_distortionShape: GlassDistortionShapes[distortionShape],\n    u_shape: GlassGridShapes[shape],\n    u_marginLeft: marginLeft,\n    u_marginRight: marginRight,\n    u_marginTop: marginTop,\n    u_marginBottom: marginBottom,\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      uniforms={uniforms}\n    />\n  );\n});\n"],
-  "mappings": "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",
+  "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 `stretch` instead */\n  edges?: number;\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    scale: 1.1,\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    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    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    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    stretch: 0,\n    margin: 0.2,\n    marginLeft: 0.2,\n    marginRight: 0.2,\n    marginTop: 0.2,\n    marginBottom: 0.2,\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  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\n  // `edges` were renamed to `stretch`\n  edges,\n  stretch = edges === undefined ? defaultPreset.params.stretch : edges,\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_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": "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",
   "names": []
 }

package/dist/shaders/heatmap.js

@@ -150,7 +150,17 @@ const Heatmap = memo(function HeatmapImpl({
       worldWidth
     ]
   );
-  return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: heatmapFragmentShader, uniforms });
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: heatmapFragmentShader,
+      mipmaps: ["u_image"],
+      uniforms
+    }
+  );
 }, colorPropsAreEqual);
 export {
   Heatmap,

package/dist/shaders/heatmap.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/heatmap.tsx"],
-  "sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  heatmapFragmentShader,\n  ShaderFitOptions,\n  type HeatmapUniforms,\n  type HeatmapParams,\n  defaultObjectSizing,\n  toProcessedHeatmap,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n  /**\n   * Suspends the component when the image is being processed.\n   */\n  suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.75,\n    speed: 1,\n    frame: 0,\n    contour: 0.5,\n    angle: 0,\n    noise: 0,\n    innerGlow: 0.5,\n    outerGlow: 0.5,\n    colorBack: '#000000',\n    colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n  },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n  name: 'Sepia',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.75,\n    speed: 0.5,\n    frame: 0,\n    contour: 0.5,\n    angle: 0,\n    noise: 0.75,\n    innerGlow: 0.5,\n    outerGlow: 0.5,\n    colorBack: '#000000',\n    colors: ['#997F45', '#ffffff'],\n  },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  contour = defaultPreset.params.contour,\n  angle = defaultPreset.params.angle,\n  noise = defaultPreset.params.noise,\n  innerGlow = defaultPreset.params.innerGlow,\n  outerGlow = defaultPreset.params.outerGlow,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  suspendWhenProcessingImage = false,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\n  worldHeight = defaultPreset.params.worldHeight,\n  worldWidth = defaultPreset.params.worldWidth,\n  ...props\n}: HeatmapProps) {\n  const imageUrl = typeof image === 'string' ? image : image.src;\n  const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n  let processedImage: string;\n\n  // toProcessedHeatmap expects the document object to exist. This prevents SSR issues during builds.\n  if (suspendWhenProcessingImage && typeof window !== 'undefined') {\n    processedImage = suspend(\n      (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n      [imageUrl, 'heatmap']\n    );\n  } else {\n    processedImage = processedStateImage;\n  }\n\n  useLayoutEffect(() => {\n    if (suspendWhenProcessingImage) {\n      // Skip doing work in the effect as it's been handled by suspense.\n      return;\n    }\n\n    if (!imageUrl) {\n      setProcessedStateImage(transparentPixel);\n      return;\n    }\n\n    let url: string;\n    let current = true;\n\n    toProcessedHeatmap(imageUrl).then((result) => {\n      if (current) {\n        url = URL.createObjectURL(result.blob);\n        setProcessedStateImage(url);\n      }\n    });\n\n    return () => {\n      current = false;\n    };\n  }, [imageUrl, suspendWhenProcessingImage]);\n\n  const uniforms = useMemo(\n    () => ({\n      // Own uniforms\n      u_image: processedImage,\n      u_contour: contour,\n      u_angle: angle,\n      u_noise: noise,\n      u_innerGlow: innerGlow,\n      u_outerGlow: outerGlow,\n      u_colorBack: getShaderColorFromString(colorBack),\n      u_colors: colors.map(getShaderColorFromString),\n      u_colorsCount: colors.length,\n\n      // Sizing uniforms\n      u_fit: ShaderFitOptions[fit],\n      u_offsetX: offsetX,\n      u_offsetY: offsetY,\n      u_originX: originX,\n      u_originY: originY,\n      u_rotation: rotation,\n      u_scale: scale,\n      u_worldHeight: worldHeight,\n      u_worldWidth: worldWidth,\n    }),\n    [\n      speed,\n      frame,\n      contour,\n      angle,\n      noise,\n      innerGlow,\n      outerGlow,\n      colors,\n      colorBack,\n      processedImage,\n      fit,\n      offsetX,\n      offsetY,\n      originX,\n      originY,\n      rotation,\n      scale,\n      worldHeight,\n      worldWidth,\n    ]\n  ) satisfies HeatmapUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={heatmapFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  heatmapFragmentShader,\n  ShaderFitOptions,\n  type HeatmapUniforms,\n  type HeatmapParams,\n  defaultObjectSizing,\n  toProcessedHeatmap,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n  /**\n   * Suspends the component when the image is being processed.\n   */\n  suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.75,\n    speed: 1,\n    frame: 0,\n    contour: 0.5,\n    angle: 0,\n    noise: 0,\n    innerGlow: 0.5,\n    outerGlow: 0.5,\n    colorBack: '#000000',\n    colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n  },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n  name: 'Sepia',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.75,\n    speed: 0.5,\n    frame: 0,\n    contour: 0.5,\n    angle: 0,\n    noise: 0.75,\n    innerGlow: 0.5,\n    outerGlow: 0.5,\n    colorBack: '#000000',\n    colors: ['#997F45', '#ffffff'],\n  },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  contour = defaultPreset.params.contour,\n  angle = defaultPreset.params.angle,\n  noise = defaultPreset.params.noise,\n  innerGlow = defaultPreset.params.innerGlow,\n  outerGlow = defaultPreset.params.outerGlow,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  suspendWhenProcessingImage = false,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\n  worldHeight = defaultPreset.params.worldHeight,\n  worldWidth = defaultPreset.params.worldWidth,\n  ...props\n}: HeatmapProps) {\n  const imageUrl = typeof image === 'string' ? image : image.src;\n  const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n  let processedImage: string;\n\n  // toProcessedHeatmap expects the document object to exist. This prevents SSR issues during builds.\n  if (suspendWhenProcessingImage && typeof window !== 'undefined') {\n    processedImage = suspend(\n      (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n      [imageUrl, 'heatmap']\n    );\n  } else {\n    processedImage = processedStateImage;\n  }\n\n  useLayoutEffect(() => {\n    if (suspendWhenProcessingImage) {\n      // Skip doing work in the effect as it's been handled by suspense.\n      return;\n    }\n\n    if (!imageUrl) {\n      setProcessedStateImage(transparentPixel);\n      return;\n    }\n\n    let url: string;\n    let current = true;\n\n    toProcessedHeatmap(imageUrl).then((result) => {\n      if (current) {\n        url = URL.createObjectURL(result.blob);\n        setProcessedStateImage(url);\n      }\n    });\n\n    return () => {\n      current = false;\n    };\n  }, [imageUrl, suspendWhenProcessingImage]);\n\n  const uniforms = useMemo(\n    () => ({\n      // Own uniforms\n      u_image: processedImage,\n      u_contour: contour,\n      u_angle: angle,\n      u_noise: noise,\n      u_innerGlow: innerGlow,\n      u_outerGlow: outerGlow,\n      u_colorBack: getShaderColorFromString(colorBack),\n      u_colors: colors.map(getShaderColorFromString),\n      u_colorsCount: colors.length,\n\n      // Sizing uniforms\n      u_fit: ShaderFitOptions[fit],\n      u_offsetX: offsetX,\n      u_offsetY: offsetY,\n      u_originX: originX,\n      u_originY: originY,\n      u_rotation: rotation,\n      u_scale: scale,\n      u_worldHeight: worldHeight,\n      u_worldWidth: worldWidth,\n    }),\n    [\n      speed,\n      frame,\n      contour,\n      angle,\n      noise,\n      innerGlow,\n      outerGlow,\n      colors,\n      colorBack,\n      processedImage,\n      fit,\n      offsetX,\n      offsetY,\n      originX,\n      originY,\n      rotation,\n      scale,\n      worldHeight,\n      worldWidth,\n    ]\n  ) satisfies HeatmapUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={heatmapFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/liquid-metal.js

@@ -186,6 +186,7 @@ const LiquidMetal = memo(function LiquidMetalImpl({
       speed,
       frame,
       fragmentShader: liquidMetalFragmentShader,
+      mipmaps: ["u_image"],
       uniforms
     }
   );

package/dist/shaders/liquid-metal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/liquid-metal.tsx"],
-  "sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  liquidMetalFragmentShader,\n  ShaderFitOptions,\n  defaultObjectSizing,\n  type LiquidMetalUniforms,\n  type LiquidMetalParams,\n  toProcessedLiquidMetal,\n  type ImageShaderPreset,\n  getShaderColorFromString,\n  LiquidMetalShapes,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {\n  /**\n   * Suspends the component when the image is being processed.\n   */\n  suspendWhenProcessingImage?: boolean;\n}\n\ntype LiquidMetalPreset = ImageShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#AAAAAC',\n    colorTint: '#ffffff',\n    distortion: 0.07,\n    repetition: 2.0,\n    shiftRed: 0.3,\n    shiftBlue: 0.3,\n    contour: 0.4,\n    softness: 0.1,\n    angle: 70,\n    shape: 'diamond',\n  },\n};\n\nexport const noirPreset: LiquidMetalPreset = {\n  name: 'Noir',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorTint: '#606060',\n    softness: 0.45,\n    repetition: 1.5,\n    shiftRed: 0,\n    shiftBlue: 0,\n    distortion: 0,\n    contour: 0,\n    angle: 90,\n    shape: 'diamond',\n  },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n  name: 'Backdrop',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    scale: 1.5,\n    colorBack: '#AAAAAC',\n    colorTint: '#ffffff',\n    softness: 0.05,\n    repetition: 1.5,\n    shiftRed: 0.3,\n    shiftBlue: 0.3,\n    distortion: 0.1,\n    contour: 0.4,\n    shape: 'none',\n    angle: 90,\n    worldWidth: 0,\n    worldHeight: 0,\n  },\n};\n\nexport const stripesPreset: LiquidMetalPreset = {\n  name: 'Stripes',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    scale: 0.6,\n    colorBack: '#000000',\n    colorTint: '#2c5d72',\n    softness: 0.8,\n    repetition: 6,\n    shiftRed: 1,\n    shiftBlue: -1,\n    distortion: 0.4,\n    contour: 0.4,\n    shape: 'circle',\n    angle: 0,\n  },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, noirPreset, fullScreenPreset, stripesPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorTint = defaultPreset.params.colorTint,\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  contour = defaultPreset.params.contour,\n  distortion = defaultPreset.params.distortion,\n  softness = defaultPreset.params.softness,\n  repetition = defaultPreset.params.repetition,\n  shiftRed = defaultPreset.params.shiftRed,\n  shiftBlue = defaultPreset.params.shiftBlue,\n  angle = defaultPreset.params.angle,\n  shape = defaultPreset.params.shape,\n  suspendWhenProcessingImage = false,\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}: LiquidMetalProps) {\n  const imageUrl = typeof image === 'string' ? image : image.src;\n  const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n  let processedImage: string;\n\n  if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {\n    processedImage = suspend(\n      (): Promise<string> => toProcessedLiquidMetal(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),\n      [imageUrl, 'liquid-metal']\n    );\n  } else {\n    processedImage = processedStateImage;\n  }\n\n  useLayoutEffect(() => {\n    if (suspendWhenProcessingImage) {\n      // Skip doing work in the effect as it's been handled by suspense.\n      return;\n    }\n\n    if (!imageUrl) {\n      setProcessedStateImage(transparentPixel);\n      return;\n    }\n\n    let url: string;\n    let current = true;\n\n    toProcessedLiquidMetal(imageUrl).then((result) => {\n      if (current) {\n        url = URL.createObjectURL(result.pngBlob);\n        setProcessedStateImage(url);\n      }\n    });\n\n    return () => {\n      current = false;\n    };\n  }, [imageUrl, suspendWhenProcessingImage]);\n\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorTint: getShaderColorFromString(colorTint),\n\n    u_image: processedImage,\n    u_contour: contour,\n    u_distortion: distortion,\n    u_softness: softness,\n    u_repetition: repetition,\n    u_shiftRed: shiftRed,\n    u_shiftBlue: shiftBlue,\n    u_angle: angle,\n    u_isImage: Boolean(image),\n    u_shape: LiquidMetalShapes[shape],\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 LiquidMetalUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={liquidMetalFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  liquidMetalFragmentShader,\n  ShaderFitOptions,\n  defaultObjectSizing,\n  type LiquidMetalUniforms,\n  type LiquidMetalParams,\n  toProcessedLiquidMetal,\n  type ImageShaderPreset,\n  getShaderColorFromString,\n  LiquidMetalShapes,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {\n  /**\n   * Suspends the component when the image is being processed.\n   */\n  suspendWhenProcessingImage?: boolean;\n}\n\ntype LiquidMetalPreset = ImageShaderPreset<LiquidMetalParams>;\n\nexport const defaultPreset: LiquidMetalPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#AAAAAC',\n    colorTint: '#ffffff',\n    distortion: 0.07,\n    repetition: 2.0,\n    shiftRed: 0.3,\n    shiftBlue: 0.3,\n    contour: 0.4,\n    softness: 0.1,\n    angle: 70,\n    shape: 'diamond',\n  },\n};\n\nexport const noirPreset: LiquidMetalPreset = {\n  name: 'Noir',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorTint: '#606060',\n    softness: 0.45,\n    repetition: 1.5,\n    shiftRed: 0,\n    shiftBlue: 0,\n    distortion: 0,\n    contour: 0,\n    angle: 90,\n    shape: 'diamond',\n  },\n};\n\nexport const fullScreenPreset: LiquidMetalPreset = {\n  name: 'Backdrop',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    scale: 1.5,\n    colorBack: '#AAAAAC',\n    colorTint: '#ffffff',\n    softness: 0.05,\n    repetition: 1.5,\n    shiftRed: 0.3,\n    shiftBlue: 0.3,\n    distortion: 0.1,\n    contour: 0.4,\n    shape: 'none',\n    angle: 90,\n    worldWidth: 0,\n    worldHeight: 0,\n  },\n};\n\nexport const stripesPreset: LiquidMetalPreset = {\n  name: 'Stripes',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    scale: 0.6,\n    colorBack: '#000000',\n    colorTint: '#2c5d72',\n    softness: 0.8,\n    repetition: 6,\n    shiftRed: 1,\n    shiftBlue: -1,\n    distortion: 0.4,\n    contour: 0.4,\n    shape: 'circle',\n    angle: 0,\n  },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset, noirPreset, fullScreenPreset, stripesPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorTint = defaultPreset.params.colorTint,\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  image = '',\n  contour = defaultPreset.params.contour,\n  distortion = defaultPreset.params.distortion,\n  softness = defaultPreset.params.softness,\n  repetition = defaultPreset.params.repetition,\n  shiftRed = defaultPreset.params.shiftRed,\n  shiftBlue = defaultPreset.params.shiftBlue,\n  angle = defaultPreset.params.angle,\n  shape = defaultPreset.params.shape,\n  suspendWhenProcessingImage = false,\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}: LiquidMetalProps) {\n  const imageUrl = typeof image === 'string' ? image : image.src;\n  const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n  let processedImage: string;\n\n  if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {\n    processedImage = suspend(\n      (): Promise<string> => toProcessedLiquidMetal(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),\n      [imageUrl, 'liquid-metal']\n    );\n  } else {\n    processedImage = processedStateImage;\n  }\n\n  useLayoutEffect(() => {\n    if (suspendWhenProcessingImage) {\n      // Skip doing work in the effect as it's been handled by suspense.\n      return;\n    }\n\n    if (!imageUrl) {\n      setProcessedStateImage(transparentPixel);\n      return;\n    }\n\n    let url: string;\n    let current = true;\n\n    toProcessedLiquidMetal(imageUrl).then((result) => {\n      if (current) {\n        url = URL.createObjectURL(result.pngBlob);\n        setProcessedStateImage(url);\n      }\n    });\n\n    return () => {\n      current = false;\n    };\n  }, [imageUrl, suspendWhenProcessingImage]);\n\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorTint: getShaderColorFromString(colorTint),\n\n    u_image: processedImage,\n    u_contour: contour,\n    u_distortion: distortion,\n    u_softness: softness,\n    u_repetition: repetition,\n    u_shiftRed: shiftRed,\n    u_shiftBlue: shiftBlue,\n    u_angle: angle,\n    u_isImage: Boolean(image),\n    u_shape: LiquidMetalShapes[shape],\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 LiquidMetalUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={liquidMetalFragmentShader}\n      mipmaps={['u_image']}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/paper-texture.js

@@ -183,6 +183,7 @@ const PaperTexture = memo(function PaperTextureImpl({
       speed,
       frame,
       fragmentShader: paperTextureFragmentShader,
+      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 `crumpleSize` instead */\n  crumplesScale?: number;\n  /** @deprecated use `foldCount` instead */\n  foldsNumber?: number;\n  /** @deprecated use `fade` instead */\n  blur?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 0.6,\n    speed: 0,\n    frame: 0,\n    colorFront: '#9fadbc',\n    colorBack: '#ffffff',\n    contrast: 0.3,\n    roughness: 0.4,\n    fiber: 0.3,\n    fiberSize: 0.2,\n    crumples: 0.3,\n    crumpleSize: 0.35,\n    folds: 0.65,\n    foldCount: 5,\n    fade: 0,\n    drops: 0.2,\n    seed: 5.8,\n  },\n};\n\nexport const abstractPreset: PaperTexturePreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    scale: 0.6,\n    colorFront: '#00eeff',\n    colorBack: '#ff0a81',\n    contrast: 0.85,\n    roughness: 0,\n    fiber: 0.1,\n    fiberSize: 0.2,\n    crumples: 0,\n    crumpleSize: 0.3,\n    folds: 1,\n    foldCount: 3,\n    fade: 0,\n    drops: 0.2,\n    seed: 2.2,\n  },\n};\n\nexport const cardboardPreset: PaperTexturePreset = {\n  name: 'Cardboard',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    scale: 0.6,\n    colorFront: '#c7b89e',\n    colorBack: '#999180',\n    contrast: 0.4,\n    roughness: 0,\n    fiber: 0.35,\n    fiberSize: 0.14,\n    crumples: 0.7,\n    crumpleSize: 0.1,\n    folds: 0,\n    foldCount: 1,\n    fade: 0,\n    drops: 0.1,\n    seed: 1.6,\n  },\n};\n\nexport const detailsPreset: PaperTexturePreset = {\n  name: 'Details',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    fit: 'cover',\n    scale: 3,\n    colorFront: '#00000000',\n    colorBack: '#00000000',\n    contrast: 0,\n    roughness: 1,\n    fiber: 0.27,\n    fiberSize: 0.22,\n    crumples: 1,\n    crumpleSize: 0.5,\n    folds: 1,\n    foldCount: 15,\n    fade: 0,\n    drops: 0,\n    seed: 6,\n  },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n  defaultPreset,\n  cardboardPreset,\n  abstractPreset,\n  detailsPreset,\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  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  image = '',\n  contrast = defaultPreset.params.contrast,\n  roughness = defaultPreset.params.roughness,\n  fiber = defaultPreset.params.fiber,\n  crumples = defaultPreset.params.crumples,\n  folds = defaultPreset.params.folds,\n  drops = defaultPreset.params.drops,\n  seed = defaultPreset.params.seed,\n\n  // Reworked props\n  fiberScale,\n  fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n  crumplesScale,\n  crumpleSize = crumplesScale === undefined ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,\n  blur,\n  fade = blur === undefined ? defaultPreset.params.fade : blur,\n  foldsNumber,\n  foldCount = foldsNumber === undefined ? defaultPreset.params.foldCount : 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_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_contrast: contrast,\n    u_roughness: roughness,\n    u_fiber: fiber,\n    u_fiberSize: fiberSize,\n    u_crumples: crumples,\n    u_crumpleSize: crumpleSize,\n    u_foldCount: foldCount,\n    u_folds: folds,\n    u_fade: fade,\n    u_drops: drops,\n    u_seed: seed,\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      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,EACA;AAAA,EACA;AAAA,OAIK;AA4LH;AA7KG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,iBAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,kBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,sBAA4C;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,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,WAAW,cAAc,OAAO;AAAA,EAChC,YAAY,cAAc,OAAO;AAAA,EACjC,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA;AAAA,EAG5B;AAAA,EACA,YAAY,eAAe,SAAY,cAAc,OAAO,YAAY,MAAM;AAAA,EAC9E;AAAA,EACA,cAAc,kBAAkB,SAAY,cAAc,OAAO,cAAc,MAAM;AAAA,EACrF;AAAA,EACA,OAAO,SAAS,SAAY,cAAc,OAAO,OAAO;AAAA,EACxD;AAAA,EACA,YAAY,gBAAgB,SAAY,cAAc,OAAO,YAAY;AAAA;AAAA,EAGzE,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,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,EAAE;AAEhG,QAAM,WAAW;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,cAAc,yBAAyB,UAAU;AAAA,IACjD,aAAa,yBAAyB,SAAS;AAAA,IAC/C,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA;AAAA,IAGH,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;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
+  "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 `crumpleSize` instead */\n  crumplesScale?: number;\n  /** @deprecated use `foldCount` instead */\n  foldsNumber?: number;\n  /** @deprecated use `fade` instead */\n  blur?: number;\n}\n\ntype PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;\n\nexport const defaultPreset: PaperTexturePreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    scale: 0.6,\n    speed: 0,\n    frame: 0,\n    colorFront: '#9fadbc',\n    colorBack: '#ffffff',\n    contrast: 0.3,\n    roughness: 0.4,\n    fiber: 0.3,\n    fiberSize: 0.2,\n    crumples: 0.3,\n    crumpleSize: 0.35,\n    folds: 0.65,\n    foldCount: 5,\n    fade: 0,\n    drops: 0.2,\n    seed: 5.8,\n  },\n};\n\nexport const abstractPreset: PaperTexturePreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    scale: 0.6,\n    colorFront: '#00eeff',\n    colorBack: '#ff0a81',\n    contrast: 0.85,\n    roughness: 0,\n    fiber: 0.1,\n    fiberSize: 0.2,\n    crumples: 0,\n    crumpleSize: 0.3,\n    folds: 1,\n    foldCount: 3,\n    fade: 0,\n    drops: 0.2,\n    seed: 2.2,\n  },\n};\n\nexport const cardboardPreset: PaperTexturePreset = {\n  name: 'Cardboard',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    speed: 0,\n    frame: 0,\n    scale: 0.6,\n    colorFront: '#c7b89e',\n    colorBack: '#999180',\n    contrast: 0.4,\n    roughness: 0,\n    fiber: 0.35,\n    fiberSize: 0.14,\n    crumples: 0.7,\n    crumpleSize: 0.1,\n    folds: 0,\n    foldCount: 1,\n    fade: 0,\n    drops: 0.1,\n    seed: 1.6,\n  },\n};\n\nexport const detailsPreset: PaperTexturePreset = {\n  name: 'Details',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    fit: 'cover',\n    scale: 3,\n    colorFront: '#00000000',\n    colorBack: '#00000000',\n    contrast: 0,\n    roughness: 1,\n    fiber: 0.27,\n    fiberSize: 0.22,\n    crumples: 1,\n    crumpleSize: 0.5,\n    folds: 1,\n    foldCount: 15,\n    fade: 0,\n    drops: 0,\n    seed: 6,\n  },\n};\n\nexport const paperTexturePresets: PaperTexturePreset[] = [\n  defaultPreset,\n  cardboardPreset,\n  abstractPreset,\n  detailsPreset,\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  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  image = '',\n  contrast = defaultPreset.params.contrast,\n  roughness = defaultPreset.params.roughness,\n  fiber = defaultPreset.params.fiber,\n  crumples = defaultPreset.params.crumples,\n  folds = defaultPreset.params.folds,\n  drops = defaultPreset.params.drops,\n  seed = defaultPreset.params.seed,\n\n  // Reworked props\n  fiberScale,\n  fiberSize = fiberScale === undefined ? defaultPreset.params.fiberSize : 0.2 / fiberScale,\n  crumplesScale,\n  crumpleSize = crumplesScale === undefined ? defaultPreset.params.crumpleSize : 0.2 / crumplesScale,\n  blur,\n  fade = blur === undefined ? defaultPreset.params.fade : blur,\n  foldsNumber,\n  foldCount = foldsNumber === undefined ? defaultPreset.params.foldCount : 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_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_contrast: contrast,\n    u_roughness: roughness,\n    u_fiber: fiber,\n    u_fiberSize: fiberSize,\n    u_crumples: crumples,\n    u_crumpleSize: crumpleSize,\n    u_foldCount: foldCount,\n    u_folds: folds,\n    u_fade: fade,\n    u_drops: drops,\n    u_seed: seed,\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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",
   "names": []
 }

package/dist/shaders/water.js

@@ -45,7 +45,7 @@ const abstractPreset = {
     edges: 1,
     waves: 1,
     caustic: 0.4,
-    size: 4
+    size: 0.15
   }
 };
 const streamingPreset = {
@@ -63,7 +63,7 @@ const streamingPreset = {
     edges: 0,
     waves: 0.5,
     caustic: 0,
-    size: 3
+    size: 0.5
   }
 };
 const slowMoPreset = {
@@ -81,7 +81,7 @@ const slowMoPreset = {
     edges: 0,
     waves: 0,
     caustic: 0.2,
-    size: 2
+    size: 0.7
   }
 };
 const waterPresets = [defaultPreset, slowMoPreset, abstractPreset, streamingPreset];
@@ -135,7 +135,17 @@ const Water = memo(function WaterImpl({
     u_worldWidth: worldWidth,
     u_worldHeight: worldHeight
   };
-  return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: waterFragmentShader, uniforms });
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: waterFragmentShader,
+      mipmaps: ["u_image"],
+      uniforms
+    }
+  );
 }, colorPropsAreEqual);
 export {
   Water,

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: 4,\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: 3,\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: 2,\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 {...props} speed={speed} frame={frame} fragmentShader={waterFragmentShader} uniforms={uniforms} />\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      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.60",
+  "version": "0.0.62",
   "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {
-    "@paper-design/shaders": "0.0.60"
+    "@paper-design/shaders": "0.0.62"
   },
   "devDependencies": {
     "@types/react": "19.1.0"