@paper-design/shaders-react 0.0.28 → 0.0.30

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 {};

package/dist/shaders/neuro-noise.js

@@ -0,0 +1,82 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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 {
+  defaultPatternSizing,
+  getShaderColorFromString,
+  neuroNoiseFragmentShader,
+  ShaderFitOptions
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    speed: 1,
+    frame: 0,
+    colorFront: "hsla(261, 100%, 82%, 1)",
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    brightness: 1.3
+  }
+};
+const marblePreset = {
+  name: "Marble",
+  params: {
+    ...defaultPatternSizing,
+    scale: 0.4,
+    speed: 0,
+    frame: 0,
+    colorFront: "hsla(230, 24%, 15%, 1)",
+    colorBack: "hsla(0, 0%, 97%, 1)",
+    brightness: 1.1
+  }
+};
+const neuroNoisePresets = [defaultPreset, marblePreset];
+const NeuroNoise = memo(function NeuroNoiseImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colorFront = defaultPreset.params.colorFront,
+  colorBack = defaultPreset.params.colorBack,
+  brightness = defaultPreset.params.brightness,
+  // 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_colorFront: getShaderColorFromString(colorFront),
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_brightness: brightness,
+    // 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: neuroNoiseFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  NeuroNoise,
+  defaultPreset,
+  neuroNoisePresets
+};
+//# sourceMappingURL=neuro-noise.js.map

package/dist/shaders/neuro-noise.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/neuro-noise.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  defaultPatternSizing,\n  getShaderColorFromString,\n  neuroNoiseFragmentShader,\n  ShaderFitOptions,\n  type NeuroNoiseParams,\n  type NeuroNoiseUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface NeuroNoiseProps extends ShaderComponentProps, NeuroNoiseParams {}\n\ntype NeuroNoisePreset = ShaderPreset<NeuroNoiseParams>;\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: NeuroNoisePreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorFront: 'hsla(261, 100%, 82%, 1)',\n    colorBack: 'hsla(0, 0%, 0%, 1)',\n    brightness: 1.3,\n  },\n};\n\nconst marblePreset: NeuroNoisePreset = {\n  name: 'Marble',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.4,\n    speed: 0,\n    frame: 0,\n    colorFront: 'hsla(230, 24%, 15%, 1)',\n    colorBack: 'hsla(0, 0%, 97%, 1)',\n    brightness: 1.1,\n  },\n};\n\nexport const neuroNoisePresets: NeuroNoisePreset[] = [defaultPreset, marblePreset] as const;\n\nexport const NeuroNoise: React.FC<NeuroNoiseProps> = memo(function NeuroNoiseImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  brightness = defaultPreset.params.brightness,\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}: NeuroNoiseProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_brightness: brightness,\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 NeuroNoiseUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={neuroNoiseFragmentShader} 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;AA4EH;AAlEG,MAAM,gBAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAEA,MAAM,eAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAEO,MAAM,oBAAwC,CAAC,eAAe,YAAY;AAE1E,MAAM,aAAwC,KAAK,SAAS,eAAe;AAAA;AAAA,EAEhF,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,aAAa,cAAc,OAAO;AAAA,EAClC,YAAY,cAAc,OAAO;AAAA,EACjC,aAAa,cAAc,OAAO;AAAA;AAAA,EAGlC,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,GAAoB;AAClB,QAAM,WAAW;AAAA;AAAA,IAEf,cAAc,yBAAyB,UAAU;AAAA,IACjD,aAAa,yBAAyB,SAAS;AAAA,IAC/C,cAAc;AAAA;AAAA,IAGd,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,0BAA0B,UAAoB;AAEtH,GAAG,kBAAkB;",
+  "names": []
+}

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

@@ -1,19 +1,8 @@
-import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
-export type PerlinNoiseParams = {
-    scale?: number;
-    color?: string;
-    proportion?: number;
-    softness?: number;
-    octaveCount?: number;
-    persistence?: number;
-    lacunarity?: number;
-} & GlobalParams;
-export type PerlinNoiseProps = Omit<ShaderMountProps, 'fragmentShader'> & PerlinNoiseParams;
-type PerlinNoisePreset = {
-    name: string;
-    params: Required<PerlinNoiseParams>;
-    style?: React.CSSProperties;
-};
+import { type ShaderComponentProps } from '../shader-mount';
+import { type PerlinNoiseParams, type ShaderPreset } from '@paper-design/shaders';
+export interface PerlinNoiseProps extends ShaderComponentProps, PerlinNoiseParams {
+}
+type PerlinNoisePreset = ShaderPreset<PerlinNoiseParams>;
 export declare const defaultPreset: PerlinNoisePreset;
 export declare const nintendoWaterPreset: PerlinNoisePreset;
 export declare const colonyPreset: PerlinNoisePreset;
@@ -21,5 +10,5 @@ export declare const phosphenesPreset: PerlinNoisePreset;
 export declare const mossPreset: PerlinNoisePreset;
 export declare const wormsPreset: PerlinNoisePreset;
 export declare const perlinNoisePresets: PerlinNoisePreset[];
-export declare const PerlinNoise: ({ scale, color, proportion, softness, octaveCount, persistence, lacunarity, ...props }: PerlinNoiseProps) => React.ReactElement;
+export declare const PerlinNoise: React.FC<PerlinNoiseProps>;
 export {};