@paper-design/shaders-react 0.0.32 → 0.0.33

package/dist/shaders/spiral.js

@@ -17,8 +17,8 @@ const defaultPreset = {
   name: "Default",
   params: {
     ...defaultPatternSizing,
-    color1: "hsla(0, 0%, 98%, 1)",
-    color2: "hsla(0, 0%, 50%, 1)",
+    color1: "#fafafa",
+    color2: "#808080",
     density: 0,
     distortion: 0,
     strokeWidth: 0.5,
@@ -35,8 +35,8 @@ const noisyPreset = {
   name: "Noisy",
   params: {
     ...defaultPatternSizing,
-    color1: "hsla(87, 77%, 53%, 1)",
-    color2: "hsla(109, 70%, 31%, 1)",
+    color1: "#a1ef2a",
+    color2: "#288918",
     scale: 1.3,
     density: 0.5,
     distortion: 0,
@@ -54,8 +54,8 @@ const dropletPreset = {
   name: "Droplet",
   params: {
     ...defaultPatternSizing,
-    color1: "hsla(320, 50%, 50%, 1)",
-    color2: "hsla(190, 50%, 95%, 1)",
+    color1: "#bf40a0",
+    color2: "#effafe",
     scale: 0.65,
     density: 0,
     distortion: 0,
@@ -73,8 +73,8 @@ const sandPreset = {
   name: "Sand",
   params: {
     ...defaultPatternSizing,
-    color1: "hsla(45, 25%, 50%, 1)",
-    color2: "hsla(0, 0%, 87%, 1)",
+    color1: "#a09560",
+    color2: "#dedede",
     scale: 3,
     density: 0,
     distortion: 0,
@@ -92,8 +92,8 @@ const swirlPreset = {
   name: "Swirl",
   params: {
     ...defaultPatternSizing,
-    color1: "hsla(160, 50%, 80%, 1)",
-    color2: "hsla(220, 50%, 20%, 1)",
+    color1: "#b3e6d9",
+    color2: "#1a2b4d",
     scale: 4,
     density: 0.8,
     distortion: 0,
@@ -111,8 +111,8 @@ const hookPreset = {
   name: "Hook",
   params: {
     ...defaultPatternSizing,
-    color1: "hsla(0, 0%, 0%, 1)",
-    color2: "hsla(200, 50%, 70%, 1)",
+    color1: "#000000",
+    color2: "#85c2e0",
     scale: 0.8,
     density: 0,
     distortion: 0,
@@ -130,8 +130,8 @@ const vinylPreset = {
   name: "Vinyl",
   params: {
     ...defaultPatternSizing,
-    color1: "hsla(0, 0%, 15%, 1)",
-    color2: "hsla(320, 5%, 75%, 1)",
+    color1: "#262626",
+    color2: "#c2babb",
     density: 0,
     distortion: 0.3,
     strokeWidth: 0.95,

package/dist/shaders/spiral.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/spiral.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  ShaderFitOptions,\n  spiralFragmentShader,\n  type ShaderPreset,\n  type SpiralParams,\n  type SpiralUniforms,\n} from '@paper-design/shaders';\n\nexport interface SpiralProps extends ShaderComponentProps, SpiralParams {}\n\ntype SpiralPreset = ShaderPreset<SpiralParams>;\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: SpiralPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    color1: 'hsla(0, 0%, 98%, 1)',\n    color2: 'hsla(0, 0%, 50%, 1)',\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.01,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const noisyPreset: SpiralPreset = {\n  name: 'Noisy',\n  params: {\n    ...defaultPatternSizing,\n    color1: 'hsla(87, 77%, 53%, 1)',\n    color2: 'hsla(109, 70%, 31%, 1)',\n    scale: 1.3,\n    density: 0.5,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0.5,\n    noiseFrequency: 0.1,\n    noisePower: 1,\n    softness: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const dropletPreset: SpiralPreset = {\n  name: 'Droplet',\n  params: {\n    ...defaultPatternSizing,\n    color1: 'hsla(320, 50%, 50%, 1)',\n    color2: 'hsla(190, 50%, 95%, 1)',\n    scale: 0.65,\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.05,\n    strokeTaper: 0,\n    strokeCap: 1,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const sandPreset: SpiralPreset = {\n  name: 'Sand',\n  params: {\n    ...defaultPatternSizing,\n    color1: 'hsla(45, 25%, 50%, 1)',\n    color2: 'hsla(0, 0%, 87%, 1)',\n    scale: 3,\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.15,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noiseFrequency: 30,\n    noisePower: 1,\n    softness: 0.2,\n    speed: 0,\n    frame: 0,\n  },\n};\n\nexport const swirlPreset: SpiralPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultPatternSizing,\n    color1: 'hsla(160, 50%, 80%, 1)',\n    color2: 'hsla(220, 50%, 20%, 1)',\n    scale: 4,\n    density: 0.8,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.5,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const hookPreset: SpiralPreset = {\n  name: 'Hook',\n  params: {\n    ...defaultPatternSizing,\n    color1: 'hsla(0, 0%, 0%, 1)',\n    color2: 'hsla(200, 50%, 70%, 1)',\n    scale: 0.8,\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0.5,\n    strokeCap: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.02,\n    speed: 3,\n    frame: 0,\n  },\n};\n\nexport const vinylPreset: SpiralPreset = {\n  name: 'Vinyl',\n  params: {\n    ...defaultPatternSizing,\n    color1: 'hsla(0, 0%, 15%, 1)',\n    color2: 'hsla(320, 5%, 75%, 1)',\n    density: 0,\n    distortion: 0.3,\n    strokeWidth: 0.95,\n    strokeTaper: 0,\n    strokeCap: 1,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.11,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const spiralPresets: SpiralPreset[] = [\n  defaultPreset,\n  noisyPreset,\n  dropletPreset,\n  swirlPreset,\n  sandPreset,\n  hookPreset,\n  vinylPreset,\n];\n\nexport const Spiral: React.FC<SpiralProps> = memo(function SpiralImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  color1 = defaultPreset.params.color1,\n  color2 = defaultPreset.params.color2,\n  density = defaultPreset.params.density,\n  distortion = defaultPreset.params.distortion,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  strokeTaper = defaultPreset.params.strokeTaper,\n  strokeCap = defaultPreset.params.strokeCap,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noisePower = defaultPreset.params.noisePower,\n  softness = defaultPreset.params.softness,\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}: SpiralProps) {\n  const uniforms = {\n    // Own uniforms\n    u_color1: getShaderColorFromString(color1),\n    u_color2: getShaderColorFromString(color2),\n    u_density: density,\n    u_distortion: distortion,\n    u_strokeWidth: strokeWidth,\n    u_strokeTaper: strokeTaper,\n    u_strokeCap: strokeCap,\n    u_noiseFrequency: noiseFrequency,\n    u_noisePower: noisePower,\n    u_softness: softness,\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 SpiralUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={spiralFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "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  ShaderFitOptions,\n  spiralFragmentShader,\n  type ShaderPreset,\n  type SpiralParams,\n  type SpiralUniforms,\n} from '@paper-design/shaders';\n\nexport interface SpiralProps extends ShaderComponentProps, SpiralParams {}\n\ntype SpiralPreset = ShaderPreset<SpiralParams>;\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: SpiralPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    color1: '#fafafa',\n    color2: '#808080',\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.01,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const noisyPreset: SpiralPreset = {\n  name: 'Noisy',\n  params: {\n    ...defaultPatternSizing,\n    color1: '#a1ef2a',\n    color2: '#288918',\n    scale: 1.3,\n    density: 0.5,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0.5,\n    noiseFrequency: 0.1,\n    noisePower: 1,\n    softness: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const dropletPreset: SpiralPreset = {\n  name: 'Droplet',\n  params: {\n    ...defaultPatternSizing,\n    color1: '#bf40a0',\n    color2: '#effafe',\n    scale: 0.65,\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.05,\n    strokeTaper: 0,\n    strokeCap: 1,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const sandPreset: SpiralPreset = {\n  name: 'Sand',\n  params: {\n    ...defaultPatternSizing,\n    color1: '#a09560',\n    color2: '#dedede',\n    scale: 3,\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.15,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noiseFrequency: 30,\n    noisePower: 1,\n    softness: 0.2,\n    speed: 0,\n    frame: 0,\n  },\n};\n\nexport const swirlPreset: SpiralPreset = {\n  name: 'Swirl',\n  params: {\n    ...defaultPatternSizing,\n    color1: '#b3e6d9',\n    color2: '#1a2b4d',\n    scale: 4,\n    density: 0.8,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0,\n    strokeCap: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.5,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const hookPreset: SpiralPreset = {\n  name: 'Hook',\n  params: {\n    ...defaultPatternSizing,\n    color1: '#000000',\n    color2: '#85c2e0',\n    scale: 0.8,\n    density: 0,\n    distortion: 0,\n    strokeWidth: 0.5,\n    strokeTaper: 0.5,\n    strokeCap: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.02,\n    speed: 3,\n    frame: 0,\n  },\n};\n\nexport const vinylPreset: SpiralPreset = {\n  name: 'Vinyl',\n  params: {\n    ...defaultPatternSizing,\n    color1: '#262626',\n    color2: '#c2babb',\n    density: 0,\n    distortion: 0.3,\n    strokeWidth: 0.95,\n    strokeTaper: 0,\n    strokeCap: 1,\n    noiseFrequency: 0,\n    noisePower: 0,\n    softness: 0.11,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const spiralPresets: SpiralPreset[] = [\n  defaultPreset,\n  noisyPreset,\n  dropletPreset,\n  swirlPreset,\n  sandPreset,\n  hookPreset,\n  vinylPreset,\n];\n\nexport const Spiral: React.FC<SpiralProps> = memo(function SpiralImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  color1 = defaultPreset.params.color1,\n  color2 = defaultPreset.params.color2,\n  density = defaultPreset.params.density,\n  distortion = defaultPreset.params.distortion,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  strokeTaper = defaultPreset.params.strokeTaper,\n  strokeCap = defaultPreset.params.strokeCap,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noisePower = defaultPreset.params.noisePower,\n  softness = defaultPreset.params.softness,\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}: SpiralProps) {\n  const uniforms = {\n    // Own uniforms\n    u_color1: getShaderColorFromString(color1),\n    u_color2: getShaderColorFromString(color2),\n    u_density: density,\n    u_distortion: distortion,\n    u_strokeWidth: strokeWidth,\n    u_strokeTaper: strokeTaper,\n    u_strokeCap: strokeCap,\n    u_noiseFrequency: noiseFrequency,\n    u_noisePower: noisePower,\n    u_softness: softness,\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 SpiralUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={spiralFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
   "mappings": "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",
   "names": []
 }

package/dist/shaders/swirl.js

@@ -22,7 +22,7 @@ const defaultPreset = {
     offsetY: 0.3,
     speed: 0.32,
     frame: 0,
-    colors: ["hsla(0, 29%, 20%, 1)", "hsla(105, 93%, 27%, 1)", "hsla(43, 100%, 76%, 1)", "hsla(351, 100%, 60%, 1)"],
+    colors: ["#452424", "#0b7f05", "#ffe785", "#ff335c"],
     bandCount: 5,
     twist: 0.11,
     softness: 0.01,
@@ -38,14 +38,7 @@ const openingPreset = {
     offsetY: 0.86,
     speed: 0.6,
     frame: 0,
-    colors: [
-      "hsla(330, 49%, 36%, 1)",
-      "hsla(336, 47%, 50%, 1)",
-      "hsla(6, 72%, 66%, 1)",
-      "hsla(20, 100%, 68%, 1)",
-      "hsla(45, 100%, 68%, 1)",
-      "hsla(60, 94%, 75%, 1)"
-    ],
+    colors: ["#8b2e5f", "#b14467", "#e67a62", "#ff715c", "#ffc55c", "#f9f97c"],
     bandCount: 3,
     twist: 0.3,
     softness: 0,
@@ -59,7 +52,7 @@ const jamesBondPreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    colors: ["hsla(0, 0%, 0%, 1)", "hsla(0, 0%, 18%, 1)", "hsla(0, 0%, 0%, 1)", "hsla(0, 0%, 100%, 1)"],
+    colors: ["#000000", "#2e2e2e", "#000000", "#ffffff"],
     bandCount: 4,
     twist: 0.4,
     softness: 0,
@@ -73,7 +66,7 @@ const candyPreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    colors: ["hsla(45, 100%, 70%, 1)", "hsla(200, 80%, 65%, 1)", "hsla(280, 90%, 60%, 1)"],
+    colors: ["#ffcd66", "#6bbceb", "#8a1fff"],
     bandCount: 2.5,
     twist: 0.2,
     softness: 1,

package/dist/shaders/swirl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/swirl.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  swirlFragmentShader,\n  type ShaderPreset,\n  type SwirlParams,\n  type SwirlUniforms,\n} from '@paper-design/shaders';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\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: SwirlPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 2.28,\n    offsetX: -0.4,\n    offsetY: 0.3,\n    speed: 0.32,\n    frame: 0,\n    colors: ['hsla(0, 29%, 20%, 1)', 'hsla(105, 93%, 27%, 1)', 'hsla(43, 100%, 76%, 1)', 'hsla(351, 100%, 60%, 1)'],\n    bandCount: 5,\n    twist: 0.11,\n    softness: 0.01,\n    noiseFrequency: 1.2,\n    noisePower: 0.46,\n  },\n};\n\nexport const openingPreset: SwirlPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.4,\n    offsetY: 0.86,\n    speed: 0.6,\n    frame: 0,\n    colors: [\n      'hsla(330, 49%, 36%, 1)',\n      'hsla(336, 47%, 50%, 1)',\n      'hsla(6, 72%, 66%, 1)',\n      'hsla(20, 100%, 68%, 1)',\n      'hsla(45, 100%, 68%, 1)',\n      'hsla(60, 94%, 75%, 1)',\n    ],\n    bandCount: 3,\n    twist: 0.3,\n    softness: 0,\n    noiseFrequency: 2,\n    noisePower: 0,\n  },\n} as const;\n\nexport const jamesBondPreset: SwirlPreset = {\n  name: '007',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(0, 0%, 0%, 1)', 'hsla(0, 0%, 18%, 1)', 'hsla(0, 0%, 0%, 1)', 'hsla(0, 0%, 100%, 1)'],\n    bandCount: 4,\n    twist: 0.4,\n    softness: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n  },\n} as const;\n\nexport const candyPreset: SwirlPreset = {\n  name: 'Candy',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['hsla(45, 100%, 70%, 1)', 'hsla(200, 80%, 65%, 1)', 'hsla(280, 90%, 60%, 1)'],\n    bandCount: 2.5,\n    twist: 0.2,\n    softness: 1,\n    noiseFrequency: 0,\n    noisePower: 0,\n  },\n} as const;\n\nexport const swirlPresets: SwirlPreset[] = [defaultPreset, openingPreset, jamesBondPreset, candyPreset];\n\nexport const Swirl: React.FC<SwirlProps> = memo(function SwirlImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  bandCount = defaultPreset.params.bandCount,\n  twist = defaultPreset.params.twist,\n  softness = defaultPreset.params.softness,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noisePower = defaultPreset.params.noisePower,\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}: SwirlProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_bandCount: bandCount,\n    u_twist: twist,\n    u_softness: softness,\n    u_noiseFrequency: noiseFrequency,\n    u_noisePower: noisePower,\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 SwirlUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={swirlFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  ShaderFitOptions,\n  swirlFragmentShader,\n  type ShaderPreset,\n  type SwirlParams,\n  type SwirlUniforms,\n} from '@paper-design/shaders';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\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: SwirlPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    scale: 2.28,\n    offsetX: -0.4,\n    offsetY: 0.3,\n    speed: 0.32,\n    frame: 0,\n    colors: ['#452424', '#0b7f05', '#ffe785', '#ff335c'],\n    bandCount: 5,\n    twist: 0.11,\n    softness: 0.01,\n    noiseFrequency: 1.2,\n    noisePower: 0.46,\n  },\n};\n\nexport const openingPreset: SwirlPreset = {\n  name: 'Opening',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.4,\n    offsetY: 0.86,\n    speed: 0.6,\n    frame: 0,\n    colors: ['#8b2e5f', '#b14467', '#e67a62', '#ff715c', '#ffc55c', '#f9f97c'],\n    bandCount: 3,\n    twist: 0.3,\n    softness: 0,\n    noiseFrequency: 2,\n    noisePower: 0,\n  },\n} as const;\n\nexport const jamesBondPreset: SwirlPreset = {\n  name: '007',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#000000', '#2e2e2e', '#000000', '#ffffff'],\n    bandCount: 4,\n    twist: 0.4,\n    softness: 0,\n    noiseFrequency: 0,\n    noisePower: 0,\n  },\n} as const;\n\nexport const candyPreset: SwirlPreset = {\n  name: 'Candy',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#ffcd66', '#6bbceb', '#8a1fff'],\n    bandCount: 2.5,\n    twist: 0.2,\n    softness: 1,\n    noiseFrequency: 0,\n    noisePower: 0,\n  },\n} as const;\n\nexport const swirlPresets: SwirlPreset[] = [defaultPreset, openingPreset, jamesBondPreset, candyPreset];\n\nexport const Swirl: React.FC<SwirlProps> = memo(function SwirlImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  bandCount = defaultPreset.params.bandCount,\n  twist = defaultPreset.params.twist,\n  softness = defaultPreset.params.softness,\n  noiseFrequency = defaultPreset.params.noiseFrequency,\n  noisePower = defaultPreset.params.noisePower,\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}: SwirlProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_bandCount: bandCount,\n    u_twist: twist,\n    u_softness: softness,\n    u_noiseFrequency: noiseFrequency,\n    u_noisePower: noisePower,\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 SwirlUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={swirlFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/shaders/voronoi.js

@@ -20,10 +20,10 @@ const defaultPreset = {
     ...defaultPatternSizing,
     speed: 0.5,
     frame: 0,
-    colors: ["hsla(15, 80%, 50%, 1)", "hsla(50, 80%, 50%, 1)", "hsla(200, 80%, 50%, 1)"],
+    colors: ["#e65c1a", "#e6c31a", "#1aace6"],
     stepsPerColor: 1,
-    colorGlow: "hsla(266, 100%, 50%, 1)",
-    colorBack: "hsla(0, 0%, 100%, 1)",
+    colorGlow: "#5500ff",
+    colorBack: "#ffffff",
     distortion: 0.42,
     gap: 0.06,
     innerGlow: 0
@@ -35,10 +35,10 @@ const shadowPreset = {
     ...defaultPatternSizing,
     speed: 0.5,
     frame: 0,
-    colors: ["hsla(259, 29%, 98%, 1)", "hsla(48, 73%, 98%, 1)", "hsla(295, 32%, 98%, 1)"],
+    colors: ["#faf7fe", "#fefdf7", "#fbf7fe"],
     stepsPerColor: 1,
-    colorGlow: "hsla(290, 18%, 42%, 1)",
-    colorBack: "hsla(0, 0%, 100%, 1)",
+    colorGlow: "#76587a",
+    colorBack: "#ffffff",
     distortion: 0.23,
     gap: 0,
     innerGlow: 0.8

package/dist/shaders/voronoi.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/voronoi.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  getShaderNoiseTexture,\n  voronoiFragmentShader,\n  ShaderFitOptions,\n  type VoronoiParams,\n  type VoronoiUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface VoronoiProps extends ShaderComponentProps, VoronoiParams {}\n\ntype VoronoiPreset = ShaderPreset<VoronoiParams>;\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: VoronoiPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['hsla(15, 80%, 50%, 1)', 'hsla(50, 80%, 50%, 1)', 'hsla(200, 80%, 50%, 1)'],\n    stepsPerColor: 1,\n    colorGlow: 'hsla(266, 100%, 50%, 1)',\n    colorBack: 'hsla(0, 0%, 100%, 1)',\n    distortion: 0.42,\n    gap: 0.06,\n    innerGlow: 0,\n  },\n};\n\nexport const shadowPreset: VoronoiPreset = {\n  name: 'Shadow',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['hsla(259, 29%, 98%, 1)', 'hsla(48, 73%, 98%, 1)', 'hsla(295, 32%, 98%, 1)'],\n    stepsPerColor: 1,\n    colorGlow: 'hsla(290, 18%, 42%, 1)',\n    colorBack: 'hsla(0, 0%, 100%, 1)',\n    distortion: 0.23,\n    gap: 0,\n    innerGlow: 0.8,\n  },\n};\n\nexport const voronoiPresets: VoronoiPreset[] = [defaultPreset, shadowPreset];\n\nexport const Voronoi: React.FC<VoronoiProps> = memo(function VoronoiImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\n  colorGlow = defaultPreset.params.colorGlow,\n  colorBack = defaultPreset.params.colorBack,\n  distortion = defaultPreset.params.distortion,\n  gap = defaultPreset.params.gap,\n  innerGlow = defaultPreset.params.innerGlow,\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}: VoronoiProps) {\n  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_stepsPerColor: stepsPerColor,\n    u_colorGlow: getShaderColorFromString(colorGlow),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_distortion: distortion,\n    u_gap: gap,\n    u_innerGlow: innerGlow,\n    ...noiseTexture,\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 VoronoiUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={voronoiFragmentShader} 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,EACA;AAAA,OAIK;AA+FH;AArFG,MAAM,gBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,yBAAyB,yBAAyB,wBAAwB;AAAA,IACnF,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AACF;AAEO,MAAM,eAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,0BAA0B,yBAAyB,wBAAwB;AAAA,IACpF,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AACF;AAEO,MAAM,iBAAkC,CAAC,eAAe,YAAY;AAEpE,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,aAAa,cAAc,OAAO;AAAA,EAClC,MAAM,cAAc,OAAO;AAAA,EAC3B,YAAY,cAAc,OAAO;AAAA;AAAA,EAGjC,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,GAAiB;AACf,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,EAAE;AAEhG,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,aAAa,yBAAyB,SAAS;AAAA,IAC/C,aAAa,yBAAyB,SAAS;AAAA,IAC/C,cAAc;AAAA,IACd,OAAO;AAAA,IACP,aAAa;AAAA,IACb,GAAG;AAAA;AAAA,IAGH,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,uBAAuB,UAAoB;AAEnH,GAAG,kBAAkB;",
+  "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  getShaderNoiseTexture,\n  voronoiFragmentShader,\n  ShaderFitOptions,\n  type VoronoiParams,\n  type VoronoiUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface VoronoiProps extends ShaderComponentProps, VoronoiParams {}\n\ntype VoronoiPreset = ShaderPreset<VoronoiParams>;\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: VoronoiPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#e65c1a', '#e6c31a', '#1aace6'],\n    stepsPerColor: 1,\n    colorGlow: '#5500ff',\n    colorBack: '#ffffff',\n    distortion: 0.42,\n    gap: 0.06,\n    innerGlow: 0,\n  },\n};\n\nexport const shadowPreset: VoronoiPreset = {\n  name: 'Shadow',\n  params: {\n    ...defaultPatternSizing,\n    speed: 0.5,\n    frame: 0,\n    colors: ['#faf7fe', '#fefdf7', '#fbf7fe'],\n    stepsPerColor: 1,\n    colorGlow: '#76587a',\n    colorBack: '#ffffff',\n    distortion: 0.23,\n    gap: 0,\n    innerGlow: 0.8,\n  },\n};\n\nexport const voronoiPresets: VoronoiPreset[] = [defaultPreset, shadowPreset];\n\nexport const Voronoi: React.FC<VoronoiProps> = memo(function VoronoiImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  stepsPerColor = defaultPreset.params.stepsPerColor,\n  colorGlow = defaultPreset.params.colorGlow,\n  colorBack = defaultPreset.params.colorBack,\n  distortion = defaultPreset.params.distortion,\n  gap = defaultPreset.params.gap,\n  innerGlow = defaultPreset.params.innerGlow,\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}: VoronoiProps) {\n  const noiseTexture = typeof window !== 'undefined' && { u_noiseTexture: getShaderNoiseTexture() };\n\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_stepsPerColor: stepsPerColor,\n    u_colorGlow: getShaderColorFromString(colorGlow),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_distortion: distortion,\n    u_gap: gap,\n    u_innerGlow: innerGlow,\n    ...noiseTexture,\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 VoronoiUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={voronoiFragmentShader} 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,EACA;AAAA,OAIK;AA+FH;AArFG,MAAM,gBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AACF;AAEO,MAAM,eAA8B;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AACF;AAEO,MAAM,iBAAkC,CAAC,eAAe,YAAY;AAEpE,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,SAAS,cAAc,OAAO;AAAA,EAC9B,gBAAgB,cAAc,OAAO;AAAA,EACrC,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,aAAa,cAAc,OAAO;AAAA,EAClC,MAAM,cAAc,OAAO;AAAA,EAC3B,YAAY,cAAc,OAAO;AAAA;AAAA,EAGjC,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,GAAiB;AACf,QAAM,eAAe,OAAO,WAAW,eAAe,EAAE,gBAAgB,sBAAsB,EAAE;AAEhG,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,iBAAiB;AAAA,IACjB,aAAa,yBAAyB,SAAS;AAAA,IAC/C,aAAa,yBAAyB,SAAS;AAAA,IAC/C,cAAc;AAAA,IACd,OAAO;AAAA,IACP,aAAa;AAAA,IACb,GAAG;AAAA;AAAA,IAGH,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,uBAAuB,UAAoB;AAEnH,GAAG,kBAAkB;",
   "names": []
 }

package/dist/shaders/warp.d.ts

@@ -4,16 +4,16 @@ export interface WarpProps extends ShaderComponentProps, WarpParams {
 }
 type WarpPreset = ShaderPreset<WarpParams>;
 export declare const defaultPreset: WarpPreset;
-export declare const presetCauldron: WarpPreset;
-export declare const presetSilk: WarpPreset;
-export declare const presetPassion: WarpPreset;
-export declare const presetPhantom: WarpPreset;
 export declare const presetAbyss: WarpPreset;
-export declare const presetInk: WarpPreset;
-export declare const presetIceberg: WarpPreset;
-export declare const presetNectar: WarpPreset;
+export declare const presetCauldron: WarpPreset;
 export declare const presetFilteredLight: WarpPreset;
+export declare const presetIceberg: WarpPreset;
+export declare const presetInk: WarpPreset;
 export declare const presetKelp: WarpPreset;
+export declare const presetNectar: WarpPreset;
+export declare const presetPassion: WarpPreset;
+export declare const presetPhantom: WarpPreset;
+export declare const presetSilk: WarpPreset;
 export declare const warpPresets: WarpPreset[];
 export declare const Warp: React.FC<WarpProps>;
 export {};

package/dist/shaders/warp.js

@@ -21,13 +21,31 @@ const defaultPreset = {
     rotation: 0,
     speed: 1,
     frame: 0,
-    colors: ["hsla(0, 0%, 15%, 1)", "hsla(203, 80%, 70%, 1)", "hsla(0, 0%, 100%, 1)"],
+    colors: ["#262626", "#7accf2", "#ffffff"],
     proportion: 0.35,
     softness: 1,
     distortion: 0.25,
     swirl: 0.8,
     swirlIterations: 10,
     shapeScale: 0.1,
+    shape: "checks"
+  }
+};
+const presetAbyss = {
+  name: "The Abyss",
+  params: {
+    ...defaultPatternSizing,
+    scale: 3,
+    rotation: 2,
+    speed: 0.6,
+    frame: 0,
+    colors: ["#15122e", "#7b89f2", "#ffffff"],
+    proportion: 0,
+    softness: 1,
+    distortion: 0.09,
+    swirl: 0.48,
+    swirlIterations: 5,
+    shapeScale: 0.85,
     shape: "edge"
   }
 };
@@ -35,179 +53,165 @@ const presetCauldron = {
   name: "Cauldron Pot",
   params: {
     ...defaultPatternSizing,
-    scale: 1 / 1.1,
-    rotation: 1.62,
-    speed: 10,
+    scale: 0.9,
+    rotation: 160,
+    speed: 20,
     frame: 0,
-    colors: ["hsla(100, 51%, 75%, 1)", "hsla(220, 39%, 32%, 1)", "hsla(129.2, 41.9%, 6.1%, 1)"],
+    colors: ["#a7e58b", "#324472", "#0a180d"],
     proportion: 0.64,
-    softness: 0.95,
+    softness: 1.5,
     distortion: 0.2,
     swirl: 0.86,
     swirlIterations: 7,
-    shapeScale: 0,
+    shapeScale: 0.6,
     shape: "edge"
   }
 };
-const presetSilk = {
-  name: "Silk",
-  params: {
-    ...defaultPatternSizing,
-    scale: 1 / 0.26,
-    rotation: 0,
-    speed: 5,
-    frame: 0,
-    colors: ["hsla(0, 9%, 7%, 1)", "hsla(8, 13%, 34%, 1)", "hsla(5, 8%, 71%, 1)"],
-    proportion: 0,
-    softness: 1,
-    distortion: 0.3,
-    swirl: 0.6,
-    swirlIterations: 11,
-    shapeScale: 0.05,
-    shape: "stripes"
-  }
-};
-const presetPassion = {
-  name: "Passion",
+const presetFilteredLight = {
+  name: "Filtered Light",
   params: {
     ...defaultPatternSizing,
-    scale: 1 / 0.25,
-    rotation: 1.35,
-    speed: 3,
+    scale: 0.3,
+    rotation: 45,
+    speed: 3.2,
     frame: 0,
-    colors: ["hsla(0, 44.7%, 14.9%, 1)", "hsla(353.4, 34%, 42.2%, 1)", "hsla(29, 100%, 76.1%, 1)"],
-    proportion: 0.5,
+    colors: ["#171714", "#d4d8be", "#f9f9e0"],
+    proportion: 0.4,
     softness: 1,
     distortion: 0.09,
-    swirl: 0.9,
-    swirlIterations: 6,
-    shapeScale: 0.25,
-    shape: "checks"
+    swirl: 0.1,
+    swirlIterations: 0,
+    shapeScale: 0.1,
+    shape: "stripes"
   }
 };
-const presetPhantom = {
-  name: "Phantom",
+const presetIceberg = {
+  name: "Iceberg",
   params: {
     ...defaultPatternSizing,
-    scale: 1 / 0.68,
-    rotation: 1.8,
-    speed: 12,
+    scale: 0.8,
+    rotation: 190,
+    offsetX: 0.3,
+    speed: 0.5,
     frame: 0,
-    colors: ["hsla(242.2, 44.3%, 12%, 1)", "hsla(236.1, 80.4%, 70%, 1)", "hsla(0, 0%, 100%, 1)"],
-    proportion: 0.45,
-    softness: 1,
-    distortion: 0.16,
-    swirl: 0.3,
+    colors: ["#ffffff", "#324771", "#0a180d"],
+    proportion: 0.3,
+    softness: 1.2,
+    distortion: 0.2,
+    swirl: 0.86,
     swirlIterations: 7,
-    shapeScale: 0.1,
+    shapeScale: 0,
     shape: "checks"
   }
 };
-const presetAbyss = {
-  name: "The Abyss",
-  params: {
-    ...defaultPatternSizing,
-    scale: 1 / 0.1,
-    rotation: 2,
-    speed: 0.6,
-    frame: 0,
-    colors: ["hsla(242.2, 44.3%, 12%, 1)", "hsla(236.1, 80.4%, 70%, 1)", "hsla(0, 0%, 100%, 1)"],
-    proportion: 0,
-    softness: 1,
-    distortion: 0.09,
-    swirl: 0.48,
-    swirlIterations: 4,
-    shapeScale: 0.1,
-    shape: "edge"
-  }
-};
 const presetInk = {
   name: "Live Ink",
   params: {
     ...defaultPatternSizing,
-    scale: 1 / 0.7,
-    rotation: 1.5,
-    speed: 2.5,
+    scale: 1.2,
+    rotation: 44,
+    offsetY: -0.3,
+    speed: 10,
     frame: 0,
-    colors: ["hsla(210, 11.1%, 7.1%, 1)", "hsla(165, 9%, 65.1%, 1)", "hsla(84, 100%, 97.1%, 1)"],
+    colors: ["#111314", "#9faeab", "#f3fee7"],
     proportion: 0.35,
     softness: 0,
     distortion: 0.25,
     swirl: 0.8,
     swirlIterations: 10,
-    shapeScale: 0.26,
+    shapeScale: 0.28,
     shape: "checks"
   }
 };
-const presetIceberg = {
-  name: "Iceberg",
+const presetKelp = {
+  name: "Kelp",
   params: {
     ...defaultPatternSizing,
-    scale: 1 / 1.1,
-    rotation: 2,
-    speed: 0.5,
+    scale: 0.88,
+    rotation: 50,
+    speed: 80,
     frame: 0,
-    colors: ["hsla(0, 0%, 100%, 1)", "hsla(220, 38.7%, 32%, 1)", "hsla(129.2, 41.9%, 6.1%, 1)"],
-    proportion: 0.3,
-    softness: 1,
-    distortion: 0.2,
-    swirl: 0.86,
-    swirlIterations: 7,
-    shapeScale: 0,
-    shape: "checks"
+    colors: ["#dbff8f", "#404f3e", "#091316"],
+    proportion: 0.93,
+    softness: 0.05,
+    distortion: 0,
+    swirl: 0.15,
+    swirlIterations: 0,
+    shapeScale: 0.74,
+    shape: "stripes"
   }
 };
 const presetNectar = {
   name: "Nectar",
   params: {
     ...defaultPatternSizing,
-    scale: 1 / 0.24,
+    scale: 2,
+    offsetY: 0.6,
     rotation: 0,
-    speed: 4.2,
+    speed: 30,
     frame: 0,
-    colors: ["hsla(37.5, 22.2%, 7.1%, 1)", "hsla(38.5, 59.1%, 63.1%, 1)", "hsla(37.6, 30%, 95.2%, 1)"],
+    colors: ["#151310", "#d3a86b", "#f0edea"],
     proportion: 0.24,
     softness: 1,
     distortion: 0.21,
     swirl: 0.57,
     swirlIterations: 10,
-    shapeScale: 0.32,
+    shapeScale: 0.75,
     shape: "edge"
   }
 };
-const presetFilteredLight = {
-  name: "Filtered Light",
+const presetPassion = {
+  name: "Passion",
   params: {
     ...defaultPatternSizing,
-    scale: 2,
-    rotation: 0.44,
-    speed: 3.2,
+    scale: 2.5,
+    rotation: 1.35,
+    speed: 15,
     frame: 0,
-    colors: ["hsla(60.2, 7.8%, 8.3%, 1)", "hsla(64.4, 27.8%, 81%, 1)", "hsla(60, 100%, 93.9%, 1)"],
-    proportion: 0.25,
+    colors: ["#3b1515", "#954751", "#ffc085"],
+    proportion: 0.5,
     softness: 1,
-    distortion: 0.06,
-    swirl: 0,
-    swirlIterations: 0,
-    shapeScale: 0,
-    shape: "stripes"
+    distortion: 0.09,
+    swirl: 0.9,
+    swirlIterations: 6,
+    shapeScale: 0.25,
+    shape: "checks"
   }
 };
-const presetKelp = {
-  name: "Kelp",
+const presetPhantom = {
+  name: "Phantom",
   params: {
     ...defaultPatternSizing,
-    scale: 0.38,
-    rotation: 0.6,
-    speed: 20,
+    scale: 1.2,
+    rotation: 180,
+    offsetY: -0.2,
+    speed: 30,
     frame: 0,
-    colors: ["hsla(79.3, 100%, 78%, 1)", "hsla(112, 10.5%, 28%, 1)", "hsla(203.3, 50%, 7.1%, 1)"],
-    proportion: 1,
-    softness: 0,
-    distortion: 0,
-    swirl: 0.15,
-    swirlIterations: 0,
-    shapeScale: 0.74,
+    colors: ["#12112c", "#7b89f2", "#d7dcfb"],
+    proportion: 0.5,
+    softness: 1,
+    distortion: 0.2,
+    swirl: 0.3,
+    swirlIterations: 7,
+    shapeScale: 0.1,
+    shape: "checks"
+  }
+};
+const presetSilk = {
+  name: "Silk",
+  params: {
+    ...defaultPatternSizing,
+    scale: 2,
+    rotation: 0,
+    speed: 5,
+    frame: 0,
+    colors: ["#141111", "#665551", "#baaea9"],
+    proportion: 0,
+    softness: 1,
+    distortion: 0.3,
+    swirl: 0.6,
+    swirlIterations: 11,
+    shapeScale: 0.25,
     shape: "stripes"
   }
 };