@paper-design/shaders-react 0.0.32 → 0.0.34

package/dist/shaders/swirl.js

@@ -4,14 +4,14 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { memo } from "react";
-import { ShaderMount } from "../shader-mount";
+import { ShaderMount } from "../shader-mount.js";
 import {
   defaultObjectSizing,
   getShaderColorFromString,
   ShaderFitOptions,
   swirlFragmentShader
 } from "@paper-design/shaders";
-import { colorPropsAreEqual } from "../color-props-are-equal";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
 import { jsx } from "react/jsx-runtime";
 const defaultPreset = {
   name: "Default",
@@ -22,7 +22,8 @@ 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)"],
+    colorBack: "#452424",
+    colors: ["#0b7f05", "#ffe785", "#ff335c"],
     bandCount: 5,
     twist: 0.11,
     softness: 0.01,
@@ -38,14 +39,8 @@ 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)"
-    ],
+    colorBack: "#8b2e5f",
+    colors: ["#b14467", "#e67a62", "#ff715c", "#ffc55c", "#f9f97c"],
     bandCount: 3,
     twist: 0.3,
     softness: 0,
@@ -59,7 +54,8 @@ 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)"],
+    colorBack: "#000000",
+    colors: ["#2e2e2e", "#000000", "#ffffff"],
     bandCount: 4,
     twist: 0.4,
     softness: 0,
@@ -73,7 +69,8 @@ const candyPreset = {
     ...defaultObjectSizing,
     speed: 1,
     frame: 0,
-    colors: ["hsla(45, 100%, 70%, 1)", "hsla(200, 80%, 65%, 1)", "hsla(280, 90%, 60%, 1)"],
+    colorBack: "#ffcd66",
+    colors: ["#6bbceb", "#8a1fff"],
     bandCount: 2.5,
     twist: 0.2,
     softness: 1,
@@ -86,6 +83,7 @@ const Swirl = memo(function SwirlImpl({
   // Own props
   speed = defaultPreset.params.speed,
   frame = defaultPreset.params.frame,
+  colorBack = defaultPreset.params.colorBack,
   colors = defaultPreset.params.colors,
   bandCount = defaultPreset.params.bandCount,
   twist = defaultPreset.params.twist,
@@ -106,6 +104,7 @@ const Swirl = memo(function SwirlImpl({
 }) {
   const uniforms = {
     // Own uniforms
+    u_colorBack: getShaderColorFromString(colorBack),
     u_colors: colors.map(getShaderColorFromString),
     u_colorsCount: colors.length,
     u_bandCount: bandCount,

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.js';\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.js';\n\nexport interface SwirlProps extends ShaderComponentProps, SwirlParams {}\n\ntype SwirlPreset = ShaderPreset<SwirlParams>;\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    colorBack: '#452424',\n    colors: ['#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    colorBack: '#8b2e5f',\n    colors: ['#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    colorBack: '#000000',\n    colors: ['#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    colorBack: '#ffcd66',\n    colors: ['#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  colorBack = defaultPreset.params.colorBack,\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_colorBack: getShaderColorFromString(colorBack),\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.d.ts

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

package/dist/shaders/voronoi.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 {
   defaultPatternSizing,
   getShaderColorFromString,
@@ -20,13 +20,13 @@ 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",
+    colorGap: "#ffffff",
     distortion: 0.42,
     gap: 0.06,
-    innerGlow: 0
+    glow: 0
   }
 };
 const shadowPreset = {
@@ -35,13 +35,13 @@ 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",
+    colorGap: "#ffffff",
     distortion: 0.23,
     gap: 0,
-    innerGlow: 0.8
+    glow: 0.8
   }
 };
 const voronoiPresets = [defaultPreset, shadowPreset];
@@ -52,10 +52,10 @@ const Voronoi = memo(function VoronoiImpl({
   colors = defaultPreset.params.colors,
   stepsPerColor = defaultPreset.params.stepsPerColor,
   colorGlow = defaultPreset.params.colorGlow,
-  colorBack = defaultPreset.params.colorBack,
+  colorGap = defaultPreset.params.colorGap,
   distortion = defaultPreset.params.distortion,
   gap = defaultPreset.params.gap,
-  innerGlow = defaultPreset.params.innerGlow,
+  glow = defaultPreset.params.glow,
   // Sizing props
   fit = defaultPreset.params.fit,
   scale = defaultPreset.params.scale,
@@ -75,10 +75,10 @@ const Voronoi = memo(function VoronoiImpl({
     u_colorsCount: colors.length,
     u_stepsPerColor: stepsPerColor,
     u_colorGlow: getShaderColorFromString(colorGlow),
-    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorGap: getShaderColorFromString(colorGap),
     u_distortion: distortion,
     u_gap: gap,
-    u_innerGlow: innerGlow,
+    u_glow: glow,
     ...noiseTexture,
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],

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.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\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\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    colorGap: '#ffffff',\n    distortion: 0.42,\n    gap: 0.06,\n    glow: 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    colorGap: '#ffffff',\n    distortion: 0.23,\n    gap: 0,\n    glow: 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  colorGap = defaultPreset.params.colorGap,\n  distortion = defaultPreset.params.distortion,\n  gap = defaultPreset.params.gap,\n  glow = defaultPreset.params.glow,\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_colorGap: getShaderColorFromString(colorGap),\n    u_distortion: distortion,\n    u_gap: gap,\n    u_glow: glow,\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;AA2FH;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,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;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,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;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,WAAW,cAAc,OAAO;AAAA,EAChC,aAAa,cAAc,OAAO;AAAA,EAClC,MAAM,cAAc,OAAO;AAAA,EAC3B,OAAO,cAAc,OAAO;AAAA;AAAA,EAG5B,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,YAAY,yBAAyB,QAAQ;AAAA,IAC7C,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,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

@@ -1,19 +1,19 @@
-import { type ShaderComponentProps } from '../shader-mount';
+import { type ShaderComponentProps } from '../shader-mount.js';
 import { type WarpParams, type ShaderPreset } from '@paper-design/shaders';
 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

@@ -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 {
   defaultPatternSizing,
   getShaderColorFromString,
@@ -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)"],
-    proportion: 0.35,
+    colors: ["#262626", "#2e383d", "#64a5ce", "#ffffff"],
+    proportion: 0.45,
     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)"],
-    proportion: 0.35,
+    colors: ["#111314", "#9faeab", "#f3fee7", "#f3fee7"],
+    proportion: 0.05,
     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.65,
+    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.67,
+    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"
   }
 };