@paper-design/shaders-react - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

dist/index.d.ts

@@ -18,6 +18,10 @@ export { ShaderMount } from './shader-mount';
 export { type NeuroNoiseUniforms } from '@paper-design/shaders';
-export { DotsOrbit, dotsOrbitPresets } from './shaders/dots-pattern';
-export { type DotsOrbitProps } from './shaders/dots-pattern';
-export { type DotsOrbitParams } from './shaders/dots-pattern';
+export { DotsOrbit, dotsOrbitPresets } from './shaders/dots-orbit';
+export { type DotsOrbitProps } from './shaders/dots-orbit';
+export { type DotsOrbitParams } from './shaders/dots-orbit';
 export { type DotsOrbitUniforms } from '@paper-design/shaders';
+export { DotsGrid, dotsGridPresets } from './shaders/dots-grid';
+export { type DotsGridProps } from './shaders/dots-grid';
+export { type DotsGridParams } from './shaders/dots-grid';
+export { type DotsGridUniforms, DotsGridShapes, type DotsGridShape } from '@paper-design/shaders';
 export { SteppedSimplexNoise, steppedSimplexNoisePresets } from './shaders/stepped-simplex-noise';
@@ -27,2 +31,18 @@ export { type SteppedSimplexNoiseProps } from './shaders/stepped-simplex-noise';
 export { type SteppedSimplexNoiseUniforms } from '@paper-design/shaders';
+export { Metaballs, metaballsPresets } from './shaders/metaballs';
+export { type MetaballsProps } from './shaders/metaballs';
+export { type MetaballsParams } from './shaders/metaballs';
+export { type MetaballsUniforms } from '@paper-design/shaders';
+export { Waves, wavesPresets } from './shaders/waves';
+export { type WavesProps } from './shaders/waves';
+export { type WavesParams } from './shaders/waves';
+export { type WavesUniforms } from '@paper-design/shaders';
+export { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise';
+export { type PerlinNoiseProps } from './shaders/perlin-noise';
+export { type PerlinNoiseParams } from './shaders/perlin-noise';
+export { type PerlinNoiseUniforms } from '@paper-design/shaders';
+export { Voronoi, voronoiPresets } from './shaders/voronoi';
+export { type VoronoiProps } from './shaders/voronoi';
+export { type VoronoiParams } from './shaders/voronoi';
+export { type VoronoiUniforms } from '@paper-design/shaders';
 export { getShaderColorFromString } from '@paper-design/shaders';

dist/index.js

 /***** Paper Shaders: https://github.com/paper-design/shaders *****/
-import{useEffect as P,useRef as x}from"react";import{ShaderMount as M}from"@paper-design/shaders";import{jsx as k}from"react/jsx-runtime";var o=({ref:e,fragmentShader:r,style:y,uniforms:d={},webGlContextAttributes:g,speed:S=1})=>{let h=e??x(null),c=x(null);return P(()=>(h.current&&(c.current=new M(h.current,r,d,g,S)),()=>{c.current?.dispose()}),[r,g]),P(()=>{c.current?.setUniforms(d)},[d]),P(()=>{c.current?.setSpeed(S)},[S]),k("canvas",{ref:h,style:y})};import{useMemo as G}from"react";import{getShaderColorFromString as b,grainCloudsFragmentShader as R}from"@paper-design/shaders";import{jsx as F}from"react/jsx-runtime";var m={name:"Default",params:{color1:"hsla(0, 0%, 0%, 1)",color2:"hsla(0, 0%, 100%, 1)",scale:1,grainAmount:.05,speed:.3}},_={name:"Sky",params:{color1:"#73a6ff",color2:"#ffffff",scale:1,grainAmount:0,speed:.3}},C=[m,_],O=e=>{let r=G(()=>({u_color1:b(e.color1,m.params.color1),u_color2:b(e.color2,m.params.color2),u_scale:e.scale??m.params.scale,u_grainAmount:e.grainAmount??m.params.grainAmount}),[e.color1,e.color2,e.scale,e.grainAmount]);return F(o,{...e,fragmentShader:R,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as D}from"react";import{getShaderColorFromString as p,meshGradientFragmentShader as B}from"@paper-design/shaders";import{jsx as A}from"react/jsx-runtime";var l={name:"Default",params:{color1:"hsla(259, 29%, 73%, 1)",color2:"hsla(263, 57%, 39%, 1)",color3:"hsla(48, 73%, 84%,1)",color4:"hsla(295, 32%, 70%, 1)",speed:.15}},U={name:"Beach",params:{color1:"hsla(186, 81%, 83%, 1)",color2:"hsla(198, 55%, 68%, 1)",color3:"hsla(53, 67%, 88%, 1)",color4:"hsla(45, 93%, 73%, 1)",speed:.1}},z=[l,U],E=e=>{let r=D(()=>({u_color1:p(e.color1,l.params.color1),u_color2:p(e.color2,l.params.color2),u_color3:p(e.color3,l.params.color3),u_color4:p(e.color4,l.params.color4),u_speed:e.speed??l.params.speed}),[e.color1,e.color2,e.color3,e.color4,e.speed]);return A(o,{...e,fragmentShader:B,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as q}from"react";import{getShaderColorFromString as f,smokeRingFragmentShader as J}from"@paper-design/shaders";import{jsx as w}from"react/jsx-runtime";var a={name:"Default",params:{colorBack:"hsla(208, 54%, 7%, 1)",color1:"hsla(0, 0%, 100%, 1)",color2:"hsla(211, 100%, 64%, 1)",speed:1,noiseScale:1.4,thickness:.33}},X={name:"Cloud",params:{colorBack:"hsla(218, 100%, 62%)",color1:"hsla(0, 0%, 100%)",color2:"hsla(0, 0%, 100%)",speed:1,thickness:.7,noiseScale:1.8}},v={name:"Fire",params:{colorBack:"hsla(20, 100%, 5%)",color1:"hsla(40, 100%, 50%)",color2:"hsla(0, 100%, 50%)",speed:4,thickness:.35,noiseScale:1.4}},L={name:"Electric",params:{colorBack:"hsla(47, 50%, 7%)",color1:"hsla(47, 100%, 64%)",color2:"hsla(47, 100%, 64%)",speed:2.5,thickness:.1,noiseScale:1.8}},H={name:"Poison",params:{colorBack:"hsla(120, 100%, 3%)",color1:"hsla(120, 100%, 3%)",color2:"hsla(120, 100%, 66%)",speed:3,thickness:.6,noiseScale:5}},T=[a,X,v,L,H],V=e=>{let r=q(()=>({u_colorBack:f(e.colorBack,a.params.colorBack),u_color1:f(e.color1,a.params.color1),u_color2:f(e.color2,a.params.color2),u_speed:e.speed??a.params.speed,u_scale:e.noiseScale??a.params.noiseScale,u_thickness:e.thickness??a.params.thickness}),[e.colorBack,e.color1,e.color2,e.speed,e.noiseScale,e.thickness]);return w(o,{...e,fragmentShader:J,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as W}from"react";import{getShaderColorFromString as N,neuroNoiseFragmentShader as I}from"@paper-design/shaders";import{jsx as Z}from"react/jsx-runtime";var n={name:"Default",params:{colorFront:"hsla(261, 100%, 82%, 1)",colorBack:"hsla(0, 0%, 0%, 1)",scale:.7,speed:1,brightness:1.3}},K={name:"Marble",params:{colorFront:"hsla(230, 24%, 15%, 1)",colorBack:"hsla(0, 0%, 97%, 1)",scale:1.2,speed:0,brightness:1.1}},Q=[n,K],Y=e=>{let r=W(()=>({u_colorFront:N(e.colorFront,n.params.colorFront),u_colorBack:N(e.colorBack,n.params.colorBack),u_scale:e.scale??n.params.scale,u_speed:e.speed??n.params.speed,u_brightness:e.brightness??n.params.brightness}),[e.colorFront,e.colorBack,e.scale,e.speed,e.brightness]);return Z(o,{...e,fragmentShader:I,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as $}from"react";import{getShaderColorFromString as u,dotsOrbitFragmentShader as j}from"@paper-design/shaders";import{jsx as oe}from"react/jsx-runtime";var s={name:"Default",params:{color1:"hsla(358.2, 66.1%, 48.6%, 1)",color2:"hsla(145.2, 30.1%, 32.5%, 1)",color3:"hsla(39.4, 87.7%, 52.4%, 1)",color4:"hsla(273.5, 29.5%, 34.5%, 1)",dotSize:.15,dotSizeRange:.05,scale:10,speed:3,spreading:.25}},ee=[s],re=e=>{let r=$(()=>({u_color1:u(e.color1,s.params.color1),u_color2:u(e.color2,s.params.color2),u_color3:u(e.color3,s.params.color3),u_color4:u(e.color4,s.params.color4),u_dotSize:e.dotSize??s.params.dotSize,u_dotSizeRange:e.dotSizeRange??s.params.dotSizeRange,u_scale:e.scale??s.params.scale,u_spreading:e.spreading??s.params.spreading}),[e.color1,e.color2,e.color3,e.color4,e.dotSize,e.dotSizeRange,e.scale,e.spreading]);return oe(o,{...e,fragmentShader:j,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as se}from"react";import{getShaderColorFromString as i,steppedSimplexNoiseFragmentShader as te}from"@paper-design/shaders";import{jsx as ce}from"react/jsx-runtime";var t={name:"Default",params:{color1:"hsla(208.42, 24.68%, 45.29%, 1)",color2:"hsla(94.07, 38.39%, 58.63%, 1)",color3:"hsla(359.02, 93.88%, 61.57%, 1)",color4:"hsla(42.35, 93.41%, 64.31%, 1)",color5:"hsla(0, 0%, 100%, 1)",scale:.5,speed:.15,stepsNumber:13}},ae={name:"Magma",params:{color1:"hsla(0, 100%, 36.47%, 1)",color2:"hsla(0, 95.54%, 43.92%, 1)",color3:"hsla(20.08, 100%, 48.63%, 1)",color4:"hsla(45, 100%, 45.49%, 1)",color5:"hsla(31.87, 100%, 93.73%, 1)",speed:.2,scale:2,stepsNumber:8}},le={name:"Blood cell",params:{color1:"#30132f",color2:"#540332",color3:"#720d32",color4:"#720d32",color5:"#f4807c",scale:.72,speed:.22,stepsNumber:29}},ne={name:"First contact",params:{color1:"#e5bde5",color2:"#150727",color3:"#512a5a",color4:"#deb0b0",color5:"#ffebeb",scale:.62,speed:-.1,stepsNumber:40}},me=[t,ae,le,ne],ie=e=>{let r=se(()=>({u_color1:i(e.color1,t.params.color1),u_color2:i(e.color2,t.params.color2),u_color3:i(e.color3,t.params.color3),u_color4:i(e.color4,t.params.color4),u_color5:i(e.color5,t.params.color5),u_scale:e.scale??t.params.scale,u_speed:e.speed??t.params.speed,u_steps_number:e.stepsNumber??t.params.stepsNumber}),[e.color1,e.color2,e.color3,e.color4,e.color5,e.scale,e.speed,e.stepsNumber]);return ce(o,{...e,fragmentShader:te,uniforms:r})};import{}from"@paper-design/shaders";import{getShaderColorFromString as xr}from"@paper-design/shaders";export{re as DotsOrbit,O as GrainClouds,E as MeshGradient,Y as NeuroNoise,o as ShaderMount,V as SmokeRing,ie as SteppedSimplexNoise,ee as dotsOrbitPresets,xr as getShaderColorFromString,C as grainCloudsPresets,z as meshGradientPresets,Q as neuroNoisePresets,T as smokeRingPresets,me as steppedSimplexNoisePresets};
+import{useEffect as f,useRef as z}from"react";import{ShaderMount as W}from"@paper-design/shaders";import{jsx as U}from"react/jsx-runtime";var o=({ref:e,fragmentShader:r,style:O,uniforms:x={},webGlContextAttributes:_,speed:C=1,seed:M=0})=>{let G=e??z(null),p=z(null);return f(()=>(G.current&&(p.current=new W(G.current,r,x,_,C,M)),()=>{p.current?.dispose()}),[r,_]),f(()=>{p.current?.setUniforms(x)},[x]),f(()=>{p.current?.setSpeed(C)},[C]),f(()=>{p.current?.setSeed(M)},[M]),U("canvas",{ref:G,style:O})};import{useMemo as E}from"react";import{getShaderColorFromString as D,grainCloudsFragmentShader as V}from"@paper-design/shaders";import{jsx as J}from"react/jsx-runtime";var u={name:"Default",params:{scale:1,speed:.3,seed:0,color1:"hsla(0, 0%, 0%, 1)",color2:"hsla(0, 0%, 100%, 1)",grainAmount:1}},X={name:"Sky",params:{scale:1,speed:.3,seed:0,color1:"hsla(218, 100%, 73%, 1)",color2:"hsla(0, 0%, 100%, 1)",grainAmount:0}},q=[u,X],Y=e=>{let r=E(()=>({u_scale:e.scale??u.params.scale,u_color1:D(e.color1,u.params.color1),u_color2:D(e.color2,u.params.color2),u_grainAmount:e.grainAmount??u.params.grainAmount}),[e.scale,e.color1,e.color2,e.grainAmount]);return J(o,{...e,fragmentShader:V,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as w}from"react";import{getShaderColorFromString as y,meshGradientFragmentShader as I}from"@paper-design/shaders";import{jsx as Z}from"react/jsx-runtime";var h={name:"Default",params:{speed:.15,seed:0,color1:"hsla(259, 29%, 73%, 1)",color2:"hsla(263, 57%, 39%, 1)",color3:"hsla(48, 73%, 84%, 1)",color4:"hsla(295, 32%, 70%, 1)"}},A={name:"Beach",params:{speed:.1,seed:0,color1:"hsla(186, 81%, 83%, 1)",color2:"hsla(198, 55%, 68%, 1)",color3:"hsla(53, 67%, 88%, 1)",color4:"hsla(45, 93%, 73%, 1)"}},T={name:"Faded",params:{speed:-.3,seed:0,color1:"hsla(186, 41%, 90%, 1)",color2:"hsla(208, 71%, 85%, 1)",color3:"hsla(183, 51%, 92%, 1)",color4:"hsla(201, 72%, 90%, 1)"}},L=[h,A,T],H=e=>{let r=w(()=>({u_color1:y(e.color1,h.params.color1),u_color2:y(e.color2,h.params.color2),u_color3:y(e.color3,h.params.color3),u_color4:y(e.color4,h.params.color4)}),[e.color1,e.color2,e.color3,e.color4]);return Z(o,{...e,fragmentShader:I,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as K}from"react";import{getShaderColorFromString as k,smokeRingFragmentShader as Q}from"@paper-design/shaders";import{jsx as ae}from"react/jsx-runtime";var m={name:"Default",params:{scale:1,speed:1,seed:0,colorBack:"hsla(208, 54%, 7%, 1)",colorInner:"hsla(0, 0%, 100%, 1)",colorOuter:"hsla(211, 100%, 64%, 1)",noiseScale:1.4,thickness:.33}},$={name:"Cloud",params:{scale:1,speed:1,seed:0,colorBack:"hsla(218, 100%, 62%, 1)",colorInner:"hsla(0, 0%, 100%, 1)",colorOuter:"hsla(0, 0%, 100%, 1)",noiseScale:1.8,thickness:.7}},j={name:"Fire",params:{scale:1,speed:4,seed:0,colorBack:"hsla(20, 100%, 5%, 1)",colorInner:"hsla(40, 100%, 50%, 1)",colorOuter:"hsla(0, 100%, 50%, 1)",noiseScale:1.4,thickness:.35}},ee={name:"Electric",params:{scale:1,speed:2.5,seed:0,colorBack:"hsla(47, 50%, 7%, 1)",colorInner:"hsla(47, 100%, 64%, 1)",colorOuter:"hsla(47, 100%, 64%, 1)",noiseScale:1.8,thickness:.1}},re={name:"Poison",params:{scale:1,speed:3,seed:0,colorBack:"hsla(120, 100%, 3%, 1)",colorInner:"hsla(120, 100%, 3%, 1)",colorOuter:"hsla(120, 100%, 66%, 1)",noiseScale:5,thickness:.6}},oe=[m,$,j,ee,re],se=e=>{let r=K(()=>({u_scale:e.scale??m.params.scale,u_colorBack:k(e.colorBack,m.params.colorBack),u_colorInner:k(e.colorInner,m.params.colorInner),u_colorOuter:k(e.colorOuter,m.params.colorOuter),u_noiseScale:e.noiseScale??m.params.noiseScale,u_thickness:e.thickness??m.params.thickness}),[e.scale,e.colorBack,e.colorInner,e.colorOuter,e.noiseScale,e.thickness]);return ae(o,{...e,fragmentShader:Q,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as te}from"react";import{getShaderColorFromString as v,neuroNoiseFragmentShader as le}from"@paper-design/shaders";import{jsx as me}from"react/jsx-runtime";var g={name:"Default",params:{scale:1,speed:1,seed:0,colorFront:"hsla(261, 100%, 82%, 1)",colorBack:"hsla(0, 0%, 0%, 1)",brightness:1.3}},ne={name:"Marble",params:{scale:.4,speed:0,seed:0,colorFront:"hsla(230, 24%, 15%, 1)",colorBack:"hsla(0, 0%, 97%, 1)",brightness:1.1}},ie=[g,ne],ce=e=>{let r=te(()=>({u_scale:e.scale??g.params.scale,u_colorFront:v(e.colorFront,g.params.colorFront),u_colorBack:v(e.colorBack,g.params.colorBack),u_brightness:e.brightness??g.params.brightness}),[e.scale,e.colorFront,e.colorBack,e.brightness]);return me(o,{...e,fragmentShader:le,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as de}from"react";import{getShaderColorFromString as b,dotsOrbitFragmentShader as pe}from"@paper-design/shaders";import{jsx as ge}from"react/jsx-runtime";var l={name:"Default",params:{scale:1,speed:2,seed:0,color1:"hsla(358, 66%, 49%, 1)",color2:"hsla(145, 30%, 33%, 1)",color3:"hsla(39, 88%, 52%, 1)",color4:"hsla(274, 30%, 35%, 1)",dotSize:.7,dotSizeRange:.4,spreading:1}},ue=[l],he=e=>{let r=de(()=>({u_scale:e.scale??l.params.scale,u_color1:b(e.color1,l.params.color1),u_color2:b(e.color2,l.params.color2),u_color3:b(e.color3,l.params.color3),u_color4:b(e.color4,l.params.color4),u_dotSize:e.dotSize??l.params.dotSize,u_dotSizeRange:e.dotSizeRange??l.params.dotSizeRange,u_spreading:e.spreading??l.params.spreading}),[e.scale,e.color1,e.color2,e.color3,e.color4,e.dotSize,e.dotSizeRange,e.spreading]);return ge(o,{...e,fragmentShader:pe,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as Se}from"react";import{dotsGridFragmentShader as Pe,getShaderColorFromString as N,DotsGridShapes as i}from"@paper-design/shaders";import{jsx as Re}from"react/jsx-runtime";var a={name:"Default",params:{colorBack:"hsla(358, 66%, 49%, 0)",colorFill:"hsla(145, 30%, 10%, 1)",colorStroke:"hsla(39, 88%, 52%, 1)",dotSize:2,gridSpacingX:50,gridSpacingY:50,strokeWidth:0,sizeRange:0,opacityRange:0,shape:i.Circle}},fe={name:"Triangles",params:{colorBack:"hsla(0, 0%, 100%, 1)",colorFill:"hsla(0, 0%, 100%, 1)",colorStroke:"hsla(0, 0%, 0%, .5)",dotSize:5,gridSpacingX:32,gridSpacingY:32,strokeWidth:1,sizeRange:0,opacityRange:0,shape:i.Triangle}},ye={name:"Bubbles",params:{colorBack:"hsla(234, 100%, 31%, .5)",colorFill:"hsla(100, 30%, 100%, 1)",colorStroke:"hsla(0, 100%, 0%, 1)",dotSize:28,gridSpacingX:60,gridSpacingY:60,strokeWidth:12,sizeRange:.7,opacityRange:1.3,shape:i.Circle}},be={name:"Tree line",params:{colorBack:"hsla(100, 100%, 36%, .05)",colorFill:"hsla(150, 80%, 10%, 1)",colorStroke:"hsla(0, 0%, 0%, 1)",dotSize:8,gridSpacingX:20,gridSpacingY:90,strokeWidth:0,sizeRange:1,opacityRange:.6,shape:i.Circle}},xe={name:"Diamonds",params:{colorBack:"hsla(0, 0%, 0%, 0)",colorFill:"hsla(0, 100%, 50%, 1)",colorStroke:"hsla(0, 0%, 0%, 1)",dotSize:15,gridSpacingX:30,gridSpacingY:30,strokeWidth:0,sizeRange:0,opacityRange:2,shape:i.Diamond}},Ce={name:"Wallpaper",params:{colorBack:"hsla(154, 33%, 19%, 1)",colorFill:"hsla(0, 0%, 0%, 0)",colorStroke:"hsla(36, 48%, 58%, 1)",dotSize:9,gridSpacingX:32,gridSpacingY:32,strokeWidth:1,sizeRange:0,opacityRange:0,shape:i.Diamond}},Me={name:"Enter the Matrix",params:{colorBack:"hsla(0, 100%, 0%, 1)",colorFill:"hsla(182, 100%, 64%, 1)",colorStroke:"hsla(0, 100%, 100%, 0)",dotSize:2,gridSpacingX:10,gridSpacingY:10,strokeWidth:.5,sizeRange:.25,opacityRange:1,shape:i.Triangle}},Ge={name:"Waveform",params:{colorBack:"hsla(0, 100%, 100%, 1)",colorFill:"hsla(227, 93%, 38%, 1)",colorStroke:"hsla(0, 0%, 0%, 0)",dotSize:100,gridSpacingX:2,gridSpacingY:215,strokeWidth:0,sizeRange:1,opacityRange:0,shape:i.Square}},ke=[a,fe,ye,be,xe,Ce,Me,Ge],Ne=e=>{let r=Se(()=>({u_colorBack:N(e.colorBack,a.params.colorBack),u_colorFill:N(e.colorFill,a.params.colorStroke),u_colorStroke:N(e.colorStroke,a.params.colorStroke),u_dotSize:e.dotSize??a.params.dotSize,u_gridSpacingX:e.gridSpacingX??a.params.gridSpacingX,u_gridSpacingY:e.gridSpacingY??a.params.gridSpacingY,u_strokeWidth:e.strokeWidth??a.params.strokeWidth,u_sizeRange:e.sizeRange??a.params.sizeRange,u_opacityRange:e.opacityRange??a.params.opacityRange,u_shape:e.shape??a.params.shape}),[e.colorBack,e.colorFill,e.colorStroke,e.dotSize,e.gridSpacingX,e.gridSpacingY,e.strokeWidth,e.sizeRange,e.opacityRange,e.shape]);return Re(o,{...e,fragmentShader:Pe,uniforms:r})};import{DotsGridShapes as $o}from"@paper-design/shaders";import{useMemo as _e}from"react";import{getShaderColorFromString as S,steppedSimplexNoiseFragmentShader as ze}from"@paper-design/shaders";import{jsx as We}from"react/jsx-runtime";var c={name:"Default",params:{scale:1,speed:.15,seed:0,color1:"hsla(208, 25%, 45%, 1)",color2:"hsla(94, 38%, 59%, 1)",color3:"hsla(359, 94%, 62%, 1)",color4:"hsla(42, 93%, 64%, 1)",color5:"hsla(0, 0%, 100%, 1)",stepsNumber:13}},De={name:"Magma",params:{scale:.3,speed:.2,seed:0,color1:"hsla(0, 100%, 36%, 1)",color2:"hsla(0, 95%, 44%, 1)",color3:"hsla(20, 100%, 49%, 1)",color4:"hsla(45, 100%, 45%, 1)",color5:"hsla(31, 100%, 94%, 1)",stepsNumber:8}},ve={name:"Blood cell",params:{scale:1.2,speed:.22,seed:0,color1:"hsla(302, 43%, 13%, 1)",color2:"hsla(325, 93%, 17%, 1)",color3:"hsla(338, 80%, 25%, 1)",color4:"hsla(338, 80%, 25%, 1)",color5:"hsla(2, 85%, 72%, 1)",stepsNumber:29}},Fe={name:"First contact",params:{scale:1.2,speed:-.1,seed:0,color1:"hsla(300, 43%, 82%, 1)",color2:"hsla(266, 70%, 9%, 1)",color3:"hsla(289, 36%, 26%, 1)",color4:"hsla(0, 41%, 78%, 1)",color5:"hsla(0, 100%, 96%, 1)",stepsNumber:40}},Be=[c,De,ve,Fe],Oe=e=>{let r=_e(()=>({u_scale:e.scale??c.params.scale,u_color1:S(e.color1,c.params.color1),u_color2:S(e.color2,c.params.color2),u_color3:S(e.color3,c.params.color3),u_color4:S(e.color4,c.params.color4),u_color5:S(e.color5,c.params.color5),u_steps_number:e.stepsNumber??c.params.stepsNumber}),[e.scale,e.color1,e.color2,e.color3,e.color4,e.color5,e.stepsNumber]);return We(o,{...e,fragmentShader:ze,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as Ue}from"react";import{getShaderColorFromString as R,metaballsFragmentShader as Ee}from"@paper-design/shaders";import{jsx as qe}from"react/jsx-runtime";var d={name:"Default",params:{scale:1,speed:.6,seed:0,color1:"hsla(350, 90%, 55%, 1)",color2:"hsla(350, 80%, 60%, 1)",color3:"hsla(20, 85%, 70%, 1)",ballSize:1,visibilityRange:.4}},Ve=[d],Xe=e=>{let r=Ue(()=>({u_scale:e.scale??d.params.scale,u_color1:R(e.color1,d.params.color1),u_color2:R(e.color2,d.params.color2),u_color3:R(e.color3,d.params.color3),u_ballSize:e.ballSize??d.params.ballSize,u_visibilityRange:e.visibilityRange??d.params.visibilityRange}),[e.scale,e.color1,e.color2,e.color3,e.ballSize,e.visibilityRange]);return qe(o,{...e,fragmentShader:Ee,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as Ye}from"react";import{getShaderColorFromString as F,wavesFragmentShader as Je}from"@paper-design/shaders";import{jsx as Ke}from"react/jsx-runtime";var t={name:"Default",params:{scale:1,rotation:0,color1:"hsla(48, 100%, 74%, 1)",color2:"hsla(204, 47%, 45%, 1)",shape:1,frequency:.5,amplitude:.5,spacing:.75,dutyCycle:.2,edgeBlur:0}},we={name:"Spikes",params:{scale:2.3,rotation:0,color1:"hsla(65, 100%, 95%, 1)",color2:"hsla(290, 52%, 15%, 1)",shape:0,frequency:.5,amplitude:.9,spacing:.37,dutyCycle:.93,edgeBlur:.15}},Ie={name:"Groovy",params:{scale:.5,rotation:1,color1:"hsla(60, 100%, 97%, 1)",color2:"hsla(20, 100%, 71%, 1)",shape:2.37,frequency:.2,amplitude:.67,spacing:1.17,dutyCycle:.57,edgeBlur:0}},Ae={name:"Tangled up",params:{scale:3.04,rotation:1,color1:"hsla(198.7, 66.7%, 14.1%, 1)",color2:"hsla(85.5, 35.7%, 78%, 1)",shape:3,frequency:.44,amplitude:.57,spacing:1.05,dutyCycle:.97,edgeBlur:0}},Te={name:"Zig zag",params:{scale:2.7,rotation:1,color1:"hsla(0, 0%, 0%, 1)",color2:"hsla(0, 0%, 90%, 1)",shape:0,frequency:.6,amplitude:.8,spacing:.5,dutyCycle:1,edgeBlur:.5}},Le={name:"Ride the wave",params:{scale:.84,rotation:0,color1:"hsla(65, 100%, 95%, 1)",color2:"hsla(0, 0%, 12%, 1)",shape:2.23,frequency:.1,amplitude:.6,spacing:.41,dutyCycle:.99,edgeBlur:0}},He=[t,we,Ie,Ae,Te,Le],Ze=e=>{let r=Ye(()=>({u_scale:e.scale??t.params.scale,u_rotation:e.rotation??t.params.rotation,u_color1:F(e.color1,t.params.color1),u_color2:F(e.color2,t.params.color2),u_shape:e.shape??t.params.shape,u_frequency:e.frequency??t.params.frequency,u_amplitude:e.amplitude??t.params.amplitude,u_spacing:e.spacing??t.params.spacing,u_dutyCycle:e.dutyCycle??t.params.dutyCycle,u_edgeBlur:e.edgeBlur??t.params.edgeBlur}),[e.scale,e.rotation,e.color1,e.color2,e.shape,e.frequency,e.amplitude,e.spacing,e.dutyCycle,e.edgeBlur]);return Ke(o,{...e,fragmentShader:Je,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as Qe}from"react";import{getShaderColorFromString as B,perlinNoiseFragmentShader as $e}from"@paper-design/shaders";import{jsx as lr}from"react/jsx-runtime";var n={name:"Default",params:{scale:1,speed:.5,seed:0,color1:"hsla(0, 0%, 15%, 1)",color2:"hsla(203, 100%, 87%, 1)",proportion:.34,contour:.9,octaveCount:2,persistence:1,lacunarity:1.5}},je={name:"Nintendo Water",params:{scale:.2,speed:.5,seed:0,color1:"hsla(220, 66%, 50%, 1)",color2:"hsla(155, 66%, 80%, 1)",proportion:.42,contour:1,octaveCount:2,persistence:.55,lacunarity:1.8}},er={name:"Colony",params:{scale:.15,speed:0,seed:0,color1:"hsla(56, 86%, 81%, 1)",color2:"hsla(230, 80%, 20%, 1)",octaveCount:6,persistence:1,lacunarity:2.55,proportion:.65,contour:.65}},rr={name:"Phosphenes",params:{scale:.03,speed:.15,seed:0,color1:"hsla(350, 80%, 70%, 1)",color2:"hsla(150, 50%, 60%, 1)",proportion:.45,contour:.55,octaveCount:6,persistence:.3,lacunarity:3}},or={name:"Moss",params:{scale:.15,speed:.02,seed:0,color1:"hsla(137, 100%, 51%, 1)",color2:"hsla(0, 0%, 15%, 1)",proportion:.65,contour:.65,octaveCount:6,persistence:1,lacunarity:2.55}},sr={name:"Worms",params:{scale:2,speed:0,seed:0,color1:"hsla(0, 100%, 100%, 1)",color2:"hsla(0, 0%, 35%, 1)",proportion:.5,contour:1,octaveCount:1,persistence:1,lacunarity:1.5}},ar=[n,je,er,rr,or,sr],tr=e=>{let r=Qe(()=>({u_scale:e.scale??n.params.scale,u_color1:B(e.color1,n.params.color1),u_color2:B(e.color2,n.params.color2),u_proportion:e.proportion??n.params.proportion,u_contour:e.contour??n.params.contour,u_octaveCount:e.octaveCount??n.params.octaveCount,u_persistence:e.persistence??n.params.persistence,u_lacunarity:e.lacunarity??n.params.lacunarity}),[e.scale,e.color1,e.color2,e.proportion,e.contour,e.octaveCount,e.persistence,e.lacunarity]);return lr(o,{...e,fragmentShader:$e,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as nr}from"react";import{getShaderColorFromString as P,voronoiFragmentShader as ir}from"@paper-design/shaders";import{jsx as fr}from"react/jsx-runtime";var s={name:"Default",params:{scale:1.5,speed:.5,seed:0,colorCell1:"hsla(15, 80%, 50%, 1)",colorCell2:"hsla(180, 80%, 50%, 1)",colorCell3:"hsla(200, 80%, 50%, 1)",colorEdges:"hsla(30, 90%, 10%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorGradient:.5,distance:.25,edgesSize:.15,edgesSharpness:.01,middleSize:0,middleSharpness:0}},cr={name:"Classic",params:{scale:3,speed:.8,seed:0,colorCell1:"hsla(0, 100%, 100%, 1)",colorCell2:"hsla(0, 0%, 100%, 1)",colorCell3:"hsla(0, 100%, 0%, 1)",colorEdges:"hsla(0, 0%, 0%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorGradient:1,distance:.45,edgesSize:.02,edgesSharpness:.07,middleSize:0,middleSharpness:0}},mr={name:"Giraffe",params:{scale:1,speed:.6,seed:0,colorCell1:"hsla(32, 100%, 18%, 1)",colorCell2:"hsla(42, 93%, 35%, 1)",colorCell3:"hsla(32, 100%, 18%, 1)",colorEdges:"hsla(45, 100%, 96%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorGradient:1,distance:.25,edgesSize:.2,edgesSharpness:.01,middleSize:0,middleSharpness:.3}},dr={name:"Eyes",params:{scale:1.6,speed:.6,seed:0,colorCell1:"hsla(79, 84%, 60%, 1)",colorCell2:"hsla(207, 53%, 41%, 1)",colorCell3:"hsla(207, 80%, 65%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorEdges:"hsla(0, 100%, 100%, 1)",colorGradient:1,distance:.25,edgesSize:.62,edgesSharpness:.01,middleSize:.1,middleSharpness:1}},pr={name:"Bubbles",params:{scale:2,speed:.5,seed:0,colorCell1:"hsla(0, 100%, 50%, 1)",colorCell2:"hsla(169, 100%, 66%, 1)",colorCell3:"hsla(50, 100%, 66%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorEdges:"hsla(0, 0%, 0%, 1)",colorGradient:1,distance:.5,edgesSize:.81,edgesSharpness:0,middleSize:0,middleSharpness:.45}},ur={name:"Cells",params:{scale:2,speed:1,seed:0,colorCell1:"hsla(0, 0%, 100%, 1)",colorCell2:"hsla(0, 0%, 100%, 1)",colorCell3:"hsla(0, 0%, 100%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorEdges:"hsla(200, 50%, 15%, 1)",colorGradient:1,distance:.38,edgesSize:.1,edgesSharpness:.02,middleSize:0,middleSharpness:0}},hr={name:"Glow",params:{scale:1.2,speed:.8,seed:0,colorCell1:"hsla(40, 100%, 50%, 1)",colorCell2:"hsla(311, 100%, 59%, 1)",colorCell3:"hsla(180, 100%, 65%, 1)",colorEdges:"hsla(0, 100%, 0%, 1)",colorMid:"hsla(0, 0%, 100%, 1)",colorGradient:1,distance:.25,edgesSize:.15,edgesSharpness:.01,middleSize:.7,middleSharpness:0}},gr={name:"Tiles",params:{scale:1.3,speed:1,seed:0,colorCell1:"hsla(80, 50%, 50%, 1)",colorCell2:"hsla(0, 50%, 100%, 1)",colorCell3:"hsla(200, 50%, 50%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorEdges:"hsla(200, 50%, 10%, 1)",colorGradient:0,distance:.05,edgesSize:.25,edgesSharpness:.02,middleSize:0,middleSharpness:0}},Sr=[s,cr,mr,dr,pr,ur,hr,gr],Pr=e=>{let r=nr(()=>({u_scale:e.scale??s.params.scale,u_colorCell1:P(e.colorCell1,s.params.colorCell1),u_colorCell2:P(e.colorCell2,s.params.colorCell2),u_colorCell3:P(e.colorCell3,s.params.colorCell3),u_colorMid:P(e.colorMid,s.params.colorMid),u_colorEdges:P(e.colorEdges,s.params.colorEdges),u_colorGradient:e.colorGradient??s.params.colorGradient,u_distance:e.distance??s.params.distance,u_edgesSize:e.edgesSize??s.params.edgesSize,u_edgesSharpness:e.edgesSharpness??s.params.edgesSharpness,u_middleSize:e.middleSize??s.params.middleSize,u_middleSharpness:e.middleSharpness??s.params.middleSharpness}),[e.scale,e.colorCell1,e.colorCell3,e.colorCell2,e.colorMid,e.colorEdges,e.colorGradient,e.distance,e.edgesSize,e.edgesSharpness,e.middleSize,e.middleSharpness]);return fr(o,{...e,fragmentShader:ir,uniforms:r})};import{}from"@paper-design/shaders";import{getShaderColorFromString as bs}from"@paper-design/shaders";export{Ne as DotsGrid,$o as DotsGridShapes,he as DotsOrbit,Y as GrainClouds,H as MeshGradient,Xe as Metaballs,ce as NeuroNoise,tr as PerlinNoise,o as ShaderMount,se as SmokeRing,Oe as SteppedSimplexNoise,Pr as Voronoi,Ze as Waves,ke as dotsGridPresets,ue as dotsOrbitPresets,bs as getShaderColorFromString,q as grainCloudsPresets,L as meshGradientPresets,Ve as metaballsPresets,ie as neuroNoisePresets,ar as perlinNoisePresets,oe as smokeRingPresets,Be as steppedSimplexNoisePresets,Sr as voronoiPresets,He as wavesPresets};
 //# sourceMappingURL=index.js.map

dist/shader-mount.d.ts

@@ -9,5 +9,6 @@ import React from 'react';
     speed?: number;
+    seed?: number;
 }
 /** Params that every shader can set as part of their controls */
-export type GlobalParams = Pick<ShaderMountProps, 'speed'>;
+export type GlobalParams = Pick<ShaderMountProps, 'speed' | 'seed'>;
 export declare const ShaderMount: React.FC<ShaderMountProps>;

dist/shaders/grain-clouds.d.ts

 import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
 export type GrainCloudsParams = {
+    scale?: number;
     color1?: string;
     color2?: string;
-    scale?: number;
     grainAmount?: number;
@@ -7,0 +7,0 @@ } & GlobalParams;

dist/shaders/mesh-gradient.d.ts

@@ -15,4 +15,5 @@ import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
 export declare const beachPreset: MeshGradientPreset;
+export declare const fadedPreset: MeshGradientPreset;
 export declare const meshGradientPresets: MeshGradientPreset[];
 export declare const MeshGradient: (props: MeshGradientProps) => JSX.Element;
 export {};

dist/shaders/neuro-noise.d.ts

 import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
 export type NeuroNoiseParams = {
+    scale?: number;
     colorFront?: string;
     colorBack?: string;
-    scale?: number;
     brightness?: number;
@@ -7,0 +7,0 @@ } & GlobalParams;

dist/shaders/smoke-ring.d.ts

 import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
 export type SmokeRingParams = {
     colorBack?: string;
-    color1?: string;
-    color2?: string;
+    colorInner?: string;
+    colorOuter?: string;
+    scale?: number;
     noiseScale?: number;
@@ -7,0 +8,0 @@ thickness?: number;

dist/shaders/stepped-simplex-noise.d.ts

 import { type GlobalParams, type ShaderMountProps } from '../shader-mount';
 export type SteppedSimplexNoiseParams = {
+    scale?: number;
     color1?: string;
@@ -8,3 +9,2 @@ color2?: string;
     color5?: string;
-    scale?: number;
     stepsNumber?: number;
@@ -11,0 +11,0 @@ } & GlobalParams;

package.json

 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "MIT",
@@ -26,3 +26,3 @@ "type": "module",
   "dependencies": {
-    "@paper-design/shaders": "0.0.15",
+    "@paper-design/shaders": "0.0.16",
     "react": ">=18"
@@ -29,0 +29,0 @@ },

README.md

@@ -9,9 +9,11 @@ # @paper-design/shaders-react
 <MeshGradient
-  colors={['#283BFC', '#FF2828', '#ddd']}
-  blur="0.6"
-  frequency="0.8"
-  animationSpeed="1"
-  style={{ width: 500, height: 200 }} />
+  color1="#FFC0CB" // pink
+  color2="#FFFF00" // yellow
+  color3="#0000FF" // blue
+  color4="#800080" // purple
+  speed={0.25}
+  style={{ width: 500, height: 200 }}
+/>;
 
 // these settings can be configured in code or designed in Paper
 ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93047

increased by126.21%

Number of package files

18

increased by38.46%

Lines of code

368

increased by107.91%

Number of lines in readme file

19

increased by11.76%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@paper-design/shaders@0.0.16(transitive)

• - Removed@paper-design/shaders@0.0.15(transitive)

• Updated@paper-design/shaders@0.0.16