@paper-design/shaders-react 0.0.29 → 0.0.30

package/dist/index.js

@@ -1,1901 +1,90 @@
-/***** Paper Shaders: https://github.com/paper-design/shaders *****/
-
-// packages/shaders-react/src/shader-mount.tsx
-import { useEffect, useRef as useRef2, forwardRef, useState } from "react";
-import { ShaderMount as ShaderMountVanilla } from "@paper-design/shaders";
-
-// packages/shaders-react/src/use-merge-refs.ts
-import * as React from "react";
-function useMergeRefs(refs) {
-  const cleanupRef = React.useRef(void 0);
-  const refEffect = React.useCallback((instance) => {
-    const cleanups = refs.map((ref) => {
-      if (ref == null) {
-        return;
-      }
-      if (typeof ref === "function") {
-        const refCallback = ref;
-        const refCleanup = refCallback(instance);
-        return typeof refCleanup === "function" ? refCleanup : () => {
-          refCallback(null);
-        };
-      }
-      ref.current = instance;
-      return () => {
-        ref.current = null;
-      };
-    });
-    return () => {
-      cleanups.forEach((refCleanup) => refCleanup?.());
-    };
-  }, refs);
-  return React.useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null;
-    }
-    return (value) => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = void 0;
-      }
-      if (value != null) {
-        cleanupRef.current = refEffect(value);
-      }
-    };
-  }, refs);
-}
-
-// packages/shaders-react/src/shader-mount.tsx
-import { jsx } from "react/jsx-runtime";
-var processUniforms = (uniforms) => {
-  const processedUniforms = {};
-  const imageLoadPromises = [];
-  const isValidUrl = (url) => {
-    try {
-      if (url.startsWith("/")) return true;
-      new URL(url);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-  const isExternalUrl = (url) => {
-    try {
-      if (url.startsWith("/")) return false;
-      const urlObject = new URL(url, window.location.origin);
-      return urlObject.origin !== window.location.origin;
-    } catch {
-      return false;
-    }
-  };
-  Object.entries(uniforms).forEach(([key, value]) => {
-    if (typeof value === "string") {
-      if (!isValidUrl(value)) {
-        console.warn(`Uniform "${key}" has invalid URL "${value}". Skipping image loading.`);
-        return;
-      }
-      const imagePromise = new Promise((resolve, reject) => {
-        const img = new Image();
-        if (isExternalUrl(value)) {
-          img.crossOrigin = "anonymous";
-        }
-        img.onload = () => {
-          processedUniforms[key] = img;
-          resolve();
-        };
-        img.onerror = () => {
-          console.error(`Could not set uniforms. Failed to load image at ${value}`);
-          reject();
-        };
-        img.src = value;
-      });
-      imageLoadPromises.push(imagePromise);
-    } else {
-      processedUniforms[key] = value;
-    }
-  });
-  return Promise.all(imageLoadPromises).then(() => processedUniforms);
-};
-var ShaderMount = forwardRef(
-  function ShaderMountImpl({
-    shaderMountRef: externalShaderMountRef,
-    fragmentShader,
-    uniforms = {},
-    webGlContextAttributes,
-    speed = 1,
-    frame = 0,
-    ...divProps
-  }, forwardedRef) {
-    const [isInitialized, setIsInitialized] = useState(false);
-    const divRef = useRef2(null);
-    const shaderMountRef = useRef2(null);
-    useEffect(() => {
-      const initShader = async () => {
-        const processedUniforms = await processUniforms(uniforms);
-        if (divRef.current && !shaderMountRef.current) {
-          shaderMountRef.current = new ShaderMountVanilla(
-            divRef.current,
-            fragmentShader,
-            processedUniforms,
-            webGlContextAttributes,
-            speed,
-            frame
-          );
-          if (externalShaderMountRef) {
-            externalShaderMountRef.current = shaderMountRef.current;
-          }
-          setIsInitialized(true);
-        }
-      };
-      initShader();
-      return () => {
-        shaderMountRef.current?.dispose();
-        shaderMountRef.current = null;
-      };
-    }, [fragmentShader, webGlContextAttributes]);
-    useEffect(() => {
-      const updateUniforms = async () => {
-        const processedUniforms = await processUniforms(uniforms);
-        shaderMountRef.current?.setUniforms(processedUniforms);
-      };
-      updateUniforms();
-    }, [uniforms, isInitialized]);
-    useEffect(() => {
-      shaderMountRef.current?.setSpeed(speed);
-    }, [speed, isInitialized]);
-    useEffect(() => {
-      shaderMountRef.current?.setFrame(frame);
-    }, [frame, isInitialized]);
-    return /* @__PURE__ */ jsx("div", { ref: useMergeRefs([divRef, forwardedRef]), ...divProps });
-  }
-);
-ShaderMount.displayName = "ShaderMount";
-
-// packages/shaders-react/src/shaders/mesh-gradient.tsx
-import { useMemo as useMemo2 } from "react";
-import { getShaderColorFromString, meshGradientFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var defaultPreset = {
-  name: "Default",
-  params: {
-    speed: 0.15,
-    frame: 0,
-    color1: "hsla(259, 29%, 73%, 1)",
-    color2: "hsla(263, 57%, 39%, 1)",
-    color3: "hsla(48, 73%, 84%, 1)",
-    color4: "hsla(295, 32%, 70%, 1)"
-  }
-};
-var beachPreset = {
-  name: "Beach",
-  params: {
-    speed: 0.1,
-    frame: 0,
-    color1: "hsla(186, 81%, 83%, 1)",
-    color2: "hsla(198, 55%, 68%, 1)",
-    color3: "hsla(53, 67%, 88%, 1)",
-    color4: "hsla(45, 93%, 73%, 1)"
-  }
-};
-var fadedPreset = {
-  name: "Faded",
-  params: {
-    speed: -0.3,
-    frame: 0,
-    color1: "hsla(186, 41%, 90%, 1)",
-    color2: "hsla(208, 71%, 85%, 1)",
-    color3: "hsla(183, 51%, 92%, 1)",
-    color4: "hsla(201, 72%, 90%, 1)"
-  }
-};
-var meshGradientPresets = [defaultPreset, beachPreset, fadedPreset];
-var MeshGradient = ({ color1, color2, color3, color4, ...props }) => {
-  const uniforms = useMemo2(() => {
-    return {
-      u_color1: getShaderColorFromString(color1, defaultPreset.params.color1),
-      u_color2: getShaderColorFromString(color2, defaultPreset.params.color2),
-      u_color3: getShaderColorFromString(color3, defaultPreset.params.color3),
-      u_color4: getShaderColorFromString(color4, defaultPreset.params.color4)
-    };
-  }, [color1, color2, color3, color4]);
-  return /* @__PURE__ */ jsx2(ShaderMount, { ...props, fragmentShader: meshGradientFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/smoke-ring.tsx
-import { useMemo as useMemo3 } from "react";
-import { getShaderColorFromString as getShaderColorFromString2, smokeRingFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var defaultPreset2 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    speed: 0.5,
-    frame: 0,
-    colorInner: "hsla(0, 0%, 100%, 1)",
-    colorOuter: "hsla(38, 4%, 38%, 1)",
-    noiseScale: 1,
-    thickness: 0.5
-  }
-};
-var cloudPreset = {
-  name: "Cloud",
-  params: {
-    scale: 1,
-    speed: 1,
-    frame: 0,
-    colorInner: "hsla(0, 0%, 100%, 1)",
-    colorOuter: "hsla(0, 0%, 100%, 1)",
-    noiseScale: 1.8,
-    thickness: 0.7
-  },
-  style: {
-    background: "hsla(218, 100%, 62%, 1)"
-  }
-};
-var firePreset = {
-  name: "Fire",
-  params: {
-    scale: 1,
-    speed: 4,
-    frame: 0,
-    colorInner: "hsla(40, 100%, 50%, 1)",
-    colorOuter: "hsla(0, 100%, 50%, 1)",
-    noiseScale: 1.4,
-    thickness: 0.35
-  },
-  style: {
-    background: "hsla(20, 100%, 5%, 1)"
-  }
-};
-var electricPreset = {
-  name: "Electric",
-  params: {
-    scale: 1,
-    speed: -2.5,
-    frame: 0,
-    colorInner: "hsla(47, 100%, 64%, 1)",
-    colorOuter: "hsla(47, 100%, 64%, 1)",
-    noiseScale: 1.8,
-    thickness: 0.1
-  },
-  style: {
-    background: "hsla(47, 50%, 7%, 1)"
-  }
-};
-var poisonPreset = {
-  name: "Poison",
-  params: {
-    scale: 1,
-    speed: 3,
-    frame: 0,
-    colorInner: "hsla(120, 100%, 3%, 1)",
-    colorOuter: "hsla(120, 100%, 66%, 1)",
-    noiseScale: 5,
-    thickness: 0.6
-  },
-  style: {
-    background: "hsla(120, 100%, 3%, 1)"
-  }
-};
-var smokeRingPresets = [
-  defaultPreset2,
-  cloudPreset,
-  firePreset,
-  electricPreset,
-  poisonPreset
-];
-var SmokeRing = ({
-  scale,
-  colorInner,
-  colorOuter,
-  noiseScale,
-  thickness,
-  ...props
-}) => {
-  const uniforms = useMemo3(() => {
-    return {
-      u_scale: scale ?? defaultPreset2.params.scale,
-      u_colorInner: getShaderColorFromString2(colorInner, defaultPreset2.params.colorInner),
-      u_colorOuter: getShaderColorFromString2(colorOuter, defaultPreset2.params.colorOuter),
-      u_noiseScale: noiseScale ?? defaultPreset2.params.noiseScale,
-      u_thickness: thickness ?? defaultPreset2.params.thickness
-    };
-  }, [scale, colorInner, colorOuter, noiseScale, thickness]);
-  return /* @__PURE__ */ jsx3(ShaderMount, { ...props, fragmentShader: smokeRingFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/neuro-noise.tsx
-import { useMemo as useMemo4 } from "react";
-import { getShaderColorFromString as getShaderColorFromString3, neuroNoiseFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var defaultPreset3 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    speed: 1,
-    frame: 0,
-    colorFront: "hsla(261, 100%, 82%, 1)",
-    colorBack: "hsla(0, 0%, 0%, 1)",
-    brightness: 1.3
-  }
-};
-var marblePreset = {
-  name: "Marble",
-  params: {
-    scale: 0.4,
-    speed: 0,
-    frame: 0,
-    colorFront: "hsla(230, 24%, 15%, 1)",
-    colorBack: "hsla(0, 0%, 97%, 1)",
-    brightness: 1.1
-  }
-};
-var neuroNoisePresets = [defaultPreset3, marblePreset];
-var NeuroNoise = ({
-  scale,
-  colorFront,
-  colorBack,
-  brightness,
-  ...props
-}) => {
-  const uniforms = useMemo4(() => {
-    return {
-      u_scale: scale ?? defaultPreset3.params.scale,
-      u_colorFront: getShaderColorFromString3(colorFront, defaultPreset3.params.colorFront),
-      u_colorBack: getShaderColorFromString3(colorBack, defaultPreset3.params.colorBack),
-      u_brightness: brightness ?? defaultPreset3.params.brightness
-    };
-  }, [scale, colorFront, colorBack, brightness]);
-  return /* @__PURE__ */ jsx4(ShaderMount, { ...props, fragmentShader: neuroNoiseFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/dot-orbit.tsx
-import { useMemo as useMemo5 } from "react";
-import { getShaderColorFromString as getShaderColorFromString4, dotOrbitFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var defaultPreset4 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    speed: 2,
-    frame: 0,
-    color1: "hsla(358, 66%, 49%, 1)",
-    color2: "hsla(145, 30%, 33%, 1)",
-    color3: "hsla(39, 88%, 52%, 1)",
-    color4: "hsla(274, 30%, 35%, 1)",
-    dotSize: 0.7,
-    dotSizeRange: 0.4,
-    spreading: 1
-  }
-};
-var dotOrbitPresets = [defaultPreset4];
-var DotOrbit = ({
-  scale,
-  color1,
-  color2,
-  color3,
-  color4,
-  dotSize,
-  dotSizeRange,
-  spreading,
-  ...props
-}) => {
-  const uniforms = useMemo5(() => {
-    return {
-      u_scale: scale ?? defaultPreset4.params.scale,
-      u_color1: getShaderColorFromString4(color1, defaultPreset4.params.color1),
-      u_color2: getShaderColorFromString4(color2, defaultPreset4.params.color2),
-      u_color3: getShaderColorFromString4(color3, defaultPreset4.params.color3),
-      u_color4: getShaderColorFromString4(color4, defaultPreset4.params.color4),
-      u_dotSize: dotSize ?? defaultPreset4.params.dotSize,
-      u_dotSizeRange: dotSizeRange ?? defaultPreset4.params.dotSizeRange,
-      u_spreading: spreading ?? defaultPreset4.params.spreading
-    };
-  }, [scale, color1, color2, color3, color4, dotSize, dotSizeRange, spreading]);
-  return /* @__PURE__ */ jsx5(ShaderMount, { ...props, fragmentShader: dotOrbitFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/dot-grid.tsx
-import { useMemo as useMemo6 } from "react";
-import {
-  dotGridFragmentShader,
-  getShaderColorFromString as getShaderColorFromString5,
-  DotGridShapes
-} from "@paper-design/shaders";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var defaultPreset5 = {
-  name: "Default",
-  params: {
-    colorFill: "hsla(0, 0%, 0%, 1)",
-    colorStroke: "hsla(40, 100%, 50%, 1)",
-    dotSize: 2,
-    gridSpacingX: 50,
-    gridSpacingY: 50,
-    strokeWidth: 0,
-    sizeRange: 0,
-    opacityRange: 0,
-    shape: DotGridShapes.Circle
-  }
-};
-var macrodataPreset = {
-  name: "Macrodata",
-  params: {
-    colorFill: "hsla(218, 100%, 67%, 1)",
-    colorStroke: "hsla(0, 0%, 0%, 1)",
-    dotSize: 3,
-    gridSpacingX: 25,
-    gridSpacingY: 25,
-    strokeWidth: 0,
-    sizeRange: 0.25,
-    opacityRange: 0.9,
-    shape: DotGridShapes.Circle
-  },
-  style: {
-    background: "hsla(211, 37%, 13%, 1)"
-  }
-};
-var trianglesPreset = {
-  name: "Triangles",
-  params: {
-    colorFill: "hsla(0, 0%, 100%, 1)",
-    colorStroke: "hsla(0, 0%, 0%, .5)",
-    dotSize: 5,
-    gridSpacingX: 32,
-    gridSpacingY: 32,
-    strokeWidth: 1,
-    sizeRange: 0,
-    opacityRange: 0,
-    shape: DotGridShapes.Triangle
-  },
-  style: {
-    background: "hsla(0, 0%, 100%, 1)"
-  }
-};
-var bubblesPreset = {
-  name: "Bubbles",
-  params: {
-    colorFill: "hsla(100, 30%, 100%, 1)",
-    colorStroke: "hsla(0, 100%, 0%, 1)",
-    dotSize: 28,
-    gridSpacingX: 60,
-    gridSpacingY: 60,
-    strokeWidth: 12,
-    sizeRange: 0.7,
-    opacityRange: 1.3,
-    shape: DotGridShapes.Circle
-  },
-  style: {
-    background: "hsla(234, 100%, 31%, .5)"
-  }
-};
-var treeLinePreset = {
-  name: "Tree line",
-  params: {
-    colorFill: "hsla(150, 80%, 10%, 1)",
-    colorStroke: "hsla(0, 0%, 0%, 1)",
-    dotSize: 8,
-    gridSpacingX: 20,
-    gridSpacingY: 90,
-    strokeWidth: 0,
-    sizeRange: 1,
-    opacityRange: 0.6,
-    shape: DotGridShapes.Circle
-  },
-  style: {
-    background: "hsla(100, 100%, 36%, .05)"
-  }
-};
-var diamondsPreset = {
-  name: "Diamonds",
-  params: {
-    colorFill: "hsla(0, 100%, 50%, 1)",
-    colorStroke: "hsla(0, 0%, 0%, 1)",
-    dotSize: 15,
-    gridSpacingX: 30,
-    gridSpacingY: 30,
-    strokeWidth: 0,
-    sizeRange: 0,
-    opacityRange: 2,
-    shape: DotGridShapes.Diamond
-  },
-  style: {
-    background: "hsla(0, 0%, 0%, 0)"
-  }
-};
-var wallpaperPreset = {
-  name: "Wallpaper",
-  params: {
-    colorFill: "hsla(0, 0%, 0%, 0)",
-    colorStroke: "hsla(36, 48%, 58%, 1)",
-    dotSize: 9,
-    gridSpacingX: 32,
-    gridSpacingY: 32,
-    strokeWidth: 1,
-    sizeRange: 0,
-    opacityRange: 0,
-    shape: DotGridShapes.Diamond
-  },
-  style: {
-    background: "hsla(154, 33%, 19%, 1)"
-  }
-};
-var matrixPreset = {
-  name: "Enter the Matrix",
-  params: {
-    colorFill: "hsla(182, 100%, 64%, 1)",
-    colorStroke: "hsla(0, 100%, 100%, 0)",
-    dotSize: 2,
-    gridSpacingX: 10,
-    gridSpacingY: 10,
-    strokeWidth: 0.5,
-    sizeRange: 0.25,
-    opacityRange: 1,
-    shape: DotGridShapes.Triangle
-  },
-  style: {
-    background: "hsla(0, 100%, 0%, 1)"
-  }
-};
-var waveformPreset = {
-  name: "Waveform",
-  params: {
-    colorFill: "hsla(227, 93%, 38%, 1)",
-    colorStroke: "hsla(0, 0%, 0%, 0)",
-    dotSize: 100,
-    gridSpacingX: 2,
-    gridSpacingY: 215,
-    strokeWidth: 0,
-    sizeRange: 1,
-    opacityRange: 0,
-    shape: DotGridShapes.Square
-  },
-  style: {
-    background: "hsla(0, 100%, 100%, 1)"
-  }
-};
-var dotGridPresets = [
-  defaultPreset5,
-  macrodataPreset,
-  trianglesPreset,
-  bubblesPreset,
-  treeLinePreset,
-  diamondsPreset,
-  wallpaperPreset,
-  matrixPreset,
-  waveformPreset
-];
-var DotGrid = ({
-  colorFill,
-  colorStroke,
-  dotSize,
-  gridSpacingX,
-  gridSpacingY,
-  strokeWidth,
-  sizeRange,
-  opacityRange,
-  shape,
-  ...props
-}) => {
-  const uniforms = useMemo6(() => {
-    return {
-      u_colorFill: getShaderColorFromString5(colorFill, defaultPreset5.params.colorStroke),
-      u_colorStroke: getShaderColorFromString5(colorStroke, defaultPreset5.params.colorStroke),
-      u_dotSize: dotSize ?? defaultPreset5.params.dotSize,
-      u_gridSpacingX: gridSpacingX ?? defaultPreset5.params.gridSpacingX,
-      u_gridSpacingY: gridSpacingY ?? defaultPreset5.params.gridSpacingY,
-      u_strokeWidth: strokeWidth ?? defaultPreset5.params.strokeWidth,
-      u_sizeRange: sizeRange ?? defaultPreset5.params.sizeRange,
-      u_opacityRange: opacityRange ?? defaultPreset5.params.opacityRange,
-      u_shape: shape ?? defaultPreset5.params.shape
-    };
-  }, [colorFill, colorStroke, dotSize, gridSpacingX, gridSpacingY, strokeWidth, sizeRange, opacityRange, shape]);
-  return /* @__PURE__ */ jsx6(ShaderMount, { ...props, fragmentShader: dotGridFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import { DotGridShapes as DotGridShapes2 } from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/stepped-simplex-noise.tsx
-import { useMemo as useMemo7 } from "react";
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { ShaderMount } from "./shader-mount";
+import { MeshGradient, meshGradientPresets } from "./shaders/mesh-gradient";
+import { SmokeRing, smokeRingPresets } from "./shaders/smoke-ring";
+import { NeuroNoise, neuroNoisePresets } from "./shaders/neuro-noise";
+import { DotOrbit, dotOrbitPresets } from "./shaders/dot-orbit";
+import { DotGrid, dotGridPresets } from "./shaders/dot-grid";
+import { SimplexNoise, simplexNoisePresets } from "./shaders/simplex-noise";
+import { Metaballs, metaballsPresets } from "./shaders/metaballs";
+import { Waves, wavesPresets } from "./shaders/waves";
+import { PerlinNoise, perlinNoisePresets } from "./shaders/perlin-noise";
+import { Voronoi, voronoiPresets } from "./shaders/voronoi";
+import { Warp, warpPresets } from "./shaders/warp";
+import { GodRays, godRaysPresets } from "./shaders/god-rays";
+import { Spiral, spiralPresets } from "./shaders/spiral";
+import { Swirl, swirlPresets } from "./shaders/swirl";
+import { Dithering, ditheringPresets } from "./shaders/dithering";
+import { GrainGradient, grainGradientPresets } from "./shaders/grain-gradient";
+import { LiquidMetal, liquidMetalPresets } from "./shaders/liquid-metal";
+import { PulsingBorder, pulsingBorderPresets } from "./shaders/pulsing-border";
+import { isPaperShaderElement, getShaderColorFromString } from "@paper-design/shaders";
 import {
-  getShaderColorFromString as getShaderColorFromString6,
-  steppedSimplexNoiseFragmentShader
+  dotOrbitMeta,
+  godRaysMeta,
+  grainGradientMeta,
+  meshGradientMeta,
+  metaballsMeta,
+  pulsingBorderMeta,
+  simplexNoiseMeta,
+  smokeRingMeta,
+  swirlMeta,
+  voronoiMeta,
+  warpMeta
 } from "@paper-design/shaders";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var defaultPreset6 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    speed: 0.15,
-    frame: 0,
-    color1: "hsla(208, 25%, 45%, 1)",
-    color2: "hsla(94, 38%, 59%, 1)",
-    color3: "hsla(359, 94%, 62%, 1)",
-    color4: "hsla(42, 93%, 64%, 1)",
-    color5: "hsla(0, 0%, 100%, 1)",
-    stepsNumber: 13
-  }
-};
-var magmaPreset = {
-  name: "Magma",
-  params: {
-    scale: 0.3,
-    speed: 0.2,
-    frame: 0,
-    color1: "hsla(0, 100%, 36%, 1)",
-    color2: "hsla(0, 95%, 44%, 1)",
-    color3: "hsla(20, 100%, 49%, 1)",
-    color4: "hsla(45, 100%, 45%, 1)",
-    color5: "hsla(31, 100%, 94%, 1)",
-    stepsNumber: 8
-  }
-};
-var bloodCellPreset = {
-  name: "Blood cell",
-  params: {
-    scale: 1.2,
-    speed: 0.22,
-    frame: 0,
-    color1: "hsla(302, 43%, 13%, 1)",
-    color2: "hsla(325, 93%, 17%, 1)",
-    color3: "hsla(338, 80%, 25%, 1)",
-    color4: "hsla(338, 80%, 25%, 1)",
-    color5: "hsla(2, 85%, 72%, 1)",
-    stepsNumber: 29
-  }
-};
-var firstContactPreset = {
-  name: "First contact",
-  params: {
-    scale: 1.2,
-    speed: -0.1,
-    frame: 0,
-    color1: "hsla(300, 43%, 82%, 1)",
-    color2: "hsla(266, 70%, 9%, 1)",
-    color3: "hsla(289, 36%, 26%, 1)",
-    color4: "hsla(0, 41%, 78%, 1)",
-    color5: "hsla(0, 100%, 96%, 1)",
-    stepsNumber: 40
-  }
-};
-var steppedSimplexNoisePresets = [
-  defaultPreset6,
-  magmaPreset,
-  bloodCellPreset,
-  firstContactPreset
-];
-var SteppedSimplexNoise = ({
-  scale,
-  color1,
-  color2,
-  color3,
-  color4,
-  color5,
-  stepsNumber,
-  ...props
-}) => {
-  const uniforms = useMemo7(() => {
-    return {
-      u_scale: scale ?? defaultPreset6.params.scale,
-      u_color1: getShaderColorFromString6(color1, defaultPreset6.params.color1),
-      u_color2: getShaderColorFromString6(color2, defaultPreset6.params.color2),
-      u_color3: getShaderColorFromString6(color3, defaultPreset6.params.color3),
-      u_color4: getShaderColorFromString6(color4, defaultPreset6.params.color4),
-      u_color5: getShaderColorFromString6(color5, defaultPreset6.params.color5),
-      u_steps_number: stepsNumber ?? defaultPreset6.params.stepsNumber
-    };
-  }, [scale, color1, color2, color3, color4, color5, stepsNumber]);
-  return /* @__PURE__ */ jsx7(ShaderMount, { ...props, fragmentShader: steppedSimplexNoiseFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/metaballs.tsx
-import { useMemo as useMemo8 } from "react";
-import { getShaderColorFromString as getShaderColorFromString7, metaballsFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var defaultPreset7 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    speed: 0.6,
-    frame: 0,
-    color1: "hsla(350, 90%, 55%, 1)",
-    color2: "hsla(350, 80%, 60%, 1)",
-    color3: "hsla(20, 85%, 70%, 1)",
-    ballSize: 1,
-    visibilityRange: 0.4
-  }
-};
-var metaballsPresets = [defaultPreset7];
-var Metaballs = ({
-  scale,
-  color1,
-  color2,
-  color3,
-  ballSize,
-  visibilityRange,
-  ...props
-}) => {
-  const uniforms = useMemo8(() => {
-    return {
-      u_scale: scale ?? defaultPreset7.params.scale,
-      u_color1: getShaderColorFromString7(color1, defaultPreset7.params.color1),
-      u_color2: getShaderColorFromString7(color2, defaultPreset7.params.color2),
-      u_color3: getShaderColorFromString7(color3, defaultPreset7.params.color3),
-      u_ballSize: ballSize ?? defaultPreset7.params.ballSize,
-      u_visibilityRange: visibilityRange ?? defaultPreset7.params.visibilityRange
-    };
-  }, [scale, color1, color2, color3, ballSize, visibilityRange]);
-  return /* @__PURE__ */ jsx8(ShaderMount, { ...props, fragmentShader: metaballsFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/waves.tsx
-import { useMemo as useMemo9 } from "react";
-import { getShaderColorFromString as getShaderColorFromString8, wavesFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var defaultPreset8 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    rotation: 0,
-    color: "hsla(204, 47%, 45%, 1)",
-    shape: 1,
-    frequency: 0.5,
-    amplitude: 0.5,
-    spacing: 0.75,
-    dutyCycle: 0.2,
-    softness: 0
-  }
-};
-var spikesPreset = {
-  name: "Spikes",
-  params: {
-    scale: 2.3,
-    rotation: 0,
-    color: "hsla(290, 52%, 15%, 1)",
-    shape: 0,
-    frequency: 0.5,
-    amplitude: 0.9,
-    spacing: 0.37,
-    dutyCycle: 0.93,
-    softness: 0.15
-  },
-  style: {
-    background: "hsla(65, 100%, 95%, 1)"
-  }
-};
-var groovyPreset = {
-  name: "Groovy",
-  params: {
-    scale: 0.5,
-    rotation: 1,
-    color: "hsla(20, 100%, 71%, 1)",
-    shape: 2.37,
-    frequency: 0.2,
-    amplitude: 0.67,
-    spacing: 1.17,
-    dutyCycle: 0.57,
-    softness: 0
-  },
-  style: {
-    background: "hsla(60, 100%, 97%, 1)"
-  }
-};
-var tangledUpPreset = {
-  name: "Tangled up",
-  params: {
-    scale: 3.04,
-    rotation: 1,
-    color: "hsla(85.5, 35.7%, 78%, 1)",
-    shape: 3,
-    frequency: 0.44,
-    amplitude: 0.57,
-    spacing: 1.05,
-    dutyCycle: 0.97,
-    softness: 0
-  },
-  style: {
-    background: "hsla(198.7, 66.7%, 14.1%, 1)"
-  }
-};
-var zigZagPreset = {
-  name: "Zig zag",
-  params: {
-    scale: 2.7,
-    rotation: 1,
-    color: "hsla(0, 0%, 90%, 1)",
-    shape: 0,
-    frequency: 0.6,
-    amplitude: 0.8,
-    spacing: 0.5,
-    dutyCycle: 1,
-    softness: 0.5
-  },
-  style: {
-    background: "hsla(0, 0%, 0%, 1)"
-  }
-};
-var waveRidePreset = {
-  name: "Ride the wave",
-  params: {
-    scale: 0.84,
-    rotation: 0,
-    color: "hsla(0, 0%, 12%, 1)",
-    shape: 2.23,
-    frequency: 0.1,
-    amplitude: 0.6,
-    spacing: 0.41,
-    dutyCycle: 0.99,
-    softness: 0
-  },
-  style: {
-    background: "hsla(65, 100%, 95%, 1)"
-  }
-};
-var wavesPresets = [
-  defaultPreset8,
-  spikesPreset,
-  groovyPreset,
-  tangledUpPreset,
-  zigZagPreset,
-  waveRidePreset
-];
-var Waves = ({
-  scale,
-  rotation,
-  color,
-  shape,
-  frequency,
-  amplitude,
-  spacing,
-  dutyCycle,
-  softness,
-  ...props
-}) => {
-  const uniforms = useMemo9(() => {
-    return {
-      u_scale: scale ?? defaultPreset8.params.scale,
-      u_rotation: rotation ?? defaultPreset8.params.rotation,
-      u_color: getShaderColorFromString8(color, defaultPreset8.params.color),
-      u_shape: shape ?? defaultPreset8.params.shape,
-      u_frequency: frequency ?? defaultPreset8.params.frequency,
-      u_amplitude: amplitude ?? defaultPreset8.params.amplitude,
-      u_spacing: spacing ?? defaultPreset8.params.spacing,
-      u_dutyCycle: dutyCycle ?? defaultPreset8.params.dutyCycle,
-      u_softness: softness ?? defaultPreset8.params.softness
-    };
-  }, [scale, rotation, color, shape, frequency, amplitude, spacing, dutyCycle, softness]);
-  return /* @__PURE__ */ jsx9(ShaderMount, { ...props, fragmentShader: wavesFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/perlin-noise.tsx
-import { useMemo as useMemo10 } from "react";
-import { getShaderColorFromString as getShaderColorFromString9, perlinNoiseFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var defaultPreset9 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    speed: 0.5,
-    frame: 0,
-    color: "hsla(0, 0%, 15%, 1)",
-    proportion: 0.65,
-    softness: 0.1,
-    octaveCount: 2,
-    persistence: 1,
-    lacunarity: 1.5
-  }
-};
-var nintendoWaterPreset = {
-  name: "Nintendo Water",
-  params: {
-    scale: 0.2,
-    speed: 0.4,
-    frame: 0,
-    color: "hsla(200, 66%, 90%, 1)",
-    proportion: 0.42,
-    softness: 0,
-    octaveCount: 2,
-    persistence: 0.55,
-    lacunarity: 1.8
-  },
-  style: {
-    background: "hsla(220, 66%, 50%, 1)"
-  }
-};
-var colonyPreset = {
-  name: "Colony",
-  params: {
-    scale: 0.15,
-    speed: 0,
-    frame: 0,
-    color: "hsla(230, 80%, 20%, 1)",
-    octaveCount: 6,
-    persistence: 1,
-    lacunarity: 2.55,
-    proportion: 0.65,
-    softness: 0.35
-  },
-  style: {
-    background: "hsla(56, 86%, 81%, 1)"
-  }
-};
-var phosphenesPreset = {
-  name: "Phosphenes",
-  params: {
-    scale: 0.03,
-    speed: 0.15,
-    frame: 0,
-    color: "hsla(150, 50%, 60%, 1)",
-    proportion: 0.45,
-    softness: 0.45,
-    octaveCount: 6,
-    persistence: 0.3,
-    lacunarity: 3
-  },
-  style: {
-    background: "hsla(350, 80%, 70%, 1)"
-  }
-};
-var mossPreset = {
-  name: "Moss",
-  params: {
-    scale: 0.15,
-    speed: 0.02,
-    frame: 0,
-    color: "hsla(0, 0%, 15%, 1)",
-    proportion: 0.65,
-    softness: 0.35,
-    octaveCount: 6,
-    persistence: 1,
-    lacunarity: 2.55
-  },
-  style: {
-    background: "hsla(137, 100%, 51%, 1)"
-  }
-};
-var wormsPreset = {
-  name: "Worms",
-  params: {
-    scale: 2,
-    speed: 0,
-    frame: 0,
-    color: "hsla(0, 0%, 35%, 1)",
-    proportion: 0.5,
-    softness: 0,
-    octaveCount: 1,
-    persistence: 1,
-    lacunarity: 1.5
-  },
-  style: {
-    background: "hsla(0, 100%, 100%, 1)"
-  }
-};
-var perlinNoisePresets = [
-  defaultPreset9,
-  nintendoWaterPreset,
-  colonyPreset,
-  phosphenesPreset,
-  mossPreset,
-  wormsPreset
-];
-var PerlinNoise = ({
-  scale,
-  color,
-  proportion,
-  softness,
-  octaveCount,
-  persistence,
-  lacunarity,
-  ...props
-}) => {
-  const uniforms = useMemo10(() => {
-    return {
-      u_scale: scale ?? defaultPreset9.params.scale,
-      u_color: getShaderColorFromString9(color, defaultPreset9.params.color),
-      u_proportion: proportion ?? defaultPreset9.params.proportion,
-      u_softness: softness ?? defaultPreset9.params.softness,
-      u_octaveCount: octaveCount ?? defaultPreset9.params.octaveCount,
-      u_persistence: persistence ?? defaultPreset9.params.persistence,
-      u_lacunarity: lacunarity ?? defaultPreset9.params.lacunarity
-    };
-  }, [scale, color, proportion, softness, octaveCount, persistence, lacunarity]);
-  return /* @__PURE__ */ jsx10(ShaderMount, { ...props, fragmentShader: perlinNoiseFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/voronoi.tsx
-import { useMemo as useMemo11 } from "react";
-import { getShaderColorFromString as getShaderColorFromString10, voronoiFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var defaultPreset10 = {
-  name: "Default",
-  params: {
-    scale: 1.5,
-    speed: 0.5,
-    frame: 0,
-    colorCell1: "hsla(15, 80%, 50%, 1)",
-    colorCell2: "hsla(180, 80%, 50%, 1)",
-    colorCell3: "hsla(200, 80%, 50%, 1)",
-    colorMid: "hsla(0, 0%, 0%, 1)",
-    colorGradient: 0.5,
-    distance: 0.25,
-    edgesSize: 0.15,
-    edgesSoftness: 0.01,
-    middleSize: 0,
-    middleSoftness: 0
-  }
-};
-var classicPreset = {
-  name: "Classic",
-  params: {
-    scale: 3,
-    speed: 0.8,
-    frame: 0,
-    colorCell1: "hsla(0, 100%, 100%, 1)",
-    colorCell2: "hsla(0, 0%, 100%, 1)",
-    colorCell3: "hsla(0, 100%, 0%, 1)",
-    colorMid: "hsla(0, 0%, 0%, 1)",
-    colorGradient: 1,
-    distance: 0.45,
-    edgesSize: 0.02,
-    edgesSoftness: 0.07,
-    middleSize: 0,
-    middleSoftness: 0
-  }
-};
-var giraffePreset = {
-  name: "Giraffe",
-  params: {
-    scale: 1,
-    speed: 0.6,
-    frame: 0,
-    colorCell1: "hsla(32, 100%, 18%, 1)",
-    colorCell2: "hsla(42, 93%, 35%, 1)",
-    colorCell3: "hsla(32, 100%, 18%, 1)",
-    colorMid: "hsla(0, 0%, 0%, 1)",
-    colorGradient: 1,
-    distance: 0.25,
-    edgesSize: 0.2,
-    edgesSoftness: 0.01,
-    middleSize: 0,
-    middleSoftness: 0
-  }
-};
-var eyesPreset = {
-  name: "Eyes",
-  params: {
-    scale: 1.6,
-    speed: 0.6,
-    frame: 0,
-    colorCell1: "hsla(79, 84%, 60%, 1)",
-    colorCell2: "hsla(207, 53%, 41%, 1)",
-    colorCell3: "hsla(207, 80%, 65%, 1)",
-    colorMid: "hsla(0, 0%, 0%, 1)",
-    colorGradient: 1,
-    distance: 0.25,
-    edgesSize: 0.62,
-    edgesSoftness: 0.01,
-    middleSize: 0.1,
-    middleSoftness: 0
-  }
-};
-var bubblesPreset2 = {
-  name: "Bubbles",
-  params: {
-    scale: 2,
-    speed: 0.5,
-    frame: 0,
-    colorCell1: "hsla(0, 100%, 50%, 1)",
-    colorCell2: "hsla(169, 100%, 66%, 1)",
-    colorCell3: "hsla(50, 100%, 66%, 1)",
-    colorMid: "hsla(0, 0%, 0%, 1)",
-    colorGradient: 1,
-    distance: 0.5,
-    edgesSize: 0.81,
-    edgesSoftness: 0,
-    middleSize: 0,
-    middleSoftness: 0
-  }
-};
-var cellsPreset = {
-  name: "Cells",
-  params: {
-    scale: 2,
-    speed: 1,
-    frame: 0,
-    colorCell1: "hsla(0, 0%, 100%, 1)",
-    colorCell2: "hsla(0, 0%, 100%, 1)",
-    colorCell3: "hsla(0, 0%, 100%, 1)",
-    colorMid: "hsla(0, 0%, 0%, 1)",
-    colorGradient: 1,
-    distance: 0.38,
-    edgesSize: 0.1,
-    edgesSoftness: 0.02,
-    middleSize: 0,
-    middleSoftness: 0
-  }
-};
-var glowPreset = {
-  name: "Glow",
-  params: {
-    scale: 1.2,
-    speed: 0.8,
-    frame: 0,
-    colorCell1: "hsla(40, 100%, 50%, 1)",
-    colorCell2: "hsla(311, 100%, 59%, 1)",
-    colorCell3: "hsla(180, 100%, 65%, 1)",
-    colorMid: "hsla(0, 0%, 100%, 1)",
-    colorGradient: 1,
-    distance: 0.25,
-    edgesSize: 0.15,
-    edgesSoftness: 0.01,
-    middleSize: 0.7,
-    middleSoftness: 1
-  }
-};
-var tilesPreset = {
-  name: "Tiles",
-  params: {
-    scale: 1.3,
-    speed: 1,
-    frame: 0,
-    colorCell1: "hsla(80, 50%, 50%, 1)",
-    colorCell2: "hsla(0, 50%, 100%, 1)",
-    colorCell3: "hsla(200, 50%, 50%, 1)",
-    colorMid: "hsla(0, 0%, 0%, 1)",
-    colorGradient: 0,
-    distance: 0.05,
-    edgesSize: 0.25,
-    edgesSoftness: 0.02,
-    middleSize: 0,
-    middleSoftness: 0
-  }
-};
-var voronoiPresets = [
-  defaultPreset10,
-  classicPreset,
-  giraffePreset,
-  eyesPreset,
-  bubblesPreset2,
-  cellsPreset,
-  glowPreset,
-  tilesPreset
-];
-var Voronoi = ({
-  scale,
-  colorCell1,
-  colorCell2,
-  colorCell3,
-  colorMid,
-  colorGradient,
-  distance,
-  edgesSize,
-  edgesSoftness,
-  middleSize,
-  middleSoftness,
-  ...props
-}) => {
-  const uniforms = useMemo11(() => {
-    return {
-      u_scale: scale ?? defaultPreset10.params.scale,
-      u_colorCell1: getShaderColorFromString10(colorCell1, defaultPreset10.params.colorCell1),
-      u_colorCell2: getShaderColorFromString10(colorCell2, defaultPreset10.params.colorCell2),
-      u_colorCell3: getShaderColorFromString10(colorCell3, defaultPreset10.params.colorCell3),
-      u_colorMid: getShaderColorFromString10(colorMid, defaultPreset10.params.colorMid),
-      u_colorGradient: colorGradient ?? defaultPreset10.params.colorGradient,
-      u_distance: distance ?? defaultPreset10.params.distance,
-      u_edgesSize: edgesSize ?? defaultPreset10.params.edgesSize,
-      u_edgesSoftness: edgesSoftness ?? defaultPreset10.params.edgesSoftness,
-      u_middleSize: middleSize ?? defaultPreset10.params.middleSize,
-      u_middleSoftness: middleSoftness ?? defaultPreset10.params.middleSoftness
-    };
-  }, [
-    scale,
-    colorCell1,
-    colorCell3,
-    colorCell2,
-    colorMid,
-    colorGradient,
-    distance,
-    edgesSize,
-    edgesSoftness,
-    middleSize,
-    middleSoftness
-  ]);
-  return /* @__PURE__ */ jsx11(ShaderMount, { ...props, fragmentShader: voronoiFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/warp.tsx
-import { useMemo as useMemo12 } from "react";
-import {
-  getShaderColorFromString as getShaderColorFromString11,
-  warpFragmentShader,
-  PatternShapes
-} from "@paper-design/shaders";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var defaultPreset11 = {
-  name: "Default",
-  params: {
-    scale: 1,
-    rotation: 0,
-    speed: 0.1,
-    frame: 0,
-    color1: "hsla(0, 0%, 15%, 1)",
-    color2: "hsla(203, 80%, 70%, 1)",
-    color3: "hsla(0, 0%, 100%, 1)",
-    proportion: 0.35,
-    softness: 1,
-    distortion: 0.25,
-    swirl: 0.8,
-    swirlIterations: 10,
-    shapeScale: 0.1,
-    shape: PatternShapes.Checks
-  }
-};
-var presetCauldron = {
-  name: "Cauldron Pot",
-  params: {
-    scale: 1.1,
-    rotation: 1.62,
-    speed: 1,
-    frame: 0,
-    color1: "hsla(100, 51%, 75%, 1)",
-    color2: "hsla(220, 39%, 32%, 1)",
-    color3: "hsla(129.2, 41.9%, 6.1%, 1)",
-    proportion: 0.64,
-    softness: 0.95,
-    distortion: 0.2,
-    swirl: 0.86,
-    swirlIterations: 7,
-    shapeScale: 0,
-    shape: PatternShapes.Edge
-  }
-};
-var presetSilk = {
-  name: "Silk",
-  params: {
-    scale: 0.26,
-    rotation: 0,
-    speed: 0.5,
-    frame: 0,
-    color1: "hsla(0, 9%, 7%, 1)",
-    color2: "hsla(8, 13%, 34%, 1)",
-    color3: "hsla(5, 8%, 71%, 1)",
-    proportion: 0,
-    softness: 1,
-    distortion: 0.3,
-    swirl: 0.6,
-    swirlIterations: 11,
-    shapeScale: 0.05,
-    shape: PatternShapes.Stripes
-  }
-};
-var presetPassion = {
-  name: "Passion",
-  params: {
-    scale: 0.25,
-    rotation: 1.35,
-    speed: 0.3,
-    frame: 0,
-    color1: "hsla(0, 44.7%, 14.9%, 1)",
-    color2: "hsla(353.4, 34%, 42.2%, 1)",
-    color3: "hsla(29, 100%, 76.1%, 1)",
-    proportion: 0.5,
-    softness: 1,
-    distortion: 0.09,
-    swirl: 0.9,
-    swirlIterations: 6,
-    shapeScale: 0.25,
-    shape: PatternShapes.Checks
-  }
-};
-var presetPhantom = {
-  name: "Phantom",
-  params: {
-    scale: 0.68,
-    rotation: 1.8,
-    speed: 1.25,
-    frame: 0,
-    color1: "hsla(242.2, 44.3%, 12%, 1)",
-    color2: "hsla(236.1, 80.4%, 70%, 1)",
-    color3: "hsla(0, 0%, 100%, 1)",
-    proportion: 0.45,
-    softness: 1,
-    distortion: 0.16,
-    swirl: 0.3,
-    swirlIterations: 7,
-    shapeScale: 0.1,
-    shape: PatternShapes.Checks
-  }
-};
-var presetAbyss = {
-  name: "The Abyss",
-  params: {
-    scale: 0.1,
-    rotation: 2,
-    speed: 0.06,
-    frame: 0,
-    color1: "hsla(242.2, 44.3%, 12%, 1)",
-    color2: "hsla(236.1, 80.4%, 70%, 1)",
-    color3: "hsla(0, 0%, 100%, 1)",
-    proportion: 0,
-    softness: 1,
-    distortion: 0.09,
-    swirl: 0.48,
-    swirlIterations: 4,
-    shapeScale: 0.1,
-    shape: PatternShapes.Edge
-  }
-};
-var presetInk = {
-  name: "Live Ink",
-  params: {
-    scale: 0.7,
-    rotation: 1.5,
-    speed: 0.25,
-    frame: 0,
-    color1: "hsla(210, 11.1%, 7.1%, 1)",
-    color2: "hsla(165, 9%, 65.1%, 1)",
-    color3: "hsla(84, 100%, 97.1%, 1)",
-    proportion: 0.35,
-    softness: 0,
-    distortion: 0.25,
-    swirl: 0.8,
-    swirlIterations: 10,
-    shapeScale: 0.26,
-    shape: PatternShapes.Checks
-  }
-};
-var presetIceberg = {
-  name: "Iceberg",
-  params: {
-    scale: 1.1,
-    rotation: 2,
-    speed: 0.05,
-    frame: 0,
-    color1: "hsla(0, 0%, 100%, 1)",
-    color2: "hsla(220, 38.7%, 32%, 1)",
-    color3: "hsla(129.2, 41.9%, 6.1%, 1)",
-    proportion: 0.3,
-    softness: 1,
-    distortion: 0.2,
-    swirl: 0.86,
-    swirlIterations: 7,
-    shapeScale: 0,
-    shape: PatternShapes.Checks
-  }
-};
-var presetNectar = {
-  name: "Nectar",
-  params: {
-    scale: 0.24,
-    rotation: 0,
-    speed: 0.42,
-    frame: 0,
-    color1: "hsla(37.5, 22.2%, 7.1%, 1)",
-    color2: "hsla(38.5, 59.1%, 63.1%, 1)",
-    color3: "hsla(37.6, 30%, 95.2%, 1)",
-    proportion: 0.24,
-    softness: 1,
-    distortion: 0.21,
-    swirl: 0.57,
-    swirlIterations: 10,
-    shapeScale: 0.32,
-    shape: PatternShapes.Edge
-  }
-};
-var presetFilteredLight = {
-  name: "Filtered Light",
-  params: {
-    scale: 2,
-    rotation: 0.44,
-    speed: 0.32,
-    frame: 0,
-    color1: "hsla(60.2, 7.8%, 8.3%, 1)",
-    color2: "hsla(64.4, 27.8%, 81%, 1)",
-    color3: "hsla(60, 100%, 93.9%, 1)",
-    proportion: 0.25,
-    softness: 1,
-    distortion: 0.06,
-    swirl: 0,
-    swirlIterations: 0,
-    shapeScale: 0,
-    shape: PatternShapes.Stripes
-  }
-};
-var presetKelp = {
-  name: "Kelp",
-  params: {
-    scale: 0.38,
-    rotation: 0.6,
-    speed: 2,
-    frame: 0,
-    color1: "hsla(79.3, 100%, 78%, 1)",
-    color2: "hsla(112, 10.5%, 28%, 1)",
-    color3: "hsla(203.3, 50%, 7.1%, 1)",
-    proportion: 1,
-    softness: 0,
-    distortion: 0,
-    swirl: 0.15,
-    swirlIterations: 0,
-    shapeScale: 0.74,
-    shape: PatternShapes.Stripes
-  }
-};
-var warpPresets = [
-  defaultPreset11,
-  presetAbyss,
-  presetCauldron,
-  presetFilteredLight,
-  presetIceberg,
-  presetInk,
-  presetKelp,
-  presetNectar,
-  presetPassion,
-  presetPhantom,
-  presetSilk
-];
-var Warp = ({
-  scale,
-  rotation,
-  color1,
-  color2,
-  color3,
-  proportion,
-  softness,
-  distortion,
-  swirl,
-  swirlIterations,
-  shapeScale,
-  shape,
-  ...props
-}) => {
-  const uniforms = useMemo12(() => {
-    return {
-      u_scale: scale ?? defaultPreset11.params.scale,
-      u_rotation: rotation ?? defaultPreset11.params.rotation,
-      u_color1: getShaderColorFromString11(color1, defaultPreset11.params.color1),
-      u_color2: getShaderColorFromString11(color2, defaultPreset11.params.color2),
-      u_color3: getShaderColorFromString11(color3, defaultPreset11.params.color2),
-      u_proportion: proportion ?? defaultPreset11.params.proportion,
-      u_softness: softness ?? defaultPreset11.params.softness,
-      u_distortion: distortion ?? defaultPreset11.params.distortion,
-      u_swirl: swirl ?? defaultPreset11.params.swirl,
-      u_swirlIterations: swirlIterations ?? defaultPreset11.params.swirlIterations,
-      u_shapeScale: shapeScale ?? defaultPreset11.params.shapeScale,
-      u_shape: shape ?? defaultPreset11.params.shape
-    };
-  }, [
-    scale,
-    rotation,
-    color1,
-    color2,
-    color3,
-    proportion,
-    softness,
-    distortion,
-    swirl,
-    swirlIterations,
-    shapeScale,
-    shape
-  ]);
-  return /* @__PURE__ */ jsx12(ShaderMount, { ...props, fragmentShader: warpFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import { PatternShapes as PatternShapes2 } from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/god-rays.tsx
-import { useMemo as useMemo13 } from "react";
-import { getShaderColorFromString as getShaderColorFromString12, godRaysFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var defaultPreset12 = {
-  name: "Default",
-  params: {
-    colorBack: "hsla(215, 100%, 11%, 1)",
-    color1: "hsla(45, 100%, 70%, 1)",
-    color2: "hsla(10, 100%, 80%, 1)",
-    color3: "hsla(178, 100%, 83%, 1)",
-    offsetX: -0.6,
-    offsetY: -0.6,
-    frequency: 6,
-    spotty: 0.28,
-    midIntensity: 0.97,
-    midSize: 2,
-    density: 0.3,
-    blending: 0,
-    speed: 1,
-    frame: 0
-  }
-};
-var auroraPreset = {
-  name: "Aurora",
-  params: {
-    colorBack: "hsla(0, 0%, 25%, 1)",
-    color1: "hsla(239, 100%, 70%, 1)",
-    color2: "hsla(150, 100%, 70%, 1)",
-    color3: "hsla(200, 100%, 70%, 1)",
-    offsetX: 0,
-    offsetY: 1,
-    frequency: 2.4,
-    spotty: 0.9,
-    midIntensity: 0.8,
-    midSize: 2.1,
-    density: 0.5,
-    blending: 1,
-    speed: 0.5,
-    frame: 0
-  }
-};
-var warpPreset = {
-  name: "Warp",
-  params: {
-    colorBack: "hsla(0, 0%, 0%, 1)",
-    color1: "hsla(317, 100%, 50%, 1)",
-    color2: "hsla(25, 100%, 50%, 1)",
-    color3: "hsla(0, 0%, 100%, 1)",
-    offsetX: 0,
-    offsetY: 0,
-    frequency: 1.2,
-    spotty: 0.15,
-    midIntensity: 0,
-    midSize: 0,
-    density: 0.79,
-    blending: 0.4,
-    speed: 2,
-    frame: 0
-  }
-};
-var linearPreset = {
-  name: "Linear",
-  params: {
-    colorBack: "hsla(0, 0%, 0%, 1)",
-    color1: "hsl(0 0% 100% / 12%)",
-    color2: "hsl(0 0% 100% / 24%)",
-    color3: "hsl(0 0% 100% / 16%)",
-    offsetX: 0.2,
-    offsetY: -0.7,
-    frequency: 1.2,
-    spotty: 0.25,
-    midSize: 1.1,
-    midIntensity: 0.75,
-    density: 0.79,
-    blending: 1,
-    speed: 0.5,
-    frame: 0
-  }
-};
-var etherPreset = {
-  name: "Ether",
-  params: {
-    colorBack: "hsl(226.7 50% 7.1% / 100%)",
-    color1: "hsl(215 100% 53.9% / 65.1%)",
-    color2: "hsl(214.4 85.9% 86.1% / 74.9%)",
-    color3: "hsl(225 31.4% 20% / 100%)",
-    offsetX: -0.6,
-    offsetY: 0,
-    frequency: 0.3,
-    spotty: 0.77,
-    midSize: 1.1,
-    midIntensity: 0.5,
-    density: 0.6,
-    blending: 0.6,
-    speed: 1,
-    frame: 0
-  }
-};
-var godRaysPresets = [defaultPreset12, auroraPreset, warpPreset, linearPreset, etherPreset];
-var GodRays = ({
-  colorBack,
-  color1,
-  color2,
-  color3,
-  offsetX,
-  offsetY,
-  frequency,
-  spotty,
-  midIntensity,
-  midSize,
-  density,
-  blending,
-  ...props
-}) => {
-  const uniforms = useMemo13(() => {
-    return {
-      u_colorBack: getShaderColorFromString12(colorBack, defaultPreset12.params.colorBack),
-      u_color1: getShaderColorFromString12(color1, defaultPreset12.params.color1),
-      u_color2: getShaderColorFromString12(color2, defaultPreset12.params.color2),
-      u_color3: getShaderColorFromString12(color3, defaultPreset12.params.color3),
-      u_offsetX: offsetX ?? defaultPreset12.params.offsetX,
-      u_offsetY: offsetY ?? defaultPreset12.params.offsetY,
-      u_frequency: frequency ?? defaultPreset12.params.frequency,
-      u_spotty: spotty ?? defaultPreset12.params.spotty,
-      u_midIntensity: midIntensity ?? defaultPreset12.params.midIntensity,
-      u_midSize: midSize ?? defaultPreset12.params.midSize,
-      u_density: density ?? defaultPreset12.params.density,
-      u_blending: blending ?? defaultPreset12.params.blending
-    };
-  }, [
-    colorBack,
-    color1,
-    color2,
-    color3,
-    offsetX,
-    offsetY,
-    frequency,
-    spotty,
-    midIntensity,
-    midSize,
-    density,
-    blending
-  ]);
-  return /* @__PURE__ */ jsx13(ShaderMount, { ...props, fragmentShader: godRaysFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-
-// packages/shaders-react/src/shaders/spiral.tsx
-import { useMemo as useMemo14 } from "react";
-import { getShaderColorFromString as getShaderColorFromString13, spiralFragmentShader } from "@paper-design/shaders";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var defaultPreset13 = {
-  name: "Default",
-  params: {
-    color1: "hsla(0, 0%, 98%, 1)",
-    color2: "hsla(0, 0%, 50%, 1)",
-    scale: 1,
-    offsetX: 0,
-    offsetY: 0,
-    spiralDensity: 0,
-    spiralDistortion: 0,
-    strokeWidth: 0.5,
-    strokeTaper: 0,
-    strokeCap: 0,
-    noiseFreq: 0,
-    noisePower: 0,
-    softness: 0.01,
-    speed: 1,
-    frame: 0
-  }
-};
-var noisyPreset = {
-  name: "Noisy",
-  params: {
-    color1: "hsla(87, 77%, 53%, 1)",
-    color2: "hsla(109, 70%, 31%, 1)",
-    scale: 1.3,
-    offsetX: 0,
-    offsetY: 0,
-    spiralDensity: 0.5,
-    spiralDistortion: 0,
-    strokeWidth: 0.5,
-    strokeTaper: 0,
-    strokeCap: 0.5,
-    noiseFreq: 0.1,
-    noisePower: 1,
-    softness: 0,
-    speed: 1,
-    frame: 0
-  }
-};
-var dropletPreset = {
-  name: "Droplet",
-  params: {
-    color1: "hsla(320, 50%, 50%, 1)",
-    color2: "hsla(190, 50%, 95%, 1)",
-    scale: 0.65,
-    offsetX: 0,
-    offsetY: 0,
-    spiralDensity: 0,
-    spiralDistortion: 0,
-    strokeWidth: 0.05,
-    strokeTaper: 0,
-    strokeCap: 1,
-    noiseFreq: 0,
-    noisePower: 0,
-    softness: 0,
-    speed: 1,
-    frame: 0
-  }
-};
-var sandPreset = {
-  name: "Sand",
-  params: {
-    color1: "hsla(45, 25%, 50%, 1)",
-    color2: "hsla(0, 0%, 87%, 1)",
-    scale: 3,
-    offsetX: 0,
-    offsetY: 0,
-    spiralDensity: 0,
-    spiralDistortion: 0,
-    strokeWidth: 0.15,
-    strokeTaper: 0,
-    strokeCap: 0,
-    noiseFreq: 30,
-    noisePower: 1,
-    softness: 0.2,
-    speed: 0,
-    frame: 0
-  }
-};
-var swirlPreset = {
-  name: "Swirl",
-  params: {
-    color1: "hsla(160, 50%, 80%, 1)",
-    color2: "hsla(220, 50%, 20%, 1)",
-    scale: 4,
-    offsetX: 0,
-    offsetY: 0,
-    spiralDensity: 0.8,
-    spiralDistortion: 0,
-    strokeWidth: 0.5,
-    strokeTaper: 0,
-    strokeCap: 0,
-    noiseFreq: 0,
-    noisePower: 0,
-    softness: 0.5,
-    speed: 1,
-    frame: 0
-  }
-};
-var hookPreset = {
-  name: "Hook",
-  params: {
-    color1: "hsla(0, 0%, 0%, 1)",
-    color2: "hsla(200, 50%, 70%, 1)",
-    scale: 0.8,
-    offsetX: 0,
-    offsetY: 0,
-    spiralDensity: 0,
-    spiralDistortion: 0,
-    strokeWidth: 0.5,
-    strokeTaper: 0.5,
-    strokeCap: 0,
-    noiseFreq: 0,
-    noisePower: 0,
-    softness: 0.02,
-    speed: 3,
-    frame: 0
-  }
-};
-var vinylPreset = {
-  name: "Vinyl",
-  params: {
-    color1: "hsla(0, 0%, 15%, 1)",
-    color2: "hsla(320, 5%, 75%, 1)",
-    scale: 1,
-    offsetX: 0,
-    offsetY: 0,
-    spiralDensity: 0,
-    spiralDistortion: 0.3,
-    strokeWidth: 0.95,
-    strokeTaper: 0,
-    strokeCap: 1,
-    noiseFreq: 0,
-    noisePower: 0,
-    softness: 0.11,
-    speed: 1,
-    frame: 0
-  }
-};
-var spiralPresets = [
-  defaultPreset13,
-  noisyPreset,
-  dropletPreset,
-  swirlPreset,
-  sandPreset,
-  hookPreset,
-  vinylPreset
-];
-var Spiral = ({
-  color1,
-  color2,
-  scale,
-  offsetX,
-  offsetY,
-  spiralDensity,
-  spiralDistortion,
-  strokeWidth,
-  strokeTaper,
-  strokeCap,
-  noiseFreq,
-  noisePower,
-  softness,
-  ...props
-}) => {
-  const uniforms = useMemo14(() => {
-    return {
-      u_color1: getShaderColorFromString13(color1, defaultPreset13.params.color1),
-      u_color2: getShaderColorFromString13(color2, defaultPreset13.params.color2),
-      u_scale: scale ?? defaultPreset13.params.scale,
-      u_offsetX: offsetX ?? defaultPreset13.params.offsetX,
-      u_offsetY: offsetY ?? defaultPreset13.params.offsetY,
-      u_spiralDensity: spiralDensity ?? defaultPreset13.params.spiralDensity,
-      u_spiralDistortion: spiralDistortion ?? defaultPreset13.params.spiralDistortion,
-      u_strokeWidth: strokeWidth ?? defaultPreset13.params.strokeWidth,
-      u_strokeTaper: strokeTaper ?? defaultPreset13.params.strokeTaper,
-      u_strokeCap: strokeCap ?? defaultPreset13.params.strokeCap,
-      u_noiseFreq: noiseFreq ?? defaultPreset13.params.noiseFreq,
-      u_noisePower: noisePower ?? defaultPreset13.params.noisePower,
-      u_softness: softness ?? defaultPreset13.params.softness
-    };
-  }, [
-    color1,
-    color2,
-    scale,
-    offsetX,
-    offsetY,
-    spiralDensity,
-    spiralDistortion,
-    strokeWidth,
-    strokeTaper,
-    strokeCap,
-    noiseFreq,
-    noisePower,
-    softness
-  ]);
-  return /* @__PURE__ */ jsx14(ShaderMount, { ...props, fragmentShader: spiralFragmentShader, uniforms });
-};
-
-// packages/shaders-react/src/index.ts
-import {} from "@paper-design/shaders";
-import { getShaderColorFromString as getShaderColorFromString14 } from "@paper-design/shaders";
 export {
+  Dithering,
   DotGrid,
-  DotGridShapes2 as DotGridShapes,
   DotOrbit,
   GodRays,
+  GrainGradient,
+  LiquidMetal,
   MeshGradient,
   Metaballs,
   NeuroNoise,
-  PatternShapes2 as PatternShapes,
   PerlinNoise,
+  PulsingBorder,
   ShaderMount,
+  SimplexNoise,
   SmokeRing,
   Spiral,
-  SteppedSimplexNoise,
+  Swirl,
   Voronoi,
   Warp,
   Waves,
+  ditheringPresets,
   dotGridPresets,
+  dotOrbitMeta,
   dotOrbitPresets,
-  getShaderColorFromString14 as getShaderColorFromString,
+  getShaderColorFromString,
+  godRaysMeta,
   godRaysPresets,
+  grainGradientMeta,
+  grainGradientPresets,
+  isPaperShaderElement,
+  liquidMetalPresets,
+  meshGradientMeta,
   meshGradientPresets,
+  metaballsMeta,
   metaballsPresets,
   neuroNoisePresets,
   perlinNoisePresets,
+  pulsingBorderMeta,
+  pulsingBorderPresets,
+  simplexNoiseMeta,
+  simplexNoisePresets,
+  smokeRingMeta,
   smokeRingPresets,
   spiralPresets,
-  steppedSimplexNoisePresets,
+  swirlMeta,
+  swirlPresets,
+  voronoiMeta,
   voronoiPresets,
+  warpMeta,
   warpPresets,
   wavesPresets
 };