@paper-design/shaders-react 0.0.32 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/README.md +1 -4
  2. package/dist/index.d.ts +42 -39
  3. package/dist/index.js +22 -19
  4. package/dist/index.js.map +2 -2
  5. package/dist/shader-mount.d.ts +4 -1
  6. package/dist/shader-mount.js +7 -1
  7. package/dist/shader-mount.js.map +2 -2
  8. package/dist/shaders/color-panels.d.ts +9 -0
  9. package/dist/shaders/color-panels.js +107 -0
  10. package/dist/shaders/color-panels.js.map +7 -0
  11. package/dist/shaders/dithering.d.ts +1 -1
  12. package/dist/shaders/dithering.js +45 -54
  13. package/dist/shaders/dithering.js.map +2 -2
  14. package/dist/shaders/dot-grid.d.ts +1 -1
  15. package/dist/shaders/dot-grid.js +30 -30
  16. package/dist/shaders/dot-grid.js.map +2 -2
  17. package/dist/shaders/dot-orbit.d.ts +1 -1
  18. package/dist/shaders/dot-orbit.js +7 -4
  19. package/dist/shaders/dot-orbit.js.map +2 -2
  20. package/dist/shaders/god-rays.d.ts +1 -1
  21. package/dist/shaders/god-rays.js +26 -19
  22. package/dist/shaders/god-rays.js.map +2 -2
  23. package/dist/shaders/grain-gradient.d.ts +1 -1
  24. package/dist/shaders/grain-gradient.js +30 -19
  25. package/dist/shaders/grain-gradient.js.map +2 -2
  26. package/dist/shaders/liquid-metal.d.ts +4 -1
  27. package/dist/shaders/liquid-metal.js +89 -20
  28. package/dist/shaders/liquid-metal.js.map +2 -2
  29. package/dist/shaders/mesh-gradient.d.ts +1 -1
  30. package/dist/shaders/mesh-gradient.js +5 -5
  31. package/dist/shaders/mesh-gradient.js.map +2 -2
  32. package/dist/shaders/metaballs.d.ts +1 -1
  33. package/dist/shaders/metaballs.js +6 -3
  34. package/dist/shaders/metaballs.js.map +2 -2
  35. package/dist/shaders/neuro-noise.d.ts +1 -1
  36. package/dist/shaders/neuro-noise.js +12 -18
  37. package/dist/shaders/neuro-noise.js.map +2 -2
  38. package/dist/shaders/perlin-noise.d.ts +1 -1
  39. package/dist/shaders/perlin-noise.js +18 -18
  40. package/dist/shaders/perlin-noise.js.map +2 -2
  41. package/dist/shaders/pulsing-border.d.ts +1 -1
  42. package/dist/shaders/pulsing-border.js +8 -8
  43. package/dist/shaders/pulsing-border.js.map +2 -2
  44. package/dist/shaders/simplex-noise.d.ts +1 -1
  45. package/dist/shaders/simplex-noise.js +3 -3
  46. package/dist/shaders/simplex-noise.js.map +2 -2
  47. package/dist/shaders/smoke-ring.d.ts +1 -1
  48. package/dist/shaders/smoke-ring.js +10 -10
  49. package/dist/shaders/smoke-ring.js.map +2 -2
  50. package/dist/shaders/spiral.d.ts +1 -1
  51. package/dist/shaders/spiral.js +20 -20
  52. package/dist/shaders/spiral.js.map +2 -2
  53. package/dist/shaders/swirl.d.ts +1 -1
  54. package/dist/shaders/swirl.js +12 -13
  55. package/dist/shaders/swirl.js.map +2 -2
  56. package/dist/shaders/voronoi.d.ts +1 -1
  57. package/dist/shaders/voronoi.js +14 -14
  58. package/dist/shaders/voronoi.js.map +2 -2
  59. package/dist/shaders/warp.d.ts +8 -8
  60. package/dist/shaders/warp.js +119 -115
  61. package/dist/shaders/warp.js.map +2 -2
  62. package/dist/shaders/waves.d.ts +1 -1
  63. package/dist/shaders/waves.js +18 -18
  64. package/dist/shaders/waves.js.map +2 -2
  65. package/package.json +2 -2
package/dist/shaders/warp.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/warp.tsx"],
4
- "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 warpFragmentShader,\n ShaderFitOptions,\n type WarpParams,\n type WarpUniforms,\n type ShaderPreset,\n WarpPatterns,\n} from '@paper-design/shaders';\n\nexport interface WarpProps extends ShaderComponentProps, WarpParams {}\n\ntype WarpPreset = ShaderPreset<WarpParams>;\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: WarpPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n rotation: 0,\n speed: 1,\n frame: 0,\n colors: ['hsla(0, 0%, 15%, 1)', 'hsla(203, 80%, 70%, 1)', 'hsla(0, 0%, 100%, 1)'],\n proportion: 0.35,\n softness: 1,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.1,\n shape: 'edge',\n },\n};\n\nexport const presetCauldron: WarpPreset = {\n name: 'Cauldron Pot',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 1.1,\n rotation: 1.62,\n speed: 10,\n frame: 0,\n colors: ['hsla(100, 51%, 75%, 1)', 'hsla(220, 39%, 32%, 1)', 'hsla(129.2, 41.9%, 6.1%, 1)'],\n proportion: 0.64,\n softness: 0.95,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0,\n shape: 'edge',\n },\n};\n\nexport const presetSilk: WarpPreset = {\n name: 'Silk',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.26,\n rotation: 0,\n speed: 5,\n frame: 0,\n colors: ['hsla(0, 9%, 7%, 1)', 'hsla(8, 13%, 34%, 1)', 'hsla(5, 8%, 71%, 1)'],\n proportion: 0,\n softness: 1,\n distortion: 0.3,\n swirl: 0.6,\n swirlIterations: 11,\n shapeScale: 0.05,\n shape: 'stripes',\n },\n};\n\nexport const presetPassion: WarpPreset = {\n name: 'Passion',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.25,\n rotation: 1.35,\n speed: 3,\n frame: 0,\n colors: ['hsla(0, 44.7%, 14.9%, 1)', 'hsla(353.4, 34%, 42.2%, 1)', 'hsla(29, 100%, 76.1%, 1)'],\n proportion: 0.5,\n softness: 1,\n distortion: 0.09,\n swirl: 0.9,\n swirlIterations: 6,\n shapeScale: 0.25,\n shape: 'checks',\n },\n};\n\nexport const presetPhantom: WarpPreset = {\n name: 'Phantom',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.68,\n rotation: 1.8,\n speed: 12,\n frame: 0,\n colors: ['hsla(242.2, 44.3%, 12%, 1)', 'hsla(236.1, 80.4%, 70%, 1)', 'hsla(0, 0%, 100%, 1)'],\n proportion: 0.45,\n softness: 1,\n distortion: 0.16,\n swirl: 0.3,\n swirlIterations: 7,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetAbyss: WarpPreset = {\n name: 'The Abyss',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.1,\n rotation: 2,\n speed: 0.6,\n frame: 0,\n colors: ['hsla(242.2, 44.3%, 12%, 1)', 'hsla(236.1, 80.4%, 70%, 1)', 'hsla(0, 0%, 100%, 1)'],\n proportion: 0,\n softness: 1,\n distortion: 0.09,\n swirl: 0.48,\n swirlIterations: 4,\n shapeScale: 0.1,\n shape: 'edge',\n },\n};\n\nexport const presetInk: WarpPreset = {\n name: 'Live Ink',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.7,\n rotation: 1.5,\n speed: 2.5,\n frame: 0,\n colors: ['hsla(210, 11.1%, 7.1%, 1)', 'hsla(165, 9%, 65.1%, 1)', 'hsla(84, 100%, 97.1%, 1)'],\n proportion: 0.35,\n softness: 0,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.26,\n shape: 'checks',\n },\n};\n\nexport const presetIceberg: WarpPreset = {\n name: 'Iceberg',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 1.1,\n rotation: 2,\n speed: 0.5,\n frame: 0,\n colors: ['hsla(0, 0%, 100%, 1)', 'hsla(220, 38.7%, 32%, 1)', 'hsla(129.2, 41.9%, 6.1%, 1)'],\n proportion: 0.3,\n softness: 1,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0,\n shape: 'checks',\n },\n};\n\nexport const presetNectar: WarpPreset = {\n name: 'Nectar',\n params: {\n ...defaultPatternSizing,\n scale: 1 / 0.24,\n rotation: 0,\n speed: 4.2,\n frame: 0,\n colors: ['hsla(37.5, 22.2%, 7.1%, 1)', 'hsla(38.5, 59.1%, 63.1%, 1)', 'hsla(37.6, 30%, 95.2%, 1)'],\n proportion: 0.24,\n softness: 1,\n distortion: 0.21,\n swirl: 0.57,\n swirlIterations: 10,\n shapeScale: 0.32,\n shape: 'edge',\n },\n};\n\nexport const presetFilteredLight: WarpPreset = {\n name: 'Filtered Light',\n params: {\n ...defaultPatternSizing,\n scale: 2,\n rotation: 0.44,\n speed: 3.2,\n frame: 0,\n colors: ['hsla(60.2, 7.8%, 8.3%, 1)', 'hsla(64.4, 27.8%, 81%, 1)', 'hsla(60, 100%, 93.9%, 1)'],\n proportion: 0.25,\n softness: 1,\n distortion: 0.06,\n swirl: 0,\n swirlIterations: 0,\n shapeScale: 0,\n shape: 'stripes',\n },\n};\n\nexport const presetKelp: WarpPreset = {\n name: 'Kelp',\n params: {\n ...defaultPatternSizing,\n scale: 0.38,\n rotation: 0.6,\n speed: 20,\n frame: 0,\n colors: ['hsla(79.3, 100%, 78%, 1)', 'hsla(112, 10.5%, 28%, 1)', 'hsla(203.3, 50%, 7.1%, 1)'],\n proportion: 1,\n softness: 0,\n distortion: 0,\n swirl: 0.15,\n swirlIterations: 0,\n shapeScale: 0.74,\n shape: 'stripes',\n },\n};\n\nexport const warpPresets: WarpPreset[] = [\n defaultPreset,\n presetAbyss,\n presetCauldron,\n presetFilteredLight,\n presetIceberg,\n presetInk,\n presetKelp,\n presetNectar,\n presetPassion,\n presetPhantom,\n presetSilk,\n];\n\nexport const Warp: React.FC<WarpProps> = memo(function WarpImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n swirlIterations = defaultPreset.params.swirlIterations,\n shapeScale = defaultPreset.params.shapeScale,\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}: WarpProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_proportion: proportion,\n u_softness: softness,\n u_distortion: distortion,\n u_swirl: swirl,\n u_swirlIterations: swirlIterations,\n u_shapeScale: shapeScale,\n u_shape: WarpPatterns[shape],\n\n // Sizing uniforms\n u_scale: scale,\n u_rotation: rotation,\n u_fit: ShaderFitOptions[fit],\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 WarpUniforms;\n\n return <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={warpFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
5
- "mappings": "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",
4
+ "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 warpFragmentShader,\n ShaderFitOptions,\n type WarpParams,\n type WarpUniforms,\n type ShaderPreset,\n WarpPatterns,\n} from '@paper-design/shaders';\n\nexport interface WarpProps extends ShaderComponentProps, WarpParams {}\n\ntype WarpPreset = ShaderPreset<WarpParams>;\n\nexport const defaultPreset: WarpPreset = {\n name: 'Default',\n params: {\n ...defaultPatternSizing,\n rotation: 0,\n speed: 1,\n frame: 0,\n colors: ['#262626', '#2e383d', '#64a5ce', '#ffffff'],\n proportion: 0.45,\n softness: 1,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetAbyss: WarpPreset = {\n name: 'The Abyss',\n params: {\n ...defaultPatternSizing,\n scale: 3,\n rotation: 2,\n speed: 0.6,\n frame: 0,\n colors: ['#15122e', '#7b89f2', '#ffffff'],\n proportion: 0,\n softness: 1,\n distortion: 0.09,\n swirl: 0.48,\n swirlIterations: 5,\n shapeScale: 0.85,\n shape: 'edge',\n },\n};\n\nexport const presetCauldron: WarpPreset = {\n name: 'Cauldron Pot',\n params: {\n ...defaultPatternSizing,\n scale: 0.9,\n rotation: 160,\n speed: 20,\n frame: 0,\n colors: ['#a7e58b', '#324472', '#0a180d'],\n proportion: 0.64,\n softness: 1.5,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0.6,\n shape: 'edge',\n },\n};\n\nexport const presetFilteredLight: WarpPreset = {\n name: 'Filtered Light',\n params: {\n ...defaultPatternSizing,\n scale: 0.3,\n rotation: 45,\n speed: 3.2,\n frame: 0,\n colors: ['#171714', '#d4d8be', '#f9f9e0'],\n proportion: 0.4,\n softness: 1,\n distortion: 0.09,\n swirl: 0.1,\n swirlIterations: 0,\n shapeScale: 0.1,\n shape: 'stripes',\n },\n};\n\nexport const presetIceberg: WarpPreset = {\n name: 'Iceberg',\n params: {\n ...defaultPatternSizing,\n scale: 0.8,\n rotation: 190,\n offsetX: 0.3,\n speed: 0.5,\n frame: 0,\n colors: ['#ffffff', '#324771', '#0a180d'],\n proportion: 0.3,\n softness: 1.2,\n distortion: 0.2,\n swirl: 0.86,\n swirlIterations: 7,\n shapeScale: 0,\n shape: 'checks',\n },\n};\n\nexport const presetInk: WarpPreset = {\n name: 'Live Ink',\n params: {\n ...defaultPatternSizing,\n scale: 1.2,\n rotation: 44,\n offsetY: -0.3,\n speed: 10,\n frame: 0,\n colors: ['#111314', '#9faeab', '#f3fee7', '#f3fee7'],\n proportion: 0.05,\n softness: 0,\n distortion: 0.25,\n swirl: 0.8,\n swirlIterations: 10,\n shapeScale: 0.28,\n shape: 'checks',\n },\n};\n\nexport const presetKelp: WarpPreset = {\n name: 'Kelp',\n params: {\n ...defaultPatternSizing,\n scale: 0.65,\n rotation: 50,\n speed: 80,\n frame: 0,\n colors: ['#dbff8f', '#404f3e', '#091316'],\n proportion: 0.67,\n softness: 0.05,\n distortion: 0,\n swirl: 0.15,\n swirlIterations: 0,\n shapeScale: 0.74,\n shape: 'stripes',\n },\n};\n\nexport const presetNectar: WarpPreset = {\n name: 'Nectar',\n params: {\n ...defaultPatternSizing,\n scale: 2,\n offsetY: 0.6,\n rotation: 0,\n speed: 30,\n frame: 0,\n colors: ['#151310', '#d3a86b', '#f0edea'],\n proportion: 0.24,\n softness: 1,\n distortion: 0.21,\n swirl: 0.57,\n swirlIterations: 10,\n shapeScale: 0.75,\n shape: 'edge',\n },\n};\n\nexport const presetPassion: WarpPreset = {\n name: 'Passion',\n params: {\n ...defaultPatternSizing,\n scale: 2.5,\n rotation: 1.35,\n speed: 15,\n frame: 0,\n colors: ['#3b1515', '#954751', '#ffc085'],\n proportion: 0.5,\n softness: 1,\n distortion: 0.09,\n swirl: 0.9,\n swirlIterations: 6,\n shapeScale: 0.25,\n shape: 'checks',\n },\n};\n\nexport const presetPhantom: WarpPreset = {\n name: 'Phantom',\n params: {\n ...defaultPatternSizing,\n scale: 1.2,\n rotation: 180,\n offsetY: -0.2,\n speed: 30,\n frame: 0,\n colors: ['#12112c', '#7b89f2', '#d7dcfb'],\n proportion: 0.5,\n softness: 1,\n distortion: 0.2,\n swirl: 0.3,\n swirlIterations: 7,\n shapeScale: 0.1,\n shape: 'checks',\n },\n};\n\nexport const presetSilk: WarpPreset = {\n name: 'Silk',\n params: {\n ...defaultPatternSizing,\n scale: 2,\n rotation: 0,\n speed: 5,\n frame: 0,\n colors: ['#141111', '#665551', '#baaea9'],\n proportion: 0,\n softness: 1,\n distortion: 0.3,\n swirl: 0.6,\n swirlIterations: 11,\n shapeScale: 0.25,\n shape: 'stripes',\n },\n};\n\nexport const warpPresets: WarpPreset[] = [\n defaultPreset,\n presetAbyss,\n presetCauldron,\n presetFilteredLight,\n presetIceberg,\n presetInk,\n presetKelp,\n presetNectar,\n presetPassion,\n presetPhantom,\n presetSilk,\n];\n\nexport const Warp: React.FC<WarpProps> = memo(function WarpImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colors = defaultPreset.params.colors,\n proportion = defaultPreset.params.proportion,\n softness = defaultPreset.params.softness,\n distortion = defaultPreset.params.distortion,\n swirl = defaultPreset.params.swirl,\n swirlIterations = defaultPreset.params.swirlIterations,\n shapeScale = defaultPreset.params.shapeScale,\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}: WarpProps) {\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_proportion: proportion,\n u_softness: softness,\n u_distortion: distortion,\n u_swirl: swirl,\n u_swirlIterations: swirlIterations,\n u_shapeScale: shapeScale,\n u_shape: WarpPatterns[shape],\n\n // Sizing uniforms\n u_scale: scale,\n u_rotation: rotation,\n u_fit: ShaderFitOptions[fit],\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 WarpUniforms;\n\n return <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={warpFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/shaders/waves.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type ShaderComponentProps } from '../shader-mount';
1
+ import { type ShaderComponentProps } from '../shader-mount.js';
2
2
  import { type WavesParams, type ShaderPreset } from '@paper-design/shaders';
3
3
  export interface WavesProps extends ShaderComponentProps, WavesParams {
4
4
  }
package/dist/shaders/waves.js CHANGED
@@ -4,8 +4,8 @@
4
4
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
5
5
 
6
6
  import { memo } from "react";
7
- import { ShaderMount } from "../shader-mount";
8
- import { colorPropsAreEqual } from "../color-props-are-equal";
7
+ import { ShaderMount } from "../shader-mount.js";
8
+ import { colorPropsAreEqual } from "../color-props-are-equal.js";
9
9
  import {
10
10
  defaultPatternSizing,
11
11
  getShaderColorFromString,
@@ -19,8 +19,8 @@ const defaultPreset = {
19
19
  ...defaultPatternSizing,
20
20
  scale: 1.6,
21
21
  rotation: 0,
22
- color1: "hsla(0, 0%, 100%, 1)",
23
- color2: "hsla(225, 75%, 24%, 1)",
22
+ colorFront: "#ffffff",
23
+ colorBack: "#102c70",
24
24
  shape: 0,
25
25
  frequency: 0.5,
26
26
  amplitude: 0.6,
@@ -35,8 +35,8 @@ const spikesPreset = {
35
35
  ...defaultPatternSizing,
36
36
  scale: 1 / 2.3,
37
37
  rotation: 0,
38
- color1: "hsla(65, 100%, 95%, 1)",
39
- color2: "hsla(290, 52%, 15%, 1)",
38
+ colorFront: "#fdffe6",
39
+ colorBack: "#34123b",
40
40
  shape: 0,
41
41
  frequency: 0.5,
42
42
  amplitude: 0.9,
@@ -51,8 +51,8 @@ const groovyPreset = {
51
51
  ...defaultPatternSizing,
52
52
  scale: 1 / 0.5,
53
53
  rotation: 1,
54
- color1: "hsla(60, 100%, 97%, 1)",
55
- color2: "hsla(20, 100%, 71%, 1)",
54
+ colorFront: "#fcfcee",
55
+ colorBack: "#ff896b",
56
56
  shape: 2.37,
57
57
  frequency: 0.2,
58
58
  amplitude: 0.67,
@@ -67,8 +67,8 @@ const tangledUpPreset = {
67
67
  ...defaultPatternSizing,
68
68
  scale: 1 / 3.04,
69
69
  rotation: 1,
70
- color1: "hsla(198.7, 66.7%, 14.1%, 1)",
71
- color2: "hsla(85.5, 35.7%, 78%, 1)",
70
+ colorFront: "#133a41",
71
+ colorBack: "#c2d8b6",
72
72
  shape: 3,
73
73
  frequency: 0.44,
74
74
  amplitude: 0.57,
@@ -83,8 +83,8 @@ const zigZagPreset = {
83
83
  ...defaultPatternSizing,
84
84
  scale: 1 / 2.7,
85
85
  rotation: 1,
86
- color1: "hsla(0, 0%, 0%, 1)",
87
- color2: "hsla(0, 0%, 90%, 1)",
86
+ colorFront: "#000000",
87
+ colorBack: "#e6e6e6",
88
88
  shape: 0,
89
89
  frequency: 0.6,
90
90
  amplitude: 0.8,
@@ -99,8 +99,8 @@ const waveRidePreset = {
99
99
  ...defaultPatternSizing,
100
100
  scale: 1 / 0.84,
101
101
  rotation: 0,
102
- color1: "hsla(65, 100%, 95%, 1)",
103
- color2: "hsla(0, 0%, 12%, 1)",
102
+ colorFront: "#fdffe6",
103
+ colorBack: "#1f1f1f",
104
104
  shape: 2.23,
105
105
  frequency: 0.1,
106
106
  amplitude: 0.6,
@@ -119,8 +119,8 @@ const wavesPresets = [
119
119
  ];
120
120
  const Waves = memo(function WavesImpl({
121
121
  // Own props
122
- color1 = defaultPreset.params.color1,
123
- color2 = defaultPreset.params.color2,
122
+ colorFront = defaultPreset.params.colorFront,
123
+ colorBack = defaultPreset.params.colorBack,
124
124
  shape = defaultPreset.params.shape,
125
125
  frequency = defaultPreset.params.frequency,
126
126
  amplitude = defaultPreset.params.amplitude,
@@ -144,8 +144,8 @@ const Waves = memo(function WavesImpl({
144
144
  }) {
145
145
  const uniforms = {
146
146
  // Own uniforms
147
- u_color1: getShaderColorFromString(color1),
148
- u_color2: getShaderColorFromString(color2),
147
+ u_colorFront: getShaderColorFromString(colorFront),
148
+ u_colorBack: getShaderColorFromString(colorBack),
149
149
  u_shape: shape,
150
150
  u_frequency: frequency,
151
151
  u_amplitude: amplitude,
package/dist/shaders/waves.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/shaders/waves.tsx"],
4
- "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: 'hsla(0, 0%, 100%, 1)',\n color2: 'hsla(225, 75%, 24%, 1)',\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: 'hsla(65, 100%, 95%, 1)',\n color2: 'hsla(290, 52%, 15%, 1)',\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: 'hsla(60, 100%, 97%, 1)',\n color2: 'hsla(20, 100%, 71%, 1)',\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: 'hsla(198.7, 66.7%, 14.1%, 1)',\n color2: 'hsla(85.5, 35.7%, 78%, 1)',\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: 'hsla(0, 0%, 0%, 1)',\n color2: 'hsla(0, 0%, 90%, 1)',\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: 'hsla(65, 100%, 95%, 1)',\n color2: 'hsla(0, 0%, 12%, 1)',\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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paper-design/shaders-react",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -24,7 +24,7 @@
24
24
  "type-check": "tsc --project tsconfig.json"
25
25
  },
26
26
  "dependencies": {
27
- "@paper-design/shaders": "0.0.29"
27
+ "@paper-design/shaders": "0.0.31"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@types/react": "19.1.0"