@paper-design/shaders-react 0.0.29 → 0.0.31

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)",
+    size: 2,
+    gapX: 50,
+    gapY: 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)",
+    size: 3,
+    gapX: 25,
+    gapY: 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)",
+    size: 5,
+    gapX: 32,
+    gapY: 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)",
+    size: 28,
+    gapX: 60,
+    gapY: 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)",
+    size: 8,
+    gapX: 20,
+    gapY: 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)",
+    size: 15,
+    gapX: 30,
+    gapY: 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)",
+    size: 9,
+    gapX: 32,
+    gapY: 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)",
+    size: 2,
+    gapX: 10,
+    gapY: 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)",
+    size: 100,
+    gapX: 2,
+    gapY: 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,
+  size = defaultPreset.params.size,
+  gapX = defaultPreset.params.gapX,
+  gapY = defaultPreset.params.gapY,
+  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: size,
+    u_gapX: gapX,
+    u_gapY: gapY,
+    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

package/dist/shaders/dot-grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-grid.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  getShaderColorFromString,\n  dotGridFragmentShader,\n  DotGridShapes,\n  ShaderFitOptions,\n  type DotGridParams,\n  type DotGridUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\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 interface DotGridProps extends ShaderComponentProps, DotGridParams {}\n\ntype DotGridPreset = ShaderPreset<DotGridParams>;\n\nexport const defaultPreset: DotGridPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 0%, 0%, 1)',\n    colorFill: 'hsla(0, 0%, 100%, 1)',\n    colorStroke: 'hsla(40, 100%, 50%, 1)',\n    size: 2,\n    gapX: 50,\n    gapY: 50,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'circle',\n  },\n};\n\nexport const macrodataPreset: DotGridPreset = {\n  name: 'Macrodata',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(211, 37%, 13%, 1)',\n    colorFill: 'hsla(218, 100%, 67%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 1)',\n    size: 3,\n    gapX: 25,\n    gapY: 25,\n    strokeWidth: 0,\n    sizeRange: 0.25,\n    opacityRange: 0.9,\n    shape: 'circle',\n  },\n};\n\nconst trianglesPreset: DotGridPreset = {\n  name: 'Triangles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 0%, 100%, 1)',\n    colorFill: 'hsla(0, 0%, 100%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, .5)',\n    size: 5,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'triangle',\n  },\n};\n\nconst bubblesPreset: DotGridPreset = {\n  name: 'Bubbles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(234, 100%, 31%, .5)',\n    colorFill: 'hsla(100, 30%, 100%, 1)',\n    colorStroke: 'hsla(0, 100%, 0%, 1)',\n    size: 28,\n    gapX: 60,\n    gapY: 60,\n    strokeWidth: 12,\n    sizeRange: 0.7,\n    opacityRange: 1.3,\n    shape: 'circle',\n  },\n};\n\nconst treeLinePreset: DotGridPreset = {\n  name: 'Tree line',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(100, 100%, 36%, .05)',\n    colorFill: 'hsla(150, 80%, 10%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 1)',\n    size: 8,\n    gapX: 20,\n    gapY: 90,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0.6,\n    shape: 'circle',\n  },\n};\n\nconst diamondsPreset: DotGridPreset = {\n  name: 'Diamonds',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 0%, 0%, 0)',\n    colorFill: 'hsla(0, 100%, 50%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 1)',\n    size: 15,\n    gapX: 30,\n    gapY: 30,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 2,\n    shape: 'diamond',\n  },\n};\n\nconst wallpaperPreset: DotGridPreset = {\n  name: 'Wallpaper',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(154, 33%, 19%, 1)',\n    colorFill: 'hsla(0, 0%, 0%, 0)',\n    colorStroke: 'hsla(36, 48%, 58%, 1)',\n    size: 9,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'diamond',\n  },\n};\n\nconst matrixPreset: DotGridPreset = {\n  name: 'Enter the Matrix',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 100%, 0%, 1)',\n    colorFill: 'hsla(182, 100%, 64%, 1)',\n    colorStroke: 'hsla(0, 100%, 100%, 0)',\n    size: 2,\n    gapX: 10,\n    gapY: 10,\n    strokeWidth: 0.5,\n    sizeRange: 0.25,\n    opacityRange: 1,\n    shape: 'triangle',\n  },\n};\n\nconst waveformPreset: DotGridPreset = {\n  name: 'Waveform',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 100%, 100%, 1)',\n    colorFill: 'hsla(227, 93%, 38%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 0)',\n    size: 100,\n    gapX: 2,\n    gapY: 215,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0,\n    shape: 'square',\n  },\n};\n\nexport const dotGridPresets: DotGridPreset[] = [\n  defaultPreset,\n  macrodataPreset,\n  trianglesPreset,\n  bubblesPreset,\n  treeLinePreset,\n  diamondsPreset,\n  wallpaperPreset,\n  matrixPreset,\n  waveformPreset,\n];\n\nexport const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorFill = defaultPreset.params.colorFill,\n  colorStroke = defaultPreset.params.colorStroke,\n  size = defaultPreset.params.size,\n  gapX = defaultPreset.params.gapX,\n  gapY = defaultPreset.params.gapY,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  sizeRange = defaultPreset.params.sizeRange,\n  opacityRange = defaultPreset.params.opacityRange,\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\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: DotGridProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFill: getShaderColorFromString(colorFill),\n    u_colorStroke: getShaderColorFromString(colorStroke),\n    u_dotSize: size,\n    u_gapX: gapX,\n    u_gapY: gapY,\n    u_strokeWidth: strokeWidth,\n    u_sizeRange: sizeRange,\n    u_opacityRange: opacityRange,\n    u_shape: DotGridShapes[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 DotGridUniforms;\n\n  return (\n    <ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/shaders/dot-orbit.d.ts

@@ -1,21 +1,9 @@
-import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
-export type DotOrbitParams = {
-    scale?: number;
-    color1?: string;
-    color2?: string;
-    color3?: string;
-    color4?: string;
-    dotSize?: number;
-    dotSizeRange?: number;
-    spreading?: number;
-} & GlobalParams;
-export type DotOrbitProps = Omit<ShaderMountProps, 'fragmentShader'> & DotOrbitParams;
-type DotOrbitPreset = {
-    name: string;
-    params: Required<DotOrbitParams>;
-    style?: React.CSSProperties;
-};
+import { type ShaderComponentProps } from '../shader-mount';
+import { type DotOrbitParams, type ShaderPreset } from '@paper-design/shaders';
+export interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {
+}
+type DotOrbitPreset = ShaderPreset<DotOrbitParams>;
 export declare const defaultPreset: DotOrbitPreset;
 export declare const dotOrbitPresets: DotOrbitPreset[];
-export declare const DotOrbit: ({ scale, color1, color2, color3, color4, dotSize, dotSizeRange, spreading, ...props }: DotOrbitProps) => React.ReactElement;
+export declare const DotOrbit: React.FC<DotOrbitProps>;
 export {};

package/dist/shaders/dot-orbit.js

@@ -0,0 +1,77 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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,
+  dotOrbitFragmentShader,
+  ShaderFitOptions,
+  defaultPatternSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    speed: 2,
+    frame: 0,
+    colors: ["hsla(12, 100%, 20%, 1)", "hsla(55, 100%, 40%, 1)", "hsla(320, 100%, 40%, 1)"],
+    size: 1,
+    sizeRange: 0,
+    spreading: 1,
+    stepsPerColor: 2
+  }
+};
+const dotOrbitPresets = [defaultPreset];
+const DotOrbit = memo(function DotOrbitImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  size = defaultPreset.params.size,
+  sizeRange = defaultPreset.params.sizeRange,
+  spreading = defaultPreset.params.spreading,
+  stepsPerColor = defaultPreset.params.stepsPerColor,
+  // 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_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_size: size,
+    u_sizeRange: sizeRange,
+    u_spreading: spreading,
+    u_stepsPerColor: stepsPerColor,
+    // 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: dotOrbitFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  DotOrbit,
+  defaultPreset,
+  dotOrbitPresets
+};
+//# sourceMappingURL=dot-orbit.js.map

package/dist/shaders/dot-orbit.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-orbit.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  getShaderColorFromString,\n  dotOrbitFragmentShader,\n  ShaderFitOptions,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\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: DotOrbitPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colors: ['hsla(12, 100%, 20%, 1)', 'hsla(55, 100%, 40%, 1)', 'hsla(320, 100%, 40%, 1)'],\n    size: 1,\n    sizeRange: 0,\n    spreading: 1,\n    stepsPerColor: 2,\n  },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  size = defaultPreset.params.size,\n  sizeRange = defaultPreset.params.sizeRange,\n  spreading = defaultPreset.params.spreading,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\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}: DotOrbitProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_size: size,\n    u_sizeRange: sizeRange,\n    u_spreading: spreading,\n    u_stepsPerColor: stepsPerColor,\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 DotOrbitUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\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;AAsEH;AA5DG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,0BAA0B,0BAA0B,yBAAyB;AAAA,IACtF,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,kBAAoC,CAAC,aAAa;AAExD,MAAM,WAAoC,KAAK,SAAS,aAAa;AAAA;AAAA,EAE1E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,gBAAgB,cAAc,OAAO;AAAA;AAAA,EAGrC,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,GAAkB;AAChB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,IAGjB,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,wBAAwB,UAAoB;AAEpH,GAAG,kBAAkB;",
+  "names": []
+}

package/dist/shaders/god-rays.d.ts

@@ -1,29 +1,13 @@
-import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
-export type GodRaysParams = {
-    colorBack?: string;
-    color1?: string;
-    color2?: string;
-    color3?: string;
-    offsetX?: number;
-    offsetY?: number;
-    frequency?: number;
-    spotty?: number;
-    midIntensity?: number;
-    midSize?: number;
-    density?: number;
-    blending?: number;
-} & GlobalParams;
-export type GodRaysProps = Omit<ShaderMountProps, 'fragmentShader'> & GodRaysParams;
-type GodRaysPreset = {
-    name: string;
-    params: Required<GodRaysParams>;
-    style?: React.CSSProperties;
-};
+import { type ShaderComponentProps } from '../shader-mount';
+import { type GodRaysParams, type ShaderPreset } from '@paper-design/shaders';
+export interface GodRaysProps extends ShaderComponentProps, GodRaysParams {
+}
+type GodRaysPreset = ShaderPreset<GodRaysParams>;
 export declare const defaultPreset: GodRaysPreset;
 export declare const auroraPreset: GodRaysPreset;
 export declare const warpPreset: GodRaysPreset;
 export declare const linearPreset: GodRaysPreset;
 export declare const etherPreset: GodRaysPreset;
 export declare const godRaysPresets: GodRaysPreset[];
-export declare const GodRays: ({ colorBack, color1, color2, color3, offsetX, offsetY, frequency, spotty, midIntensity, midSize, density, blending, ...props }: GodRaysProps) => React.ReactElement;
+export declare const GodRays: React.FC<GodRaysProps>;
 export {};

package/dist/shaders/god-rays.js

@@ -0,0 +1,160 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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 {
+  defaultObjectSizing,
+  getShaderColorFromString,
+  godRaysFragmentShader,
+  ShaderFitOptions
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    offsetX: -0.4,
+    offsetY: -0.4,
+    colorBack: "hsla(215, 100%, 11%, 1)",
+    colors: ["hsla(45, 100%, 70%, 1)", "hsla(10, 100%, 80%, 1)", "hsla(178, 100%, 83%, 1)"],
+    frequency: 6,
+    spotty: 0.28,
+    midIntensity: 1,
+    midSize: 3,
+    density: 0.3,
+    blending: 0,
+    speed: 1,
+    frame: 0
+  }
+};
+const auroraPreset = {
+  name: "Aurora",
+  params: {
+    ...defaultObjectSizing,
+    offsetY: 1,
+    colorBack: "hsla(0, 0%, 25%, 1)",
+    colors: ["hsla(239, 100%, 70%, 1)", "hsla(150, 100%, 70%, 1)", "hsla(200, 100%, 70%, 1)"],
+    frequency: 2.4,
+    spotty: 0.9,
+    midIntensity: 0.8,
+    midSize: 2.1,
+    density: 0.5,
+    blending: 1,
+    speed: 0.5,
+    frame: 0
+  }
+};
+const warpPreset = {
+  name: "Warp",
+  params: {
+    ...defaultObjectSizing,
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    colors: ["hsla(317, 100%, 50%, 1)", "hsla(25, 100%, 50%, 1)", "hsla(0, 0%, 100%, 1)"],
+    frequency: 1.2,
+    spotty: 0.15,
+    midIntensity: 0,
+    midSize: 0,
+    density: 0.79,
+    blending: 0.4,
+    speed: 2,
+    frame: 0
+  }
+};
+const linearPreset = {
+  name: "Linear",
+  params: {
+    ...defaultObjectSizing,
+    offsetX: 0.2,
+    offsetY: -0.7,
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    colors: ["hsl(0 0% 100% / 12%)", "hsl(0 0% 100% / 24%)", "hsl(0 0% 100% / 16%)"],
+    frequency: 1.2,
+    spotty: 0.25,
+    midSize: 1.1,
+    midIntensity: 0.75,
+    density: 0.79,
+    blending: 1,
+    speed: 0.5,
+    frame: 0
+  }
+};
+const etherPreset = {
+  name: "Ether",
+  params: {
+    ...defaultObjectSizing,
+    offsetX: -0.6,
+    colorBack: "hsl(226.7 50% 7.1% / 100%)",
+    colors: ["hsl(215 100% 53.9% / 65.1%)", "hsl(214.4 85.9% 86.1% / 74.9%)", "hsl(225 31.4% 20% / 100%)"],
+    frequency: 0.3,
+    spotty: 0.77,
+    midSize: 1.1,
+    midIntensity: 0.5,
+    density: 0.6,
+    blending: 0.6,
+    speed: 1,
+    frame: 0
+  }
+};
+const godRaysPresets = [defaultPreset, auroraPreset, warpPreset, linearPreset, etherPreset];
+const GodRays = memo(function GodRaysImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
+  colors = defaultPreset.params.colors,
+  frequency = defaultPreset.params.frequency,
+  spotty = defaultPreset.params.spotty,
+  midIntensity = defaultPreset.params.midIntensity,
+  midSize = defaultPreset.params.midSize,
+  density = defaultPreset.params.density,
+  blending = defaultPreset.params.blending,
+  // 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_frequency: frequency,
+    u_spotty: spotty,
+    u_midIntensity: midIntensity,
+    u_midSize: midSize,
+    u_density: density,
+    u_blending: blending,
+    // 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: godRaysFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  GodRays,
+  auroraPreset,
+  defaultPreset,
+  etherPreset,
+  godRaysPresets,
+  linearPreset,
+  warpPreset
+};
+//# sourceMappingURL=god-rays.js.map

package/dist/shaders/god-rays.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/god-rays.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  godRaysFragmentShader,\n  ShaderFitOptions,\n  type GodRaysParams,\n  type GodRaysUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\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 highmidIntensity bug)\n\nexport const defaultPreset: GodRaysPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.4,\n    offsetY: -0.4,\n    colorBack: 'hsla(215, 100%, 11%, 1)',\n    colors: ['hsla(45, 100%, 70%, 1)', 'hsla(10, 100%, 80%, 1)', 'hsla(178, 100%, 83%, 1)'],\n    frequency: 6,\n    spotty: 0.28,\n    midIntensity: 1,\n    midSize: 3,\n    density: 0.3,\n    blending: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const auroraPreset: GodRaysPreset = {\n  name: 'Aurora',\n  params: {\n    ...defaultObjectSizing,\n    offsetY: 1,\n    colorBack: 'hsla(0, 0%, 25%, 1)',\n    colors: ['hsla(239, 100%, 70%, 1)', 'hsla(150, 100%, 70%, 1)', 'hsla(200, 100%, 70%, 1)'],\n    frequency: 2.4,\n    spotty: 0.9,\n    midIntensity: 0.8,\n    midSize: 2.1,\n    density: 0.5,\n    blending: 1,\n    speed: 0.5,\n    frame: 0,\n  },\n};\n\nexport const warpPreset: GodRaysPreset = {\n  name: 'Warp',\n  params: {\n    ...defaultObjectSizing,\n    colorBack: 'hsla(0, 0%, 0%, 1)',\n    colors: ['hsla(317, 100%, 50%, 1)', 'hsla(25, 100%, 50%, 1)', 'hsla(0, 0%, 100%, 1)'],\n    frequency: 1.2,\n    spotty: 0.15,\n    midIntensity: 0,\n    midSize: 0,\n    density: 0.79,\n    blending: 0.4,\n    speed: 2,\n    frame: 0,\n  },\n};\n\nexport const linearPreset: GodRaysPreset = {\n  name: 'Linear',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: 0.2,\n    offsetY: -0.7,\n    colorBack: 'hsla(0, 0%, 0%, 1)',\n    colors: ['hsl(0 0% 100% / 12%)', 'hsl(0 0% 100% / 24%)', 'hsl(0 0% 100% / 16%)'],\n    frequency: 1.2,\n    spotty: 0.25,\n    midSize: 1.1,\n    midIntensity: 0.75,\n    density: 0.79,\n    blending: 1,\n    speed: 0.5,\n    frame: 0,\n  },\n};\n\nexport const etherPreset: GodRaysPreset = {\n  name: 'Ether',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.6,\n    colorBack: 'hsl(226.7 50% 7.1% / 100%)',\n    colors: ['hsl(215 100% 53.9% / 65.1%)', 'hsl(214.4 85.9% 86.1% / 74.9%)', 'hsl(225 31.4% 20% / 100%)'],\n    frequency: 0.3,\n    spotty: 0.77,\n    midSize: 1.1,\n    midIntensity: 0.5,\n    density: 0.6,\n    blending: 0.6,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const godRaysPresets: GodRaysPreset[] = [defaultPreset, auroraPreset, warpPreset, linearPreset, etherPreset];\n\nexport const GodRays: React.FC<GodRaysProps> = memo(function GodRaysImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  frequency = defaultPreset.params.frequency,\n  spotty = defaultPreset.params.spotty,\n  midIntensity = defaultPreset.params.midIntensity,\n  midSize = defaultPreset.params.midSize,\n  density = defaultPreset.params.density,\n  blending = defaultPreset.params.blending,\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}: GodRaysProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_frequency: frequency,\n    u_spotty: spotty,\n    u_midIntensity: midIntensity,\n    u_midSize: midSize,\n    u_density: density,\n    u_blending: blending,\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 GodRaysUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={godRaysFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,16 @@
+import { type ShaderComponentProps } from '../shader-mount';
+import { type GrainGradientParams, type ShaderPreset } from '@paper-design/shaders';
+export interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {
+}
+type GrainGradientPreset = ShaderPreset<GrainGradientParams>;
+export declare const defaultPreset: GrainGradientPreset;
+export declare const dotsPreset: GrainGradientPreset;
+export declare const truchetPreset: GrainGradientPreset;
+export declare const cornersPreset: GrainGradientPreset;
+export declare const ripplePreset: GrainGradientPreset;
+export declare const blobPreset: GrainGradientPreset;
+export declare const spherePreset: GrainGradientPreset;
+export declare const moonPreset: GrainGradientPreset;
+export declare const grainGradientPresets: GrainGradientPreset[];
+export declare const GrainGradient: React.FC<GrainGradientProps>;
+export {};