@paper-design/shaders-react 0.0.51 → 0.0.53

package/dist/shader-mount.d.ts

@@ -15,12 +15,20 @@ export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'col
     minPixelRatio?: number;
     maxPixelCount?: number;
     webGlContextAttributes?: WebGLContextAttributes;
+    /** Inline CSS width style */
+    width?: string | number;
+    /** Inline CSS height style */
+    height?: string | number;
 }
 export interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {
     ref?: React.Ref<PaperShaderElement>;
     minPixelRatio?: number;
     maxPixelCount?: number;
     webGlContextAttributes?: WebGLContextAttributes;
+    /** Inline CSS width style */
+    width?: string | number;
+    /** Inline CSS height style */
+    height?: string | number;
 }
 /**
  * A React component that mounts a shader and updates its uniforms as the component's props change

package/dist/shader-mount.js

@@ -67,8 +67,11 @@ const ShaderMount = forwardRef(
     webGlContextAttributes,
     speed = 0,
     frame = 0,
+    width,
+    height,
     minPixelRatio,
     maxPixelCount,
+    style,
     ...divProps
   }, forwardedRef) {
     const [isInitialized, setIsInitialized] = useState(false);
@@ -123,7 +126,14 @@ const ShaderMount = forwardRef(
       shaderMountRef.current?.setFrame(frame);
     }, [frame, isInitialized]);
     const mergedRef = useMergeRefs([divRef, forwardedRef]);
-    return /* @__PURE__ */ jsx("div", { ref: mergedRef, ...divProps });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergedRef,
+        style: width !== void 0 || height !== void 0 ? { width, height, ...style } : style,
+        ...divProps
+      }
+    );
   }
 );
 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  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\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\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      // 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      minPixelRatio,\n      maxPixelCount,\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\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            webGlContextAttributes,\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, webGlContextAttributes]);\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 <div ref={mergedRef} {...divProps} />;\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  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      // 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\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            webGlContextAttributes,\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, webGlContextAttributes]);\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": "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",
   "names": []
 }

package/dist/shaders/color-panels.js

@@ -24,7 +24,7 @@ const defaultPreset = {
     angle1: 0,
     angle2: 0,
     length: 1.1,
-    edges: true,
+    edges: false,
     blur: 0,
     fadeIn: 1,
     fadeOut: 0.3,

package/dist/shaders/color-panels.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/color-panels.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  getShaderColorFromString,\n  colorPanelsFragmentShader,\n  ShaderFitOptions,\n  type ColorPanelsUniforms,\n  type ColorPanelsParams,\n  type ShaderPreset,\n  defaultObjectSizing,\n} from '@paper-design/shaders';\n\nexport interface ColorPanelsProps extends ShaderComponentProps, ColorPanelsParams {}\n\ntype ColorPanelsPreset = ShaderPreset<ColorPanelsParams>;\n\nexport const defaultPreset: ColorPanelsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#ff9d00', '#fd4f30', '#809bff', '#6d2eff', '#333aff', '#f15cff', '#ffd557'],\n    colorBack: '#000000',\n    angle1: 0,\n    angle2: 0,\n    length: 1.1,\n    edges: true,\n    blur: 0,\n    fadeIn: 1,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 3,\n    scale: 0.8,\n  },\n};\n\nexport const glassPreset: ColorPanelsPreset = {\n  name: 'Glass',\n  params: {\n    ...defaultObjectSizing,\n    rotation: 112,\n    speed: 1,\n    frame: 0,\n    colors: ['#00cfff', '#ff2d55', '#34c759', '#af52de'],\n    colorBack: '#ffffff00',\n    angle1: 0.3,\n    angle2: 0.3,\n    length: 1,\n    edges: true,\n    blur: 0.25,\n    fadeIn: 0.85,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 1.6,\n  },\n};\n\nexport const gradientPreset: ColorPanelsPreset = {\n  name: 'Gradient',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#f2ff00', '#00000000', '#00000000', '#5a0283', '#005eff'],\n    colorBack: '#8ffff2',\n    angle1: 0.4,\n    angle2: 0.4,\n    length: 3,\n    edges: false,\n    blur: 0.5,\n    fadeIn: 1.0,\n    fadeOut: 0.39,\n    gradient: 0.78,\n    density: 1.65,\n    scale: 1.72,\n    rotation: 270,\n    offsetX: 0.18,\n  },\n};\n\nexport const openingPreset: ColorPanelsPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    speed: 2.0,\n    frame: 0,\n    colors: ['#00ffff'],\n    colorBack: '#570044',\n    angle1: -1.0,\n    angle2: -1.0,\n    length: 0.52,\n    edges: false,\n    blur: 0.0,\n    fadeIn: 0.0,\n    fadeOut: 1.0,\n    gradient: 0.0,\n    density: 2.21,\n    scale: 2.32,\n    rotation: 360,\n    offsetX: -0.3,\n    offsetY: 0.6,\n  },\n};\n\nexport const colorPanelsPresets: ColorPanelsPreset[] = [defaultPreset, glassPreset, gradientPreset, openingPreset];\n\nexport const ColorPanels: React.FC<ColorPanelsProps> = memo(function ColorPanelsImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  colorBack = defaultPreset.params.colorBack,\n  angle1 = defaultPreset.params.angle1,\n  angle2 = defaultPreset.params.angle2,\n  length = defaultPreset.params.length,\n  edges = defaultPreset.params.edges,\n  blur = defaultPreset.params.blur,\n  fadeIn = defaultPreset.params.fadeIn,\n  fadeOut = defaultPreset.params.fadeOut,\n  density = defaultPreset.params.density,\n  gradient = defaultPreset.params.gradient,\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}: ColorPanelsProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_angle1: angle1,\n    u_angle2: angle2,\n    u_length: length,\n    u_edges: edges,\n    u_blur: blur,\n    u_fadeIn: fadeIn,\n    u_fadeOut: fadeOut,\n    u_density: density,\n    u_gradient: gradient,\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 ColorPanelsUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={colorPanelsFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  getShaderColorFromString,\n  colorPanelsFragmentShader,\n  ShaderFitOptions,\n  type ColorPanelsUniforms,\n  type ColorPanelsParams,\n  type ShaderPreset,\n  defaultObjectSizing,\n} from '@paper-design/shaders';\n\nexport interface ColorPanelsProps extends ShaderComponentProps, ColorPanelsParams {}\n\ntype ColorPanelsPreset = ShaderPreset<ColorPanelsParams>;\n\nexport const defaultPreset: ColorPanelsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#ff9d00', '#fd4f30', '#809bff', '#6d2eff', '#333aff', '#f15cff', '#ffd557'],\n    colorBack: '#000000',\n    angle1: 0,\n    angle2: 0,\n    length: 1.1,\n    edges: false,\n    blur: 0,\n    fadeIn: 1,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 3,\n    scale: 0.8,\n  },\n};\n\nexport const glassPreset: ColorPanelsPreset = {\n  name: 'Glass',\n  params: {\n    ...defaultObjectSizing,\n    rotation: 112,\n    speed: 1,\n    frame: 0,\n    colors: ['#00cfff', '#ff2d55', '#34c759', '#af52de'],\n    colorBack: '#ffffff00',\n    angle1: 0.3,\n    angle2: 0.3,\n    length: 1,\n    edges: true,\n    blur: 0.25,\n    fadeIn: 0.85,\n    fadeOut: 0.3,\n    gradient: 0,\n    density: 1.6,\n  },\n};\n\nexport const gradientPreset: ColorPanelsPreset = {\n  name: 'Gradient',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#f2ff00', '#00000000', '#00000000', '#5a0283', '#005eff'],\n    colorBack: '#8ffff2',\n    angle1: 0.4,\n    angle2: 0.4,\n    length: 3,\n    edges: false,\n    blur: 0.5,\n    fadeIn: 1.0,\n    fadeOut: 0.39,\n    gradient: 0.78,\n    density: 1.65,\n    scale: 1.72,\n    rotation: 270,\n    offsetX: 0.18,\n  },\n};\n\nexport const openingPreset: ColorPanelsPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    speed: 2.0,\n    frame: 0,\n    colors: ['#00ffff'],\n    colorBack: '#570044',\n    angle1: -1.0,\n    angle2: -1.0,\n    length: 0.52,\n    edges: false,\n    blur: 0.0,\n    fadeIn: 0.0,\n    fadeOut: 1.0,\n    gradient: 0.0,\n    density: 2.21,\n    scale: 2.32,\n    rotation: 360,\n    offsetX: -0.3,\n    offsetY: 0.6,\n  },\n};\n\nexport const colorPanelsPresets: ColorPanelsPreset[] = [defaultPreset, glassPreset, gradientPreset, openingPreset];\n\nexport const ColorPanels: React.FC<ColorPanelsProps> = memo(function ColorPanelsImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  colorBack = defaultPreset.params.colorBack,\n  angle1 = defaultPreset.params.angle1,\n  angle2 = defaultPreset.params.angle2,\n  length = defaultPreset.params.length,\n  edges = defaultPreset.params.edges,\n  blur = defaultPreset.params.blur,\n  fadeIn = defaultPreset.params.fadeIn,\n  fadeOut = defaultPreset.params.fadeOut,\n  density = defaultPreset.params.density,\n  gradient = defaultPreset.params.gradient,\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}: ColorPanelsProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_angle1: angle1,\n    u_angle2: angle2,\n    u_length: length,\n    u_edges: edges,\n    u_blur: blur,\n    u_fadeIn: fadeIn,\n    u_fadeOut: fadeOut,\n    u_density: density,\n    u_gradient: gradient,\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 ColorPanelsUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={colorPanelsFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
   "mappings": "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",
   "names": []
 }

package/dist/shaders/dithering.js

@@ -21,7 +21,7 @@ const defaultPreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    scale: 0.5,
+    scale: 0.6,
     colorBack: "#000000",
     colorFront: "#00b2ff",
     shape: "sphere",

package/dist/shaders/dithering.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dithering.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  ditheringFragmentShader,\n  ShaderFitOptions,\n  type DitheringUniforms,\n  type DitheringParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n  DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    scale: 0.5,\n    colorBack: '#000000',\n    colorFront: '#00b2ff',\n    shape: 'sphere',\n    type: '4x4',\n    pxSize: 2,\n  },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n  name: 'Sine Wave',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#730d54',\n    colorFront: '#00becc',\n    shape: 'wave',\n    type: '4x4',\n    pxSize: 11,\n    scale: 1.2,\n  },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n  name: 'Bugs',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#008000',\n    shape: 'dots',\n    type: 'random',\n    pxSize: 9,\n  },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#603520',\n    colorFront: '#c67953',\n    shape: 'ripple',\n    type: '2x2',\n    pxSize: 3,\n  },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#00000000',\n    colorFront: '#47a8e1',\n    shape: 'swirl',\n    type: '8x8',\n    pxSize: 2,\n  },\n} as const;\n\nexport const warpPreset: DitheringPreset = {\n  name: 'Warp',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#301c2a',\n    colorFront: '#56ae6c',\n    shape: 'warp',\n    type: '4x4',\n    pxSize: 2.5,\n  },\n} as const;\n\nexport const ditheringPresets: DitheringPreset[] = [\n  defaultPreset,\n  warpPreset,\n  sinePreset,\n  ripplePreset,\n  bugsPreset,\n  swirlPreset,\n];\n\nexport const Dithering: React.FC<DitheringProps> = memo(function DitheringImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorFront = defaultPreset.params.colorFront,\n  shape = defaultPreset.params.shape,\n  type = defaultPreset.params.type,\n  pxSize = defaultPreset.params.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}) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_shape: DitheringShapes[shape],\n    u_type: DitheringTypes[type],\n    u_pxSize: pxSize,\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 DitheringUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={ditheringFragmentShader} uniforms={uniforms} />\n  );\n});\n"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  ditheringFragmentShader,\n  ShaderFitOptions,\n  type DitheringUniforms,\n  type DitheringParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n  DitheringTypes,\n} from '@paper-design/shaders';\nimport { DitheringShapes } from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\nexport const defaultPreset: DitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    scale: 0.6,\n    colorBack: '#000000',\n    colorFront: '#00b2ff',\n    shape: 'sphere',\n    type: '4x4',\n    pxSize: 2,\n  },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n  name: 'Sine Wave',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#730d54',\n    colorFront: '#00becc',\n    shape: 'wave',\n    type: '4x4',\n    pxSize: 11,\n    scale: 1.2,\n  },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n  name: 'Bugs',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#008000',\n    shape: 'dots',\n    type: 'random',\n    pxSize: 9,\n  },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#603520',\n    colorFront: '#c67953',\n    shape: 'ripple',\n    type: '2x2',\n    pxSize: 3,\n  },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#00000000',\n    colorFront: '#47a8e1',\n    shape: 'swirl',\n    type: '8x8',\n    pxSize: 2,\n  },\n} as const;\n\nexport const warpPreset: DitheringPreset = {\n  name: 'Warp',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#301c2a',\n    colorFront: '#56ae6c',\n    shape: 'warp',\n    type: '4x4',\n    pxSize: 2.5,\n  },\n} as const;\n\nexport const ditheringPresets: DitheringPreset[] = [\n  defaultPreset,\n  warpPreset,\n  sinePreset,\n  ripplePreset,\n  bugsPreset,\n  swirlPreset,\n];\n\nexport const Dithering: React.FC<DitheringProps> = memo(function DitheringImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorFront = defaultPreset.params.colorFront,\n  shape = defaultPreset.params.shape,\n  type = defaultPreset.params.type,\n  pxSize = defaultPreset.params.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}) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_shape: DitheringShapes[shape],\n    u_type: DitheringTypes[type],\n    u_pxSize: pxSize,\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 DitheringUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={ditheringFragmentShader} uniforms={uniforms} />\n  );\n});\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import { type ShaderComponentProps } from '../shader-mount.js';
-import { type FlutedGlassParams, type ShaderPreset } from '@paper-design/shaders';
+import { type FlutedGlassParams, type ImageShaderPreset } from '@paper-design/shaders';
 export interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {
 }
-type FlutedGlassPreset = ShaderPreset<FlutedGlassParams>;
+type FlutedGlassPreset = ImageShaderPreset<FlutedGlassParams>;
 export declare const defaultPreset: FlutedGlassPreset;
 export declare const wavesPreset: FlutedGlassPreset;
 export declare const irregularPreset: FlutedGlassPreset;

package/dist/shaders/fluted-glass.js

@@ -18,10 +18,8 @@ const defaultPreset = {
   params: {
     ...defaultObjectSizing,
     fit: "cover",
-    // scale: 0.95,
     speed: 0,
     frame: 0,
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     count: 80,
     angle: 0,
     distortionShape: "lens",
@@ -43,10 +41,9 @@ const wavesPreset = {
     fit: "cover",
     speed: 0,
     frame: 0,
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     count: 20,
     angle: 0,
-    distortionShape: "\u0441ontour",
+    distortionShape: "contour",
     shape: "wave",
     distortion: 0.3,
     shift: 0,
@@ -66,7 +63,6 @@ const irregularPreset = {
     scale: 4,
     speed: 0,
     frame: 0,
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     count: 32,
     angle: 150,
     distortionShape: "facete",
@@ -88,10 +84,9 @@ const foldsPreset = {
     fit: "cover",
     speed: 0,
     frame: 0,
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     count: 50,
     angle: 0,
-    distortionShape: "\u0441ascade",
+    distortionShape: "cascade",
     shape: "lines",
     distortion: 0.75,
     shift: 0,
@@ -108,7 +103,7 @@ const FlutedGlass = memo(function FlutedGlassImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
-  image = defaultPreset.params.image,
+  image = "https://shaders.paper.design/images/image-filters/0018.webp",
   count = defaultPreset.params.count,
   angle = defaultPreset.params.angle,
   distortion = defaultPreset.params.distortion,

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  type ShaderPreset,\n  defaultObjectSizing,\n  GlassDistortionShapes,\n  GlassGridShapes,\n} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {}\n\ntype FlutedGlassPreset = ShaderPreset<FlutedGlassParams>;\n\nexport const defaultPreset: FlutedGlassPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    // scale: 0.95,\n    speed: 0,\n    frame: 0,\n    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    count: 80,\n    angle: 0,\n    distortionShape: 'lens',\n    shape: 'lines',\n    distortion: 0.5,\n    shift: 0,\n    blur: 3,\n    highlights: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    count: 20,\n    angle: 0,\n    distortionShape: '\u0441ontour',\n    shape: 'wave',\n    distortion: 0.3,\n    shift: 0,\n    blur: 0,\n    highlights: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    count: 32,\n    angle: 150,\n    distortionShape: 'facete',\n    shape: 'linesIrregular',\n    distortion: 1,\n    shift: 0,\n    blur: 25,\n    highlights: 1,\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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    count: 50,\n    angle: 0,\n    distortionShape: '\u0441ascade',\n    shape: 'lines',\n    distortion: 0.75,\n    shift: 0,\n    blur: 0,\n    highlights: 0,\n    marginLeft: 0.05,\n    marginRight: 0.05,\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 = defaultPreset.params.image,\n  count = defaultPreset.params.count,\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  marginLeft = defaultPreset.params.marginLeft,\n  marginRight = defaultPreset.params.marginRight,\n  marginTop = defaultPreset.params.marginTop,\n  marginBottom = defaultPreset.params.marginBottom,\n  highlights = defaultPreset.params.highlights,\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_count: count,\n    u_angle: angle,\n    u_distortion: distortion,\n    u_shift: shift,\n    u_blur: blur,\n    u_highlights: highlights,\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": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAiKH;AA3JG,MAAM,gBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA;AAAA,IAEL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,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,OAAO;AAAA,IACP,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,kBAAqC;AAAA,EAChD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,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,OAAO;AAAA,IACP,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,qBAA0C,CAAC,eAAe,iBAAiB,aAAa,WAAW;AAEzG,MAAM,cAA0C,KAAK,SAAS,gBAAgB;AAAA;AAAA,EAEnF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,kBAAkB,cAAc,OAAO;AAAA,EACvC,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA,EAC5B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,YAAY,cAAc,OAAO;AAAA,EACjC,eAAe,cAAc,OAAO;AAAA,EACpC,aAAa,cAAc,OAAO;AAAA;AAAA,EAGlC,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,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,mBAAmB,sBAAsB,eAAe;AAAA,IACxD,SAAS,gBAAgB,KAAK;AAAA,IAC9B,cAAc;AAAA,IACd,eAAe;AAAA,IACf,aAAa;AAAA,IACb,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;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} from '@paper-design/shaders';\n\nexport interface FlutedGlassProps extends ShaderComponentProps, FlutedGlassParams {}\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    count: 80,\n    angle: 0,\n    distortionShape: 'lens',\n    shape: 'lines',\n    distortion: 0.5,\n    shift: 0,\n    blur: 3,\n    highlights: 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    count: 20,\n    angle: 0,\n    distortionShape: 'contour',\n    shape: 'wave',\n    distortion: 0.3,\n    shift: 0,\n    blur: 0,\n    highlights: 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    count: 32,\n    angle: 150,\n    distortionShape: 'facete',\n    shape: 'linesIrregular',\n    distortion: 1,\n    shift: 0,\n    blur: 25,\n    highlights: 1,\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    count: 50,\n    angle: 0,\n    distortionShape: 'cascade',\n    shape: 'lines',\n    distortion: 0.75,\n    shift: 0,\n    blur: 0,\n    highlights: 0,\n    marginLeft: 0.05,\n    marginRight: 0.05,\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 = 'https://shaders.paper.design/images/image-filters/0018.webp',\n  count = defaultPreset.params.count,\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  marginLeft = defaultPreset.params.marginLeft,\n  marginRight = defaultPreset.params.marginRight,\n  marginTop = defaultPreset.params.marginTop,\n  marginBottom = defaultPreset.params.marginBottom,\n  highlights = defaultPreset.params.highlights,\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_count: count,\n    u_angle: angle,\n    u_distortion: distortion,\n    u_shift: shift,\n    u_blur: blur,\n    u_highlights: highlights,\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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",
   "names": []
 }

package/dist/shaders/heatmap.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { type ShaderComponentProps } from '../shader-mount.js';
-import { type HeatmapParams, type ShaderPreset } from '@paper-design/shaders';
+import { type HeatmapParams, type ImageShaderPreset } from '@paper-design/shaders';
 export interface HeatmapProps extends ShaderComponentProps, HeatmapParams {
     /**
      * Suspends the component when the image is being processed.
      */
     suspendWhenProcessingImage?: boolean;
 }
-export type HeatmapPreset = ShaderPreset<HeatmapParams>;
+export type HeatmapPreset = ImageShaderPreset<HeatmapParams>;
 export declare const defaultPreset: HeatmapPreset;
 export declare const sepiaPreset: HeatmapPreset;
 export declare const heatmapPresets: HeatmapPreset[];

package/dist/shaders/heatmap.js

@@ -22,9 +22,8 @@ const defaultPreset = {
     scale: 0.75,
     speed: 1,
     frame: 0,
-    image: "https://shaders.paper.design/images/image-filters/0019.webp",
     contour: 0.5,
-    angle: 170,
+    angle: 0,
     noise: 0,
     innerGlow: 0.5,
     outerGlow: 0.5,
@@ -39,7 +38,6 @@ const sepiaPreset = {
     scale: 0.75,
     speed: 0.5,
     frame: 0,
-    image: "https://shaders.paper.design/images/image-filters/0019.webp",
     contour: 0.5,
     angle: 0,
     noise: 0.75,
@@ -54,6 +52,7 @@ const Heatmap = memo(function HeatmapImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
+  image = "https://shaders.paper.design/images/image-filters/0019.webp",
   contour = defaultPreset.params.contour,
   angle = defaultPreset.params.angle,
   noise = defaultPreset.params.noise,
@@ -64,7 +63,6 @@ const Heatmap = memo(function HeatmapImpl({
   suspendWhenProcessingImage = false,
   // Sizing props
   fit = defaultPreset.params.fit,
-  image = transparentPixel,
   offsetX = defaultPreset.params.offsetX,
   offsetY = defaultPreset.params.offsetY,
   originX = defaultPreset.params.originX,

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  type ShaderPreset,\n  defaultObjectSizing,\n  toProcessedHeatmap,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.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 = ShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.75,\n    speed: 1,\n    frame: 0,\n    image: 'https://shaders.paper.design/images/image-filters/0019.webp',\n    contour: 0.5,\n    angle: 170,\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    image: 'https://shaders.paper.design/images/image-filters/0019.webp',\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  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  image = transparentPixel,\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  if (suspendWhenProcessingImage) {\n    processedImage = suspend(\n      (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n      [imageUrl]\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      URL.revokeObjectURL(url);\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});\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';\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 = 'https://shaders.paper.design/images/image-filters/0019.webp',\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  if (suspendWhenProcessingImage) {\n    processedImage = suspend(\n      (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n      [imageUrl]\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      URL.revokeObjectURL(url);\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});\n"],
+  "mappings": ";;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,SAAS,gBAAgB;AAChE,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,wBAAwB;AACjC,SAAS,eAAe;AAkKpB;AAvJG,MAAM,gBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EACtF;AACF;AAEO,MAAM,cAA6B;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,SAAS;AAAA,EAC/B;AACF;AAEO,MAAM,iBAAkC,CAAC,eAAe,WAAW;AAEnE,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ;AAAA,EACR,UAAU,cAAc,OAAO;AAAA,EAC/B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,6BAA6B;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,cAAc,cAAc,OAAO;AAAA,EACnC,aAAa,cAAc,OAAO;AAAA,EAClC,GAAG;AACL,GAAiB;AACf,QAAM,WAAW,OAAO,UAAU,WAAW,QAAQ,MAAM;AAC3D,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAiB,gBAAgB;AAEvF,MAAI;AAEJ,MAAI,4BAA4B;AAC9B,qBAAiB;AAAA,MACf,MAAuB,mBAAmB,QAAQ,EAAE,KAAK,CAAC,WAAW,IAAI,gBAAgB,OAAO,IAAI,CAAC;AAAA,MACrG,CAAC,QAAQ;AAAA,IACX;AAAA,EACF,OAAO;AACL,qBAAiB;AAAA,EACnB;AAEA,kBAAgB,MAAM;AACpB,QAAI,4BAA4B;AAE9B;AAAA,IACF;AAEA,QAAI,CAAC,UAAU;AACb,6BAAuB,gBAAgB;AACvC;AAAA,IACF;AAEA,QAAI;AACJ,QAAI,UAAU;AAEd,uBAAmB,QAAQ,EAAE,KAAK,CAAC,WAAW;AAC5C,UAAI,SAAS;AACX,cAAM,IAAI,gBAAgB,OAAO,IAAI;AACrC,+BAAuB,GAAG;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,gBAAU;AACV,UAAI,gBAAgB,GAAG;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,UAAU,0BAA0B,CAAC;AAEzC,QAAM,WAAW;AAAA,IACf,OAAO;AAAA;AAAA,MAEL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa,yBAAyB,SAAS;AAAA,MAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,MAC7C,eAAe,OAAO;AAAA;AAAA,MAGtB,OAAO,iBAAiB,GAAG;AAAA,MAC3B,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,uBAAuB,UAAoB;AAEnH,CAAC;",
   "names": []
 }

package/dist/shaders/image-dithering.d.ts

@@ -1,8 +1,8 @@
 import { type ShaderComponentProps } from '../shader-mount.js';
-import { type ImageDitheringParams, type ShaderPreset } from '@paper-design/shaders';
+import { type ImageDitheringParams, type ImageShaderPreset } from '@paper-design/shaders';
 export interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {
 }
-type ImageDitheringPreset = ShaderPreset<ImageDitheringParams>;
+type ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;
 export declare const defaultPreset: ImageDitheringPreset;
 export declare const retroPreset: ImageDitheringPreset;
 export declare const noisePreset: ImageDitheringPreset;

package/dist/shaders/image-dithering.js

@@ -25,7 +25,6 @@ const defaultPreset = {
     colorFront: "#94ffaf",
     colorBack: "#000c38",
     colorHighlight: "#eaff94",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     type: "8x8",
     pxSize: 2,
     colorSteps: 2,
@@ -41,7 +40,6 @@ const retroPreset = {
     colorFront: "#eeeeee",
     colorBack: "#5452ff",
     colorHighlight: "#eeeeee",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     type: "2x2",
     pxSize: 3,
     colorSteps: 1,
@@ -57,7 +55,6 @@ const noisePreset = {
     colorFront: "#a2997c",
     colorBack: "#000000",
     colorHighlight: "#ededed",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     type: "random",
     pxSize: 1,
     colorSteps: 1,
@@ -73,7 +70,6 @@ const naturalPreset = {
     colorFront: "#ffffff",
     colorBack: "#000000",
     colorHighlight: "#ffffff",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     type: "8x8",
     pxSize: 2,
     colorSteps: 5,
@@ -88,7 +84,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
   colorFront = defaultPreset.params.colorFront,
   colorBack = defaultPreset.params.colorBack,
   colorHighlight = defaultPreset.params.colorHighlight,
-  image = defaultPreset.params.image,
+  image = "https://shaders.paper.design/images/image-filters/0018.webp",
   type = defaultPreset.params.type,
   pxSize = defaultPreset.params.pxSize,
   colorSteps = defaultPreset.params.colorSteps,

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  type ShaderPreset,\n  defaultObjectSizing,\n  DitheringTypes,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {}\n\ntype ImageDitheringPreset = ShaderPreset<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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    type: '8x8',\n    pxSize: 2,\n    colorSteps: 2,\n    originalColors: false,\n  },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n  name: 'Retro',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorFront: '#eeeeee',\n    colorBack: '#5452ff',\n    colorHighlight: '#eeeeee',\n    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    type: '2x2',\n    pxSize: 3,\n    colorSteps: 1,\n    originalColors: true,\n  },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n  name: 'Noise',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorFront: '#a2997c',\n    colorBack: '#000000',\n    colorHighlight: '#ededed',\n    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    type: 'random',\n    pxSize: 1,\n    colorSteps: 1,\n    originalColors: false,\n  },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n  name: 'Natural',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorFront: '#ffffff',\n    colorBack: '#000000',\n    colorHighlight: '#ffffff',\n    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    type: '8x8',\n    pxSize: 2,\n    colorSteps: 5,\n    originalColors: true,\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 = defaultPreset.params.image,\n  type = defaultPreset.params.type,\n  pxSize = defaultPreset.params.pxSize,\n  colorSteps = defaultPreset.params.colorSteps,\n  originalColors = defaultPreset.params.originalColors,\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: pxSize,\n    u_colorSteps: colorSteps,\n    u_originalColors: originalColors,\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\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    pxSize: 2,\n    colorSteps: 2,\n    originalColors: false,\n  },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n  name: 'Retro',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorFront: '#eeeeee',\n    colorBack: '#5452ff',\n    colorHighlight: '#eeeeee',\n    type: '2x2',\n    pxSize: 3,\n    colorSteps: 1,\n    originalColors: true,\n  },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n  name: 'Noise',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorFront: '#a2997c',\n    colorBack: '#000000',\n    colorHighlight: '#ededed',\n    type: 'random',\n    pxSize: 1,\n    colorSteps: 1,\n    originalColors: false,\n  },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n  name: 'Natural',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorFront: '#ffffff',\n    colorBack: '#000000',\n    colorHighlight: '#ffffff',\n    type: '8x8',\n    pxSize: 2,\n    colorSteps: 5,\n    originalColors: true,\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 = 'https://shaders.paper.design/images/image-filters/0018.webp',\n  type = defaultPreset.params.type,\n  pxSize = defaultPreset.params.pxSize,\n  colorSteps = defaultPreset.params.colorSteps,\n  originalColors = defaultPreset.params.originalColors,\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: pxSize,\n    u_colorSteps: colorSteps,\n    u_originalColors: originalColors,\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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",
   "names": []
 }

package/dist/shaders/paper-texture.d.ts

@@ -1,8 +1,8 @@
 import { type ShaderComponentProps } from '../shader-mount.js';
-import { type PaperTextureParams, type ShaderPreset } from '@paper-design/shaders';
+import { type ImageShaderPreset, type PaperTextureParams } from '@paper-design/shaders';
 export interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {
 }
-type PaperTexturePreset = ShaderPreset<PaperTextureParams>;
+type PaperTexturePreset = ImageShaderPreset<PaperTextureParams>;
 export declare const defaultPreset: PaperTexturePreset;
 export declare const abstractPreset: PaperTexturePreset;
 export declare const cardboardPreset: PaperTexturePreset;

package/dist/shaders/paper-texture.js

@@ -24,7 +24,6 @@ const defaultPreset = {
     frame: 0,
     colorFront: "#9fadbc",
     colorBack: "#ffffff",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     contrast: 0.3,
     roughness: 0.4,
     fiber: 0.3,
@@ -48,7 +47,6 @@ const abstractPreset = {
     scale: 0.6,
     colorFront: "#00eeff",
     colorBack: "#ff0a81",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     contrast: 0.85,
     roughness: 0,
     fiber: 0.1,
@@ -72,7 +70,6 @@ const cardboardPreset = {
     scale: 0.6,
     colorFront: "#c7b89e",
     colorBack: "#999180",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     contrast: 0.4,
     roughness: 0,
     fiber: 0.35,
@@ -96,7 +93,6 @@ const detailsPreset = {
     scale: 3,
     colorFront: "#00000000",
     colorBack: "#00000000",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     contrast: 0,
     roughness: 1,
     fiber: 0.27,
@@ -122,7 +118,7 @@ const PaperTexture = memo(function PaperTextureImpl({
   frame = defaultPreset.params.frame,
   colorFront = defaultPreset.params.colorFront,
   colorBack = defaultPreset.params.colorBack,
-  image = defaultPreset.params.image,
+  image = "https://shaders.paper.design/images/image-filters/0018.webp",
   contrast = defaultPreset.params.contrast,
   roughness = defaultPreset.params.roughness,
   fiber = defaultPreset.params.fiber,

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 PaperTextureParams,\n  type PaperTextureUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface PaperTextureProps extends ShaderComponentProps, PaperTextureParams {}\n\ntype PaperTexturePreset = ShaderPreset<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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    contrast: 0.3,\n    roughness: 0.4,\n    fiber: 0.3,\n    fiberScale: 1,\n    crumples: 0.3,\n    crumplesScale: 0.6,\n    folds: 0.65,\n    foldsNumber: 5,\n    blur: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    contrast: 0.85,\n    roughness: 0,\n    fiber: 0.1,\n    fiberScale: 1,\n    crumples: 0,\n    crumplesScale: 1,\n    folds: 1,\n    foldsNumber: 3,\n    blur: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    contrast: 0.4,\n    roughness: 0,\n    fiber: 0.35,\n    fiberScale: 2,\n    crumples: 0.7,\n    crumplesScale: 0.6,\n    folds: 0,\n    foldsNumber: 1,\n    blur: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    contrast: 0,\n    roughness: 1,\n    fiber: 0.27,\n    fiberScale: 2,\n    crumples: 1,\n    crumplesScale: 3,\n    folds: 1,\n    foldsNumber: 15,\n    blur: 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 = defaultPreset.params.image,\n  contrast = defaultPreset.params.contrast,\n  roughness = defaultPreset.params.roughness,\n  fiber = defaultPreset.params.fiber,\n  fiberScale = defaultPreset.params.fiberScale,\n  crumples = defaultPreset.params.crumples,\n  crumplesScale = defaultPreset.params.crumplesScale,\n  foldsNumber = defaultPreset.params.foldsNumber,\n  folds = defaultPreset.params.folds,\n  blur = defaultPreset.params.blur,\n  drops = defaultPreset.params.drops,\n  seed = defaultPreset.params.seed,\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_fiberScale: fiberScale,\n    u_crumples: crumples,\n    u_crumplesScale: crumplesScale,\n    u_foldsNumber: foldsNumber,\n    u_folds: folds,\n    u_blur: blur,\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": "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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  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\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    fiberScale: 1,\n    crumples: 0.3,\n    crumplesScale: 0.6,\n    folds: 0.65,\n    foldsNumber: 5,\n    blur: 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    fiberScale: 1,\n    crumples: 0,\n    crumplesScale: 1,\n    folds: 1,\n    foldsNumber: 3,\n    blur: 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    fiberScale: 2,\n    crumples: 0.7,\n    crumplesScale: 0.6,\n    folds: 0,\n    foldsNumber: 1,\n    blur: 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    fiberScale: 2,\n    crumples: 1,\n    crumplesScale: 3,\n    folds: 1,\n    foldsNumber: 15,\n    blur: 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 = 'https://shaders.paper.design/images/image-filters/0018.webp',\n  contrast = defaultPreset.params.contrast,\n  roughness = defaultPreset.params.roughness,\n  fiber = defaultPreset.params.fiber,\n  fiberScale = defaultPreset.params.fiberScale,\n  crumples = defaultPreset.params.crumples,\n  crumplesScale = defaultPreset.params.crumplesScale,\n  foldsNumber = defaultPreset.params.foldsNumber,\n  folds = defaultPreset.params.folds,\n  blur = defaultPreset.params.blur,\n  drops = defaultPreset.params.drops,\n  seed = defaultPreset.params.seed,\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_fiberScale: fiberScale,\n    u_crumples: crumples,\n    u_crumplesScale: crumplesScale,\n    u_foldsNumber: foldsNumber,\n    u_folds: folds,\n    u_blur: blur,\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;AA6KH;AAvKG,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,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,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,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,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,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,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,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,OAAO;AAAA,IACP,aAAa;AAAA,IACb,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,aAAa,cAAc,OAAO;AAAA,EAClC,WAAW,cAAc,OAAO;AAAA,EAChC,gBAAgB,cAAc,OAAO;AAAA,EACrC,cAAc,cAAc,OAAO;AAAA,EACnC,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA,EAC5B,QAAQ,cAAc,OAAO;AAAA,EAC7B,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,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,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,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;",
   "names": []
 }

package/dist/shaders/simplex-noise.js

@@ -17,6 +17,7 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultPatternSizing,
+    scale: 0.6,
     speed: 0.5,
     frame: 0,
     colors: ["#4449CF", "#FFD1E0", "#F94446", "#FFD36B", "#FFFFFF"],

package/dist/shaders/simplex-noise.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/simplex-noise.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  getShaderColorFromString,\n  simplexNoiseFragmentShader,\n  ShaderFitOptions,\n  type SimplexNoiseUniforms,\n  type SimplexNoiseParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {}\n\ntype SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;\n\nexport const defaultPreset: SimplexNoisePreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#4449CF', '#FFD1E0', '#F94446', '#FFD36B', '#FFFFFF'],\n    stepsPerColor: 2,\n    softness: 0,\n  },\n};\n\nexport const bubblegumPreset: SimplexNoisePreset = {\n  name: 'Bubblegum',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colors: ['#ffffff', '#ff9e9e', '#5f57ff', '#00f7ff'],\n    stepsPerColor: 1,\n    softness: 1.0,\n    scale: 1.6,\n  },\n};\n\nexport const spotsPreset: SimplexNoisePreset = {\n  name: 'Spots',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.6,\n    frame: 0,\n    colors: ['#ff7b00', '#f9ffeb', '#320d82'],\n    stepsPerColor: 1,\n    softness: 0.0,\n    scale: 1.0,\n  },\n};\n\nexport const firstContactPreset: SimplexNoisePreset = {\n  name: 'First contact',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colors: ['#e8cce6', '#120d22', '#442c44', '#e6baba', '#fff5f5'],\n    stepsPerColor: 2,\n    softness: 0.0,\n    scale: 0.2,\n  },\n};\n\nexport const simplexNoisePresets: SimplexNoisePreset[] = [\n  defaultPreset,\n  spotsPreset,\n  firstContactPreset,\n  bubblegumPreset,\n];\n\nexport const SimplexNoise: React.FC<SimplexNoiseProps> = memo(function SimplexNoiseImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\n  softness = defaultPreset.params.softness,\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}: SimplexNoiseProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_stepsPerColor: stepsPerColor,\n    u_softness: softness,\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 SimplexNoiseUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={simplexNoiseFragmentShader}\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,EAIA;AAAA,OACK;AAwGH;AAlGG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,IAC9D,eAAe;AAAA,IACf,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,kBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,qBAAyC;AAAA,EACpD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,IAC9D,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;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,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,WAAW,cAAc,OAAO;AAAA;AAAA,EAGhC,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,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,YAAY;AAAA;AAAA,IAGZ,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  getShaderColorFromString,\n  simplexNoiseFragmentShader,\n  ShaderFitOptions,\n  type SimplexNoiseUniforms,\n  type SimplexNoiseParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface SimplexNoiseProps extends ShaderComponentProps, SimplexNoiseParams {}\n\ntype SimplexNoisePreset = ShaderPreset<SimplexNoiseParams>;\n\nexport const defaultPreset: SimplexNoisePreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.6,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#4449CF', '#FFD1E0', '#F94446', '#FFD36B', '#FFFFFF'],\n    stepsPerColor: 2,\n    softness: 0,\n  },\n};\n\nexport const bubblegumPreset: SimplexNoisePreset = {\n  name: 'Bubblegum',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colors: ['#ffffff', '#ff9e9e', '#5f57ff', '#00f7ff'],\n    stepsPerColor: 1,\n    softness: 1.0,\n    scale: 1.6,\n  },\n};\n\nexport const spotsPreset: SimplexNoisePreset = {\n  name: 'Spots',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.6,\n    frame: 0,\n    colors: ['#ff7b00', '#f9ffeb', '#320d82'],\n    stepsPerColor: 1,\n    softness: 0.0,\n    scale: 1.0,\n  },\n};\n\nexport const firstContactPreset: SimplexNoisePreset = {\n  name: 'First contact',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colors: ['#e8cce6', '#120d22', '#442c44', '#e6baba', '#fff5f5'],\n    stepsPerColor: 2,\n    softness: 0.0,\n    scale: 0.2,\n  },\n};\n\nexport const simplexNoisePresets: SimplexNoisePreset[] = [\n  defaultPreset,\n  spotsPreset,\n  firstContactPreset,\n  bubblegumPreset,\n];\n\nexport const SimplexNoise: React.FC<SimplexNoiseProps> = memo(function SimplexNoiseImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\n  softness = defaultPreset.params.softness,\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}: SimplexNoiseProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_stepsPerColor: stepsPerColor,\n    u_softness: softness,\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 SimplexNoiseUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={simplexNoiseFragmentShader}\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,EAIA;AAAA,OACK;AAyGH;AAnGG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,IAC9D,eAAe;AAAA,IACf,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,kBAAsC;AAAA,EACjD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;AAEO,MAAM,qBAAyC;AAAA,EACpD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,IAC9D,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EACT;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,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,WAAW,cAAc,OAAO;AAAA;AAAA,EAGhC,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,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,YAAY;AAAA;AAAA,IAGZ,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;",
   "names": []
 }

package/dist/shaders/smoke-ring.js

@@ -18,7 +18,7 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultObjectSizing,
-    speed: 0.4,
+    speed: 0.5,
     frame: 0,
     colorBack: "#000000",
     colors: ["#ffffff"],

package/dist/shaders/smoke-ring.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/smoke-ring.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  smokeRingFragmentShader,\n  ShaderFitOptions,\n  type ShaderPreset,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\n\nexport const defaultPreset: SmokeRingPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.4,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#ffffff'],\n    noiseScale: 3,\n    noiseIterations: 8,\n    radius: 0.25,\n    thickness: 0.65,\n    innerShape: 0.7,\n    scale: 0.8,\n  },\n};\n\nexport const solarPreset: SmokeRingPreset = {\n  name: 'Solar',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#ffffff', '#ffca0a', '#fc6203', '#fc620366'],\n    noiseScale: 2,\n    noiseIterations: 3,\n    radius: 0.4,\n    thickness: 0.8,\n    innerShape: 4,\n    scale: 2,\n    offsetY: 1,\n  },\n};\n\nexport const linePreset: SmokeRingPreset = {\n  name: 'Line',\n  params: {\n    ...defaultObjectSizing,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#4540a4', '#1fe8ff'],\n    noiseScale: 1.1,\n    noiseIterations: 2,\n    radius: 0.38,\n    thickness: 0.01,\n    innerShape: 0.88,\n    speed: 4,\n  },\n};\n\nexport const cloudPreset: SmokeRingPreset = {\n  name: 'Cloud',\n  params: {\n    ...defaultObjectSizing,\n    frame: 0,\n    colorBack: '#81ADEC',\n    colors: ['#ffffff'],\n    noiseScale: 3,\n    noiseIterations: 10,\n    radius: 0.5,\n    thickness: 0.65,\n    innerShape: 0.85,\n    speed: 0.5,\n    scale: 2.5,\n  },\n};\n\nexport const smokeRingPresets: SmokeRingPreset[] = [defaultPreset, linePreset, solarPreset, cloudPreset];\n\nexport const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  noiseScale = defaultPreset.params.noiseScale,\n  thickness = defaultPreset.params.thickness,\n  radius = defaultPreset.params.radius,\n  innerShape = defaultPreset.params.innerShape,\n  noiseIterations = defaultPreset.params.noiseIterations,\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}: SmokeRingProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_noiseScale: noiseScale,\n    u_thickness: thickness,\n    u_radius: radius,\n    u_innerShape: innerShape,\n    u_noiseIterations: noiseIterations,\n    u_noiseTexture: getShaderNoiseTexture(),\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 SmokeRingUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={smokeRingFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "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  smokeRingFragmentShader,\n  ShaderFitOptions,\n  type ShaderPreset,\n  type SmokeRingParams,\n  type SmokeRingUniforms,\n} from '@paper-design/shaders';\n\nexport interface SmokeRingProps extends ShaderComponentProps, SmokeRingParams {}\n\ntype SmokeRingPreset = ShaderPreset<SmokeRingParams>;\n\nexport const defaultPreset: SmokeRingPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.5,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#ffffff'],\n    noiseScale: 3,\n    noiseIterations: 8,\n    radius: 0.25,\n    thickness: 0.65,\n    innerShape: 0.7,\n    scale: 0.8,\n  },\n};\n\nexport const solarPreset: SmokeRingPreset = {\n  name: 'Solar',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#ffffff', '#ffca0a', '#fc6203', '#fc620366'],\n    noiseScale: 2,\n    noiseIterations: 3,\n    radius: 0.4,\n    thickness: 0.8,\n    innerShape: 4,\n    scale: 2,\n    offsetY: 1,\n  },\n};\n\nexport const linePreset: SmokeRingPreset = {\n  name: 'Line',\n  params: {\n    ...defaultObjectSizing,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#4540a4', '#1fe8ff'],\n    noiseScale: 1.1,\n    noiseIterations: 2,\n    radius: 0.38,\n    thickness: 0.01,\n    innerShape: 0.88,\n    speed: 4,\n  },\n};\n\nexport const cloudPreset: SmokeRingPreset = {\n  name: 'Cloud',\n  params: {\n    ...defaultObjectSizing,\n    frame: 0,\n    colorBack: '#81ADEC',\n    colors: ['#ffffff'],\n    noiseScale: 3,\n    noiseIterations: 10,\n    radius: 0.5,\n    thickness: 0.65,\n    innerShape: 0.85,\n    speed: 0.5,\n    scale: 2.5,\n  },\n};\n\nexport const smokeRingPresets: SmokeRingPreset[] = [defaultPreset, linePreset, solarPreset, cloudPreset];\n\nexport const SmokeRing: React.FC<SmokeRingProps> = memo(function SmokeRingImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  noiseScale = defaultPreset.params.noiseScale,\n  thickness = defaultPreset.params.thickness,\n  radius = defaultPreset.params.radius,\n  innerShape = defaultPreset.params.innerShape,\n  noiseIterations = defaultPreset.params.noiseIterations,\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}: SmokeRingProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_noiseScale: noiseScale,\n    u_thickness: thickness,\n    u_radius: radius,\n    u_innerShape: innerShape,\n    u_noiseIterations: noiseIterations,\n    u_noiseTexture: getShaderNoiseTexture(),\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 SmokeRingUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={smokeRingFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
   "mappings": "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",
   "names": []
 }

package/dist/shaders/spiral.js

@@ -17,7 +17,7 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultPatternSizing,
-    scale: 1.3,
+    scale: 1,
     colorBack: "#001429",
     colorFront: "#79D1FF",
     density: 1,

package/dist/shaders/spiral.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/spiral.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  defaultPatternSizing,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  spiralFragmentShader,\n  type ShaderPreset,\n  type SpiralParams,\n  type SpiralUniforms,\n} from '@paper-design/shaders';\n\nexport interface SpiralProps extends ShaderComponentProps, SpiralParams {}\n\ntype SpiralPreset = ShaderPreset<SpiralParams>;\n\nexport const defaultPreset: SpiralPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.3,\n    colorBack: '#001429',\n    colorFront: '#79D1FF',\n    density: 1,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noise: 0,\n    noiseFrequency: 0,\n    softness: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const dropletPreset: SpiralPreset = {\n  name: 'Droplet',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#effafe',\n    colorFront: '#bf40a0',\n    density: 0.9,\n    distortion: 0,\n    strokeWidth: 0.75,\n    strokeTaper: 0.18,\n    strokeCap: 1,\n    noise: 0.74,\n    noiseFrequency: 0.33,\n    softness: 0.02,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const junglePreset: SpiralPreset = {\n  name: 'Jungle',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.3,\n    density: 0.5,\n    colorBack: '#a0ef2a',\n    colorFront: '#288b18',\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noise: 1,\n    noiseFrequency: 0.25,\n    softness: 0,\n    speed: 0.75,\n    frame: 0,\n  },\n};\n\nexport const swirlPreset: SpiralPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.45,\n    colorBack: '#b3e6d9',\n    colorFront: '#1a2b4d',\n    density: 0.2,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noise: 0,\n    noiseFrequency: 0.3,\n    softness: 0.5,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const spiralPresets: SpiralPreset[] = [defaultPreset, junglePreset, dropletPreset, swirlPreset];\n\nexport const Spiral: React.FC<SpiralProps> = memo(function SpiralImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorFront = defaultPreset.params.colorFront,\n  density = defaultPreset.params.density,\n  distortion = defaultPreset.params.distortion,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  strokeTaper = defaultPreset.params.strokeTaper,\n  strokeCap = defaultPreset.params.strokeCap,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noise = defaultPreset.params.noise,\n  softness = defaultPreset.params.softness,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: SpiralProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_density: density,\n    u_distortion: distortion,\n    u_strokeWidth: strokeWidth,\n    u_strokeTaper: strokeTaper,\n    u_strokeCap: strokeCap,\n    u_noiseFrequency: noiseFrequency,\n    u_noise: noise,\n    u_softness: softness,\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 SpiralUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={spiralFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  defaultPatternSizing,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  spiralFragmentShader,\n  type ShaderPreset,\n  type SpiralParams,\n  type SpiralUniforms,\n} from '@paper-design/shaders';\n\nexport interface SpiralProps extends ShaderComponentProps, SpiralParams {}\n\ntype SpiralPreset = ShaderPreset<SpiralParams>;\n\nexport const defaultPreset: SpiralPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1,\n    colorBack: '#001429',\n    colorFront: '#79D1FF',\n    density: 1,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noise: 0,\n    noiseFrequency: 0,\n    softness: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const dropletPreset: SpiralPreset = {\n  name: 'Droplet',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#effafe',\n    colorFront: '#bf40a0',\n    density: 0.9,\n    distortion: 0,\n    strokeWidth: 0.75,\n    strokeTaper: 0.18,\n    strokeCap: 1,\n    noise: 0.74,\n    noiseFrequency: 0.33,\n    softness: 0.02,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const junglePreset: SpiralPreset = {\n  name: 'Jungle',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.3,\n    density: 0.5,\n    colorBack: '#a0ef2a',\n    colorFront: '#288b18',\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noise: 1,\n    noiseFrequency: 0.25,\n    softness: 0,\n    speed: 0.75,\n    frame: 0,\n  },\n};\n\nexport const swirlPreset: SpiralPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.45,\n    colorBack: '#b3e6d9',\n    colorFront: '#1a2b4d',\n    density: 0.2,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noise: 0,\n    noiseFrequency: 0.3,\n    softness: 0.5,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const spiralPresets: SpiralPreset[] = [defaultPreset, junglePreset, dropletPreset, swirlPreset];\n\nexport const Spiral: React.FC<SpiralProps> = memo(function SpiralImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colorFront = defaultPreset.params.colorFront,\n  density = defaultPreset.params.density,\n  distortion = defaultPreset.params.distortion,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  strokeTaper = defaultPreset.params.strokeTaper,\n  strokeCap = defaultPreset.params.strokeCap,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noise = defaultPreset.params.noise,\n  softness = defaultPreset.params.softness,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: SpiralProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_density: density,\n    u_distortion: distortion,\n    u_strokeWidth: strokeWidth,\n    u_strokeTaper: strokeTaper,\n    u_strokeCap: strokeCap,\n    u_noiseFrequency: noiseFrequency,\n    u_noise: noise,\n    u_softness: softness,\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 SpiralUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={spiralFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
   "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA4IH;AAtIG,MAAM,gBAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,gBAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,eAA6B;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAA4B;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,IACX,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,gBAAgC,CAAC,eAAe,cAAc,eAAe,WAAW;AAE9F,MAAM,SAAgC,KAAK,SAAS,WAAW;AAAA;AAAA,EAEpE,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,aAAa,cAAc,OAAO;AAAA,EAClC,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,cAAc,cAAc,OAAO;AAAA,EACnC,YAAY,cAAc,OAAO;AAAA,EACjC,iBAAiB,cAAc,OAAO;AAAA,EACtC,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA;AAAA,EAGhC,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,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,GAAgB;AACd,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,cAAc,yBAAyB,UAAU;AAAA,IACjD,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,IACf,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,IAGZ,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,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,sBAAsB,UAAoB;AAElH,GAAG,kBAAkB;",
   "names": []
 }

package/dist/shaders/static-mesh-gradient.js

@@ -18,6 +18,7 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultObjectSizing,
+    rotation: 270,
     speed: 0,
     frame: 0,
     colors: ["#ffad0a", "#6200ff", "#e2a3ff", "#ff99fd"],

package/dist/shaders/static-mesh-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/static-mesh-gradient.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  staticMeshGradientFragmentShader,\n  ShaderFitOptions,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface StaticMeshGradientProps extends ShaderComponentProps, StaticMeshGradientParams {}\n\ntype StaticMeshGradientPreset = ShaderPreset<StaticMeshGradientParams>;\n\nexport const defaultPreset: StaticMeshGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colors: ['#ffad0a', '#6200ff', '#e2a3ff', '#ff99fd'],\n    positions: 2,\n    waveX: 1.0,\n    waveXShift: 0.6,\n    waveY: 1.0,\n    waveYShift: 0.21,\n    mixing: 0.93,\n    grainMixer: 0.0,\n    grainOverlay: 0.0,\n  },\n};\n\nexport const seaPreset: StaticMeshGradientPreset = {\n  name: 'Sea',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colors: ['#013b65', '#03738c', '#a3d3ff', '#f2faef'],\n    positions: 0,\n    waveX: 0.53,\n    waveXShift: 0.0,\n    waveY: 0.95,\n    waveYShift: 0.64,\n    mixing: 0.5,\n    grainMixer: 0.0,\n    grainOverlay: 0.0,\n  },\n};\n\nexport const sixtiesPreset: StaticMeshGradientPreset = {\n  name: '1960s',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colors: ['#000000', '#082400', '#b1aa91', '#8e8c15'],\n    positions: 42,\n    waveX: 0.45,\n    waveXShift: 0.0,\n    waveY: 1.0,\n    waveYShift: 0.0,\n    mixing: 0.0,\n    grainMixer: 0.37,\n    grainOverlay: 0.78,\n  },\n};\n\nexport const sunsetPreset: StaticMeshGradientPreset = {\n  name: 'Sunset',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colors: ['#264653', '#9c2b2b', '#f4a261', '#ffffff'],\n    positions: 0,\n    waveX: 0.6,\n    waveXShift: 0.7,\n    waveY: 0.7,\n    waveYShift: 0.7,\n    mixing: 0.5,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const staticMeshGradientPresets: StaticMeshGradientPreset[] = [\n  defaultPreset,\n  sixtiesPreset,\n  sunsetPreset,\n  seaPreset,\n];\n\nexport const StaticMeshGradient: React.FC<StaticMeshGradientProps> = memo(function StaticMeshGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  positions = defaultPreset.params.positions,\n  waveX = defaultPreset.params.waveX,\n  waveXShift = defaultPreset.params.waveXShift,\n  waveY = defaultPreset.params.waveY,\n  waveYShift = defaultPreset.params.waveYShift,\n  mixing = defaultPreset.params.mixing,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: StaticMeshGradientProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_positions: positions,\n    u_waveX: waveX,\n    u_waveXShift: waveXShift,\n    u_waveY: waveY,\n    u_waveYShift: waveYShift,\n    u_mixing: mixing,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_noiseTexture: getShaderNoiseTexture(),\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 StaticMeshGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={staticMeshGradientFragmentShader}\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  defaultObjectSizing,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  staticMeshGradientFragmentShader,\n  ShaderFitOptions,\n  type StaticMeshGradientParams,\n  type StaticMeshGradientUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface StaticMeshGradientProps extends ShaderComponentProps, StaticMeshGradientParams {}\n\ntype StaticMeshGradientPreset = ShaderPreset<StaticMeshGradientParams>;\n\nexport const defaultPreset: StaticMeshGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    rotation: 270,\n    speed: 0,\n    frame: 0,\n    colors: ['#ffad0a', '#6200ff', '#e2a3ff', '#ff99fd'],\n    positions: 2,\n    waveX: 1.0,\n    waveXShift: 0.6,\n    waveY: 1.0,\n    waveYShift: 0.21,\n    mixing: 0.93,\n    grainMixer: 0.0,\n    grainOverlay: 0.0,\n  },\n};\n\nexport const seaPreset: StaticMeshGradientPreset = {\n  name: 'Sea',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colors: ['#013b65', '#03738c', '#a3d3ff', '#f2faef'],\n    positions: 0,\n    waveX: 0.53,\n    waveXShift: 0.0,\n    waveY: 0.95,\n    waveYShift: 0.64,\n    mixing: 0.5,\n    grainMixer: 0.0,\n    grainOverlay: 0.0,\n  },\n};\n\nexport const sixtiesPreset: StaticMeshGradientPreset = {\n  name: '1960s',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colors: ['#000000', '#082400', '#b1aa91', '#8e8c15'],\n    positions: 42,\n    waveX: 0.45,\n    waveXShift: 0.0,\n    waveY: 1.0,\n    waveYShift: 0.0,\n    mixing: 0.0,\n    grainMixer: 0.37,\n    grainOverlay: 0.78,\n  },\n};\n\nexport const sunsetPreset: StaticMeshGradientPreset = {\n  name: 'Sunset',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colors: ['#264653', '#9c2b2b', '#f4a261', '#ffffff'],\n    positions: 0,\n    waveX: 0.6,\n    waveXShift: 0.7,\n    waveY: 0.7,\n    waveYShift: 0.7,\n    mixing: 0.5,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const staticMeshGradientPresets: StaticMeshGradientPreset[] = [\n  defaultPreset,\n  sixtiesPreset,\n  sunsetPreset,\n  seaPreset,\n];\n\nexport const StaticMeshGradient: React.FC<StaticMeshGradientProps> = memo(function StaticMeshGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  positions = defaultPreset.params.positions,\n  waveX = defaultPreset.params.waveX,\n  waveXShift = defaultPreset.params.waveXShift,\n  waveY = defaultPreset.params.waveY,\n  waveYShift = defaultPreset.params.waveYShift,\n  mixing = defaultPreset.params.mixing,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: StaticMeshGradientProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_positions: positions,\n    u_waveX: waveX,\n    u_waveXShift: waveXShift,\n    u_waveY: waveY,\n    u_waveYShift: waveYShift,\n    u_mixing: mixing,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_noiseTexture: getShaderNoiseTexture(),\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 StaticMeshGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={staticMeshGradientFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/static-radial-gradient.js

@@ -23,7 +23,7 @@ const defaultPreset = {
     frame: 0,
     colorBack: "#000000",
     colors: ["#00bbff", "#00ffe1", "#ffffff"],
-    radius: 0.7,
+    radius: 0.8,
     focalDistance: 0.99,
     focalAngle: 0,
     falloff: 0.24,

package/dist/shaders/static-radial-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/static-radial-gradient.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  staticRadialGradientFragmentShader,\n  ShaderFitOptions,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface StaticRadialGradientProps extends ShaderComponentProps, StaticRadialGradientParams {}\n\ntype StaticRadialGradientPreset = ShaderPreset<StaticRadialGradientParams>;\n\nexport const defaultPreset: StaticRadialGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    speed: 0,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#00bbff', '#00ffe1', '#ffffff'],\n    radius: 0.7,\n    focalDistance: 0.99,\n    focalAngle: 0,\n    falloff: 0.24,\n    mixing: 0.35,\n    distortion: 0.0,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 0.0,\n    grainOverlay: 0.0,\n  },\n};\n\nexport const crossSectionPreset: StaticRadialGradientPreset = {\n  name: 'Cross Section',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    speed: 0,\n    frame: 0,\n    colorBack: '#3d348b',\n    colors: ['#7678ed', '#f7b801', '#f18701', '#37a066'],\n    radius: 1,\n    focalDistance: 0,\n    focalAngle: 0,\n    falloff: 0,\n    mixing: 0,\n    distortion: 1,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const radialPreset: StaticRadialGradientPreset = {\n  name: 'Radial',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    speed: 0,\n    frame: 0,\n    colorBack: '#264653',\n    colors: ['#9c2b2b', '#f4a261', '#ffffff'],\n    radius: 1,\n    focalDistance: 0,\n    focalAngle: 0,\n    falloff: 0,\n    mixing: 0.7,\n    distortion: 0,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const loFiPreset: StaticRadialGradientPreset = {\n  name: 'Lo-Fi',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorBack: '#2e1f27',\n    colors: ['#d72638', '#3f88c5', '#f49d37'],\n    radius: 1,\n    focalDistance: 0,\n    focalAngle: 0,\n    falloff: 0.9,\n    mixing: 0.5,\n    distortion: 0,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 1,\n    grainOverlay: 0.5,\n  },\n};\n\nexport const staticRadialGradientPresets: StaticRadialGradientPreset[] = [\n  defaultPreset,\n  loFiPreset,\n  crossSectionPreset,\n  radialPreset,\n];\n\nexport const StaticRadialGradient: React.FC<StaticRadialGradientProps> = memo(function StaticRadialGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  radius = defaultPreset.params.radius,\n  focalDistance = defaultPreset.params.focalDistance,\n  focalAngle = defaultPreset.params.focalAngle,\n  falloff = defaultPreset.params.falloff,\n  grainMixer = defaultPreset.params.grainMixer,\n  mixing = defaultPreset.params.mixing,\n  distortion = defaultPreset.params.distortion,\n  distortionShift = defaultPreset.params.distortionShift,\n  distortionFreq = defaultPreset.params.distortionFreq,\n  grainOverlay = defaultPreset.params.grainOverlay,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: StaticRadialGradientProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_radius: radius,\n    u_focalDistance: focalDistance,\n    u_focalAngle: focalAngle,\n    u_falloff: falloff,\n    u_mixing: mixing,\n    u_distortion: distortion,\n    u_distortionShift: distortionShift,\n    u_distortionFreq: distortionFreq,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_noiseTexture: getShaderNoiseTexture(),\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 StaticRadialGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={staticRadialGradientFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "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  staticRadialGradientFragmentShader,\n  ShaderFitOptions,\n  type StaticRadialGradientParams,\n  type StaticRadialGradientUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface StaticRadialGradientProps extends ShaderComponentProps, StaticRadialGradientParams {}\n\ntype StaticRadialGradientPreset = ShaderPreset<StaticRadialGradientParams>;\n\nexport const defaultPreset: StaticRadialGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    speed: 0,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#00bbff', '#00ffe1', '#ffffff'],\n    radius: 0.8,\n    focalDistance: 0.99,\n    focalAngle: 0,\n    falloff: 0.24,\n    mixing: 0.35,\n    distortion: 0.0,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 0.0,\n    grainOverlay: 0.0,\n  },\n};\n\nexport const crossSectionPreset: StaticRadialGradientPreset = {\n  name: 'Cross Section',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    speed: 0,\n    frame: 0,\n    colorBack: '#3d348b',\n    colors: ['#7678ed', '#f7b801', '#f18701', '#37a066'],\n    radius: 1,\n    focalDistance: 0,\n    focalAngle: 0,\n    falloff: 0,\n    mixing: 0,\n    distortion: 1,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const radialPreset: StaticRadialGradientPreset = {\n  name: 'Radial',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    speed: 0,\n    frame: 0,\n    colorBack: '#264653',\n    colors: ['#9c2b2b', '#f4a261', '#ffffff'],\n    radius: 1,\n    focalDistance: 0,\n    focalAngle: 0,\n    falloff: 0,\n    mixing: 0.7,\n    distortion: 0,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const loFiPreset: StaticRadialGradientPreset = {\n  name: 'Lo-Fi',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0,\n    frame: 0,\n    colorBack: '#2e1f27',\n    colors: ['#d72638', '#3f88c5', '#f49d37'],\n    radius: 1,\n    focalDistance: 0,\n    focalAngle: 0,\n    falloff: 0.9,\n    mixing: 0.5,\n    distortion: 0,\n    distortionShift: 0,\n    distortionFreq: 12,\n    grainMixer: 1,\n    grainOverlay: 0.5,\n  },\n};\n\nexport const staticRadialGradientPresets: StaticRadialGradientPreset[] = [\n  defaultPreset,\n  loFiPreset,\n  crossSectionPreset,\n  radialPreset,\n];\n\nexport const StaticRadialGradient: React.FC<StaticRadialGradientProps> = memo(function StaticRadialGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  radius = defaultPreset.params.radius,\n  focalDistance = defaultPreset.params.focalDistance,\n  focalAngle = defaultPreset.params.focalAngle,\n  falloff = defaultPreset.params.falloff,\n  grainMixer = defaultPreset.params.grainMixer,\n  mixing = defaultPreset.params.mixing,\n  distortion = defaultPreset.params.distortion,\n  distortionShift = defaultPreset.params.distortionShift,\n  distortionFreq = defaultPreset.params.distortionFreq,\n  grainOverlay = defaultPreset.params.grainOverlay,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: StaticRadialGradientProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_radius: radius,\n    u_focalDistance: focalDistance,\n    u_focalAngle: focalAngle,\n    u_falloff: falloff,\n    u_mixing: mixing,\n    u_distortion: distortion,\n    u_distortionShift: distortionShift,\n    u_distortionFreq: distortionFreq,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_noiseTexture: getShaderNoiseTexture(),\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 StaticRadialGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={staticRadialGradientFragmentShader}\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;AA+JH;AAzJG,MAAM,gBAA4C;AAAA,EACvD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,qBAAiD;AAAA,EAC5D,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,SAAS;AAAA,IACnD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,aAAyC;AAAA,EACpD,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,8BAA4D;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAA4D,KAAK,SAAS,yBAAyB;AAAA;AAAA,EAE9G,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,aAAa,cAAc,OAAO;AAAA,EAClC,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,kBAAkB,cAAc,OAAO;AAAA,EACvC,iBAAiB,cAAc,OAAO;AAAA,EACtC,eAAe,cAAc,OAAO;AAAA;AAAA,EAGpC,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,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,GAA8B;AAC5B,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,gBAAgB,sBAAsB;AAAA;AAAA,IAGtC,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;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
   "names": []
 }

package/dist/shaders/swirl.js

@@ -23,6 +23,8 @@ const defaultPreset = {
     colors: ["#ffd1d1", "#ff8a8a", "#660000"],
     bandCount: 4,
     twist: 0.1,
+    center: 0.2,
+    proportion: 0.5,
     softness: 0,
     noiseFrequency: 0.4,
     noise: 0.2
@@ -40,6 +42,8 @@ const openingPreset = {
     colors: ["#fefff0", "#ffd8bd", "#ff8b61"],
     bandCount: 2,
     twist: 0.3,
+    center: 0.2,
+    proportion: 0.5,
     softness: 0,
     noiseFrequency: 0,
     noise: 0,
@@ -53,20 +57,11 @@ const jamesBondPreset = {
     speed: 1,
     frame: 0,
     colorBack: "#E9E7DA",
-    colors: [
-      "#000000",
-      "#000000",
-      "#000000",
-      "#000000",
-      "#000000",
-      "#000000",
-      "#000000",
-      "#000000",
-      "#000000",
-      "#000000"
-    ],
+    colors: ["#000000"],
     bandCount: 5,
     twist: 0.3,
+    center: 0,
+    proportion: 0,
     softness: 0,
     noiseFrequency: 0.5,
     noise: 0
@@ -82,6 +77,8 @@ const candyPreset = {
     colors: ["#6bbceb", "#d7b3ff", "#ff9fff"],
     bandCount: 2,
     twist: 0.15,
+    center: 0.2,
+    proportion: 0.5,
     softness: 1,
     noiseFrequency: 0.5,
     noise: 0
@@ -96,6 +93,8 @@ const Swirl = memo(function SwirlImpl({
   colors = defaultPreset.params.colors,
   bandCount = defaultPreset.params.bandCount,
   twist = defaultPreset.params.twist,
+  center = defaultPreset.params.center,
+  proportion = defaultPreset.params.proportion,
   softness = defaultPreset.params.softness,
   noiseFrequency = defaultPreset.params.noiseFrequency,
   noise = defaultPreset.params.noise,
@@ -118,6 +117,8 @@ const Swirl = memo(function SwirlImpl({
     u_colorsCount: colors.length,
     u_bandCount: bandCount,
     u_twist: twist,
+    u_center: center,
+    u_proportion: proportion,
     u_softness: softness,
     u_noiseFrequency: noiseFrequency,
     u_noise: noise,

package/dist/shaders/swirl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/swirl.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  swirlFragmentShader,\n  type ShaderPreset,\n  type SwirlParams,\n  type SwirlUniforms,\n} from '@paper-design/shaders';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\n\nexport const defaultPreset: SwirlPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.32,\n    frame: 0,\n    colorBack: '#330000',\n    colors: ['#ffd1d1', '#ff8a8a', '#660000'],\n    bandCount: 4,\n    twist: 0.1,\n    softness: 0,\n    noiseFrequency: 0.4,\n    noise: 0.2,\n  },\n};\n\nexport const openingPreset: SwirlPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.4,\n    offsetY: 1,\n    speed: 0.5,\n    frame: 0,\n    colorBack: '#ff8b61',\n    colors: ['#fefff0', '#ffd8bd', '#ff8b61'],\n    bandCount: 2,\n    twist: 0.3,\n    softness: 0,\n    noiseFrequency: 0,\n    noise: 0,\n    scale: 1,\n  },\n} as const;\n\nexport const jamesBondPreset: SwirlPreset = {\n  name: '007',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#E9E7DA',\n    colors: [\n      '#000000',\n      '#000000',\n      '#000000',\n      '#000000',\n      '#000000',\n      '#000000',\n      '#000000',\n      '#000000',\n      '#000000',\n      '#000000',\n    ],\n    bandCount: 5,\n    twist: 0.3,\n    softness: 0,\n    noiseFrequency: 0.5,\n    noise: 0,\n  },\n} as const;\n\nexport const candyPreset: SwirlPreset = {\n  name: 'Candy',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#ffcd66',\n    colors: ['#6bbceb', '#d7b3ff', '#ff9fff'],\n    bandCount: 2,\n    twist: 0.15,\n    softness: 1,\n    noiseFrequency: 0.5,\n    noise: 0,\n  },\n} as const;\n\nexport const swirlPresets: SwirlPreset[] = [defaultPreset, jamesBondPreset, openingPreset, candyPreset];\n\nexport const Swirl: React.FC<SwirlProps> = memo(function SwirlImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  bandCount = defaultPreset.params.bandCount,\n  twist = defaultPreset.params.twist,\n  softness = defaultPreset.params.softness,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noise = defaultPreset.params.noise,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: SwirlProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_bandCount: bandCount,\n    u_twist: twist,\n    u_softness: softness,\n    u_noiseFrequency: noiseFrequency,\n    u_noise: noise,\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 SwirlUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={swirlFragmentShader} 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 {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  swirlFragmentShader,\n  type ShaderPreset,\n  type SwirlParams,\n  type SwirlUniforms,\n} from '@paper-design/shaders';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\n\nexport const defaultPreset: SwirlPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.32,\n    frame: 0,\n    colorBack: '#330000',\n    colors: ['#ffd1d1', '#ff8a8a', '#660000'],\n    bandCount: 4,\n    twist: 0.1,\n    center: 0.2,\n    proportion: 0.5,\n    softness: 0,\n    noiseFrequency: 0.4,\n    noise: 0.2,\n  },\n};\n\nexport const openingPreset: SwirlPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.4,\n    offsetY: 1,\n    speed: 0.5,\n    frame: 0,\n    colorBack: '#ff8b61',\n    colors: ['#fefff0', '#ffd8bd', '#ff8b61'],\n    bandCount: 2,\n    twist: 0.3,\n    center: 0.2,\n    proportion: 0.5,\n    softness: 0,\n    noiseFrequency: 0,\n    noise: 0,\n    scale: 1,\n  },\n} as const;\n\nexport const jamesBondPreset: SwirlPreset = {\n  name: '007',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#E9E7DA',\n    colors: ['#000000'],\n    bandCount: 5,\n    twist: 0.3,\n    center: 0,\n    proportion: 0,\n    softness: 0,\n    noiseFrequency: 0.5,\n    noise: 0,\n  },\n} as const;\n\nexport const candyPreset: SwirlPreset = {\n  name: 'Candy',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#ffcd66',\n    colors: ['#6bbceb', '#d7b3ff', '#ff9fff'],\n    bandCount: 2,\n    twist: 0.15,\n    center: 0.2,\n    proportion: 0.5,\n    softness: 1,\n    noiseFrequency: 0.5,\n    noise: 0,\n  },\n} as const;\n\nexport const swirlPresets: SwirlPreset[] = [defaultPreset, jamesBondPreset, openingPreset, candyPreset];\n\nexport const Swirl: React.FC<SwirlProps> = memo(function SwirlImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  bandCount = defaultPreset.params.bandCount,\n  twist = defaultPreset.params.twist,\n  center = defaultPreset.params.center,\n  proportion = defaultPreset.params.proportion,\n  softness = defaultPreset.params.softness,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noise = defaultPreset.params.noise,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\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}: SwirlProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_bandCount: bandCount,\n    u_twist: twist,\n    u_center: center,\n    u_proportion: proportion,\n    u_softness: softness,\n    u_noiseFrequency: noiseFrequency,\n    u_noise: noise,\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 SwirlUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={swirlFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/water.d.ts

@@ -1,8 +1,8 @@
 import { type ShaderComponentProps } from '../shader-mount.js';
-import { type WaterParams, type ShaderPreset } from '@paper-design/shaders';
+import { type WaterParams, type ImageShaderPreset } from '@paper-design/shaders';
 export interface WaterProps extends ShaderComponentProps, WaterParams {
 }
-type WaterPreset = ShaderPreset<WaterParams>;
+type WaterPreset = ImageShaderPreset<WaterParams>;
 export declare const defaultPreset: WaterPreset;
 export declare const abstractPreset: WaterPreset;
 export declare const streamingPreset: WaterPreset;

package/dist/shaders/water.js

@@ -22,7 +22,6 @@ const defaultPreset = {
     frame: 0,
     colorBack: "#909090",
     colorHighlight: "#ffffff",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     highlights: 0.07,
     layering: 0.5,
     edges: 0.8,
@@ -41,7 +40,6 @@ const abstractPreset = {
     frame: 0,
     colorBack: "#909090",
     colorHighlight: "#ffffff",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     highlights: 0,
     layering: 0,
     edges: 1,
@@ -60,7 +58,6 @@ const streamingPreset = {
     frame: 0,
     colorBack: "#909090",
     colorHighlight: "#ffffff",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     highlights: 0,
     layering: 0,
     edges: 0,
@@ -79,7 +76,6 @@ const slowMoPreset = {
     frame: 0,
     colorBack: "#909090",
     colorHighlight: "#ffffff",
-    image: "https://shaders.paper.design/images/image-filters/0018.webp",
     highlights: 0.4,
     layering: 0,
     edges: 0,
@@ -95,7 +91,7 @@ const Water = memo(function WaterImpl({
   frame = defaultPreset.params.frame,
   colorBack = defaultPreset.params.colorBack,
   colorHighlight = defaultPreset.params.colorHighlight,
-  image = defaultPreset.params.image,
+  image = "https://shaders.paper.design/images/image-filters/0018.webp",
   highlights = defaultPreset.params.highlights,
   layering = defaultPreset.params.layering,
   waves = defaultPreset.params.waves,

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  type ShaderPreset,\n  defaultObjectSizing,\n} from '@paper-design/shaders';\n\nexport interface WaterProps extends ShaderComponentProps, WaterParams {}\n\ntype WaterPreset = ShaderPreset<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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    highlights: 0.07,\n    layering: 0.5,\n    edges: 0.8,\n    waves: 0.3,\n    caustic: 0.1,\n    effectScale: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    highlights: 0,\n    layering: 0,\n    edges: 1,\n    waves: 1,\n    caustic: 0.4,\n    effectScale: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    highlights: 0,\n    layering: 0,\n    edges: 0,\n    waves: 0.5,\n    caustic: 0,\n    effectScale: 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    image: 'https://shaders.paper.design/images/image-filters/0018.webp',\n    highlights: 0.4,\n    layering: 0,\n    edges: 0,\n    waves: 0,\n    caustic: 0.2,\n    effectScale: 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 = defaultPreset.params.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  effectScale = defaultPreset.params.effectScale,\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_effectScale: effectScale,\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\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    effectScale: 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    effectScale: 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    effectScale: 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    effectScale: 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 = 'https://shaders.paper.design/images/image-filters/0018.webp',\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  effectScale = defaultPreset.params.effectScale,\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_effectScale: effectScale,\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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",
   "names": []
 }

package/dist/shaders/waves.js

@@ -17,7 +17,7 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultPatternSizing,
-    scale: 0.8,
+    scale: 0.6,
     colorFront: "#ffbb00",
     colorBack: "#000000",
     shape: 0,

package/dist/shaders/waves.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/waves.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  defaultPatternSizing,\n  getShaderColorFromString,\n  wavesFragmentShader,\n  ShaderFitOptions,\n  type WavesParams,\n  type WavesUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\n\nexport const defaultPreset: WavesPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.8,\n    colorFront: '#ffbb00',\n    colorBack: '#000000',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.5,\n    spacing: 1.2,\n    proportion: 0.1,\n    softness: 0,\n  },\n};\n\nexport const groovyPreset: WavesPreset = {\n  name: 'Groovy',\n  params: {\n    ...defaultPatternSizing,\n    scale: 5,\n    rotation: 90,\n    colorFront: '#fcfcee',\n    colorBack: '#ff896b',\n    shape: 3,\n    frequency: 0.2,\n    amplitude: 0.25,\n    spacing: 1.17,\n    proportion: 0.57,\n    softness: 0,\n  },\n};\n\nexport const tangledUpPreset: WavesPreset = {\n  name: 'Tangled up',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.5,\n    rotation: 0,\n    colorFront: '#133a41',\n    colorBack: '#c2d8b6',\n    shape: 2.07,\n    frequency: 0.44,\n    amplitude: 0.57,\n    spacing: 1.05,\n    proportion: 0.75,\n    softness: 0,\n  },\n};\n\nexport const waveRidePreset: WavesPreset = {\n  name: 'Ride the wave',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.7,\n    rotation: 0,\n    colorFront: '#fdffe6',\n    colorBack: '#1f1f1f',\n    shape: 2.25,\n    frequency: 0.2,\n    amplitude: 1,\n    spacing: 1.25,\n    proportion: 1,\n    softness: 0,\n  },\n};\n\nexport const wavesPresets: WavesPreset[] = [defaultPreset, groovyPreset, tangledUpPreset, waveRidePreset];\n\nexport const Waves: React.FC<WavesProps> = memo(function WavesImpl({\n  // Own props\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  shape = defaultPreset.params.shape,\n  frequency = defaultPreset.params.frequency,\n  amplitude = defaultPreset.params.amplitude,\n  spacing = defaultPreset.params.spacing,\n  proportion = defaultPreset.params.proportion,\n  softness = defaultPreset.params.softness,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: WavesProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_shape: shape,\n    u_frequency: frequency,\n    u_amplitude: amplitude,\n    u_spacing: spacing,\n    u_proportion: proportion,\n    u_softness: softness,\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 WavesUniforms;\n\n  return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  defaultPatternSizing,\n  getShaderColorFromString,\n  wavesFragmentShader,\n  ShaderFitOptions,\n  type WavesParams,\n  type WavesUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\n\nexport const defaultPreset: WavesPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.6,\n    colorFront: '#ffbb00',\n    colorBack: '#000000',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.5,\n    spacing: 1.2,\n    proportion: 0.1,\n    softness: 0,\n  },\n};\n\nexport const groovyPreset: WavesPreset = {\n  name: 'Groovy',\n  params: {\n    ...defaultPatternSizing,\n    scale: 5,\n    rotation: 90,\n    colorFront: '#fcfcee',\n    colorBack: '#ff896b',\n    shape: 3,\n    frequency: 0.2,\n    amplitude: 0.25,\n    spacing: 1.17,\n    proportion: 0.57,\n    softness: 0,\n  },\n};\n\nexport const tangledUpPreset: WavesPreset = {\n  name: 'Tangled up',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.5,\n    rotation: 0,\n    colorFront: '#133a41',\n    colorBack: '#c2d8b6',\n    shape: 2.07,\n    frequency: 0.44,\n    amplitude: 0.57,\n    spacing: 1.05,\n    proportion: 0.75,\n    softness: 0,\n  },\n};\n\nexport const waveRidePreset: WavesPreset = {\n  name: 'Ride the wave',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.7,\n    rotation: 0,\n    colorFront: '#fdffe6',\n    colorBack: '#1f1f1f',\n    shape: 2.25,\n    frequency: 0.2,\n    amplitude: 1,\n    spacing: 1.25,\n    proportion: 1,\n    softness: 0,\n  },\n};\n\nexport const wavesPresets: WavesPreset[] = [defaultPreset, groovyPreset, tangledUpPreset, waveRidePreset];\n\nexport const Waves: React.FC<WavesProps> = memo(function WavesImpl({\n  // Own props\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  shape = defaultPreset.params.shape,\n  frequency = defaultPreset.params.frequency,\n  amplitude = defaultPreset.params.amplitude,\n  spacing = defaultPreset.params.spacing,\n  proportion = defaultPreset.params.proportion,\n  softness = defaultPreset.params.softness,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: WavesProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_shape: shape,\n    u_frequency: frequency,\n    u_amplitude: amplitude,\n    u_spacing: spacing,\n    u_proportion: proportion,\n    u_softness: softness,\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 WavesUniforms;\n\n  return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
   "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "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.51"
+    "@paper-design/shaders": "0.0.53"
   },
   "devDependencies": {
     "@types/react": "19.1.0"