@paper-design/shaders-react 0.0.28 → 0.0.30

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-grid.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  getShaderColorFromString,\n  dotGridFragmentShader,\n  DotGridShapes,\n  ShaderFitOptions,\n  type DotGridParams,\n  type DotGridUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\n\nexport interface DotGridProps extends ShaderComponentProps, DotGridParams {}\n\ntype DotGridPreset = ShaderPreset<DotGridParams>;\n\nexport const defaultPreset: DotGridPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 0%, 0%, 1)',\n    colorFill: 'hsla(0, 0%, 100%, 1)',\n    colorStroke: 'hsla(40, 100%, 50%, 1)',\n    dotSize: 2,\n    gridSpacingX: 50,\n    gridSpacingY: 50,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'circle',\n  },\n};\n\nexport const macrodataPreset: DotGridPreset = {\n  name: 'Macrodata',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(211, 37%, 13%, 1)',\n    colorFill: 'hsla(218, 100%, 67%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 1)',\n    dotSize: 3,\n    gridSpacingX: 25,\n    gridSpacingY: 25,\n    strokeWidth: 0,\n    sizeRange: 0.25,\n    opacityRange: 0.9,\n    shape: 'circle',\n  },\n};\n\nconst trianglesPreset: DotGridPreset = {\n  name: 'Triangles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 0%, 100%, 1)',\n    colorFill: 'hsla(0, 0%, 100%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, .5)',\n    dotSize: 5,\n    gridSpacingX: 32,\n    gridSpacingY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'triangle',\n  },\n};\n\nconst bubblesPreset: DotGridPreset = {\n  name: 'Bubbles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(234, 100%, 31%, .5)',\n    colorFill: 'hsla(100, 30%, 100%, 1)',\n    colorStroke: 'hsla(0, 100%, 0%, 1)',\n    dotSize: 28,\n    gridSpacingX: 60,\n    gridSpacingY: 60,\n    strokeWidth: 12,\n    sizeRange: 0.7,\n    opacityRange: 1.3,\n    shape: 'circle',\n  },\n};\n\nconst treeLinePreset: DotGridPreset = {\n  name: 'Tree line',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(100, 100%, 36%, .05)',\n    colorFill: 'hsla(150, 80%, 10%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 1)',\n    dotSize: 8,\n    gridSpacingX: 20,\n    gridSpacingY: 90,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0.6,\n    shape: 'circle',\n  },\n};\n\nconst diamondsPreset: DotGridPreset = {\n  name: 'Diamonds',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 0%, 0%, 0)',\n    colorFill: 'hsla(0, 100%, 50%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 1)',\n    dotSize: 15,\n    gridSpacingX: 30,\n    gridSpacingY: 30,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 2,\n    shape: 'diamond',\n  },\n};\n\nconst wallpaperPreset: DotGridPreset = {\n  name: 'Wallpaper',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(154, 33%, 19%, 1)',\n    colorFill: 'hsla(0, 0%, 0%, 0)',\n    colorStroke: 'hsla(36, 48%, 58%, 1)',\n    dotSize: 9,\n    gridSpacingX: 32,\n    gridSpacingY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'diamond',\n  },\n};\n\nconst matrixPreset: DotGridPreset = {\n  name: 'Enter the Matrix',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 100%, 0%, 1)',\n    colorFill: 'hsla(182, 100%, 64%, 1)',\n    colorStroke: 'hsla(0, 100%, 100%, 0)',\n    dotSize: 2,\n    gridSpacingX: 10,\n    gridSpacingY: 10,\n    strokeWidth: 0.5,\n    sizeRange: 0.25,\n    opacityRange: 1,\n    shape: 'triangle',\n  },\n};\n\nconst waveformPreset: DotGridPreset = {\n  name: 'Waveform',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: 'hsla(0, 100%, 100%, 1)',\n    colorFill: 'hsla(227, 93%, 38%, 1)',\n    colorStroke: 'hsla(0, 0%, 0%, 0)',\n    dotSize: 100,\n    gridSpacingX: 2,\n    gridSpacingY: 215,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0,\n    shape: 'square',\n  },\n};\n\nexport const dotGridPresets: DotGridPreset[] = [\n  defaultPreset,\n  macrodataPreset,\n  trianglesPreset,\n  bubblesPreset,\n  treeLinePreset,\n  diamondsPreset,\n  wallpaperPreset,\n  matrixPreset,\n  waveformPreset,\n];\n\nexport const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorFill = defaultPreset.params.colorFill,\n  colorStroke = defaultPreset.params.colorStroke,\n  dotSize = defaultPreset.params.dotSize,\n  gridSpacingX = defaultPreset.params.gridSpacingX,\n  gridSpacingY = defaultPreset.params.gridSpacingY,\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: dotSize,\n    u_gridSpacingX: gridSpacingX,\n    u_gridSpacingY: gridSpacingY,\n    u_strokeWidth: strokeWidth,\n    u_sizeRange: sizeRange,\n    u_opacityRange: opacityRange,\n    u_shape: DotGridShapes[shape],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies DotGridUniforms;\n\n  return (\n    <ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
+  "names": []
+}

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

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

package/dist/shaders/dot-orbit.js

@@ -0,0 +1,77 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount";
+import { colorPropsAreEqual } from "../color-props-are-equal";
+import {
+  getShaderColorFromString,
+  dotOrbitFragmentShader,
+  ShaderFitOptions,
+  defaultPatternSizing
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    speed: 2,
+    frame: 0,
+    colors: ["hsla(200, 100%, 20%, 1)", "hsla(290, 100%, 70%, 1)"],
+    dotSize: 1,
+    dotSizeRange: 0,
+    spreading: 1,
+    stepsPerColor: 1
+  }
+};
+const dotOrbitPresets = [defaultPreset];
+const DotOrbit = memo(function DotOrbitImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colors = defaultPreset.params.colors,
+  dotSize = defaultPreset.params.dotSize,
+  dotSizeRange = defaultPreset.params.dotSizeRange,
+  spreading = defaultPreset.params.spreading,
+  stepsPerColor = defaultPreset.params.stepsPerColor,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_dotSize: dotSize,
+    u_dotSizeRange: dotSizeRange,
+    u_spreading: spreading,
+    u_stepsPerColor: stepsPerColor,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: dotOrbitFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  DotOrbit,
+  defaultPreset,
+  dotOrbitPresets
+};
+//# sourceMappingURL=dot-orbit.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/dot-orbit.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  getShaderColorFromString,\n  dotOrbitFragmentShader,\n  ShaderFitOptions,\n  type DotOrbitParams,\n  type DotOrbitUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {}\n\ntype DotOrbitPreset = ShaderPreset<DotOrbitParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\n\nexport const defaultPreset: DotOrbitPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 2,\n    frame: 0,\n    colors: ['hsla(200, 100%, 20%, 1)', 'hsla(290, 100%, 70%, 1)'],\n    dotSize: 1,\n    dotSizeRange: 0,\n    spreading: 1,\n    stepsPerColor: 1,\n  },\n};\n\nexport const dotOrbitPresets: DotOrbitPreset[] = [defaultPreset];\n\nexport const DotOrbit: React.FC<DotOrbitProps> = memo(function DotOrbitImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  dotSize = defaultPreset.params.dotSize,\n  dotSizeRange = defaultPreset.params.dotSizeRange,\n  spreading = defaultPreset.params.spreading,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: DotOrbitProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_dotSize: dotSize,\n    u_dotSizeRange: dotSizeRange,\n    u_spreading: spreading,\n    u_stepsPerColor: stepsPerColor,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies DotOrbitUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={dotOrbitFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAsEH;AA5DG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,2BAA2B,yBAAyB;AAAA,IAC7D,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AACF;AAEO,MAAM,kBAAoC,CAAC,aAAa;AAExD,MAAM,WAAoC,KAAK,SAAS,aAAa;AAAA;AAAA,EAE1E,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,UAAU,cAAc,OAAO;AAAA,EAC/B,eAAe,cAAc,OAAO;AAAA,EACpC,YAAY,cAAc,OAAO;AAAA,EACjC,gBAAgB,cAAc,OAAO;AAAA;AAAA,EAGrC,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAkB;AAChB,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,iBAAiB;AAAA;AAAA,IAGjB,OAAO,iBAAiB,GAAG;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,wBAAwB,UAAoB;AAEpH,GAAG,kBAAkB;",
+  "names": []
+}

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

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

package/dist/shaders/god-rays.js

@@ -0,0 +1,160 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount";
+import { colorPropsAreEqual } from "../color-props-are-equal";
+import {
+  defaultObjectSizing,
+  getShaderColorFromString,
+  godRaysFragmentShader,
+  ShaderFitOptions
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultObjectSizing,
+    offsetX: -0.4,
+    offsetY: -0.4,
+    colorBack: "hsla(215, 100%, 11%, 1)",
+    colors: ["hsla(45, 100%, 70%, 1)", "hsla(10, 100%, 80%, 1)", "hsla(178, 100%, 83%, 1)"],
+    frequency: 6,
+    spotty: 0.28,
+    midIntensity: 1,
+    midSize: 3,
+    density: 0.3,
+    blending: 0,
+    speed: 1,
+    frame: 0
+  }
+};
+const auroraPreset = {
+  name: "Aurora",
+  params: {
+    ...defaultObjectSizing,
+    offsetY: 1,
+    colorBack: "hsla(0, 0%, 25%, 1)",
+    colors: ["hsla(239, 100%, 70%, 1)", "hsla(150, 100%, 70%, 1)", "hsla(200, 100%, 70%, 1)"],
+    frequency: 2.4,
+    spotty: 0.9,
+    midIntensity: 0.8,
+    midSize: 2.1,
+    density: 0.5,
+    blending: 1,
+    speed: 0.5,
+    frame: 0
+  }
+};
+const warpPreset = {
+  name: "Warp",
+  params: {
+    ...defaultObjectSizing,
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    colors: ["hsla(317, 100%, 50%, 1)", "hsla(25, 100%, 50%, 1)", "hsla(0, 0%, 100%, 1)"],
+    frequency: 1.2,
+    spotty: 0.15,
+    midIntensity: 0,
+    midSize: 0,
+    density: 0.79,
+    blending: 0.4,
+    speed: 2,
+    frame: 0
+  }
+};
+const linearPreset = {
+  name: "Linear",
+  params: {
+    ...defaultObjectSizing,
+    offsetX: 0.2,
+    offsetY: -0.7,
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    colors: ["hsl(0 0% 100% / 12%)", "hsl(0 0% 100% / 24%)", "hsl(0 0% 100% / 16%)"],
+    frequency: 1.2,
+    spotty: 0.25,
+    midSize: 1.1,
+    midIntensity: 0.75,
+    density: 0.79,
+    blending: 1,
+    speed: 0.5,
+    frame: 0
+  }
+};
+const etherPreset = {
+  name: "Ether",
+  params: {
+    ...defaultObjectSizing,
+    offsetX: -0.6,
+    colorBack: "hsl(226.7 50% 7.1% / 100%)",
+    colors: ["hsl(215 100% 53.9% / 65.1%)", "hsl(214.4 85.9% 86.1% / 74.9%)", "hsl(225 31.4% 20% / 100%)"],
+    frequency: 0.3,
+    spotty: 0.77,
+    midSize: 1.1,
+    midIntensity: 0.5,
+    density: 0.6,
+    blending: 0.6,
+    speed: 1,
+    frame: 0
+  }
+};
+const godRaysPresets = [defaultPreset, auroraPreset, warpPreset, linearPreset, etherPreset];
+const GodRays = memo(function GodRaysImpl({
+  // Own props
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
+  colors = defaultPreset.params.colors,
+  frequency = defaultPreset.params.frequency,
+  spotty = defaultPreset.params.spotty,
+  midIntensity = defaultPreset.params.midIntensity,
+  midSize = defaultPreset.params.midSize,
+  density = defaultPreset.params.density,
+  blending = defaultPreset.params.blending,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_frequency: frequency,
+    u_spotty: spotty,
+    u_midIntensity: midIntensity,
+    u_midSize: midSize,
+    u_density: density,
+    u_blending: blending,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: godRaysFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  GodRays,
+  auroraPreset,
+  defaultPreset,
+  etherPreset,
+  godRaysPresets,
+  linearPreset,
+  warpPreset
+};
+//# sourceMappingURL=god-rays.js.map

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

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

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

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

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