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

Comparing version 0.0.18 to 0.0.19

dist/shaders/warp.d.ts

dist/index.d.ts

		@@ -46,2 +46,6 @@ export { ShaderMount } from './shader-mount';
		export { type VoronoiUniforms } from '@paper-design/shaders';
		export { Warp, warpPresets } from './shaders/warp';
		export { type WarpProps } from './shaders/warp';
		export { type WarpParams } from './shaders/warp';
		export { type WarpUniforms, PatternShapes, type PatternShape } from '@paper-design/shaders';
		export { getShaderColorFromString } from '@paper-design/shaders';

dist/index.js

		/*** Paper Shaders: https://github.com/paper-design/shaders ***/
		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};
		import{useEffect as b,useRef as v}from"react";import{ShaderMount as E}from"@paper-design/shaders";import{jsx as I}from"react/jsx-runtime";var o=({ref:e,fragmentShader:r,style:U,uniforms:M={},webGlContextAttributes:D,speed:G=1,seed:k=0})=>{let _=e??v(null),h=v(null);return b(()=>(_.current&&(h.current=new E(_.current,r,M,D,G,k)),()=>{h.current?.dispose()}),[r,D]),b(()=>{h.current?.setUniforms(M)},[M]),b(()=>{h.current?.setSpeed(G)},[G]),b(()=>{h.current?.setSeed(k)},[k]),I("canvas",{ref:_,style:U})};import{useMemo as X}from"react";import{getShaderColorFromString as F,grainCloudsFragmentShader as q}from"@paper-design/shaders";import{jsx as A}from"react/jsx-runtime";var S={name:"Default",params:{scale:1,speed:.3,seed:0,color1:"hsla(0, 0%, 0%, 1)",color2:"hsla(0, 0%, 100%, 1)",grainAmount:1}},V={name:"Sky",params:{scale:1,speed:.3,seed:0,color1:"hsla(218, 100%, 73%, 1)",color2:"hsla(0, 0%, 100%, 1)",grainAmount:0}},Y=[S,V],J=e=>{let r=X(()=>({u_scale:e.scale??S.params.scale,u_color1:F(e.color1,S.params.color1),u_color2:F(e.color2,S.params.color2),u_grainAmount:e.grainAmount??S.params.grainAmount}),[e.scale,e.color1,e.color2,e.grainAmount]);return A(o,{...e,fragmentShader:q,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as T}from"react";import{getShaderColorFromString as x,meshGradientFragmentShader as L}from"@paper-design/shaders";import{jsx as $}from"react/jsx-runtime";var g={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)"}},H={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)"}},K={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)"}},Z=[g,H,K],Q=e=>{let r=T(()=>({u_color1:x(e.color1,g.params.color1),u_color2:x(e.color2,g.params.color2),u_color3:x(e.color3,g.params.color3),u_color4:x(e.color4,g.params.color4)}),[e.color1,e.color2,e.color3,e.color4]);return $(o,{...e,fragmentShader:L,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as j}from"react";import{getShaderColorFromString as N,smokeRingFragmentShader as ee}from"@paper-design/shaders";import{jsx as ne}from"react/jsx-runtime";var p={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}},re={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}},oe={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}},se={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}},ae={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}},te=[p,re,oe,se,ae],le=e=>{let r=j(()=>({u_scale:e.scale??p.params.scale,u_colorBack:N(e.colorBack,p.params.colorBack),u_colorInner:N(e.colorInner,p.params.colorInner),u_colorOuter:N(e.colorOuter,p.params.colorOuter),u_noiseScale:e.noiseScale??p.params.noiseScale,u_thickness:e.thickness??p.params.thickness}),[e.scale,e.colorBack,e.colorInner,e.colorOuter,e.noiseScale,e.thickness]);return ne(o,{...e,fragmentShader:ee,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as ie}from"react";import{getShaderColorFromString as w,neuroNoiseFragmentShader as ce}from"@paper-design/shaders";import{jsx as ue}from"react/jsx-runtime";var P={name:"Default",params:{scale:1,speed:1,seed:0,colorFront:"hsla(261, 100%, 82%, 1)",colorBack:"hsla(0, 0%, 0%, 1)",brightness:1.3}},me={name:"Marble",params:{scale:.4,speed:0,seed:0,colorFront:"hsla(230, 24%, 15%, 1)",colorBack:"hsla(0, 0%, 97%, 1)",brightness:1.1}},de=[P,me],pe=e=>{let r=ie(()=>({u_scale:e.scale??P.params.scale,u_colorFront:w(e.colorFront,P.params.colorFront),u_colorBack:w(e.colorBack,P.params.colorBack),u_brightness:e.brightness??P.params.brightness}),[e.scale,e.colorFront,e.colorBack,e.brightness]);return ue(o,{...e,fragmentShader:ce,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as he}from"react";import{getShaderColorFromString as C,dotsOrbitFragmentShader as Se}from"@paper-design/shaders";import{jsx as fe}from"react/jsx-runtime";var i={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}},ge=[i],Pe=e=>{let r=he(()=>({u_scale:e.scale??i.params.scale,u_color1:C(e.color1,i.params.color1),u_color2:C(e.color2,i.params.color2),u_color3:C(e.color3,i.params.color3),u_color4:C(e.color4,i.params.color4),u_dotSize:e.dotSize??i.params.dotSize,u_dotSizeRange:e.dotSizeRange??i.params.dotSizeRange,u_spreading:e.spreading??i.params.spreading}),[e.scale,e.color1,e.color2,e.color3,e.color4,e.dotSize,e.dotSizeRange,e.spreading]);return fe(o,{...e,fragmentShader:Se,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as ye}from"react";import{dotsGridFragmentShader as be,getShaderColorFromString as R,DotsGridShapes as m}from"@paper-design/shaders";import{jsx as We}from"react/jsx-runtime";var t={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:m.Circle}},xe={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:m.Triangle}},Ce={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:m.Circle}},Me={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:m.Circle}},Ge={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:m.Diamond}},ke={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:m.Diamond}},_e={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:m.Triangle}},Ne={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:m.Square}},Re=[t,xe,Ce,Me,Ge,ke,_e,Ne],ze=e=>{let r=ye(()=>({u_colorBack:R(e.colorBack,t.params.colorBack),u_colorFill:R(e.colorFill,t.params.colorStroke),u_colorStroke:R(e.colorStroke,t.params.colorStroke),u_dotSize:e.dotSize??t.params.dotSize,u_gridSpacingX:e.gridSpacingX??t.params.gridSpacingX,u_gridSpacingY:e.gridSpacingY??t.params.gridSpacingY,u_strokeWidth:e.strokeWidth??t.params.strokeWidth,u_sizeRange:e.sizeRange??t.params.sizeRange,u_opacityRange:e.opacityRange??t.params.opacityRange,u_shape:e.shape??t.params.shape}),[e.colorBack,e.colorFill,e.colorStroke,e.dotSize,e.gridSpacingX,e.gridSpacingY,e.strokeWidth,e.sizeRange,e.opacityRange,e.shape]);return We(o,{...e,fragmentShader:be,uniforms:r})};import{DotsGridShapes as xs}from"@paper-design/shaders";import{useMemo as De}from"react";import{getShaderColorFromString as f,steppedSimplexNoiseFragmentShader as ve}from"@paper-design/shaders";import{jsx as Ee}from"react/jsx-runtime";var d={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}},Fe={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}},we={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}},Be={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}},Oe=[d,Fe,we,Be],Ue=e=>{let r=De(()=>({u_scale:e.scale??d.params.scale,u_color1:f(e.color1,d.params.color1),u_color2:f(e.color2,d.params.color2),u_color3:f(e.color3,d.params.color3),u_color4:f(e.color4,d.params.color4),u_color5:f(e.color5,d.params.color5),u_steps_number:e.stepsNumber??d.params.stepsNumber}),[e.scale,e.color1,e.color2,e.color3,e.color4,e.color5,e.stepsNumber]);return Ee(o,{...e,fragmentShader:ve,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as Ie}from"react";import{getShaderColorFromString as z,metaballsFragmentShader as Xe}from"@paper-design/shaders";import{jsx as Ye}from"react/jsx-runtime";var u={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}},qe=[u],Ve=e=>{let r=Ie(()=>({u_scale:e.scale??u.params.scale,u_color1:z(e.color1,u.params.color1),u_color2:z(e.color2,u.params.color2),u_color3:z(e.color3,u.params.color3),u_ballSize:e.ballSize??u.params.ballSize,u_visibilityRange:e.visibilityRange??u.params.visibilityRange}),[e.scale,e.color1,e.color2,e.color3,e.ballSize,e.visibilityRange]);return Ye(o,{...e,fragmentShader:Xe,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as Je}from"react";import{getShaderColorFromString as B,wavesFragmentShader as Ae}from"@paper-design/shaders";import{jsx as je}from"react/jsx-runtime";var l={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}},Te={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}},Le={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}},He={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}},Ke={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}},Ze={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}},Qe=[l,Te,Le,He,Ke,Ze],$e=e=>{let r=Je(()=>({u_scale:e.scale??l.params.scale,u_rotation:e.rotation??l.params.rotation,u_color1:B(e.color1,l.params.color1),u_color2:B(e.color2,l.params.color2),u_shape:e.shape??l.params.shape,u_frequency:e.frequency??l.params.frequency,u_amplitude:e.amplitude??l.params.amplitude,u_spacing:e.spacing??l.params.spacing,u_dutyCycle:e.dutyCycle??l.params.dutyCycle,u_edgeBlur:e.edgeBlur??l.params.edgeBlur}),[e.scale,e.rotation,e.color1,e.color2,e.shape,e.frequency,e.amplitude,e.spacing,e.dutyCycle,e.edgeBlur]);return je(o,{...e,fragmentShader:Ae,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as er}from"react";import{getShaderColorFromString as O,perlinNoiseFragmentShader as rr}from"@paper-design/shaders";import{jsx as cr}from"react/jsx-runtime";var c={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}},or={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}},sr={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}},ar={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}},tr={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}},lr={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}},nr=[c,or,sr,ar,tr,lr],ir=e=>{let r=er(()=>({u_scale:e.scale??c.params.scale,u_color1:O(e.color1,c.params.color1),u_color2:O(e.color2,c.params.color2),u_proportion:e.proportion??c.params.proportion,u_contour:e.contour??c.params.contour,u_octaveCount:e.octaveCount??c.params.octaveCount,u_persistence:e.persistence??c.params.persistence,u_lacunarity:e.lacunarity??c.params.lacunarity}),[e.scale,e.color1,e.color2,e.proportion,e.contour,e.octaveCount,e.persistence,e.lacunarity]);return cr(o,{...e,fragmentShader:rr,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as mr}from"react";import{getShaderColorFromString as y,voronoiFragmentShader as dr}from"@paper-design/shaders";import{jsx as xr}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}},pr={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}},ur={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}},hr={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}},Sr={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}},gr={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}},Pr={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}},fr={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}},yr=[s,pr,ur,hr,Sr,gr,Pr,fr],br=e=>{let r=mr(()=>({u_scale:e.scale??s.params.scale,u_colorCell1:y(e.colorCell1,s.params.colorCell1),u_colorCell2:y(e.colorCell2,s.params.colorCell2),u_colorCell3:y(e.colorCell3,s.params.colorCell3),u_colorMid:y(e.colorMid,s.params.colorMid),u_colorEdges:y(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 xr(o,{...e,fragmentShader:dr,uniforms:r})};import{}from"@paper-design/shaders";import{useMemo as Cr}from"react";import{getShaderColorFromString as W,warpFragmentShader as Mr,PatternShapes as n}from"@paper-design/shaders";import{jsx as Or}from"react/jsx-runtime";var a={name:"Default",params:{scale:1,rotation:0,speed:.1,seed:0,color1:"hsla(0, 0%, 15%, 1)",color2:"hsla(203, 80%, 70%, 1)",color3:"hsla(0, 0%, 100%, 1)",proportion:.35,softness:1,distortion:.25,swirl:.8,swirlIterations:10,shapeScale:.1,shape:n.Checks}},Gr={name:"Cauldron Pot",params:{scale:1.1,rotation:1.62,speed:1,seed:0,color1:"hsla(100, 51%, 75%, 1)",color2:"hsla(220, 39%, 32%, 1)",color3:"hsla(129.2, 41.9%, 6.1%, 1)",proportion:.64,softness:.95,distortion:.2,swirl:.86,swirlIterations:7,shapeScale:0,shape:n.Edge}},kr={name:"Silk",params:{scale:.26,rotation:0,speed:.5,seed:0,color1:"hsla(0, 9%, 7%, 1)",color2:"hsla(8, 13%, 34%, 1)",color3:"hsla(5, 8%, 71%, 1)",proportion:0,softness:1,distortion:.3,swirl:.6,swirlIterations:11,shapeScale:.05,shape:n.Stripes}},_r={name:"Passion",params:{scale:.25,rotation:1.35,speed:.3,seed:0,color1:"hsla(0, 44.7%, 14.9%, 1)",color2:"hsla(353.4, 34%, 42.2%, 1)",color3:"hsla(29, 100%, 76.1%, 1)",proportion:.5,softness:1,distortion:.09,swirl:.9,swirlIterations:6,shapeScale:.25,shape:n.Checks}},Nr={name:"Phantom",params:{scale:.68,rotation:1.8,speed:1.25,seed:0,color1:"hsla(242.2, 44.3%, 12%, 1)",color2:"hsla(236.1, 80.4%, 70%, 1)",color3:"hsla(0, 0%, 100%, 1)",proportion:.45,softness:1,distortion:.16,swirl:.3,swirlIterations:7,shapeScale:.1,shape:n.Checks}},Rr={name:"The Abyss",params:{scale:.1,rotation:2,speed:.06,seed:0,color1:"hsla(242.2, 44.3%, 12%, 1)",color2:"hsla(236.1, 80.4%, 70%, 1)",color3:"hsla(0, 0%, 100%, 1)",proportion:0,softness:1,distortion:.09,swirl:.48,swirlIterations:4,shapeScale:.1,shape:n.Edge}},zr={name:"Live Ink",params:{scale:2,rotation:1.5,speed:.25,seed:0,color1:"hsla(210, 11.1%, 7.1%, 1)",color2:"hsla(165, 9%, 65.1%, 1)",color3:"hsla(84, 100%, 97.1%, 1)",proportion:.35,softness:.3,distortion:.25,swirl:.8,swirlIterations:10,shapeScale:.26,shape:n.Checks}},Wr={name:"Iceberg",params:{scale:1.1,rotation:2,speed:.05,seed:0,color1:"hsla(0, 0%, 100%, 1)",color2:"hsla(220, 38.7%, 32%, 1)",color3:"hsla(129.2, 41.9%, 6.1%, 1)",proportion:.3,softness:1,distortion:.2,swirl:.86,swirlIterations:7,shapeScale:0,shape:n.Checks}},Dr={name:"Nectar",params:{scale:.24,rotation:0,speed:.42,seed:0,color1:"hsla(37.5, 22.2%, 7.1%, 1)",color2:"hsla(38.5, 59.1%, 63.1%, 1)",color3:"hsla(37.6, 30%, 95.2%, 1)",proportion:.24,softness:1,distortion:.21,swirl:.57,swirlIterations:10,shapeScale:.32,shape:n.Edge}},vr={name:"Filtered Light",params:{scale:2,rotation:.44,speed:.32,seed:0,color1:"hsla(60.2, 7.8%, 8.3%, 1)",color2:"hsla(64.4, 27.8%, 81%, 1)",color3:"hsla(60, 100%, 93.9%, 1)",proportion:.25,softness:1,distortion:.06,swirl:0,swirlIterations:0,shapeScale:0,shape:n.Stripes}},Fr={name:"Kelp",params:{scale:.38,rotation:.6,speed:2,seed:0,color1:"hsla(79.3, 100%, 78%, 1)",color2:"hsla(112, 10.5%, 28%, 1)",color3:"hsla(203.3, 50%, 7.1%, 1)",proportion:1,softness:0,distortion:0,swirl:.15,swirlIterations:0,shapeScale:.74,shape:n.Stripes}},wr=[a,Rr,Gr,vr,Wr,zr,Fr,Dr,_r,Nr,kr],Br=e=>{let r=Cr(()=>({u_scale:e.scale??a.params.scale,u_rotation:e.rotation??a.params.rotation,u_color1:W(e.color1,a.params.color1),u_color2:W(e.color2,a.params.color2),u_color3:W(e.color3,a.params.color2),u_proportion:e.proportion??a.params.proportion,u_softness:e.softness??a.params.softness,u_distortion:e.distortion??a.params.distortion,u_swirl:e.swirl??a.params.swirl,u_swirlIterations:e.swirlIterations??a.params.swirlIterations,u_shapeScale:e.shapeScale??a.params.shapeScale,u_shape:e.shape??a.params.shape}),[e.scale,e.rotation,e.color1,e.color2,e.color3,e.proportion,e.softness,e.distortion,e.swirl,e.swirlIterations,e.shapeScale,e.shape]);return Or(o,{...e,fragmentShader:Mr,uniforms:r})};import{PatternShapes as Ts}from"@paper-design/shaders";import{getShaderColorFromString as Hs}from"@paper-design/shaders";export{ze as DotsGrid,xs as DotsGridShapes,Pe as DotsOrbit,J as GrainClouds,Q as MeshGradient,Ve as Metaballs,pe as NeuroNoise,Ts as PatternShapes,ir as PerlinNoise,o as ShaderMount,le as SmokeRing,Ue as SteppedSimplexNoise,br as Voronoi,Br as Warp,$e as Waves,Re as dotsGridPresets,ge as dotsOrbitPresets,Hs as getShaderColorFromString,Y as grainCloudsPresets,Z as meshGradientPresets,qe as metaballsPresets,de as neuroNoisePresets,nr as perlinNoisePresets,te as smokeRingPresets,Oe as steppedSimplexNoisePresets,yr as voronoiPresets,wr as warpPresets,Qe as wavesPresets};
		//# sourceMappingURL=index.js.map

package.json

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

dist/index.js.map

Sorry, the diff of this file is not supported yet

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

Fixed alerts

Improved metrics

Dependency changes