@paper-design/shaders-react 0.0.0-canary.390a3d9

package/dist/shaders/grain-gradient.js

@@ -0,0 +1,177 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import {
+  getShaderColorFromString,
+  getShaderNoiseTexture,
+  grainGradientFragmentShader,
+  ShaderFitOptions,
+  defaultPatternSizing,
+  defaultObjectSizing,
+  GrainGradientShapes
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#000000",
+    colors: ["#7300ff", "#eba8ff", "#00bfff", "#2a00ff"],
+    softness: 0.5,
+    intensity: 0.5,
+    noise: 0.25,
+    shape: "corners"
+  }
+};
+const wavePreset = {
+  name: "Wave",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#000a0f",
+    colors: ["#c4730b", "#bdad5f", "#d8ccc7"],
+    softness: 0.7,
+    intensity: 0.15,
+    noise: 0.5,
+    shape: "wave"
+  }
+};
+const dotsPreset = {
+  name: "Dots",
+  params: {
+    ...defaultPatternSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colorBack: "#0a0000",
+    colors: ["#6f0000", "#0080ff", "#f2ebc9", "#33cc33"],
+    softness: 1,
+    intensity: 1,
+    noise: 0.7,
+    shape: "dots"
+  }
+};
+const truchetPreset = {
+  name: "Truchet",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#0a0000",
+    colors: ["#6f2200", "#eabb7c", "#39b523"],
+    softness: 0,
+    intensity: 0.2,
+    noise: 1,
+    shape: "truchet"
+  }
+};
+const ripplePreset = {
+  name: "Ripple",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.5,
+    speed: 1,
+    frame: 0,
+    colorBack: "#140a00",
+    colors: ["#6f2d00", "#88ddae", "#2c0b1d"],
+    softness: 0.5,
+    intensity: 0.5,
+    noise: 0.5,
+    shape: "ripple"
+  }
+};
+const blobPreset = {
+  name: "Blob",
+  params: {
+    ...defaultObjectSizing,
+    scale: 1.3,
+    speed: 1,
+    frame: 0,
+    colorBack: "#0f0e18",
+    colors: ["#3e6172", "#a49b74", "#568c50"],
+    softness: 0,
+    intensity: 0.15,
+    noise: 0.5,
+    shape: "blob"
+  }
+};
+const grainGradientPresets = [
+  defaultPreset,
+  wavePreset,
+  dotsPreset,
+  truchetPreset,
+  ripplePreset,
+  blobPreset
+];
+const GrainGradient = memo(function GrainGradientImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
+  colors = defaultPreset.params.colors,
+  softness = defaultPreset.params.softness,
+  intensity = defaultPreset.params.intensity,
+  noise = defaultPreset.params.noise,
+  shape = defaultPreset.params.shape,
+  // 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_colorBack: getShaderColorFromString(colorBack),
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_softness: softness,
+    u_intensity: intensity,
+    u_noise: noise,
+    u_shape: GrainGradientShapes[shape],
+    u_noiseTexture: getShaderNoiseTexture(),
+    // 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: grainGradientFragmentShader,
+      uniforms
+    }
+  );
+});
+export {
+  GrainGradient,
+  blobPreset,
+  defaultPreset,
+  dotsPreset,
+  grainGradientPresets,
+  ripplePreset,
+  truchetPreset,
+  wavePreset
+};
+//# sourceMappingURL=grain-gradient.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/grain-gradient.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  grainGradientFragmentShader,\n  ShaderFitOptions,\n  type GrainGradientUniforms,\n  type GrainGradientParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n  GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\nexport const defaultPreset: GrainGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#7300ff', '#eba8ff', '#00bfff', '#2a00ff'],\n    softness: 0.5,\n    intensity: 0.5,\n    noise: 0.25,\n    shape: 'corners',\n  },\n};\n\nexport const wavePreset: GrainGradientPreset = {\n  name: 'Wave',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000a0f',\n    colors: ['#c4730b', '#bdad5f', '#d8ccc7'],\n    softness: 0.7,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'wave',\n  },\n};\n\nexport const dotsPreset: GrainGradientPreset = {\n  name: 'Dots',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#0a0000',\n    colors: ['#6f0000', '#0080ff', '#f2ebc9', '#33cc33'],\n    softness: 1,\n    intensity: 1,\n    noise: 0.7,\n    shape: 'dots',\n  },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n  name: 'Truchet',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#0a0000',\n    colors: ['#6f2200', '#eabb7c', '#39b523'],\n    softness: 0,\n    intensity: 0.2,\n    noise: 1,\n    shape: 'truchet',\n  },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.5,\n    speed: 1,\n    frame: 0,\n    colorBack: '#140a00',\n    colors: ['#6f2d00', '#88ddae', '#2c0b1d'],\n    softness: 0.5,\n    intensity: 0.5,\n    noise: 0.5,\n    shape: 'ripple',\n  },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n  name: 'Blob',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1.3,\n    speed: 1,\n    frame: 0,\n    colorBack: '#0f0e18',\n    colors: ['#3e6172', '#a49b74', '#568c50'],\n    softness: 0,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'blob',\n  },\n};\n\nexport const grainGradientPresets: GrainGradientPreset[] = [\n  defaultPreset,\n  wavePreset,\n  dotsPreset,\n  truchetPreset,\n  ripplePreset,\n  blobPreset,\n];\n\nexport const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  softness = defaultPreset.params.softness,\n  intensity = defaultPreset.params.intensity,\n  noise = defaultPreset.params.noise,\n  shape = defaultPreset.params.shape,\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}: GrainGradientProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_softness: softness,\n    u_intensity: intensity,\n    u_noise: noise,\n    u_shape: GrainGradientShapes[shape],\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 GrainGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={grainGradientFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/shaders/heatmap.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type ShaderComponentProps } from '../shader-mount.js';
+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 = ImageShaderPreset<HeatmapParams>;
+export declare const defaultPreset: HeatmapPreset;
+export declare const sepiaPreset: HeatmapPreset;
+export declare const heatmapPresets: HeatmapPreset[];
+export declare const Heatmap: React.FC<HeatmapProps>;

package/dist/shaders/heatmap.js

@@ -0,0 +1,161 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import React, { memo, useLayoutEffect, useMemo, useState } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import {
+  getShaderColorFromString,
+  heatmapFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  toProcessedHeatmap
+} from "@paper-design/shaders";
+import { transparentPixel } from "../transparent-pixel.js";
+import { suspend } from "../suspend.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.75,
+    speed: 1,
+    frame: 0,
+    contour: 0.5,
+    angle: 0,
+    noise: 0,
+    innerGlow: 0.5,
+    outerGlow: 0.5,
+    colorBack: "#000000",
+    colors: ["#11206a", "#1f3ba2", "#2f63e7", "#6bd7ff", "#ffe679", "#ff991e", "#ff4c00"]
+  }
+};
+const sepiaPreset = {
+  name: "Sepia",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.75,
+    speed: 0.5,
+    frame: 0,
+    contour: 0.5,
+    angle: 0,
+    noise: 0.75,
+    innerGlow: 0.5,
+    outerGlow: 0.5,
+    colorBack: "#000000",
+    colors: ["#997F45", "#ffffff"]
+  }
+};
+const heatmapPresets = [defaultPreset, sepiaPreset];
+const Heatmap = memo(function HeatmapImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  image = "",
+  contour = defaultPreset.params.contour,
+  angle = defaultPreset.params.angle,
+  noise = defaultPreset.params.noise,
+  innerGlow = defaultPreset.params.innerGlow,
+  outerGlow = defaultPreset.params.outerGlow,
+  colorBack = defaultPreset.params.colorBack,
+  colors = defaultPreset.params.colors,
+  suspendWhenProcessingImage = false,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  rotation = defaultPreset.params.rotation,
+  scale = defaultPreset.params.scale,
+  worldHeight = defaultPreset.params.worldHeight,
+  worldWidth = defaultPreset.params.worldWidth,
+  ...props
+}) {
+  const imageUrl = typeof image === "string" ? image : image.src;
+  const [processedStateImage, setProcessedStateImage] = useState(transparentPixel);
+  let processedImage;
+  if (suspendWhenProcessingImage && typeof window !== "undefined") {
+    processedImage = suspend(
+      () => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),
+      [imageUrl, "heatmap"]
+    );
+  } else {
+    processedImage = processedStateImage;
+  }
+  useLayoutEffect(() => {
+    if (suspendWhenProcessingImage) {
+      return;
+    }
+    if (!imageUrl) {
+      setProcessedStateImage(transparentPixel);
+      return;
+    }
+    let url;
+    let current = true;
+    toProcessedHeatmap(imageUrl).then((result) => {
+      if (current) {
+        url = URL.createObjectURL(result.blob);
+        setProcessedStateImage(url);
+      }
+    });
+    return () => {
+      current = false;
+    };
+  }, [imageUrl, suspendWhenProcessingImage]);
+  const uniforms = useMemo(
+    () => ({
+      // Own uniforms
+      u_image: processedImage,
+      u_contour: contour,
+      u_angle: angle,
+      u_noise: noise,
+      u_innerGlow: innerGlow,
+      u_outerGlow: outerGlow,
+      u_colorBack: getShaderColorFromString(colorBack),
+      u_colors: colors.map(getShaderColorFromString),
+      u_colorsCount: colors.length,
+      // Sizing uniforms
+      u_fit: ShaderFitOptions[fit],
+      u_offsetX: offsetX,
+      u_offsetY: offsetY,
+      u_originX: originX,
+      u_originY: originY,
+      u_rotation: rotation,
+      u_scale: scale,
+      u_worldHeight: worldHeight,
+      u_worldWidth: worldWidth
+    }),
+    [
+      speed,
+      frame,
+      contour,
+      angle,
+      noise,
+      innerGlow,
+      outerGlow,
+      colors,
+      colorBack,
+      processedImage,
+      fit,
+      offsetX,
+      offsetY,
+      originX,
+      originY,
+      rotation,
+      scale,
+      worldHeight,
+      worldWidth
+    ]
+  );
+  return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: heatmapFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  Heatmap,
+  defaultPreset,
+  heatmapPresets,
+  sepiaPreset
+};
+//# sourceMappingURL=heatmap.js.map

package/dist/shaders/heatmap.js.map

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

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

@@ -0,0 +1,14 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type ImageDitheringParams, type ImageShaderPreset } from '@paper-design/shaders';
+export interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {
+    /** @deprecated use `size` instead */
+    pxSize?: number;
+}
+type ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;
+export declare const defaultPreset: ImageDitheringPreset;
+export declare const retroPreset: ImageDitheringPreset;
+export declare const noisePreset: ImageDitheringPreset;
+export declare const naturalPreset: ImageDitheringPreset;
+export declare const imageDitheringPresets: ImageDitheringPreset[];
+export declare const ImageDithering: React.FC<ImageDitheringProps>;
+export {};

package/dist/shaders/image-dithering.js

@@ -0,0 +1,145 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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 {
+  imageDitheringFragmentShader,
+  getShaderColorFromString,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  DitheringTypes
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    fit: "cover",
+    // scale: 0.95,
+    speed: 0,
+    frame: 0,
+    colorFront: "#94ffaf",
+    colorBack: "#000c38",
+    colorHighlight: "#eaff94",
+    type: "8x8",
+    size: 2,
+    colorSteps: 2,
+    originalColors: false
+  }
+};
+const retroPreset = {
+  name: "Retro",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0,
+    frame: 0,
+    colorFront: "#eeeeee",
+    colorBack: "#5452ff",
+    colorHighlight: "#eeeeee",
+    type: "2x2",
+    size: 3,
+    colorSteps: 1,
+    originalColors: true
+  }
+};
+const noisePreset = {
+  name: "Noise",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0,
+    frame: 0,
+    colorFront: "#a2997c",
+    colorBack: "#000000",
+    colorHighlight: "#ededed",
+    type: "random",
+    size: 1,
+    colorSteps: 1,
+    originalColors: false
+  }
+};
+const naturalPreset = {
+  name: "Natural",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0,
+    frame: 0,
+    colorFront: "#ffffff",
+    colorBack: "#000000",
+    colorHighlight: "#ffffff",
+    type: "8x8",
+    size: 2,
+    colorSteps: 5,
+    originalColors: true
+  }
+};
+const imageDitheringPresets = [defaultPreset, noisePreset, retroPreset, naturalPreset];
+const ImageDithering = memo(function ImageDitheringImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colorFront = defaultPreset.params.colorFront,
+  colorBack = defaultPreset.params.colorBack,
+  colorHighlight = defaultPreset.params.colorHighlight,
+  image = "",
+  type = defaultPreset.params.type,
+  colorSteps = defaultPreset.params.colorSteps,
+  originalColors = defaultPreset.params.originalColors,
+  pxSize,
+  size = pxSize === void 0 ? defaultPreset.params.size : pxSize,
+  // 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_colorHighlight: getShaderColorFromString(colorHighlight),
+    u_type: DitheringTypes[type],
+    u_pxSize: size,
+    u_colorSteps: colorSteps,
+    u_originalColors: originalColors,
+    // 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: imageDitheringFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  ImageDithering,
+  defaultPreset,
+  imageDitheringPresets,
+  naturalPreset,
+  noisePreset,
+  retroPreset
+};
+//# sourceMappingURL=image-dithering.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/image-dithering.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  imageDitheringFragmentShader,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  type ImageDitheringUniforms,\n  type ImageDitheringParams,\n  defaultObjectSizing,\n  DitheringTypes,\n  type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {\n  /** @deprecated use `size` instead */\n  pxSize?: number;\n}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    fit: 'cover',\n    // scale: 0.95,\n    speed: 0,\n    frame: 0,\n    colorFront: '#94ffaf',\n    colorBack: '#000c38',\n    colorHighlight: '#eaff94',\n    type: '8x8',\n    size: 2,\n    colorSteps: 2,\n    originalColors: false,\n  },\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    size: 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    size: 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    size: 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 = '',\n  type = defaultPreset.params.type,\n  colorSteps = defaultPreset.params.colorSteps,\n  originalColors = defaultPreset.params.originalColors,\n  pxSize,\n  size = pxSize === undefined ? defaultPreset.params.size : pxSize,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: ImageDitheringProps) {\n  const uniforms = {\n    // Own uniforms\n    u_image: image,\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorHighlight: getShaderColorFromString(colorHighlight),\n    u_type: DitheringTypes[type],\n    u_pxSize: size,\n    u_colorSteps: colorSteps,\n    u_originalColors: originalColors,\n\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/image-halftone-dots.d.ts

@@ -0,0 +1,12 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type ImageHalftoneDotsParams, type ImageShaderPreset } from '@paper-design/shaders';
+export interface ImageHalftoneDotsProps extends ShaderComponentProps, ImageHalftoneDotsParams {
+}
+type ImageHalftoneDotsPreset = ImageShaderPreset<ImageHalftoneDotsParams>;
+export declare const defaultPreset: ImageHalftoneDotsPreset;
+export declare const abstractPreset: ImageHalftoneDotsPreset;
+export declare const netPreset: ImageHalftoneDotsPreset;
+export declare const holesPreset: ImageHalftoneDotsPreset;
+export declare const imageHalftoneDotsPresets: ImageHalftoneDotsPreset[];
+export declare const ImageHalftoneDots: React.FC<ImageHalftoneDotsProps>;
+export {};