@paper-design/shaders-react 0.0.33 → 0.0.34

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/dot-grid.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  getShaderColorFromString,\n  dotGridFragmentShader,\n  DotGridShapes,\n  ShaderFitOptions,\n  type DotGridParams,\n  type DotGridUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\n\nexport interface DotGridProps extends ShaderComponentProps, DotGridParams {}\n\ntype DotGridPreset = ShaderPreset<DotGridParams>;\n\nexport const defaultPreset: DotGridPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#000000',\n    colorFill: '#ffffff',\n    colorStroke: '#00000000',\n    size: 2,\n    gapX: 50,\n    gapY: 50,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'circle',\n  },\n};\n\nexport const macrodataPreset: DotGridPreset = {\n  name: 'Macrodata',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#15212d',\n    colorFill: '#5794ff',\n    colorStroke: '#00000000',\n    size: 3,\n    gapX: 25,\n    gapY: 25,\n    strokeWidth: 0,\n    sizeRange: 0.25,\n    opacityRange: 0.9,\n    shape: 'circle',\n  },\n};\n\nconst trianglesPreset: DotGridPreset = {\n  name: 'Triangles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#ffffff',\n    colorStroke: '#808080',\n    size: 5,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'triangle',\n  },\n};\n\nconst bubblesPreset: DotGridPreset = {\n  name: 'Bubbles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#002c9e80',\n    colorFill: '#ffffff',\n    colorStroke: '#000000',\n    size: 15,\n    gapX: 60,\n    gapY: 60,\n    strokeWidth: 12,\n    sizeRange: 0.7,\n    opacityRange: 1.3,\n    shape: 'circle',\n  },\n};\n\nconst treeLinePreset: DotGridPreset = {\n  name: 'Tree line',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#f4fce7',\n    colorFill: '#052e19',\n    colorStroke: '#00000000',\n    size: 8,\n    gapX: 20,\n    gapY: 90,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0.6,\n    shape: 'circle',\n  },\n};\n\nconst diamondsPreset: DotGridPreset = {\n  name: 'Diamonds',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#ff0000',\n    colorStroke: '#00000000',\n    size: 15,\n    gapX: 30,\n    gapY: 30,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 2,\n    shape: 'diamond',\n  },\n};\n\nconst wallpaperPreset: DotGridPreset = {\n  name: 'Wallpaper',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#204030',\n    colorFill: '#00000000',\n    colorStroke: '#bd955b',\n    size: 9,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'diamond',\n  },\n};\n\nconst matrixPreset: DotGridPreset = {\n  name: 'Enter the Matrix',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#000000',\n    colorFill: '#47ffea',\n    colorStroke: '#00000000',\n    size: 2,\n    gapX: 10,\n    gapY: 10,\n    strokeWidth: 0.5,\n    sizeRange: 0.25,\n    opacityRange: 1,\n    shape: 'triangle',\n  },\n};\n\nconst waveformPreset: DotGridPreset = {\n  name: 'Waveform',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#0934b8',\n    colorStroke: '#00000000',\n    size: 100,\n    gapX: 2,\n    gapY: 215,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0,\n    shape: 'square',\n  },\n};\n\nexport const dotGridPresets: DotGridPreset[] = [\n  defaultPreset,\n  macrodataPreset,\n  trianglesPreset,\n  bubblesPreset,\n  treeLinePreset,\n  diamondsPreset,\n  wallpaperPreset,\n  matrixPreset,\n  waveformPreset,\n];\n\nexport const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorFill = defaultPreset.params.colorFill,\n  colorStroke = defaultPreset.params.colorStroke,\n  size = defaultPreset.params.size,\n  gapX = defaultPreset.params.gapX,\n  gapY = defaultPreset.params.gapY,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  sizeRange = defaultPreset.params.sizeRange,\n  opacityRange = defaultPreset.params.opacityRange,\n  shape = defaultPreset.params.shape,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: DotGridProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFill: getShaderColorFromString(colorFill),\n    u_colorStroke: getShaderColorFromString(colorStroke),\n    u_dotSize: size,\n    u_gapX: gapX,\n    u_gapY: gapY,\n    u_strokeWidth: strokeWidth,\n    u_sizeRange: sizeRange,\n    u_opacityRange: opacityRange,\n    u_shape: DotGridShapes[shape],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies DotGridUniforms;\n\n  return (\n    <ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,OACK;AAqOH;AA3NG,MAAM,gBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEO,MAAM,kBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,kBAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAA+B;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,iBAAgC;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,iBAAgC;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,kBAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,eAA8B;AAAA,EAClC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEA,MAAM,iBAAgC;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AACF;AAEO,MAAM,iBAAkC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,cAAc,cAAc,OAAO;AAAA,EACnC,OAAO,cAAc,OAAO;AAAA,EAC5B,OAAO,cAAc,OAAO;AAAA,EAC5B,OAAO,cAAc,OAAO;AAAA,EAC5B,cAAc,cAAc,OAAO;AAAA,EACnC,YAAY,cAAc,OAAO;AAAA,EACjC,eAAe,cAAc,OAAO;AAAA,EACpC,QAAQ,cAAc,OAAO;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA;AAAA,EAGnC,gBAAgB,OAAO;AAAA;AAAA,EACvB,GAAG;AACL,GAAiB;AACf,QAAM,WAAW;AAAA;AAAA,IAEf,aAAa,yBAAyB,SAAS;AAAA,IAC/C,aAAa,yBAAyB,SAAS;AAAA,IAC/C,eAAe,yBAAyB,WAAW;AAAA,IACnD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,SAAS,cAAc,KAAK;AAAA;AAAA,IAG5B,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,eAA8B,gBAAgB,uBAAuB,UAAoB;AAErH,GAAG,kBAAkB;",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  getShaderColorFromString,\n  dotGridFragmentShader,\n  DotGridShapes,\n  ShaderFitOptions,\n  type DotGridParams,\n  type DotGridUniforms,\n  type ShaderPreset,\n  defaultPatternSizing,\n} from '@paper-design/shaders';\n\nexport interface DotGridProps extends ShaderComponentProps, DotGridParams {}\n\ntype DotGridPreset = ShaderPreset<DotGridParams>;\n\nexport const defaultPreset: DotGridPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#000000',\n    colorFill: '#ffffff',\n    colorStroke: '#00000000',\n    size: 2,\n    gapX: 50,\n    gapY: 50,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'circle',\n  },\n};\n\nexport const macrodataPreset: DotGridPreset = {\n  name: 'Macrodata',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#15212d',\n    colorFill: '#5794ff',\n    colorStroke: '#00000000',\n    size: 3,\n    gapX: 25,\n    gapY: 25,\n    strokeWidth: 0,\n    sizeRange: 0.25,\n    opacityRange: 0.9,\n    shape: 'circle',\n  },\n};\n\nconst trianglesPreset: DotGridPreset = {\n  name: 'Triangles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#ffffff',\n    colorStroke: '#808080',\n    size: 5,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'triangle',\n  },\n};\n\nconst bubblesPreset: DotGridPreset = {\n  name: 'Bubbles',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#002c9e80',\n    colorFill: '#ffffff',\n    colorStroke: '#000000',\n    size: 15,\n    gapX: 60,\n    gapY: 60,\n    strokeWidth: 12,\n    sizeRange: 0.7,\n    opacityRange: 1.3,\n    shape: 'circle',\n  },\n};\n\nconst treeLinePreset: DotGridPreset = {\n  name: 'Tree line',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#f4fce7',\n    colorFill: '#052e19',\n    colorStroke: '#00000000',\n    size: 8,\n    gapX: 20,\n    gapY: 90,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0.6,\n    shape: 'circle',\n  },\n};\n\nconst diamondsPreset: DotGridPreset = {\n  name: 'Diamonds',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#ff0000',\n    colorStroke: '#00000000',\n    size: 15,\n    gapX: 30,\n    gapY: 30,\n    strokeWidth: 0,\n    sizeRange: 0,\n    opacityRange: 2,\n    shape: 'diamond',\n  },\n};\n\nconst wallpaperPreset: DotGridPreset = {\n  name: 'Wallpaper',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#204030',\n    colorFill: '#00000000',\n    colorStroke: '#bd955b',\n    size: 9,\n    gapX: 32,\n    gapY: 32,\n    strokeWidth: 1,\n    sizeRange: 0,\n    opacityRange: 0,\n    shape: 'diamond',\n  },\n};\n\nconst matrixPreset: DotGridPreset = {\n  name: 'Enter the Matrix',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#000000',\n    colorFill: '#47ffea',\n    colorStroke: '#00000000',\n    size: 2,\n    gapX: 10,\n    gapY: 10,\n    strokeWidth: 0.5,\n    sizeRange: 0.25,\n    opacityRange: 1,\n    shape: 'triangle',\n  },\n};\n\nconst waveformPreset: DotGridPreset = {\n  name: 'Waveform',\n  params: {\n    ...defaultPatternSizing,\n    colorBack: '#ffffff',\n    colorFill: '#0934b8',\n    colorStroke: '#00000000',\n    size: 100,\n    gapX: 2,\n    gapY: 215,\n    strokeWidth: 0,\n    sizeRange: 1,\n    opacityRange: 0,\n    shape: 'square',\n  },\n};\n\nexport const dotGridPresets: DotGridPreset[] = [\n  defaultPreset,\n  macrodataPreset,\n  trianglesPreset,\n  bubblesPreset,\n  treeLinePreset,\n  diamondsPreset,\n  wallpaperPreset,\n  matrixPreset,\n  waveformPreset,\n];\n\nexport const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({\n  // Own props\n  colorBack = defaultPreset.params.colorBack,\n  colorFill = defaultPreset.params.colorFill,\n  colorStroke = defaultPreset.params.colorStroke,\n  size = defaultPreset.params.size,\n  gapX = defaultPreset.params.gapX,\n  gapY = defaultPreset.params.gapY,\n  strokeWidth = defaultPreset.params.strokeWidth,\n  sizeRange = defaultPreset.params.sizeRange,\n  opacityRange = defaultPreset.params.opacityRange,\n  shape = defaultPreset.params.shape,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: DotGridProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colorFill: getShaderColorFromString(colorFill),\n    u_colorStroke: getShaderColorFromString(colorStroke),\n    u_dotSize: size,\n    u_gapX: gapX,\n    u_gapY: gapY,\n    u_strokeWidth: strokeWidth,\n    u_sizeRange: sizeRange,\n    u_opacityRange: opacityRange,\n    u_shape: DotGridShapes[shape],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies DotGridUniforms;\n\n  return (\n    <ShaderMount {...props} maxPixelCount={maxPixelCount} fragmentShader={dotGridFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-import { type ShaderComponentProps } from '../shader-mount';
+import { type ShaderComponentProps } from '../shader-mount.js';
 import { type DotOrbitParams, type ShaderPreset } from '@paper-design/shaders';
 export interface DotOrbitProps extends ShaderComponentProps, DotOrbitParams {
 }

package/dist/shaders/dot-orbit.js

@@ -4,8 +4,8 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { memo } from "react";
-import { ShaderMount } from "../shader-mount";
-import { colorPropsAreEqual } from "../color-props-are-equal";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
 import {
   getShaderColorFromString,
   dotOrbitFragmentShader,
@@ -19,8 +19,9 @@ const defaultPreset = {
     ...defaultPatternSizing,
     speed: 2,
     frame: 0,
+    colorBack: "#03001f",
     colors: ["#661400", "#ccbb00", "#cc0088"],
-    size: 1,
+    size: 0.9,
     sizeRange: 0,
     spreading: 1,
     stepsPerColor: 2
@@ -31,6 +32,7 @@ const DotOrbit = memo(function DotOrbitImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
   colors = defaultPreset.params.colors,
   size = defaultPreset.params.size,
   sizeRange = defaultPreset.params.sizeRange,
@@ -50,6 +52,7 @@ const DotOrbit = memo(function DotOrbitImpl({
 }) {
   const uniforms = {
     // Own uniforms
+    u_colorBack: getShaderColorFromString(colorBack),
     u_colors: colors.map(getShaderColorFromString),
     u_colorsCount: colors.length,
     u_size: size,

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

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

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

@@ -1,4 +1,4 @@
-import { type ShaderComponentProps } from '../shader-mount';
+import { type ShaderComponentProps } from '../shader-mount.js';
 import { type GodRaysParams, type ShaderPreset } from '@paper-design/shaders';
 export interface GodRaysProps extends ShaderComponentProps, GodRaysParams {
 }

package/dist/shaders/god-rays.js

@@ -4,8 +4,8 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { memo } from "react";
-import { ShaderMount } from "../shader-mount";
-import { colorPropsAreEqual } from "../color-props-are-equal";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
 import {
   defaultObjectSizing,
   getShaderColorFromString,
@@ -20,13 +20,14 @@ const defaultPreset = {
     offsetX: -0.4,
     offsetY: -0.4,
     colorBack: "#002238",
+    colorBloom: "#555522",
     colors: ["#ffcd66", "#ffb899", "#a8fffb"],
     frequency: 6,
     spotty: 0.28,
     midIntensity: 1,
     midSize: 3,
     density: 0.3,
-    blending: 0,
+    bloom: 0,
     speed: 1,
     frame: 0
   }
@@ -37,13 +38,14 @@ const auroraPreset = {
     ...defaultObjectSizing,
     offsetY: 1,
     colorBack: "#404040",
+    colorBloom: "#ff8888",
     colors: ["#666eff", "#66ff99", "#66d9ff"],
     frequency: 2.4,
     spotty: 0.9,
     midIntensity: 0.8,
     midSize: 2.1,
     density: 0.5,
-    blending: 1,
+    bloom: 1,
     speed: 0.5,
     frame: 0
   }
@@ -53,13 +55,14 @@ const warpPreset = {
   params: {
     ...defaultObjectSizing,
     colorBack: "#000000",
+    colorBloom: "#222288",
     colors: ["#ff00c4", "#ff8c00", "#ffffff"],
     frequency: 1.2,
     spotty: 0.15,
     midIntensity: 0,
     midSize: 0,
     density: 0.79,
-    blending: 0.4,
+    bloom: 0.4,
     speed: 2,
     frame: 0
   }
@@ -71,13 +74,14 @@ const linearPreset = {
     offsetX: 0.2,
     offsetY: -0.7,
     colorBack: "#000000",
+    colorBloom: "#eeeeee",
     colors: ["#ffffff1f", "#ffffff3d", "#ffffff29"],
     frequency: 1.2,
     spotty: 0.25,
     midSize: 1.1,
     midIntensity: 0.75,
     density: 0.79,
-    blending: 1,
+    bloom: 1,
     speed: 0.5,
     frame: 0
   }
@@ -88,13 +92,14 @@ const etherPreset = {
     ...defaultObjectSizing,
     offsetX: -0.6,
     colorBack: "#090f1d",
+    colorBloom: "#ffffff",
     colors: ["#148effa6", "#c4dffebe", "#232a47"],
     frequency: 0.3,
     spotty: 0.77,
     midSize: 1.1,
     midIntensity: 0.5,
     density: 0.6,
-    blending: 0.6,
+    bloom: 0.6,
     speed: 1,
     frame: 0
   }
@@ -104,6 +109,7 @@ const GodRays = memo(function GodRaysImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
+  colorBloom = defaultPreset.params.colorBloom,
   colorBack = defaultPreset.params.colorBack,
   colors = defaultPreset.params.colors,
   frequency = defaultPreset.params.frequency,
@@ -111,7 +117,7 @@ const GodRays = memo(function GodRaysImpl({
   midIntensity = defaultPreset.params.midIntensity,
   midSize = defaultPreset.params.midSize,
   density = defaultPreset.params.density,
-  blending = defaultPreset.params.blending,
+  bloom = defaultPreset.params.bloom,
   // Sizing props
   fit = defaultPreset.params.fit,
   scale = defaultPreset.params.scale,
@@ -126,6 +132,7 @@ const GodRays = memo(function GodRaysImpl({
 }) {
   const uniforms = {
     // Own uniforms
+    u_colorBloom: getShaderColorFromString(colorBloom),
     u_colorBack: getShaderColorFromString(colorBack),
     u_colors: colors.map(getShaderColorFromString),
     u_colorsCount: colors.length,
@@ -134,7 +141,7 @@ const GodRays = memo(function GodRaysImpl({
     u_midIntensity: midIntensity,
     u_midSize: midSize,
     u_density: density,
-    u_blending: blending,
+    u_bloom: bloom,
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
     u_scale: scale,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/god-rays.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport { colorPropsAreEqual } from '../color-props-are-equal';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  godRaysFragmentShader,\n  ShaderFitOptions,\n  type GodRaysParams,\n  type GodRaysUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highmidIntensity bug)\n\nexport const defaultPreset: GodRaysPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.4,\n    offsetY: -0.4,\n    colorBack: '#002238',\n    colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n    frequency: 6,\n    spotty: 0.28,\n    midIntensity: 1,\n    midSize: 3,\n    density: 0.3,\n    blending: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const auroraPreset: GodRaysPreset = {\n  name: 'Aurora',\n  params: {\n    ...defaultObjectSizing,\n    offsetY: 1,\n    colorBack: '#404040',\n    colors: ['#666eff', '#66ff99', '#66d9ff'],\n    frequency: 2.4,\n    spotty: 0.9,\n    midIntensity: 0.8,\n    midSize: 2.1,\n    density: 0.5,\n    blending: 1,\n    speed: 0.5,\n    frame: 0,\n  },\n};\n\nexport const warpPreset: GodRaysPreset = {\n  name: 'Warp',\n  params: {\n    ...defaultObjectSizing,\n    colorBack: '#000000',\n    colors: ['#ff00c4', '#ff8c00', '#ffffff'],\n    frequency: 1.2,\n    spotty: 0.15,\n    midIntensity: 0,\n    midSize: 0,\n    density: 0.79,\n    blending: 0.4,\n    speed: 2,\n    frame: 0,\n  },\n};\n\nexport const linearPreset: GodRaysPreset = {\n  name: 'Linear',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: 0.2,\n    offsetY: -0.7,\n    colorBack: '#000000',\n    colors: ['#ffffff1f', '#ffffff3d', '#ffffff29'],\n    frequency: 1.2,\n    spotty: 0.25,\n    midSize: 1.1,\n    midIntensity: 0.75,\n    density: 0.79,\n    blending: 1,\n    speed: 0.5,\n    frame: 0,\n  },\n};\n\nexport const etherPreset: GodRaysPreset = {\n  name: 'Ether',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.6,\n    colorBack: '#090f1d',\n    colors: ['#148effa6', '#c4dffebe', '#232a47'],\n    frequency: 0.3,\n    spotty: 0.77,\n    midSize: 1.1,\n    midIntensity: 0.5,\n    density: 0.6,\n    blending: 0.6,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const godRaysPresets: GodRaysPreset[] = [defaultPreset, auroraPreset, warpPreset, linearPreset, etherPreset];\n\nexport const GodRays: React.FC<GodRaysProps> = memo(function GodRaysImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  frequency = defaultPreset.params.frequency,\n  spotty = defaultPreset.params.spotty,\n  midIntensity = defaultPreset.params.midIntensity,\n  midSize = defaultPreset.params.midSize,\n  density = defaultPreset.params.density,\n  blending = defaultPreset.params.blending,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: GodRaysProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_frequency: frequency,\n    u_spotty: spotty,\n    u_midIntensity: midIntensity,\n    u_midSize: midSize,\n    u_density: density,\n    u_blending: blending,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies GodRaysUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={godRaysFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  defaultObjectSizing,\n  getShaderColorFromString,\n  godRaysFragmentShader,\n  ShaderFitOptions,\n  type GodRaysParams,\n  type GodRaysUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface GodRaysProps extends ShaderComponentProps, GodRaysParams {}\n\ntype GodRaysPreset = ShaderPreset<GodRaysParams>;\n\nexport const defaultPreset: GodRaysPreset = {\n  name: 'Default',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.4,\n    offsetY: -0.4,\n    colorBack: '#002238',\n    colorBloom: '#555522',\n    colors: ['#ffcd66', '#ffb899', '#a8fffb'],\n    frequency: 6,\n    spotty: 0.28,\n    midIntensity: 1,\n    midSize: 3,\n    density: 0.3,\n    bloom: 0,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const auroraPreset: GodRaysPreset = {\n  name: 'Aurora',\n  params: {\n    ...defaultObjectSizing,\n    offsetY: 1,\n    colorBack: '#404040',\n    colorBloom: '#ff8888',\n    colors: ['#666eff', '#66ff99', '#66d9ff'],\n    frequency: 2.4,\n    spotty: 0.9,\n    midIntensity: 0.8,\n    midSize: 2.1,\n    density: 0.5,\n    bloom: 1,\n    speed: 0.5,\n    frame: 0,\n  },\n};\n\nexport const warpPreset: GodRaysPreset = {\n  name: 'Warp',\n  params: {\n    ...defaultObjectSizing,\n    colorBack: '#000000',\n    colorBloom: '#222288',\n    colors: ['#ff00c4', '#ff8c00', '#ffffff'],\n    frequency: 1.2,\n    spotty: 0.15,\n    midIntensity: 0,\n    midSize: 0,\n    density: 0.79,\n    bloom: 0.4,\n    speed: 2,\n    frame: 0,\n  },\n};\n\nexport const linearPreset: GodRaysPreset = {\n  name: 'Linear',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: 0.2,\n    offsetY: -0.7,\n    colorBack: '#000000',\n    colorBloom: '#eeeeee',\n    colors: ['#ffffff1f', '#ffffff3d', '#ffffff29'],\n    frequency: 1.2,\n    spotty: 0.25,\n    midSize: 1.1,\n    midIntensity: 0.75,\n    density: 0.79,\n    bloom: 1,\n    speed: 0.5,\n    frame: 0,\n  },\n};\n\nexport const etherPreset: GodRaysPreset = {\n  name: 'Ether',\n  params: {\n    ...defaultObjectSizing,\n    offsetX: -0.6,\n    colorBack: '#090f1d',\n    colorBloom: '#ffffff',\n    colors: ['#148effa6', '#c4dffebe', '#232a47'],\n    frequency: 0.3,\n    spotty: 0.77,\n    midSize: 1.1,\n    midIntensity: 0.5,\n    density: 0.6,\n    bloom: 0.6,\n    speed: 1,\n    frame: 0,\n  },\n};\n\nexport const godRaysPresets: GodRaysPreset[] = [defaultPreset, auroraPreset, warpPreset, linearPreset, etherPreset];\n\nexport const GodRays: React.FC<GodRaysProps> = memo(function GodRaysImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBloom = defaultPreset.params.colorBloom,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  frequency = defaultPreset.params.frequency,\n  spotty = defaultPreset.params.spotty,\n  midIntensity = defaultPreset.params.midIntensity,\n  midSize = defaultPreset.params.midSize,\n  density = defaultPreset.params.density,\n  bloom = defaultPreset.params.bloom,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}: GodRaysProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBloom: getShaderColorFromString(colorBloom),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_frequency: frequency,\n    u_spotty: spotty,\n    u_midIntensity: midIntensity,\n    u_midSize: midSize,\n    u_density: density,\n    u_bloom: bloom,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies GodRaysUniforms;\n\n  return (\n    <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={godRaysFragmentShader} uniforms={uniforms} />\n  );\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-import { type ShaderComponentProps } from '../shader-mount';
+import { type ShaderComponentProps } from '../shader-mount.js';
 import { type GrainGradientParams, type ShaderPreset } from '@paper-design/shaders';
 export interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {
 }

package/dist/shaders/grain-gradient.js

@@ -4,7 +4,7 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { memo } from "react";
-import { ShaderMount } from "../shader-mount";
+import { ShaderMount } from "../shader-mount.js";
 import {
   getShaderColorFromString,
   grainGradientFragmentShader,
@@ -20,7 +20,8 @@ const defaultPreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    colors: ["#000a0f", "#c4730b", "#bdad5f", "#d8ccc7"],
+    colorBack: "#000a0f",
+    colors: ["#c4730b", "#bdad5f", "#d8ccc7"],
     softness: 0.7,
     intensity: 0.15,
     noise: 0.5,
@@ -34,7 +35,8 @@ const dotsPreset = {
     scale: 0.6,
     speed: 1,
     frame: 0,
-    colors: ["#0a0000", "#6f0000", "#0080ff", "#f2ebc9"],
+    colorBack: "#0a0000",
+    colors: ["#6f0000", "#0080ff", "#f2ebc9"],
     softness: 0.75,
     intensity: 0.15,
     noise: 0.7,
@@ -47,7 +49,8 @@ const truchetPreset = {
     ...defaultPatternSizing,
     speed: 1,
     frame: 0,
-    colors: ["#0a0000", "#6f2200", "#eabb7c", "#39b523"],
+    colorBack: "#0a0000",
+    colors: ["#6f2200", "#eabb7c", "#39b523"],
     softness: 0,
     intensity: 0.2,
     noise: 1,
@@ -60,7 +63,8 @@ const cornersPreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    colors: ["#031018", "#00aeff", "#00ffcc", "#ffc800"],
+    colorBack: "#031018",
+    colors: ["#00aeff", "#00ffcc", "#ffc800"],
     softness: 0.4,
     intensity: 0.35,
     noise: 0.35,
@@ -74,7 +78,8 @@ const ripplePreset = {
     scale: 0.5,
     speed: 1,
     frame: 0,
-    colors: ["#140a00", "#6f2d00", "#88ddae", "#2c0b1d"],
+    colorBack: "#140a00",
+    colors: ["#6f2d00", "#88ddae", "#2c0b1d"],
     softness: 0.5,
     intensity: 0.5,
     noise: 0.5,
@@ -88,7 +93,8 @@ const blobPreset = {
     scale: 1.3,
     speed: 1,
     frame: 0,
-    colors: ["#0f0e18", "#3e6172", "#a49b74", "#568c50"],
+    colorBack: "#0f0e18",
+    colors: ["#3e6172", "#a49b74", "#568c50"],
     softness: 0,
     intensity: 0.15,
     noise: 0.5,
@@ -101,7 +107,8 @@ const spherePreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    colors: ["#000319", "#0059b3", "#37f5f5", "#18c039"],
+    colorBack: "#000319",
+    colors: ["#0059b3", "#37f5f5", "#18c039"],
     softness: 1,
     intensity: 0.15,
     noise: 0.5,
@@ -115,7 +122,8 @@ const moonPreset = {
     scale: 0.6,
     speed: 1,
     frame: 0,
-    colors: ["#000000", "#000000", "#28272d", "#ffeccc"],
+    colorBack: "#000000",
+    colors: ["#000000", "#28272d", "#ffeccc"],
     softness: 1,
     intensity: 0.56,
     noise: 1,
@@ -136,6 +144,7 @@ const GrainGradient = memo(function GrainGradientImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
   colors = defaultPreset.params.colors,
   softness = defaultPreset.params.softness,
   intensity = defaultPreset.params.intensity,
@@ -155,6 +164,7 @@ const GrainGradient = memo(function GrainGradientImpl({
 }) {
   const uniforms = {
     // Own uniforms
+    u_colorBack: getShaderColorFromString(colorBack),
     u_colors: colors.map(getShaderColorFromString),
     u_colorsCount: colors.length,
     u_softness: softness,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/grain-gradient.tsx"],
-  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount';\nimport {\n  getShaderColorFromString,\n  grainGradientFragmentShader,\n  ShaderFitOptions,\n  type GrainGradientUniforms,\n  type GrainGradientParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n  GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\n// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\n\nexport const defaultPreset: GrainGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#000a0f', '#c4730b', '#bdad5f', '#d8ccc7'],\n    softness: 0.7,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'wave',\n  },\n};\n\nexport const dotsPreset: GrainGradientPreset = {\n  name: 'Dots',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colors: ['#0a0000', '#6f0000', '#0080ff', '#f2ebc9'],\n    softness: 0.75,\n    intensity: 0.15,\n    noise: 0.7,\n    shape: 'dots',\n  },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n  name: 'Truchet',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#0a0000', '#6f2200', '#eabb7c', '#39b523'],\n    softness: 0,\n    intensity: 0.2,\n    noise: 1,\n    shape: 'truchet',\n  },\n};\n\nexport const cornersPreset: GrainGradientPreset = {\n  name: 'Corners',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#031018', '#00aeff', '#00ffcc', '#ffc800'],\n    softness: 0.4,\n    intensity: 0.35,\n    noise: 0.35,\n    shape: 'corners',\n  },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.5,\n    speed: 1,\n    frame: 0,\n    colors: ['#140a00', '#6f2d00', '#88ddae', '#2c0b1d'],\n    softness: 0.5,\n    intensity: 0.5,\n    noise: 0.5,\n    shape: 'ripple',\n  },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n  name: 'Blob',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1.3,\n    speed: 1,\n    frame: 0,\n    colors: ['#0f0e18', '#3e6172', '#a49b74', '#568c50'],\n    softness: 0,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'blob',\n  },\n};\n\nexport const spherePreset: GrainGradientPreset = {\n  name: 'Sphere',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colors: ['#000319', '#0059b3', '#37f5f5', '#18c039'],\n    softness: 1,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'sphere',\n  },\n};\n\nexport const moonPreset: GrainGradientPreset = {\n  name: 'Moon',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colors: ['#000000', '#000000', '#28272d', '#ffeccc'],\n    softness: 1,\n    intensity: 0.56,\n    noise: 1,\n    shape: 'sphere',\n  },\n};\n\nexport const grainGradientPresets: GrainGradientPreset[] = [\n  cornersPreset,\n  defaultPreset,\n  dotsPreset,\n  truchetPreset,\n  ripplePreset,\n  blobPreset,\n  spherePreset,\n  moonPreset,\n];\n\nexport const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colors = defaultPreset.params.colors,\n  softness = defaultPreset.params.softness,\n  intensity = defaultPreset.params.intensity,\n  noise = defaultPreset.params.noise,\n  shape = defaultPreset.params.shape,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}) {\n  const uniforms = {\n    // Own uniforms\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_softness: softness,\n    u_intensity: intensity,\n    u_noise: noise,\n    u_shape: GrainGradientShapes[shape],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies GrainGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={grainGradientFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n  getShaderColorFromString,\n  grainGradientFragmentShader,\n  ShaderFitOptions,\n  type GrainGradientUniforms,\n  type GrainGradientParams,\n  type ShaderPreset,\n  defaultPatternSizing,\n  defaultObjectSizing,\n  GrainGradientShapes,\n} from '@paper-design/shaders';\n\nexport interface GrainGradientProps extends ShaderComponentProps, GrainGradientParams {}\n\ntype GrainGradientPreset = ShaderPreset<GrainGradientParams>;\n\nexport const defaultPreset: GrainGradientPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000a0f',\n    colors: ['#c4730b', '#bdad5f', '#d8ccc7'],\n    softness: 0.7,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'wave',\n  },\n};\n\nexport const dotsPreset: GrainGradientPreset = {\n  name: 'Dots',\n  params: {\n    ...defaultPatternSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#0a0000',\n    colors: ['#6f0000', '#0080ff', '#f2ebc9'],\n    softness: 0.75,\n    intensity: 0.15,\n    noise: 0.7,\n    shape: 'dots',\n  },\n};\n\nexport const truchetPreset: GrainGradientPreset = {\n  name: 'Truchet',\n  params: {\n    ...defaultPatternSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#0a0000',\n    colors: ['#6f2200', '#eabb7c', '#39b523'],\n    softness: 0,\n    intensity: 0.2,\n    noise: 1,\n    shape: 'truchet',\n  },\n};\n\nexport const cornersPreset: GrainGradientPreset = {\n  name: 'Corners',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#031018',\n    colors: ['#00aeff', '#00ffcc', '#ffc800'],\n    softness: 0.4,\n    intensity: 0.35,\n    noise: 0.35,\n    shape: 'corners',\n  },\n};\n\nexport const ripplePreset: GrainGradientPreset = {\n  name: 'Ripple',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.5,\n    speed: 1,\n    frame: 0,\n    colorBack: '#140a00',\n    colors: ['#6f2d00', '#88ddae', '#2c0b1d'],\n    softness: 0.5,\n    intensity: 0.5,\n    noise: 0.5,\n    shape: 'ripple',\n  },\n};\n\nexport const blobPreset: GrainGradientPreset = {\n  name: 'Blob',\n  params: {\n    ...defaultObjectSizing,\n    scale: 1.3,\n    speed: 1,\n    frame: 0,\n    colorBack: '#0f0e18',\n    colors: ['#3e6172', '#a49b74', '#568c50'],\n    softness: 0,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'blob',\n  },\n};\n\nexport const spherePreset: GrainGradientPreset = {\n  name: 'Sphere',\n  params: {\n    ...defaultObjectSizing,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000319',\n    colors: ['#0059b3', '#37f5f5', '#18c039'],\n    softness: 1,\n    intensity: 0.15,\n    noise: 0.5,\n    shape: 'sphere',\n  },\n};\n\nexport const moonPreset: GrainGradientPreset = {\n  name: 'Moon',\n  params: {\n    ...defaultObjectSizing,\n    scale: 0.6,\n    speed: 1,\n    frame: 0,\n    colorBack: '#000000',\n    colors: ['#000000', '#28272d', '#ffeccc'],\n    softness: 1,\n    intensity: 0.56,\n    noise: 1,\n    shape: 'sphere',\n  },\n};\n\nexport const grainGradientPresets: GrainGradientPreset[] = [\n  cornersPreset,\n  defaultPreset,\n  dotsPreset,\n  truchetPreset,\n  ripplePreset,\n  blobPreset,\n  spherePreset,\n  moonPreset,\n];\n\nexport const GrainGradient: React.FC<GrainGradientProps> = memo(function GrainGradientImpl({\n  // Own props\n  speed = defaultPreset.params.speed,\n  frame = defaultPreset.params.frame,\n  colorBack = defaultPreset.params.colorBack,\n  colors = defaultPreset.params.colors,\n  softness = defaultPreset.params.softness,\n  intensity = defaultPreset.params.intensity,\n  noise = defaultPreset.params.noise,\n  shape = defaultPreset.params.shape,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n  ...props\n}) {\n  const uniforms = {\n    // Own uniforms\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_colors: colors.map(getShaderColorFromString),\n    u_colorsCount: colors.length,\n    u_softness: softness,\n    u_intensity: intensity,\n    u_noise: noise,\n    u_shape: GrainGradientShapes[shape],\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies GrainGradientUniforms;\n\n  return (\n    <ShaderMount\n      {...props}\n      speed={speed}\n      frame={frame}\n      fragmentShader={grainGradientFragmentShader}\n      uniforms={uniforms}\n    />\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

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

package/dist/shaders/liquid-metal.js

@@ -4,13 +4,14 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { memo } from "react";
-import { ShaderMount } from "../shader-mount";
-import { colorPropsAreEqual } from "../color-props-are-equal";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
 import {
-  getShaderColorFromString,
   liquidMetalFragmentShader,
   ShaderFitOptions,
-  defaultObjectSizing
+  defaultObjectSizing,
+  getShaderColorFromString,
+  LiquidMetalShapes
 } from "@paper-design/shaders";
 import { jsx } from "react/jsx-runtime";
 const defaultPreset = {
@@ -19,24 +20,85 @@ const defaultPreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    patternBlur: 5e-3,
-    patternScale: 3,
-    dispersion: 0.015,
-    liquid: 0.07,
-    shape: 0,
+    colorBack: "#ffffff",
+    colorTint: "#ffffff",
+    softness: 0.3,
+    repetition: 3,
+    shiftRed: 0.3,
+    shiftBlue: 0.3,
+    distortion: 0.3,
+    contour: 0.88,
+    shape: "metaballs"
+  }
+};
+const fullScreenPreset = {
+  name: "Full Screen",
+  params: {
+    ...defaultObjectSizing,
+    speed: 1,
+    frame: 0,
+    colorBack: "#111111",
+    colorTint: "#ffffff",
+    softness: 0.3,
+    repetition: 3,
+    shiftRed: 0.3,
+    shiftBlue: 0.3,
+    distortion: 0.07,
+    contour: 0,
+    shape: "none",
     worldWidth: 0,
     worldHeight: 0
   }
 };
-const liquidMetalPresets = [defaultPreset];
+const spherePreset = {
+  name: "Sphere",
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.7,
+    speed: 2,
+    frame: 0,
+    colorBack: "#ffffff",
+    colorTint: "#d1e0ff",
+    softness: 0.45,
+    repetition: 4,
+    shiftRed: 1,
+    shiftBlue: 0.3,
+    distortion: 0.1,
+    contour: 0.4,
+    shape: "circle"
+  }
+};
+const dropsPreset = {
+  name: "Drops",
+  params: {
+    ...defaultObjectSizing,
+    scale: 2.2,
+    speed: 1,
+    frame: 0,
+    colorBack: "#00042e",
+    colorTint: "#5b4dc7",
+    softness: 0.45,
+    repetition: 4,
+    shiftRed: -0.5,
+    shiftBlue: -1,
+    distortion: 0.1,
+    contour: 1,
+    shape: "metaballs"
+  }
+};
+const liquidMetalPresets = [defaultPreset, spherePreset, dropsPreset, fullScreenPreset];
 const LiquidMetal = memo(function LiquidMetalImpl({
   // Own props
+  colorBack = defaultPreset.params.colorBack,
+  colorTint = defaultPreset.params.colorTint,
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
-  patternBlur = defaultPreset.params.patternBlur,
-  patternScale = defaultPreset.params.patternScale,
-  dispersion = defaultPreset.params.dispersion,
-  liquid = defaultPreset.params.liquid,
+  softness = defaultPreset.params.softness,
+  repetition = defaultPreset.params.repetition,
+  shiftRed = defaultPreset.params.shiftRed,
+  shiftBlue = defaultPreset.params.shiftBlue,
+  distortion = defaultPreset.params.distortion,
+  contour = defaultPreset.params.contour,
   shape = defaultPreset.params.shape,
   // Sizing props
   fit = defaultPreset.params.fit,
@@ -52,11 +114,15 @@ const LiquidMetal = memo(function LiquidMetalImpl({
 }) {
   const uniforms = {
     // Own uniforms
-    u_patternBlur: patternBlur,
-    u_patternScale: patternScale,
-    u_dispersion: dispersion,
-    u_liquid: liquid,
-    u_shape: shape,
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorTint: getShaderColorFromString(colorTint),
+    u_softness: softness,
+    u_repetition: repetition,
+    u_shiftRed: shiftRed,
+    u_shiftBlue: shiftBlue,
+    u_distortion: distortion,
+    u_contour: contour,
+    u_shape: LiquidMetalShapes[shape],
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
     u_scale: scale,
@@ -82,6 +148,9 @@ const LiquidMetal = memo(function LiquidMetalImpl({
 export {
   LiquidMetal,
   defaultPreset,
-  liquidMetalPresets
+  dropsPreset,
+  fullScreenPreset,
+  liquidMetalPresets,
+  spherePreset
 };
 //# sourceMappingURL=liquid-metal.js.map