@paper-design/shaders-react 0.0.33 → 0.0.34

package/dist/shaders/waves.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/waves.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  wavesFragmentShader,\n  ShaderFitOptions,\n  type WavesParams,\n  type WavesUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\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: WavesPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.6,\n    rotation: 0,\n    color1: '#ffffff',\n    color2: '#102c70',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.6,\n    spacing: 0.65,\n    proportion: 0.15,\n    softness: 0,\n  },\n};\n\nexport const spikesPreset: WavesPreset = {\n  name: 'Spikes',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 2.3,\n    rotation: 0,\n    color1: '#fdffe6',\n    color2: '#34123b',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.9,\n    spacing: 0.37,\n    proportion: 0.93,\n    softness: 0.15,\n  },\n};\n\nexport const groovyPreset: WavesPreset = {\n  name: 'Groovy',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 0.5,\n    rotation: 1,\n    color1: '#fcfcee',\n    color2: '#ff896b',\n    shape: 2.37,\n    frequency: 0.2,\n    amplitude: 0.67,\n    spacing: 1.17,\n    proportion: 0.57,\n    softness: 0,\n  },\n};\n\nexport const tangledUpPreset: WavesPreset = {\n  name: 'Tangled up',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 3.04,\n    rotation: 1,\n    color1: '#133a41',\n    color2: '#c2d8b6',\n    shape: 3,\n    frequency: 0.44,\n    amplitude: 0.57,\n    spacing: 1.05,\n    proportion: 0.97,\n    softness: 0,\n  },\n};\n\nexport const zigZagPreset: WavesPreset = {\n  name: 'Zig zag',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 2.7,\n    rotation: 1,\n    color1: '#000000',\n    color2: '#e6e6e6',\n    shape: 0,\n    frequency: 0.6,\n    amplitude: 0.8,\n    spacing: 0.5,\n    proportion: 1,\n    softness: 0.5,\n  },\n};\n\nexport const waveRidePreset: WavesPreset = {\n  name: 'Ride the wave',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 0.84,\n    rotation: 0,\n    color1: '#fdffe6',\n    color2: '#1f1f1f',\n    shape: 2.23,\n    frequency: 0.1,\n    amplitude: 0.6,\n    spacing: 0.41,\n    proportion: 0.99,\n    softness: 0,\n  },\n};\n\nexport const wavesPresets: WavesPreset[] = [\n  defaultPreset,\n  spikesPreset,\n  groovyPreset,\n  tangledUpPreset,\n  zigZagPreset,\n  waveRidePreset,\n];\n\nexport const Waves: React.FC<WavesProps> = memo(function WavesImpl({\n  // Own props\n  color1 = defaultPreset.params.color1,\n  color2 = defaultPreset.params.color2,\n  shape = defaultPreset.params.shape,\n  frequency = defaultPreset.params.frequency,\n  amplitude = defaultPreset.params.amplitude,\n  spacing = defaultPreset.params.spacing,\n  proportion = defaultPreset.params.proportion,\n  softness = defaultPreset.params.softness,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\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}: WavesProps) {\n  const uniforms = {\n    // Own uniforms\n    u_color1: getShaderColorFromString(color1),\n    u_color2: getShaderColorFromString(color2),\n    u_shape: shape,\n    u_frequency: frequency,\n    u_amplitude: amplitude,\n    u_spacing: spacing,\n    u_proportion: proportion,\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 WavesUniforms;\n\n  return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;\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  defaultPatternSizing,\n  getShaderColorFromString,\n  wavesFragmentShader,\n  ShaderFitOptions,\n  type WavesParams,\n  type WavesUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\n\nexport const defaultPreset: WavesPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.6,\n    rotation: 0,\n    colorFront: '#ffffff',\n    colorBack: '#102c70',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.6,\n    spacing: 0.65,\n    proportion: 0.15,\n    softness: 0,\n  },\n};\n\nexport const spikesPreset: WavesPreset = {\n  name: 'Spikes',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 2.3,\n    rotation: 0,\n    colorFront: '#fdffe6',\n    colorBack: '#34123b',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.9,\n    spacing: 0.37,\n    proportion: 0.93,\n    softness: 0.15,\n  },\n};\n\nexport const groovyPreset: WavesPreset = {\n  name: 'Groovy',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 0.5,\n    rotation: 1,\n    colorFront: '#fcfcee',\n    colorBack: '#ff896b',\n    shape: 2.37,\n    frequency: 0.2,\n    amplitude: 0.67,\n    spacing: 1.17,\n    proportion: 0.57,\n    softness: 0,\n  },\n};\n\nexport const tangledUpPreset: WavesPreset = {\n  name: 'Tangled up',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 3.04,\n    rotation: 1,\n    colorFront: '#133a41',\n    colorBack: '#c2d8b6',\n    shape: 3,\n    frequency: 0.44,\n    amplitude: 0.57,\n    spacing: 1.05,\n    proportion: 0.97,\n    softness: 0,\n  },\n};\n\nexport const zigZagPreset: WavesPreset = {\n  name: 'Zig zag',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 2.7,\n    rotation: 1,\n    colorFront: '#000000',\n    colorBack: '#e6e6e6',\n    shape: 0,\n    frequency: 0.6,\n    amplitude: 0.8,\n    spacing: 0.5,\n    proportion: 1,\n    softness: 0.5,\n  },\n};\n\nexport const waveRidePreset: WavesPreset = {\n  name: 'Ride the wave',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 0.84,\n    rotation: 0,\n    colorFront: '#fdffe6',\n    colorBack: '#1f1f1f',\n    shape: 2.23,\n    frequency: 0.1,\n    amplitude: 0.6,\n    spacing: 0.41,\n    proportion: 0.99,\n    softness: 0,\n  },\n};\n\nexport const wavesPresets: WavesPreset[] = [\n  defaultPreset,\n  spikesPreset,\n  groovyPreset,\n  tangledUpPreset,\n  zigZagPreset,\n  waveRidePreset,\n];\n\nexport const Waves: React.FC<WavesProps> = memo(function WavesImpl({\n  // Own props\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  shape = defaultPreset.params.shape,\n  frequency = defaultPreset.params.frequency,\n  amplitude = defaultPreset.params.amplitude,\n  spacing = defaultPreset.params.spacing,\n  proportion = defaultPreset.params.proportion,\n  softness = defaultPreset.params.softness,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\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}: WavesProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_shape: shape,\n    u_frequency: frequency,\n    u_amplitude: amplitude,\n    u_spacing: spacing,\n    u_proportion: proportion,\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 WavesUniforms;\n\n  return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {
-    "@paper-design/shaders": "0.0.30"
+    "@paper-design/shaders": "0.0.31"
   },
   "devDependencies": {
     "@types/react": "19.1.0"