@paper-design/shaders-react 0.0.0-canary.156ab35

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

@@ -0,0 +1,171 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
+import {
+  imageHalftoneDotsFragmentShader,
+  getShaderColorFromString,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  ImageHalftoneDotsTypes
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#d4d4d4",
+    colorFront: "#2b2b2b",
+    size: 5,
+    radius: 1,
+    contrast: 0.5,
+    originalColors: false,
+    inverted: false,
+    grainMixer: 0.3,
+    grainOverlay: 0,
+    diagonalGrid: true,
+    type: "gooey"
+  }
+};
+const abstractPreset = {
+  name: "Abstract",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#00000000",
+    colorFront: "#2b2b2b",
+    size: 25,
+    radius: 2,
+    contrast: 0.45,
+    originalColors: true,
+    inverted: false,
+    grainMixer: 0,
+    grainOverlay: 0,
+    diagonalGrid: true,
+    type: "classic"
+  }
+};
+const netPreset = {
+  name: "Net",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#000000",
+    colorFront: "#2b2b2b",
+    size: 12,
+    radius: 2,
+    contrast: 0,
+    originalColors: true,
+    inverted: false,
+    grainMixer: 0,
+    grainOverlay: 0,
+    diagonalGrid: true,
+    type: "classic"
+  }
+};
+const holesPreset = {
+  name: "Holes",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#ffffff00",
+    colorFront: "#0012b3",
+    size: 10,
+    radius: 1.4,
+    contrast: 0.35,
+    originalColors: false,
+    inverted: false,
+    grainMixer: 0,
+    grainOverlay: 0,
+    diagonalGrid: false,
+    type: "hole"
+  }
+};
+const imageHalftoneDotsPresets = [
+  defaultPreset,
+  abstractPreset,
+  netPreset,
+  holesPreset
+];
+const ImageHalftoneDots = memo(function ImageHalftoneDotsImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colorFront = defaultPreset.params.colorFront,
+  colorBack = defaultPreset.params.colorBack,
+  image = "",
+  size = defaultPreset.params.size,
+  radius = defaultPreset.params.radius,
+  contrast = defaultPreset.params.contrast,
+  originalColors = defaultPreset.params.originalColors,
+  inverted = defaultPreset.params.inverted,
+  grainMixer = defaultPreset.params.grainMixer,
+  grainOverlay = defaultPreset.params.grainOverlay,
+  diagonalGrid = defaultPreset.params.diagonalGrid,
+  type = defaultPreset.params.type,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_image: image,
+    u_colorFront: getShaderColorFromString(colorFront),
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_size: size,
+    u_radius: radius,
+    u_contrast: contrast,
+    u_originalColors: originalColors,
+    u_inverted: inverted,
+    u_grainMixer: grainMixer,
+    u_grainOverlay: grainOverlay,
+    u_diagonalGrid: diagonalGrid,
+    u_type: ImageHalftoneDotsTypes[type],
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_rotation: rotation,
+    u_scale: scale,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: imageHalftoneDotsFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  ImageHalftoneDots,
+  abstractPreset,
+  defaultPreset,
+  holesPreset,
+  imageHalftoneDotsPresets,
+  netPreset
+};
+//# sourceMappingURL=image-halftone-dots.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/image-halftone-dots.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  imageHalftoneDotsFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type ImageHalftoneDotsUniforms,\n  type ImageHalftoneDotsParams,\n  defaultObjectSizing,\n  type ImageShaderPreset,\n  ImageHalftoneDotsTypes,\n} from '@paper-design/shaders';\n\nexport interface ImageHalftoneDotsProps extends ShaderComponentProps, ImageHalftoneDotsParams {}\n\ntype ImageHalftoneDotsPreset = ImageShaderPreset<ImageHalftoneDotsParams>;\n\nexport const defaultPreset: ImageHalftoneDotsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#d4d4d4',\n    colorFront: '#2b2b2b',\n    size: 5,\n    radius: 1,\n    contrast: 0.5,\n    originalColors: false,\n    inverted: false,\n    grainMixer: 0.3,\n    grainOverlay: 0,\n    diagonalGrid: true,\n    type: 'gooey',\n  },\n};\n\nexport const abstractPreset: ImageHalftoneDotsPreset = {\n  name: 'Abstract',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#00000000',\n    colorFront: '#2b2b2b',\n    size: 25,\n    radius: 2,\n    contrast: 0.45,\n    originalColors: true,\n    inverted: false,\n    grainMixer: 0,\n    grainOverlay: 0,\n    diagonalGrid: true,\n    type: 'classic',\n  },\n};\n\nexport const netPreset: ImageHalftoneDotsPreset = {\n  name: 'Net',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colorFront: '#2b2b2b',\n    size: 12,\n    radius: 2,\n    contrast: 0,\n    originalColors: true,\n    inverted: false,\n    grainMixer: 0,\n    grainOverlay: 0,\n    diagonalGrid: true,\n    type: 'classic',\n  },\n};\n\nexport const holesPreset: ImageHalftoneDotsPreset = {\n  name: 'Holes',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#ffffff00',\n    colorFront: '#0012b3',\n    size: 10,\n    radius: 1.4,\n    contrast: 0.35,\n    originalColors: false,\n    inverted: false,\n    grainMixer: 0,\n    grainOverlay: 0,\n    diagonalGrid: false,\n    type: 'hole',\n  },\n};\n\nexport const imageHalftoneDotsPresets: ImageHalftoneDotsPreset[] = [\n  defaultPreset,\n  abstractPreset,\n  netPreset,\n  holesPreset,\n];\n\nexport const ImageHalftoneDots: React.FC<ImageHalftoneDotsProps> = memo(function ImageHalftoneDotsImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  image = '',\n  size = defaultPreset.params.size,\n  radius = defaultPreset.params.radius,\n  contrast = defaultPreset.params.contrast,\n  originalColors = defaultPreset.params.originalColors,\n  inverted = defaultPreset.params.inverted,\n  grainMixer = defaultPreset.params.grainMixer,\n  grainOverlay = defaultPreset.params.grainOverlay,\n  diagonalGrid = defaultPreset.params.diagonalGrid,\n  type = defaultPreset.params.type,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: ImageHalftoneDotsProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_size: size,\n    u_radius: radius,\n    u_contrast: contrast,\n    u_originalColors: originalColors,\n    u_inverted: inverted,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\n    u_diagonalGrid: diagonalGrid,\n    u_type: ImageHalftoneDotsTypes[type],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies ImageHalftoneDotsUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={imageHalftoneDotsFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/shaders/liquid-metal.d.ts

@@ -0,0 +1,16 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type LiquidMetalParams, type ImageShaderPreset } from '@paper-design/shaders';
+export interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {
+    /**
+     * Suspends the component when the image is being processed.
+     */
+    suspendWhenProcessingImage?: boolean;
+}
+type LiquidMetalPreset = ImageShaderPreset<LiquidMetalParams>;
+export declare const defaultPreset: LiquidMetalPreset;
+export declare const noirPreset: LiquidMetalPreset;
+export declare const fullScreenPreset: LiquidMetalPreset;
+export declare const stripesPreset: LiquidMetalPreset;
+export declare const liquidMetalPresets: LiquidMetalPreset[];
+export declare const LiquidMetal: React.FC<LiquidMetalProps>;
+export {};

package/dist/shaders/liquid-metal.js

@@ -0,0 +1,201 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo, useLayoutEffect, useState } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import {
+  liquidMetalFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  toProcessedLiquidMetal,
+  getShaderColorFromString,
+  LiquidMetalShapes
+} from "@paper-design/shaders";
+import { transparentPixel } from "../transparent-pixel.js";
+import { suspend } from "../suspend.js";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colorBack: "#AAAAAC",
+    colorTint: "#ffffff",
+    distortion: 0.07,
+    repetition: 2,
+    shiftRed: 0.3,
+    shiftBlue: 0.3,
+    contour: 0.4,
+    softness: 0.1,
+    angle: 70,
+    shape: "diamond"
+  }
+};
+const noirPreset = {
+  name: "Noir",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colorBack: "#000000",
+    colorTint: "#606060",
+    softness: 0.45,
+    repetition: 1.5,
+    shiftRed: 0,
+    shiftBlue: 0,
+    distortion: 0,
+    contour: 0,
+    angle: 90,
+    shape: "diamond"
+  }
+};
+const fullScreenPreset = {
+  name: "Backdrop",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    scale: 1.5,
+    colorBack: "#AAAAAC",
+    colorTint: "#ffffff",
+    softness: 0.05,
+    repetition: 1.5,
+    shiftRed: 0.3,
+    shiftBlue: 0.3,
+    distortion: 0.1,
+    contour: 0.4,
+    shape: "none",
+    angle: 90,
+    worldWidth: 0,
+    worldHeight: 0
+  }
+};
+const stripesPreset = {
+  name: "Stripes",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    scale: 0.6,
+    colorBack: "#000000",
+    colorTint: "#2c5d72",
+    softness: 0.8,
+    repetition: 6,
+    shiftRed: 1,
+    shiftBlue: -1,
+    distortion: 0.4,
+    contour: 0.4,
+    shape: "circle",
+    angle: 0
+  }
+};
+const liquidMetalPresets = [defaultPreset, noirPreset, fullScreenPreset, stripesPreset];
+const LiquidMetal = memo(function LiquidMetalImpl({
+  // Own props
+  colorBack = defaultPreset.params.colorBack,
+  colorTint = defaultPreset.params.colorTint,
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  image = "",
+  contour = defaultPreset.params.contour,
+  distortion = defaultPreset.params.distortion,
+  softness = defaultPreset.params.softness,
+  repetition = defaultPreset.params.repetition,
+  shiftRed = defaultPreset.params.shiftRed,
+  shiftBlue = defaultPreset.params.shiftBlue,
+  angle = defaultPreset.params.angle,
+  shape = defaultPreset.params.shape,
+  suspendWhenProcessingImage = false,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const imageUrl = typeof image === "string" ? image : image.src;
+  const [processedStateImage, setProcessedStateImage] = useState(transparentPixel);
+  let processedImage;
+  if (suspendWhenProcessingImage && typeof window !== "undefined" && imageUrl) {
+    processedImage = suspend(
+      () => toProcessedLiquidMetal(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),
+      [imageUrl, "liquid-metal"]
+    );
+  } else {
+    processedImage = processedStateImage;
+  }
+  useLayoutEffect(() => {
+    if (suspendWhenProcessingImage) {
+      return;
+    }
+    if (!imageUrl) {
+      setProcessedStateImage(transparentPixel);
+      return;
+    }
+    let url;
+    let current = true;
+    toProcessedLiquidMetal(imageUrl).then((result) => {
+      if (current) {
+        url = URL.createObjectURL(result.pngBlob);
+        setProcessedStateImage(url);
+      }
+    });
+    return () => {
+      current = false;
+    };
+  }, [imageUrl, suspendWhenProcessingImage]);
+  const uniforms = {
+    // Own uniforms
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorTint: getShaderColorFromString(colorTint),
+    u_image: processedImage,
+    u_contour: contour,
+    u_distortion: distortion,
+    u_softness: softness,
+    u_repetition: repetition,
+    u_shiftRed: shiftRed,
+    u_shiftBlue: shiftBlue,
+    u_angle: angle,
+    u_isImage: Boolean(image),
+    u_shape: LiquidMetalShapes[shape],
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: liquidMetalFragmentShader,
+      uniforms
+    }
+  );
+});
+export {
+  LiquidMetal,
+  defaultPreset,
+  fullScreenPreset,
+  liquidMetalPresets,
+  noirPreset,
+  stripesPreset
+};
+//# sourceMappingURL=liquid-metal.js.map

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

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

package/dist/shaders/mesh-gradient.d.ts

@@ -0,0 +1,12 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type MeshGradientParams, type ShaderPreset } from '@paper-design/shaders';
+export interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {
+}
+type MeshGradientPreset = ShaderPreset<MeshGradientParams>;
+export declare const defaultPreset: MeshGradientPreset;
+export declare const purplePreset: MeshGradientPreset;
+export declare const beachPreset: MeshGradientPreset;
+export declare const inkPreset: MeshGradientPreset;
+export declare const meshGradientPresets: MeshGradientPreset[];
+export declare const MeshGradient: React.FC<MeshGradientProps>;
+export {};

package/dist/shaders/mesh-gradient.js

@@ -0,0 +1,129 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
+import {
+  defaultObjectSizing,
+  getShaderColorFromString,
+  meshGradientFragmentShader,
+  ShaderFitOptions
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colors: ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"],
+    distortion: 0.8,
+    swirl: 0.1,
+    grainMixer: 0,
+    grainOverlay: 0
+  }
+};
+const purplePreset = {
+  name: "Purple",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0.6,
+    frame: 0,
+    colors: ["#aaa7d7", "#3c2b8e"],
+    distortion: 1,
+    swirl: 1,
+    grainMixer: 0,
+    grainOverlay: 0
+  }
+};
+const beachPreset = {
+  name: "Beach",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0.1,
+    frame: 0,
+    colors: ["#bcecf6", "#00aaff", "#00f7ff", "#ffd447"],
+    distortion: 0.8,
+    swirl: 0.35,
+    grainMixer: 0,
+    grainOverlay: 0
+  }
+};
+const inkPreset = {
+  name: "Ink",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colors: ["#ffffff", "#000000"],
+    distortion: 1,
+    swirl: 0.2,
+    rotation: 90,
+    grainMixer: 0,
+    grainOverlay: 0
+  }
+};
+const meshGradientPresets = [defaultPreset, inkPreset, purplePreset, beachPreset];
+const MeshGradient = memo(function MeshGradientImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  distortion = defaultPreset.params.distortion,
+  swirl = defaultPreset.params.swirl,
+  grainMixer = defaultPreset.params.grainMixer,
+  grainOverlay = defaultPreset.params.grainOverlay,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  rotation = defaultPreset.params.rotation,
+  scale = defaultPreset.params.scale,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_distortion: distortion,
+    u_swirl: swirl,
+    u_grainMixer: grainMixer,
+    u_grainOverlay: grainOverlay,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_rotation: rotation,
+    u_scale: scale,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: meshGradientFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  MeshGradient,
+  beachPreset,
+  defaultPreset,
+  inkPreset,
+  meshGradientPresets,
+  purplePreset
+};
+//# sourceMappingURL=mesh-gradient.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/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  meshGradientFragmentShader,\n  ShaderFitOptions,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\nexport const defaultPreset: MeshGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#e0eaff', '#241d9a', '#f75092', '#9f50d3'],\n    distortion: 0.8,\n    swirl: 0.1,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const purplePreset: MeshGradientPreset = {\n  name: 'Purple',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.6,\n    frame: 0,\n    colors: ['#aaa7d7', '#3c2b8e'],\n    distortion: 1,\n    swirl: 1,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n  name: 'Beach',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.1,\n    frame: 0,\n    colors: ['#bcecf6', '#00aaff', '#00f7ff', '#ffd447'],\n    distortion: 0.8,\n    swirl: 0.35,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const inkPreset: MeshGradientPreset = {\n  name: 'Ink',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#ffffff', '#000000'],\n    distortion: 1,\n    swirl: 0.2,\n    rotation: 90,\n    grainMixer: 0,\n    grainOverlay: 0,\n  },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, inkPreset, purplePreset, beachPreset];\n\nexport const MeshGradient: React.FC<MeshGradientProps> = memo(function MeshGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  distortion = defaultPreset.params.distortion,\n  swirl = defaultPreset.params.swirl,\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}: MeshGradientProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_distortion: distortion,\n    u_swirl: swirl,\n    u_grainMixer: grainMixer,\n    u_grainOverlay: grainOverlay,\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 MeshGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={meshGradientFragmentShader}\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,OAIK;AA6GH;AAvGG,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,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,eAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;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,WAAW,SAAS;AAAA,IACnD,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,YAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;AAEO,MAAM,sBAA4C,CAAC,eAAe,WAAW,cAAc,WAAW;AAEtG,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,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,GAAsB;AACpB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB;AAAA;AAAA,IAGhB,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/metaballs.d.ts

@@ -0,0 +1,12 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type MetaballsParams, type ShaderPreset } from '@paper-design/shaders';
+export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {
+}
+type MetaballsPreset = ShaderPreset<MetaballsParams>;
+export declare const defaultPreset: MetaballsPreset;
+export declare const inkDropsPreset: MetaballsPreset;
+export declare const backgroundPreset: MetaballsPreset;
+export declare const solarPreset: MetaballsPreset;
+export declare const metaballsPresets: MetaballsPreset[];
+export declare const Metaballs: React.FC<MetaballsProps>;
+export {};