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

package/dist/shaders/color-panels.js

@@ -0,0 +1,173 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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 {
+  getShaderColorFromString,
+  colorPanelsFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0.5,
+    frame: 0,
+    colors: ["#ff9d00", "#fd4f30", "#809bff", "#6d2eff", "#333aff", "#f15cff", "#ffd557"],
+    colorBack: "#000000",
+    angle1: 0,
+    angle2: 0,
+    length: 1.1,
+    edges: false,
+    blur: 0,
+    fadeIn: 1,
+    fadeOut: 0.3,
+    gradient: 0,
+    density: 3,
+    scale: 0.8
+  }
+};
+const glassPreset = {
+  name: "Glass",
+  params: {
+    ...defaultObjectSizing,
+    rotation: 112,
+    speed: 1,
+    frame: 0,
+    colors: ["#00cfff", "#ff2d55", "#34c759", "#af52de"],
+    colorBack: "#ffffff00",
+    angle1: 0.3,
+    angle2: 0.3,
+    length: 1,
+    edges: true,
+    blur: 0.25,
+    fadeIn: 0.85,
+    fadeOut: 0.3,
+    gradient: 0,
+    density: 1.6
+  }
+};
+const gradientPreset = {
+  name: "Gradient",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0.5,
+    frame: 0,
+    colors: ["#f2ff00", "#00000000", "#00000000", "#5a0283", "#005eff"],
+    colorBack: "#8ffff2",
+    angle1: 0.4,
+    angle2: 0.4,
+    length: 3,
+    edges: false,
+    blur: 0.5,
+    fadeIn: 1,
+    fadeOut: 0.39,
+    gradient: 0.78,
+    density: 1.65,
+    scale: 1.72,
+    rotation: 270,
+    offsetX: 0.18
+  }
+};
+const openingPreset = {
+  name: "Opening",
+  params: {
+    ...defaultObjectSizing,
+    speed: 2,
+    frame: 0,
+    colors: ["#00ffff"],
+    colorBack: "#570044",
+    angle1: -1,
+    angle2: -1,
+    length: 0.52,
+    edges: false,
+    blur: 0,
+    fadeIn: 0,
+    fadeOut: 1,
+    gradient: 0,
+    density: 2.21,
+    scale: 2.32,
+    rotation: 360,
+    offsetX: -0.3,
+    offsetY: 0.6
+  }
+};
+const colorPanelsPresets = [defaultPreset, glassPreset, gradientPreset, openingPreset];
+const ColorPanels = memo(function ColorPanelsImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  colorBack = defaultPreset.params.colorBack,
+  angle1 = defaultPreset.params.angle1,
+  angle2 = defaultPreset.params.angle2,
+  length = defaultPreset.params.length,
+  edges = defaultPreset.params.edges,
+  blur = defaultPreset.params.blur,
+  fadeIn = defaultPreset.params.fadeIn,
+  fadeOut = defaultPreset.params.fadeOut,
+  density = defaultPreset.params.density,
+  gradient = defaultPreset.params.gradient,
+  // 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_colorBack: getShaderColorFromString(colorBack),
+    u_angle1: angle1,
+    u_angle2: angle2,
+    u_length: length,
+    u_edges: edges,
+    u_blur: blur,
+    u_fadeIn: fadeIn,
+    u_fadeOut: fadeOut,
+    u_density: density,
+    u_gradient: gradient,
+    // 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: colorPanelsFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  ColorPanels,
+  colorPanelsPresets,
+  defaultPreset,
+  glassPreset,
+  gradientPreset,
+  openingPreset
+};
+//# sourceMappingURL=color-panels.js.map

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

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

package/dist/shaders/dithering.d.ts

@@ -0,0 +1,16 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type DitheringParams, type ShaderPreset } from '@paper-design/shaders';
+export interface DitheringProps extends ShaderComponentProps, DitheringParams {
+    /** @deprecated use `size` instead */
+    pxSize?: number;
+}
+type DitheringPreset = ShaderPreset<DitheringParams>;
+export declare const defaultPreset: DitheringPreset;
+export declare const sinePreset: DitheringPreset;
+export declare const bugsPreset: DitheringPreset;
+export declare const ripplePreset: DitheringPreset;
+export declare const swirlPreset: DitheringPreset;
+export declare const warpPreset: DitheringPreset;
+export declare const ditheringPresets: DitheringPreset[];
+export declare const Dithering: React.FC<DitheringProps>;
+export {};

package/dist/shaders/dithering.js

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

@@ -0,0 +1,9 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+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 dotGridPresets: DotGridPreset[];
+export declare const DotGrid: React.FC<DotGridProps>;
+export {};

package/dist/shaders/dot-grid.js

@@ -0,0 +1,139 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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 {
+  getShaderColorFromString,
+  dotGridFragmentShader,
+  DotGridShapes,
+  ShaderFitOptions,
+  defaultPatternSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "#000000",
+    colorFill: "#ffffff",
+    colorStroke: "#ffaa00",
+    size: 2,
+    gapX: 32,
+    gapY: 32,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: "circle"
+  }
+};
+const trianglesPreset = {
+  name: "Triangles",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "#ffffff",
+    colorFill: "#ffffff",
+    colorStroke: "#808080",
+    size: 5,
+    gapX: 32,
+    gapY: 32,
+    strokeWidth: 1,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: "triangle"
+  }
+};
+const treeLinePreset = {
+  name: "Tree line",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "#f4fce7",
+    colorFill: "#052e19",
+    colorStroke: "#000000",
+    size: 8,
+    gapX: 20,
+    gapY: 90,
+    strokeWidth: 0,
+    sizeRange: 1,
+    opacityRange: 0.6,
+    shape: "circle"
+  }
+};
+const wallpaperPreset = {
+  name: "Wallpaper",
+  params: {
+    ...defaultPatternSizing,
+    colorBack: "#204030",
+    colorFill: "#000000",
+    colorStroke: "#bd955b",
+    size: 9,
+    gapX: 32,
+    gapY: 32,
+    strokeWidth: 1,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: "diamond"
+  }
+};
+const dotGridPresets = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];
+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
+};
+//# 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.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\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\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: '#000000',\n    colorFill: '#ffffff',\n    colorStroke: '#ffaa00',\n    size: 2,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'circle',\n  },\n};\n\nconst trianglesPreset: DotGridPreset = {\n  name: 'Triangles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#ffffff',\n    colorStroke: '#808080',\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 treeLinePreset: DotGridPreset = {\n  name: 'Tree line',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#f4fce7',\n    colorFill: '#052e19',\n    colorStroke: '#000000',\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 wallpaperPreset: DotGridPreset = {\n  name: 'Wallpaper',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#204030',\n    colorFill: '#000000',\n    colorStroke: '#bd955b',\n    size: 9,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'diamond',\n  },\n};\n\nexport const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];\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

@@ -0,0 +1,12 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+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 shinePreset: DotOrbitPreset;
+export declare const bubblesPreset: DotOrbitPreset;
+export declare const hallucinatoryPreset: DotOrbitPreset;
+export declare const dotOrbitPresets: DotOrbitPreset[];
+export declare const DotOrbit: React.FC<DotOrbitProps>;
+export {};