@paper-design/shaders-react 0.0.28 → 0.0.30

package/dist/shader-mount.d.ts

@@ -1,21 +1,23 @@
-import React from 'react';
-import { ShaderMount as ShaderMountVanilla, type ShaderMountUniforms } from '@paper-design/shaders';
-/** The React ShaderMount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */
-export type ShaderMountUniformsReact = {
-    [key: string]: ShaderMountUniforms[keyof ShaderMountUniforms] | string;
-};
-export interface ShaderMountProps extends React.ComponentProps<'div'> {
-    shaderMountRef?: React.RefObject<ShaderMountVanilla | null>;
+import { type ShaderMotionParams } from '@paper-design/shaders';
+/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */
+interface ShaderMountUniformsReact {
+    [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;
+}
+export interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color'>, ShaderMotionParams {
     fragmentShader: string;
-    uniforms?: ShaderMountUniformsReact;
+    uniforms: ShaderMountUniformsReact;
+    minPixelRatio?: number;
+    maxPixelCount?: number;
+    webGlContextAttributes?: WebGLContextAttributes;
+}
+export interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color'> {
+    minPixelRatio?: number;
+    maxPixelCount?: number;
     webGlContextAttributes?: WebGLContextAttributes;
-    speed?: number;
-    frame?: number;
 }
-/** Params that every shader can set as part of their controls */
-export type GlobalParams = Pick<ShaderMountProps, 'speed' | 'frame'>;
 /**
  * A React component that mounts a shader and updates its uniforms as the component's props change
  * 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
  */
 export declare const ShaderMount: React.FC<ShaderMountProps>;
+export {};

package/dist/shader-mount.js

@@ -0,0 +1,120 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+"use client";
+import { useEffect, useRef, forwardRef, useState } from "react";
+import {
+  ShaderMount as ShaderMountVanilla
+} from "@paper-design/shaders";
+import { useMergeRefs } from "./use-merge-refs";
+import { jsx } from "react/jsx-runtime";
+async function processUniforms(uniformsProp) {
+  const processedUniforms = {};
+  const imageLoadPromises = [];
+  const isValidUrl = (url) => {
+    try {
+      if (url.startsWith("/")) return true;
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const isExternalUrl = (url) => {
+    try {
+      if (url.startsWith("/")) return false;
+      const urlObject = new URL(url, window.location.origin);
+      return urlObject.origin !== window.location.origin;
+    } catch {
+      return false;
+    }
+  };
+  Object.entries(uniformsProp).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      if (!isValidUrl(value)) {
+        console.warn(`Uniform "${key}" has invalid URL "${value}". Skipping image loading.`);
+        return;
+      }
+      const imagePromise = new Promise((resolve, reject) => {
+        const img = new Image();
+        if (isExternalUrl(value)) {
+          img.crossOrigin = "anonymous";
+        }
+        img.onload = () => {
+          processedUniforms[key] = img;
+          resolve();
+        };
+        img.onerror = () => {
+          console.error(`Could not set uniforms. Failed to load image at ${value}`);
+          reject();
+        };
+        img.src = value;
+      });
+      imageLoadPromises.push(imagePromise);
+    } else {
+      processedUniforms[key] = value;
+    }
+  });
+  await Promise.all(imageLoadPromises);
+  return processedUniforms;
+}
+const ShaderMount = forwardRef(
+  function ShaderMountImpl({
+    fragmentShader,
+    uniforms: uniformsProp,
+    webGlContextAttributes,
+    speed = 0,
+    frame = 0,
+    minPixelRatio,
+    maxPixelCount,
+    ...divProps
+  }, forwardedRef) {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const divRef = useRef(null);
+    const shaderMountRef = useRef(null);
+    useEffect(() => {
+      const initShader = async () => {
+        const uniforms = await processUniforms(uniformsProp);
+        if (divRef.current && !shaderMountRef.current) {
+          shaderMountRef.current = new ShaderMountVanilla(
+            divRef.current,
+            fragmentShader,
+            uniforms,
+            webGlContextAttributes,
+            speed,
+            frame,
+            minPixelRatio,
+            maxPixelCount
+          );
+          setIsInitialized(true);
+        }
+      };
+      initShader();
+      return () => {
+        shaderMountRef.current?.dispose();
+        shaderMountRef.current = null;
+      };
+    }, [fragmentShader, webGlContextAttributes]);
+    useEffect(() => {
+      const updateUniforms = async () => {
+        const uniforms = await processUniforms(uniformsProp);
+        shaderMountRef.current?.setUniforms(uniforms);
+      };
+      updateUniforms();
+    }, [uniformsProp, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setSpeed(speed);
+    }, [speed, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setFrame(frame);
+    }, [frame, isInitialized]);
+    return /* @__PURE__ */ jsx("div", { ref: useMergeRefs([divRef, forwardedRef]), ...divProps });
+  }
+);
+ShaderMount.displayName = "ShaderMount";
+export {
+  ShaderMount
+};
+//# sourceMappingURL=shader-mount.js.map

package/dist/shader-mount.js.map

@@ -0,0 +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 ShaderMotionParams,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs';\n\n/** React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images */\ninterface ShaderMountUniformsReact {\n  [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color'>, ShaderMotionParams {\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'> {\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<HTMLDivElement, 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<HTMLDivElement>(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      const updateUniforms = async () => {\n        const uniforms = await processUniforms(uniformsProp);\n        shaderMountRef.current?.setUniforms(uniforms);\n      };\n\n      updateUniforms();\n    }, [uniformsProp, isInitialized]);\n\n    // Speed\n    useEffect(() => {\n      shaderMountRef.current?.setSpeed(speed);\n    }, [speed, isInitialized]);\n\n    // Frame\n    useEffect(() => {\n      shaderMountRef.current?.setFrame(frame);\n    }, [frame, isInitialized]);\n\n    return <div ref={useMergeRefs([divRef, forwardedRef])} {...divProps} />;\n  }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/shaders/dithering.d.ts

@@ -0,0 +1,15 @@
+import { type ShaderComponentProps } from '../shader-mount';
+import { type DitheringParams, type ShaderPreset } from '@paper-design/shaders';
+export interface DitheringProps extends ShaderComponentProps, DitheringParams {
+}
+type DitheringPreset = ShaderPreset<DitheringParams>;
+export declare const defaultPreset: DitheringPreset;
+export declare const warpPreset: DitheringPreset;
+export declare const sinePreset: DitheringPreset;
+export declare const bugsPreset: DitheringPreset;
+export declare const ripplePreset: DitheringPreset;
+export declare const swirlPreset: DitheringPreset;
+export declare const spherePreset: DitheringPreset;
+export declare const ditheringPresets: DitheringPreset[];
+export declare const Dithering: React.FC<DitheringProps>;
+export {};

package/dist/shaders/dithering.js

@@ -0,0 +1,179 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount";
+import {
+  getShaderColorFromString,
+  ditheringFragmentShader,
+  ShaderFitOptions,
+  defaultPatternSizing,
+  defaultObjectSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(240, 14%, 17%, 1)",
+    color2: "hsla(34, 26%, 61%, 1)",
+    shape: 1,
+    type: 3,
+    pxSize: 2,
+    pxRounded: true
+  }
+};
+const warpPreset = {
+  name: "Warp",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(195, 47%, 35%, 1)",
+    color2: "hsla(171, 26%, 89%, 1)",
+    shape: 2,
+    type: 3,
+    pxSize: 2,
+    pxRounded: true
+  }
+};
+const sinePreset = {
+  name: "Sine Wave",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(318, 80%, 25%, 1)",
+    color2: "hsla(184, 100%, 40%, 1)",
+    shape: 4,
+    type: 4,
+    pxSize: 11,
+    pxRounded: true
+  }
+};
+const bugsPreset = {
+  name: "Bugs",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(0, 0%, 0%, 1)",
+    color2: "hsla(120, 100%, 25%, 1)",
+    shape: 3,
+    type: 1,
+    pxSize: 9,
+    pxRounded: true
+  }
+};
+const ripplePreset = {
+  name: "Ripple",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(20, 50%, 25%, 1)",
+    color2: "hsla(20, 50%, 55%, 1)",
+    shape: 5,
+    type: 2,
+    pxSize: 3,
+    pxRounded: false
+  }
+};
+const swirlPreset = {
+  name: "Swirl",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(0, 0%, 0%, 1)",
+    color2: "hsla(200, 26%, 20%, 1)",
+    shape: 6,
+    type: 4,
+    pxSize: 2,
+    pxRounded: false
+  }
+};
+const spherePreset = {
+  name: "Sphere",
+  params: {
+    ...defaultObjectSizing,
+    offsetX: -0.5,
+    offsetY: 0.23,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(320, 26%, 15%, 1)",
+    color2: "hsla(135, 30%, 30%, 1)",
+    shape: 7,
+    type: 3,
+    pxSize: 2.5,
+    pxRounded: true
+  }
+};
+const ditheringPresets = [
+  defaultPreset,
+  spherePreset,
+  sinePreset,
+  warpPreset,
+  ripplePreset,
+  bugsPreset,
+  swirlPreset
+];
+const Dithering = memo(function DitheringImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  color1 = defaultPreset.params.color1,
+  color2 = defaultPreset.params.color2,
+  shape = defaultPreset.params.shape,
+  type = defaultPreset.params.type,
+  pxSize = defaultPreset.params.pxSize,
+  pxRounded = defaultPreset.params.pxRounded,
+  // 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_color1: getShaderColorFromString(color1),
+    u_color2: getShaderColorFromString(color2),
+    u_shape: shape,
+    u_type: type,
+    u_pxSize: pxSize,
+    u_pxRounded: pxRounded,
+    // 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: ditheringFragmentShader, uniforms });
+});
+export {
+  Dithering,
+  bugsPreset,
+  defaultPreset,
+  ditheringPresets,
+  ripplePreset,
+  sinePreset,
+  spherePreset,
+  swirlPreset,
+  warpPreset
+};
+//# sourceMappingURL=dithering.js.map

package/dist/shaders/dithering.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dithering.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n  getShaderColorFromString,\n  ditheringFragmentShader,\n  ShaderFitOptions,\n  type DitheringUniforms,\n  type DitheringParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n} from '@paper-design/shaders';\n\nexport interface DitheringProps extends ShaderComponentProps, DitheringParams {}\n\ntype DitheringPreset = ShaderPreset<DitheringParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\n\nexport const defaultPreset: DitheringPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    color1: 'hsla(240, 14%, 17%, 1)',\n    color2: 'hsla(34, 26%, 61%, 1)',\n    shape: 1,\n    type: 3,\n    pxSize: 2,\n    pxRounded: true,\n  },\n};\n\nexport const warpPreset: DitheringPreset = {\n  name: 'Warp',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    color1: 'hsla(195, 47%, 35%, 1)',\n    color2: 'hsla(171, 26%, 89%, 1)',\n    shape: 2,\n    type: 3,\n    pxSize: 2,\n    pxRounded: true,\n  },\n} as const;\n\nexport const sinePreset: DitheringPreset = {\n  name: 'Sine Wave',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    color1: 'hsla(318, 80%, 25%, 1)',\n    color2: 'hsla(184, 100%, 40%, 1)',\n    shape: 4,\n    type: 4,\n    pxSize: 11,\n    pxRounded: true,\n  },\n} as const;\n\nexport const bugsPreset: DitheringPreset = {\n  name: 'Bugs',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    color1: 'hsla(0, 0%, 0%, 1)',\n    color2: 'hsla(120, 100%, 25%, 1)',\n    shape: 3,\n    type: 1,\n    pxSize: 9,\n    pxRounded: true,\n  },\n} as const;\n\nexport const ripplePreset: DitheringPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    color1: 'hsla(20, 50%, 25%, 1)',\n    color2: 'hsla(20, 50%, 55%, 1)',\n    shape: 5,\n    type: 2,\n    pxSize: 3,\n    pxRounded: false,\n  },\n} as const;\n\nexport const swirlPreset: DitheringPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    color1: 'hsla(0, 0%, 0%, 1)',\n    color2: 'hsla(200, 26%, 20%, 1)',\n    shape: 6,\n    type: 4,\n    pxSize: 2,\n    pxRounded: false,\n  },\n} as const;\n\nexport const spherePreset: DitheringPreset = {\n  name: 'Sphere',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.5,\n    offsetY: 0.23,\n    speed: 1,\n    frame: 0,\n    color1: 'hsla(320, 26%, 15%, 1)',\n    color2: 'hsla(135, 30%, 30%, 1)',\n    shape: 7,\n    type: 3,\n    pxSize: 2.5,\n    pxRounded: true,\n  },\n} as const;\n\nexport const ditheringPresets: DitheringPreset[] = [\n  defaultPreset,\n  spherePreset,\n  sinePreset,\n  warpPreset,\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  color1 = defaultPreset.params.color1,\n  color2 = defaultPreset.params.color2,\n  shape = defaultPreset.params.shape,\n  type = defaultPreset.params.type,\n  pxSize = defaultPreset.params.pxSize,\n  pxRounded = defaultPreset.params.pxRounded,\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_color1: getShaderColorFromString(color1),\n    u_color2: getShaderColorFromString(color2),\n    u_shape: shape,\n    u_type: type,\n    u_pxSize: pxSize,\n    u_pxRounded: pxRounded,\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/dot-grid.d.ts

@@ -1,24 +1,10 @@
-import { type ShaderMountProps } from '../shader-mount';
-import { type DotGridShape } from '@paper-design/shaders';
-export type DotGridParams = {
-    colorFill?: string;
-    colorStroke?: string;
-    dotSize?: number;
-    gridSpacingX?: number;
-    gridSpacingY?: number;
-    strokeWidth?: number;
-    sizeRange?: number;
-    opacityRange?: number;
-    shape?: DotGridShape;
-};
-export type DotGridProps = Omit<ShaderMountProps, 'fragmentShader'> & DotGridParams;
-type DotGridPreset = {
-    name: string;
-    params: Required<DotGridParams>;
-    style?: React.CSSProperties;
-};
+import { type ShaderComponentProps } from '../shader-mount';
+import { type DotGridParams, type ShaderPreset } from '@paper-design/shaders';
+export interface DotGridProps extends ShaderComponentProps, DotGridParams {
+}
+type DotGridPreset = ShaderPreset<DotGridParams>;
 export declare const defaultPreset: DotGridPreset;
 export declare const macrodataPreset: DotGridPreset;
 export declare const dotGridPresets: DotGridPreset[];
-export declare const DotGrid: ({ colorFill, colorStroke, dotSize, gridSpacingX, gridSpacingY, strokeWidth, sizeRange, opacityRange, shape, ...props }: DotGridProps) => React.ReactElement;
+export declare const DotGrid: React.FC<DotGridProps>;
 export {};

package/dist/shaders/dot-grid.js

@@ -0,0 +1,230 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount";
+import { colorPropsAreEqual } from "../color-props-are-equal";
+import {
+  getShaderColorFromString,
+  dotGridFragmentShader,
+  DotGridShapes,
+  ShaderFitOptions,
+  defaultPatternSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    colorFill: "hsla(0, 0%, 100%, 1)",
+    colorStroke: "hsla(40, 100%, 50%, 1)",
+    dotSize: 2,
+    gridSpacingX: 50,
+    gridSpacingY: 50,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: "circle"
+  }
+};
+const macrodataPreset = {
+  name: "Macrodata",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(211, 37%, 13%, 1)",
+    colorFill: "hsla(218, 100%, 67%, 1)",
+    colorStroke: "hsla(0, 0%, 0%, 1)",
+    dotSize: 3,
+    gridSpacingX: 25,
+    gridSpacingY: 25,
+    strokeWidth: 0,
+    sizeRange: 0.25,
+    opacityRange: 0.9,
+    shape: "circle"
+  }
+};
+const trianglesPreset = {
+  name: "Triangles",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(0, 0%, 100%, 1)",
+    colorFill: "hsla(0, 0%, 100%, 1)",
+    colorStroke: "hsla(0, 0%, 0%, .5)",
+    dotSize: 5,
+    gridSpacingX: 32,
+    gridSpacingY: 32,
+    strokeWidth: 1,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: "triangle"
+  }
+};
+const bubblesPreset = {
+  name: "Bubbles",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(234, 100%, 31%, .5)",
+    colorFill: "hsla(100, 30%, 100%, 1)",
+    colorStroke: "hsla(0, 100%, 0%, 1)",
+    dotSize: 28,
+    gridSpacingX: 60,
+    gridSpacingY: 60,
+    strokeWidth: 12,
+    sizeRange: 0.7,
+    opacityRange: 1.3,
+    shape: "circle"
+  }
+};
+const treeLinePreset = {
+  name: "Tree line",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(100, 100%, 36%, .05)",
+    colorFill: "hsla(150, 80%, 10%, 1)",
+    colorStroke: "hsla(0, 0%, 0%, 1)",
+    dotSize: 8,
+    gridSpacingX: 20,
+    gridSpacingY: 90,
+    strokeWidth: 0,
+    sizeRange: 1,
+    opacityRange: 0.6,
+    shape: "circle"
+  }
+};
+const diamondsPreset = {
+  name: "Diamonds",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(0, 0%, 0%, 0)",
+    colorFill: "hsla(0, 100%, 50%, 1)",
+    colorStroke: "hsla(0, 0%, 0%, 1)",
+    dotSize: 15,
+    gridSpacingX: 30,
+    gridSpacingY: 30,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 2,
+    shape: "diamond"
+  }
+};
+const wallpaperPreset = {
+  name: "Wallpaper",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(154, 33%, 19%, 1)",
+    colorFill: "hsla(0, 0%, 0%, 0)",
+    colorStroke: "hsla(36, 48%, 58%, 1)",
+    dotSize: 9,
+    gridSpacingX: 32,
+    gridSpacingY: 32,
+    strokeWidth: 1,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: "diamond"
+  }
+};
+const matrixPreset = {
+  name: "Enter the Matrix",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(0, 100%, 0%, 1)",
+    colorFill: "hsla(182, 100%, 64%, 1)",
+    colorStroke: "hsla(0, 100%, 100%, 0)",
+    dotSize: 2,
+    gridSpacingX: 10,
+    gridSpacingY: 10,
+    strokeWidth: 0.5,
+    sizeRange: 0.25,
+    opacityRange: 1,
+    shape: "triangle"
+  }
+};
+const waveformPreset = {
+  name: "Waveform",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "hsla(0, 100%, 100%, 1)",
+    colorFill: "hsla(227, 93%, 38%, 1)",
+    colorStroke: "hsla(0, 0%, 0%, 0)",
+    dotSize: 100,
+    gridSpacingX: 2,
+    gridSpacingY: 215,
+    strokeWidth: 0,
+    sizeRange: 1,
+    opacityRange: 0,
+    shape: "square"
+  }
+};
+const dotGridPresets = [
+  defaultPreset,
+  macrodataPreset,
+  trianglesPreset,
+  bubblesPreset,
+  treeLinePreset,
+  diamondsPreset,
+  wallpaperPreset,
+  matrixPreset,
+  waveformPreset
+];
+const DotGrid = memo(function DotGridImpl({
+  // Own props
+  colorBack = defaultPreset.params.colorBack,
+  colorFill = defaultPreset.params.colorFill,
+  colorStroke = defaultPreset.params.colorStroke,
+  dotSize = defaultPreset.params.dotSize,
+  gridSpacingX = defaultPreset.params.gridSpacingX,
+  gridSpacingY = defaultPreset.params.gridSpacingY,
+  strokeWidth = defaultPreset.params.strokeWidth,
+  sizeRange = defaultPreset.params.sizeRange,
+  opacityRange = defaultPreset.params.opacityRange,
+  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,
+  // Other props
+  maxPixelCount = 6016 * 3384,
+  // Higher max resolution for this shader
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorFill: getShaderColorFromString(colorFill),
+    u_colorStroke: getShaderColorFromString(colorStroke),
+    u_dotSize: dotSize,
+    u_gridSpacingX: gridSpacingX,
+    u_gridSpacingY: gridSpacingY,
+    u_strokeWidth: strokeWidth,
+    u_sizeRange: sizeRange,
+    u_opacityRange: opacityRange,
+    u_shape: DotGridShapes[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, maxPixelCount, fragmentShader: dotGridFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  DotGrid,
+  defaultPreset,
+  dotGridPresets,
+  macrodataPreset
+};
+//# sourceMappingURL=dot-grid.js.map