@paper-design/shaders-react 0.0.29 → 0.0.31

package/dist/shaders/grain-gradient.js

@@ -0,0 +1,197 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount";
+import {
+  getShaderColorFromString,
+  grainGradientFragmentShader,
+  ShaderFitOptions,
+  defaultPatternSizing,
+  defaultObjectSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(210, 100%, 3%, 1)", "hsla(32, 89%, 40%, 1)", "hsla(46, 60%, 60%, 1)", "hsla(39, 28%, 81%, 1)"],
+    softness: 0.7,
+    intensity: 0.15,
+    noise: 0.5,
+    shape: 1
+  }
+};
+const dotsPreset = {
+  name: "Dots",
+  params: {
+    ...defaultPatternSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(0, 100%, 2%, 1)", "hsla(0, 100%, 22%, 1)", "hsla(210, 100%, 50%, 1)", "hsla(48, 52%, 90%, 1)"],
+    softness: 0.75,
+    intensity: 0.15,
+    noise: 0.7,
+    shape: 2
+  }
+};
+const truchetPreset = {
+  name: "Truchet",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(0, 100%, 2%, 1)", "hsla(24, 100%, 22%, 1)", "hsla(35, 85%, 69%, 1)", "hsla(100, 52%, 45%, 1)"],
+    softness: 0,
+    intensity: 0.2,
+    noise: 1,
+    shape: 3
+  }
+};
+const cornersPreset = {
+  name: "Corners",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(210, 80%, 6%, 1)", "hsla(200, 100%, 40%, 1)", "hsla(170, 100%, 50%, 1)", "hsla(50, 100%, 50%, 1)"],
+    softness: 0.4,
+    intensity: 0.35,
+    noise: 0.35,
+    shape: 4
+  }
+};
+const ripplePreset = {
+  name: "Ripple",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.5,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(30, 100%, 4%, 1)", "hsla(25, 100%, 22%, 1)", "hsla(140, 70%, 70%, 1)", "hsla(4305, 64%, 11%, 1)"],
+    softness: 0.5,
+    intensity: 0.5,
+    noise: 0.5,
+    shape: 5
+  }
+};
+const blobPreset = {
+  name: "Blob",
+  params: {
+    ...defaultObjectSizing,
+    scale: 1.3,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(240, 30%, 8%, 1)", "hsla(200, 30%, 35%, 1)", "hsla(50, 30%, 55%, 1)", "hsla(90, 25%, 45%, 1)"],
+    softness: 0,
+    intensity: 0.15,
+    noise: 0.5,
+    shape: 6
+  }
+};
+const spherePreset = {
+  name: "Sphere",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(230, 100%, 5%, 1)", "hsla(210, 100%, 35%, 1)", "hsla(180, 95%, 60%, 1)", "hsla(130, 80%, 45%, 1)"],
+    softness: 1,
+    intensity: 0.15,
+    noise: 0.5,
+    shape: 7
+  }
+};
+const moonPreset = {
+  name: "Moon",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.6,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(0, 0%, 0%, 1)", "hsla(0, 0%, 0%, 1)", "hsla(240, 8%, 17%, 1)", "hsla(40, 100%, 90%, 1)"],
+    softness: 1,
+    intensity: 0.56,
+    noise: 1,
+    shape: 7
+  }
+};
+const grainGradientPresets = [
+  cornersPreset,
+  defaultPreset,
+  dotsPreset,
+  truchetPreset,
+  ripplePreset,
+  blobPreset,
+  spherePreset,
+  moonPreset
+];
+const GrainGradient = memo(function GrainGradientImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  softness = defaultPreset.params.softness,
+  intensity = defaultPreset.params.intensity,
+  noise = defaultPreset.params.noise,
+  shape = defaultPreset.params.shape,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_softness: softness,
+    u_intensity: intensity,
+    u_noise: noise,
+    u_shape: shape,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: grainGradientFragmentShader,
+      uniforms
+    }
+  );
+});
+export {
+  GrainGradient,
+  blobPreset,
+  cornersPreset,
+  defaultPreset,
+  dotsPreset,
+  grainGradientPresets,
+  moonPreset,
+  ripplePreset,
+  spherePreset,
+  truchetPreset
+};
+//# sourceMappingURL=grain-gradient.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/grain-gradient.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n  getShaderColorFromString,\n  grainGradientFragmentShader,\n  ShaderFitOptions,\n  type GrainGradientUniforms,\n  type GrainGradientParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\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: GrainGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(210, 100%, 3%, 1)', 'hsla(32, 89%, 40%, 1)', 'hsla(46, 60%, 60%, 1)', 'hsla(39, 28%, 81%, 1)'],\n    softness: 0.7,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 1,\n  },\n};\n\nexport const dotsPreset: GrainGradientPreset = {\n  name: 'Dots',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(0, 100%, 2%, 1)', 'hsla(0, 100%, 22%, 1)', 'hsla(210, 100%, 50%, 1)', 'hsla(48, 52%, 90%, 1)'],\n    softness: 0.75,\n    intensity: 0.15,\n    noise: 0.7,\n    shape: 2,\n  },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n  name: 'Truchet',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(0, 100%, 2%, 1)', 'hsla(24, 100%, 22%, 1)', 'hsla(35, 85%, 69%, 1)', 'hsla(100, 52%, 45%, 1)'],\n    softness: 0,\n    intensity: 0.2,\n    noise: 1,\n    shape: 3,\n  },\n};\n\nexport const cornersPreset: GrainGradientPreset = {\n  name: 'Corners',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(210, 80%, 6%, 1)', 'hsla(200, 100%, 40%, 1)', 'hsla(170, 100%, 50%, 1)', 'hsla(50, 100%, 50%, 1)'],\n    softness: 0.4,\n    intensity: 0.35,\n    noise: 0.35,\n    shape: 4,\n  },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.5,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(30, 100%, 4%, 1)', 'hsla(25, 100%, 22%, 1)', 'hsla(140, 70%, 70%, 1)', 'hsla(4305, 64%, 11%, 1)'],\n    softness: 0.5,\n    intensity: 0.5,\n    noise: 0.5,\n    shape: 5,\n  },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n  name: 'Blob',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1.3,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(240, 30%, 8%, 1)', 'hsla(200, 30%, 35%, 1)', 'hsla(50, 30%, 55%, 1)', 'hsla(90, 25%, 45%, 1)'],\n    softness: 0,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 6,\n  },\n};\n\nexport const spherePreset: GrainGradientPreset = {\n  name: 'Sphere',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(230, 100%, 5%, 1)', 'hsla(210, 100%, 35%, 1)', 'hsla(180, 95%, 60%, 1)', 'hsla(130, 80%, 45%, 1)'],\n    softness: 1,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 7,\n  },\n};\n\nexport const moonPreset: GrainGradientPreset = {\n  name: 'Moon',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(0, 0%, 0%, 1)', 'hsla(0, 0%, 0%, 1)', 'hsla(240, 8%, 17%, 1)', 'hsla(40, 100%, 90%, 1)'],\n    softness: 1,\n    intensity: 0.56,\n    noise: 1,\n    shape: 7,\n  },\n};\n\nexport const grainGradientPresets: GrainGradientPreset[] = [\n  cornersPreset,\n  defaultPreset,\n  dotsPreset,\n  truchetPreset,\n  ripplePreset,\n  blobPreset,\n  spherePreset,\n  moonPreset,\n];\n\nexport const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  softness = defaultPreset.params.softness,\n  intensity = defaultPreset.params.intensity,\n  noise = defaultPreset.params.noise,\n  shape = defaultPreset.params.shape,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_softness: softness,\n    u_intensity: intensity,\n    u_noise: noise,\n    u_shape: 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 GrainGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={grainGradientFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,9 @@
+import { type ShaderComponentProps } from '../shader-mount';
+import { type LiquidMetalParams, type ShaderPreset } from '@paper-design/shaders';
+export interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {
+}
+type LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;
+export declare const defaultPreset: LiquidMetalPreset;
+export declare const liquidMetalPresets: LiquidMetalPreset[];
+export declare const LiquidMetal: React.FC<LiquidMetalProps>;
+export {};

package/dist/shaders/liquid-metal.js

@@ -0,0 +1,87 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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,
+  liquidMetalFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    patternBlur: 5e-3,
+    patternScale: 3,
+    dispersion: 0.015,
+    liquid: 0.07,
+    shape: 0,
+    worldWidth: 0,
+    worldHeight: 0
+  }
+};
+const liquidMetalPresets = [defaultPreset];
+const LiquidMetal = memo(function LiquidMetalImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  patternBlur = defaultPreset.params.patternBlur,
+  patternScale = defaultPreset.params.patternScale,
+  dispersion = defaultPreset.params.dispersion,
+  liquid = defaultPreset.params.liquid,
+  shape = defaultPreset.params.shape,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_patternBlur: patternBlur,
+    u_patternScale: patternScale,
+    u_dispersion: dispersion,
+    u_liquid: liquid,
+    u_shape: shape,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: liquidMetalFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  LiquidMetal,
+  defaultPreset,
+  liquidMetalPresets
+};
+//# sourceMappingURL=liquid-metal.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/liquid-metal.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  getShaderColorFromString,\n  liquidMetalFragmentShader,\n  ShaderFitOptions,\n  type LiquidMetalUniforms,\n  type LiquidMetalParams,\n  type ShaderPreset,\n  defaultObjectSizing,\n} from '@paper-design/shaders';\n\nexport interface LiquidMetalProps extends ShaderComponentProps, LiquidMetalParams {}\n\ntype LiquidMetalPreset = ShaderPreset<LiquidMetalParams>;\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: LiquidMetalPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    patternBlur: 0.005,\n    patternScale: 3,\n    dispersion: 0.015,\n    liquid: 0.07,\n    shape: 0,\n    worldWidth: 0,\n    worldHeight: 0,\n  },\n};\n\nexport const liquidMetalPresets: LiquidMetalPreset[] = [defaultPreset];\n\nexport const LiquidMetal: React.FC<LiquidMetalProps> = memo(function LiquidMetalImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  patternBlur = defaultPreset.params.patternBlur,\n  patternScale = defaultPreset.params.patternScale,\n  dispersion = defaultPreset.params.dispersion,\n  liquid = defaultPreset.params.liquid,\n  shape = defaultPreset.params.shape,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: LiquidMetalProps) {\n  const uniforms = {\n    // Own uniforms\n    u_patternBlur: patternBlur,\n    u_patternScale: patternScale,\n    u_dispersion: dispersion,\n    u_liquid: liquid,\n    u_shape: shape,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies LiquidMetalUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={liquidMetalFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAuEH;AA7DG,MAAM,gBAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF;AAEO,MAAM,qBAA0C,CAAC,aAAa;AAE9D,MAAM,cAA0C,KAAK,SAAS,gBAAgB;AAAA;AAAA,EAEnF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,cAAc,cAAc,OAAO;AAAA,EACnC,eAAe,cAAc,OAAO;AAAA,EACpC,aAAa,cAAc,OAAO;AAAA,EAClC,SAAS,cAAc,OAAO;AAAA,EAC9B,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,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,GAAqB;AACnB,QAAM,WAAW;AAAA;AAAA,IAEf,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,UAAU;AAAA,IACV,SAAS;AAAA;AAAA,IAGT,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;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
+  "names": []
+}

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

@@ -1,19 +1,11 @@
-import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
-export type MeshGradientParams = {
-    color1?: string;
-    color2?: string;
-    color3?: string;
-    color4?: string;
-} & GlobalParams;
-export type MeshGradientProps = Omit<ShaderMountProps, 'fragmentShader'> & MeshGradientParams;
-type MeshGradientPreset = {
-    name: string;
-    params: Required<MeshGradientParams>;
-    style?: React.CSSProperties;
-};
+import { type ShaderComponentProps } from '../shader-mount';
+import { type MeshGradientParams, type ShaderPreset } from '@paper-design/shaders';
+export interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {
+}
+type MeshGradientPreset = ShaderPreset<MeshGradientParams>;
 export declare const defaultPreset: MeshGradientPreset;
+export declare const purplePreset: MeshGradientPreset;
 export declare const beachPreset: MeshGradientPreset;
-export declare const fadedPreset: MeshGradientPreset;
 export declare const meshGradientPresets: MeshGradientPreset[];
-export declare const MeshGradient: ({ color1, color2, color3, color4, ...props }: MeshGradientProps) => React.ReactElement;
+export declare const MeshGradient: React.FC<MeshGradientProps>;
 export {};

package/dist/shaders/mesh-gradient.js

@@ -0,0 +1,104 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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,
+  meshGradientFragmentShader,
+  ShaderFitOptions
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 4e4,
+    colors: ["hsla(259, 100%, 50%, 1)", "hsla(150, 100%, 50%, 1)", "hsla(48, 100%, 50%, 1)", "hsla(295, 100%, 50%, 1)"],
+    distortion: 0.8,
+    swirl: 0.1
+  }
+};
+const purplePreset = {
+  name: "Purple",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0.6,
+    frame: 100,
+    colors: ["hsla(259, 29%, 73%, 1)", "hsla(263, 57%, 39%, 1)", "hsla(48, 73%, 84%, 1)", "hsla(295, 32%, 70%, 1)"],
+    distortion: 0.3,
+    swirl: 0.5
+  }
+};
+const beachPreset = {
+  name: "Beach",
+  params: {
+    ...defaultObjectSizing,
+    speed: 0.1,
+    frame: 0,
+    colors: ["hsla(186, 81%, 83%, 1)", "hsla(198, 55%, 68%, 1)", "hsla(53, 67%, 88%, 1)", "hsla(45, 93%, 73%, 1)"],
+    distortion: 0.8,
+    swirl: 0.35
+  }
+};
+const meshGradientPresets = [defaultPreset, purplePreset, beachPreset];
+const MeshGradient = memo(function MeshGradientImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  distortion = defaultPreset.params.distortion,
+  swirl = defaultPreset.params.swirl,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  rotation = defaultPreset.params.rotation,
+  scale = defaultPreset.params.scale,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_distortion: distortion,
+    u_swirl: swirl,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_rotation: rotation,
+    u_scale: scale,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(
+    ShaderMount,
+    {
+      ...props,
+      speed,
+      frame,
+      fragmentShader: meshGradientFragmentShader,
+      uniforms
+    }
+  );
+}, colorPropsAreEqual);
+export {
+  MeshGradient,
+  beachPreset,
+  defaultPreset,
+  meshGradientPresets,
+  purplePreset
+};
+//# sourceMappingURL=mesh-gradient.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/mesh-gradient.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  meshGradientFragmentShader,\n  ShaderFitOptions,\n  type MeshGradientParams,\n  type MeshGradientUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MeshGradientProps extends ShaderComponentProps, MeshGradientParams {}\n\ntype MeshGradientPreset = ShaderPreset<MeshGradientParams>;\n\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: MeshGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 40000,\n    colors: ['hsla(259, 100%, 50%, 1)', 'hsla(150, 100%, 50%, 1)', 'hsla(48, 100%, 50%, 1)', 'hsla(295, 100%, 50%, 1)'],\n    distortion: 0.8,\n    swirl: 0.1,\n  },\n};\n\nexport const purplePreset: MeshGradientPreset = {\n  name: 'Purple',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.6,\n    frame: 100,\n    colors: ['hsla(259, 29%, 73%, 1)', 'hsla(263, 57%, 39%, 1)', 'hsla(48, 73%, 84%, 1)', 'hsla(295, 32%, 70%, 1)'],\n    distortion: 0.3,\n    swirl: 0.5,\n  },\n};\n\nexport const beachPreset: MeshGradientPreset = {\n  name: 'Beach',\n  params: {\n    ...defaultObjectSizing,\n    speed: 0.1,\n    frame: 0,\n    colors: ['hsla(186, 81%, 83%, 1)', 'hsla(198, 55%, 68%, 1)', 'hsla(53, 67%, 88%, 1)', 'hsla(45, 93%, 73%, 1)'],\n    distortion: 0.8,\n    swirl: 0.35,\n  },\n};\n\nexport const meshGradientPresets: MeshGradientPreset[] = [defaultPreset, purplePreset, beachPreset];\n\nexport const MeshGradient: React.FC<MeshGradientProps> = memo(function MeshGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  distortion = defaultPreset.params.distortion,\n  swirl = defaultPreset.params.swirl,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: MeshGradientProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_distortion: distortion,\n    u_swirl: swirl,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies MeshGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={meshGradientFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAwFH;AA9EG,MAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,2BAA2B,2BAA2B,0BAA0B,yBAAyB;AAAA,IAClH,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,eAAmC;AAAA,EAC9C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,0BAA0B,0BAA0B,yBAAyB,wBAAwB;AAAA,IAC9G,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,cAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,0BAA0B,0BAA0B,yBAAyB,uBAAuB;AAAA,IAC7G,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAA4C,CAAC,eAAe,cAAc,WAAW;AAE3F,MAAM,eAA4C,KAAK,SAAS,iBAAiB;AAAA;AAAA,EAEtF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,aAAa,cAAc,OAAO;AAAA,EAClC,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAsB;AACpB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,cAAc;AAAA,IACd,SAAS;AAAA;AAAA,IAGT,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
+  "names": []
+}

package/dist/shaders/metaballs.d.ts

@@ -1,19 +1,9 @@
-import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
-export type MetaballsParams = {
-    scale?: number;
-    color1?: string;
-    color2?: string;
-    color3?: string;
-    ballSize?: number;
-    visibilityRange?: number;
-} & GlobalParams;
-export type MetaballsProps = Omit<ShaderMountProps, 'fragmentShader'> & MetaballsParams;
-type MetaballsPreset = {
-    name: string;
-    params: Required<MetaballsParams>;
-    style?: React.CSSProperties;
-};
+import { type ShaderComponentProps } from '../shader-mount';
+import { type MetaballsParams, type ShaderPreset } from '@paper-design/shaders';
+export interface MetaballsProps extends ShaderComponentProps, MetaballsParams {
+}
+type MetaballsPreset = ShaderPreset<MetaballsParams>;
 export declare const defaultPreset: MetaballsPreset;
 export declare const metaballsPresets: MetaballsPreset[];
-export declare const Metaballs: ({ scale, color1, color2, color3, ballSize, visibilityRange, ...props }: MetaballsProps) => React.ReactElement;
+export declare const Metaballs: React.FC<MetaballsProps>;
 export {};

package/dist/shaders/metaballs.js

@@ -0,0 +1,72 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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,
+  metaballsFragmentShader,
+  ShaderFitOptions
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    scale: 1,
+    speed: 1,
+    frame: 0,
+    colors: ["hsla(259, 100%, 80%, 1)", "hsla(150, 100%, 80%, 1)", "hsla(48, 100%, 80%, 1)", "hsla(295, 100%, 80%, 1)"],
+    count: 7,
+    size: 1
+  }
+};
+const metaballsPresets = [defaultPreset];
+const Metaballs = memo(function MetaballsImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  size = defaultPreset.params.size,
+  count = defaultPreset.params.count,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  rotation = defaultPreset.params.rotation,
+  scale = defaultPreset.params.scale,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_size: size,
+    u_count: count,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_rotation: rotation,
+    u_scale: scale,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: metaballsFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  Metaballs,
+  defaultPreset,
+  metaballsPresets
+};
+//# sourceMappingURL=metaballs.js.map

package/dist/shaders/metaballs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/metaballs.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  metaballsFragmentShader,\n  ShaderFitOptions,\n  type MetaballsParams,\n  type MetaballsUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface MetaballsProps extends ShaderComponentProps, MetaballsParams {}\n\ntype MetaballsPreset = ShaderPreset<MetaballsParams>;\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: MetaballsPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(259, 100%, 80%, 1)', 'hsla(150, 100%, 80%, 1)', 'hsla(48, 100%, 80%, 1)', 'hsla(295, 100%, 80%, 1)'],\n    count: 7,\n    size: 1,\n  },\n};\n\nexport const metaballsPresets: MetaballsPreset[] = [defaultPreset];\n\nexport const Metaballs: React.FC<MetaballsProps> = memo(function MetaballsImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  size = defaultPreset.params.size,\n  count = defaultPreset.params.count,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  rotation = defaultPreset.params.rotation,\n  scale = defaultPreset.params.scale,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: MetaballsProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_size: size,\n    u_count: count,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_rotation: rotation,\n    u_scale: scale,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies MetaballsUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={metaballsFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAiEH;AAvDG,MAAM,gBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,2BAA2B,2BAA2B,0BAA0B,yBAAyB;AAAA,IAClH,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,mBAAsC,CAAC,aAAa;AAE1D,MAAM,YAAsC,KAAK,SAAS,cAAc;AAAA;AAAA,EAE7E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,OAAO,cAAc,OAAO;AAAA,EAC5B,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAmB;AACjB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,IAGT,OAAO,iBAAiB,GAAG;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,yBAAyB,UAAoB;AAErH,GAAG,kBAAkB;",
+  "names": []
+}

package/dist/shaders/neuro-noise.d.ts

@@ -1,17 +1,9 @@
-import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
-export type NeuroNoiseParams = {
-    scale?: number;
-    colorFront?: string;
-    colorBack?: string;
-    brightness?: number;
-} & GlobalParams;
-export type NeuroNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & NeuroNoiseParams;
-type NeuroNoisePreset = {
-    name: string;
-    params: Required<NeuroNoiseParams>;
-    style?: React.CSSProperties;
-};
+import { type ShaderComponentProps } from '../shader-mount';
+import { type NeuroNoiseParams, type ShaderPreset } from '@paper-design/shaders';
+export interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {
+}
+type NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;
 export declare const defaultPreset: NeuroNoisePreset;
 export declare const neuroNoisePresets: NeuroNoisePreset[];
-export declare const NeuroNoise: ({ scale, colorFront, colorBack, brightness, ...props }: NeuroNoiseProps) => React.ReactElement;
+export declare const NeuroNoise: React.FC<NeuroNoiseProps>;
 export {};