@paper-design/shaders-react 0.0.27 → 0.0.29

package/dist/index.js

@@ -1,3 +1,1902 @@
 /***** Paper Shaders: https://github.com/paper-design/shaders *****/
-import{useEffect as U,useRef as E,forwardRef as H}from"react";import{ShaderMount as $}from"@paper-design/shaders";import*as G from"react";function V(s){let o=G.useRef(void 0),a=G.useCallback(r=>{let n=s.map(e=>{if(e!=null){if(typeof e=="function"){let t=e,l=t(r);return typeof l=="function"?l:()=>{t(null)}}return e.current=r,()=>{e.current=null}}});return()=>{n.forEach(e=>e?.())}},s);return G.useMemo(()=>s.every(r=>r==null)?null:r=>{o.current&&(o.current(),o.current=void 0),r!=null&&(o.current=a(r))},s)}import{jsx as K}from"react/jsx-runtime";var X=s=>{let o={},a=[],r=e=>{try{return e.startsWith("/")||new URL(e),!0}catch{return!1}},n=e=>{try{return e.startsWith("/")?!1:new URL(e,window.location.origin).origin!==window.location.origin}catch{return!1}};return Object.entries(s).forEach(([e,t])=>{if(typeof t=="string"){if(!r(t)){console.warn(`Uniform "${e}" has invalid URL "${t}". Skipping image loading.`);return}let l=new Promise((m,c)=>{let i=new Image;n(t)&&(i.crossOrigin="anonymous"),i.onload=()=>{o[e]=i,m()},i.onerror=()=>{console.error(`Could not set uniforms. Failed to load image at ${t}`),c()},i.src=t});a.push(l)}else o[e]=t}),Promise.all(a).then(()=>o)},p=H(function({shaderMountRef:o,fragmentShader:a,uniforms:r={},webGlContextAttributes:n,speed:e=1,frame:t=0,...l},m){let c=E(null),i=E(null);return U(()=>((async()=>{let P=await X(r);c.current&&!i.current&&(i.current=new $(c.current,a,P,n,e,t),o&&(o.current=i.current))})(),()=>{i.current?.dispose(),i.current=null}),[a,n]),U(()=>{(async()=>{let P=await X(r);i.current?.setUniforms(P)})()},[r]),U(()=>{i.current?.setSpeed(e)},[e]),U(()=>{i.current?.setFrame(t)},[t]),K("div",{ref:V([c,m]),...l})});p.displayName="ShaderMount";import{useMemo as Z}from"react";import{getShaderColorFromString as z,meshGradientFragmentShader as J}from"@paper-design/shaders";import{jsx as oe}from"react/jsx-runtime";var D={name:"Default",params:{speed:.15,frame: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)"}},Q={name:"Beach",params:{speed:.1,frame: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)"}},j={name:"Faded",params:{speed:-.3,frame: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)"}},ee=[D,Q,j],re=({color1:s,color2:o,color3:a,color4:r,...n})=>{let e=Z(()=>({u_color1:z(s,D.params.color1),u_color2:z(o,D.params.color2),u_color3:z(a,D.params.color3),u_color4:z(r,D.params.color4)}),[s,o,a,r]);return oe(p,{...n,fragmentShader:J,uniforms:e})};import{}from"@paper-design/shaders";import{useMemo as se}from"react";import{getShaderColorFromString as Y,smokeRingFragmentShader as ae}from"@paper-design/shaders";import{jsx as ce}from"react/jsx-runtime";var C={name:"Default",params:{scale:1,speed:.5,frame:0,colorInner:"hsla(0, 0%, 100%, 1)",colorOuter:"hsla(38, 4%, 38%, 1)",noiseScale:1,thickness:.5}},te={name:"Cloud",params:{scale:1,speed:1,frame:0,colorInner:"hsla(0, 0%, 100%, 1)",colorOuter:"hsla(0, 0%, 100%, 1)",noiseScale:1.8,thickness:.7},style:{background:"hsla(218, 100%, 62%, 1)"}},ne={name:"Fire",params:{scale:1,speed:4,frame:0,colorInner:"hsla(40, 100%, 50%, 1)",colorOuter:"hsla(0, 100%, 50%, 1)",noiseScale:1.4,thickness:.35},style:{background:"hsla(20, 100%, 5%, 1)"}},le={name:"Electric",params:{scale:1,speed:-2.5,frame:0,colorInner:"hsla(47, 100%, 64%, 1)",colorOuter:"hsla(47, 100%, 64%, 1)",noiseScale:1.8,thickness:.1},style:{background:"hsla(47, 50%, 7%, 1)"}},ie={name:"Poison",params:{scale:1,speed:3,frame:0,colorInner:"hsla(120, 100%, 3%, 1)",colorOuter:"hsla(120, 100%, 66%, 1)",noiseScale:5,thickness:.6},style:{background:"hsla(120, 100%, 3%, 1)"}},pe=[C,te,ne,le,ie],me=({scale:s,colorInner:o,colorOuter:a,noiseScale:r,thickness:n,...e})=>{let t=se(()=>({u_scale:s??C.params.scale,u_colorInner:Y(o,C.params.colorInner),u_colorOuter:Y(a,C.params.colorOuter),u_noiseScale:r??C.params.noiseScale,u_thickness:n??C.params.thickness}),[s,o,a,r,n]);return ce(p,{...e,fragmentShader:ae,uniforms:t})};import{}from"@paper-design/shaders";import{useMemo as de}from"react";import{getShaderColorFromString as T,neuroNoiseFragmentShader as ue}from"@paper-design/shaders";import{jsx as Se}from"react/jsx-runtime";var W={name:"Default",params:{scale:1,speed:1,frame:0,colorFront:"hsla(261, 100%, 82%, 1)",colorBack:"hsla(0, 0%, 0%, 1)",brightness:1.3}},fe={name:"Marble",params:{scale:.4,speed:0,frame:0,colorFront:"hsla(230, 24%, 15%, 1)",colorBack:"hsla(0, 0%, 97%, 1)",brightness:1.1}},he=[W,fe],Pe=({scale:s,colorFront:o,colorBack:a,brightness:r,...n})=>{let e=de(()=>({u_scale:s??W.params.scale,u_colorFront:T(o,W.params.colorFront),u_colorBack:T(a,W.params.colorBack),u_brightness:r??W.params.brightness}),[s,o,a,r]);return Se(p,{...n,fragmentShader:ue,uniforms:e})};import{}from"@paper-design/shaders";import{useMemo as ge}from"react";import{getShaderColorFromString as F,dotOrbitFragmentShader as ye}from"@paper-design/shaders";import{jsx as Re}from"react/jsx-runtime";var x={name:"Default",params:{scale:1,speed:2,frame: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}},be=[x],xe=({scale:s,color1:o,color2:a,color3:r,color4:n,dotSize:e,dotSizeRange:t,spreading:l,...m})=>{let c=ge(()=>({u_scale:s??x.params.scale,u_color1:F(o,x.params.color1),u_color2:F(a,x.params.color2),u_color3:F(r,x.params.color3),u_color4:F(n,x.params.color4),u_dotSize:e??x.params.dotSize,u_dotSizeRange:t??x.params.dotSizeRange,u_spreading:l??x.params.spreading}),[s,o,a,r,n,e,t,l]);return Re(p,{...m,fragmentShader:ye,uniforms:c})};import{}from"@paper-design/shaders";import{useMemo as Me}from"react";import{dotGridFragmentShader as ke,getShaderColorFromString as B,DotGridShapes as R}from"@paper-design/shaders";import{jsx as ve}from"react/jsx-runtime";var y={name:"Default",params:{colorFill:"hsla(0, 0%, 0%, 1)",colorStroke:"hsla(40, 100%, 50%, 1)",dotSize:2,gridSpacingX:50,gridSpacingY:50,strokeWidth:0,sizeRange:0,opacityRange:0,shape:R.Circle}},_e={name:"Macrodata",params:{colorFill:"hsla(218, 100%, 67%, 1)",colorStroke:"hsla(0, 0%, 0%, 1)",dotSize:3,gridSpacingX:25,gridSpacingY:25,strokeWidth:0,sizeRange:.25,opacityRange:.9,shape:R.Circle},style:{background:"hsla(211, 37%, 13%, 1)"}},Ge={name:"Triangles",params:{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:R.Triangle},style:{background:"hsla(0, 0%, 100%, 1)"}},Ce={name:"Bubbles",params:{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:R.Circle},style:{background:"hsla(234, 100%, 31%, .5)"}},Ne={name:"Tree line",params:{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:R.Circle},style:{background:"hsla(100, 100%, 36%, .05)"}},De={name:"Diamonds",params:{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:R.Diamond},style:{background:"hsla(0, 0%, 0%, 0)"}},We={name:"Wallpaper",params:{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:R.Diamond},style:{background:"hsla(154, 33%, 19%, 1)"}},we={name:"Enter the Matrix",params:{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:R.Triangle},style:{background:"hsla(0, 100%, 0%, 1)"}},Ue={name:"Waveform",params:{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:R.Square},style:{background:"hsla(0, 100%, 100%, 1)"}},ze=[y,_e,Ge,Ce,Ne,De,We,we,Ue],Fe=({colorFill:s,colorStroke:o,dotSize:a,gridSpacingX:r,gridSpacingY:n,strokeWidth:e,sizeRange:t,opacityRange:l,shape:m,...c})=>{let i=Me(()=>({u_colorFill:B(s,y.params.colorStroke),u_colorStroke:B(o,y.params.colorStroke),u_dotSize:a??y.params.dotSize,u_gridSpacingX:r??y.params.gridSpacingX,u_gridSpacingY:n??y.params.gridSpacingY,u_strokeWidth:e??y.params.strokeWidth,u_sizeRange:t??y.params.sizeRange,u_opacityRange:l??y.params.opacityRange,u_shape:m??y.params.shape}),[s,o,a,r,n,e,t,l,m]);return ve(p,{...c,fragmentShader:ke,uniforms:i})};import{DotGridShapes as Js}from"@paper-design/shaders";import{useMemo as Oe}from"react";import{getShaderColorFromString as w,steppedSimplexNoiseFragmentShader as Ie}from"@paper-design/shaders";import{jsx as Te}from"react/jsx-runtime";var M={name:"Default",params:{scale:1,speed:.15,frame: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}},qe={name:"Magma",params:{scale:.3,speed:.2,frame: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,frame: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}},Ee={name:"First contact",params:{scale:1.2,speed:-.1,frame: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}},Xe=[M,qe,Ve,Ee],Ye=({scale:s,color1:o,color2:a,color3:r,color4:n,color5:e,stepsNumber:t,...l})=>{let m=Oe(()=>({u_scale:s??M.params.scale,u_color1:w(o,M.params.color1),u_color2:w(a,M.params.color2),u_color3:w(r,M.params.color3),u_color4:w(n,M.params.color4),u_color5:w(e,M.params.color5),u_steps_number:t??M.params.stepsNumber}),[s,o,a,r,n,e,t]);return Te(p,{...l,fragmentShader:Ie,uniforms:m})};import{}from"@paper-design/shaders";import{useMemo as Be}from"react";import{getShaderColorFromString as I,metaballsFragmentShader as Le}from"@paper-design/shaders";import{jsx as $e}from"react/jsx-runtime";var _={name:"Default",params:{scale:1,speed:.6,frame:0,color1:"hsla(350, 90%, 55%, 1)",color2:"hsla(350, 80%, 60%, 1)",color3:"hsla(20, 85%, 70%, 1)",ballSize:1,visibilityRange:.4}},Ae=[_],He=({scale:s,color1:o,color2:a,color3:r,ballSize:n,visibilityRange:e,...t})=>{let l=Be(()=>({u_scale:s??_.params.scale,u_color1:I(o,_.params.color1),u_color2:I(a,_.params.color2),u_color3:I(r,_.params.color3),u_ballSize:n??_.params.ballSize,u_visibilityRange:e??_.params.visibilityRange}),[s,o,a,r,n,e]);return $e(p,{...t,fragmentShader:Le,uniforms:l})};import{}from"@paper-design/shaders";import{useMemo as Ke}from"react";import{getShaderColorFromString as Ze,wavesFragmentShader as Je}from"@paper-design/shaders";import{jsx as tr}from"react/jsx-runtime";var b={name:"Default",params:{scale:1,rotation:0,color:"hsla(204, 47%, 45%, 1)",shape:1,frequency:.5,amplitude:.5,spacing:.75,dutyCycle:.2,softness:0}},Qe={name:"Spikes",params:{scale:2.3,rotation:0,color:"hsla(290, 52%, 15%, 1)",shape:0,frequency:.5,amplitude:.9,spacing:.37,dutyCycle:.93,softness:.15},style:{background:"hsla(65, 100%, 95%, 1)"}},je={name:"Groovy",params:{scale:.5,rotation:1,color:"hsla(20, 100%, 71%, 1)",shape:2.37,frequency:.2,amplitude:.67,spacing:1.17,dutyCycle:.57,softness:0},style:{background:"hsla(60, 100%, 97%, 1)"}},er={name:"Tangled up",params:{scale:3.04,rotation:1,color:"hsla(85.5, 35.7%, 78%, 1)",shape:3,frequency:.44,amplitude:.57,spacing:1.05,dutyCycle:.97,softness:0},style:{background:"hsla(198.7, 66.7%, 14.1%, 1)"}},rr={name:"Zig zag",params:{scale:2.7,rotation:1,color:"hsla(0, 0%, 90%, 1)",shape:0,frequency:.6,amplitude:.8,spacing:.5,dutyCycle:1,softness:.5},style:{background:"hsla(0, 0%, 0%, 1)"}},or={name:"Ride the wave",params:{scale:.84,rotation:0,color:"hsla(0, 0%, 12%, 1)",shape:2.23,frequency:.1,amplitude:.6,spacing:.41,dutyCycle:.99,softness:0},style:{background:"hsla(65, 100%, 95%, 1)"}},sr=[b,Qe,je,er,rr,or],ar=({scale:s,rotation:o,color:a,shape:r,frequency:n,amplitude:e,spacing:t,dutyCycle:l,softness:m,...c})=>{let i=Ke(()=>({u_scale:s??b.params.scale,u_rotation:o??b.params.rotation,u_color:Ze(a,b.params.color),u_shape:r??b.params.shape,u_frequency:n??b.params.frequency,u_amplitude:e??b.params.amplitude,u_spacing:t??b.params.spacing,u_dutyCycle:l??b.params.dutyCycle,u_softness:m??b.params.softness}),[s,o,a,r,n,e,t,l,m]);return tr(p,{...c,fragmentShader:Je,uniforms:i})};import{}from"@paper-design/shaders";import{useMemo as nr}from"react";import{getShaderColorFromString as lr,perlinNoiseFragmentShader as ir}from"@paper-design/shaders";import{jsx as Pr}from"react/jsx-runtime";var k={name:"Default",params:{scale:1,speed:.5,frame:0,color:"hsla(0, 0%, 15%, 1)",proportion:.65,softness:.1,octaveCount:2,persistence:1,lacunarity:1.5}},pr={name:"Nintendo Water",params:{scale:.2,speed:.4,frame:0,color:"hsla(200, 66%, 90%, 1)",proportion:.42,softness:0,octaveCount:2,persistence:.55,lacunarity:1.8},style:{background:"hsla(220, 66%, 50%, 1)"}},mr={name:"Colony",params:{scale:.15,speed:0,frame:0,color:"hsla(230, 80%, 20%, 1)",octaveCount:6,persistence:1,lacunarity:2.55,proportion:.65,softness:.35},style:{background:"hsla(56, 86%, 81%, 1)"}},cr={name:"Phosphenes",params:{scale:.03,speed:.15,frame:0,color:"hsla(150, 50%, 60%, 1)",proportion:.45,softness:.45,octaveCount:6,persistence:.3,lacunarity:3},style:{background:"hsla(350, 80%, 70%, 1)"}},dr={name:"Moss",params:{scale:.15,speed:.02,frame:0,color:"hsla(0, 0%, 15%, 1)",proportion:.65,softness:.35,octaveCount:6,persistence:1,lacunarity:2.55},style:{background:"hsla(137, 100%, 51%, 1)"}},ur={name:"Worms",params:{scale:2,speed:0,frame:0,color:"hsla(0, 0%, 35%, 1)",proportion:.5,softness:0,octaveCount:1,persistence:1,lacunarity:1.5},style:{background:"hsla(0, 100%, 100%, 1)"}},fr=[k,pr,mr,cr,dr,ur],hr=({scale:s,color:o,proportion:a,softness:r,octaveCount:n,persistence:e,lacunarity:t,...l})=>{let m=nr(()=>({u_scale:s??k.params.scale,u_color:lr(o,k.params.color),u_proportion:a??k.params.proportion,u_softness:r??k.params.softness,u_octaveCount:n??k.params.octaveCount,u_persistence:e??k.params.persistence,u_lacunarity:t??k.params.lacunarity}),[s,o,a,r,n,e,t]);return Pr(p,{...l,fragmentShader:ir,uniforms:m})};import{}from"@paper-design/shaders";import{useMemo as Sr}from"react";import{getShaderColorFromString as v,voronoiFragmentShader as gr}from"@paper-design/shaders";import{jsx as Nr}from"react/jsx-runtime";var S={name:"Default",params:{scale:1.5,speed:.5,frame:0,colorCell1:"hsla(15, 80%, 50%, 1)",colorCell2:"hsla(180, 80%, 50%, 1)",colorCell3:"hsla(200, 80%, 50%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorGradient:.5,distance:.25,edgesSize:.15,edgesSoftness:.01,middleSize:0,middleSoftness:0}},yr={name:"Classic",params:{scale:3,speed:.8,frame:0,colorCell1:"hsla(0, 100%, 100%, 1)",colorCell2:"hsla(0, 0%, 100%, 1)",colorCell3:"hsla(0, 100%, 0%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorGradient:1,distance:.45,edgesSize:.02,edgesSoftness:.07,middleSize:0,middleSoftness:0}},br={name:"Giraffe",params:{scale:1,speed:.6,frame:0,colorCell1:"hsla(32, 100%, 18%, 1)",colorCell2:"hsla(42, 93%, 35%, 1)",colorCell3:"hsla(32, 100%, 18%, 1)",colorMid:"hsla(0, 0%, 0%, 1)",colorGradient:1,distance:.25,edgesSize:.2,edgesSoftness:.01,middleSize:0,middleSoftness:0}},xr={name:"Eyes",params:{scale:1.6,speed:.6,frame: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)",colorGradient:1,distance:.25,edgesSize:.62,edgesSoftness:.01,middleSize:.1,middleSoftness:0}},Rr={name:"Bubbles",params:{scale:2,speed:.5,frame: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)",colorGradient:1,distance:.5,edgesSize:.81,edgesSoftness:0,middleSize:0,middleSoftness:0}},Mr={name:"Cells",params:{scale:2,speed:1,frame: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)",colorGradient:1,distance:.38,edgesSize:.1,edgesSoftness:.02,middleSize:0,middleSoftness:0}},kr={name:"Glow",params:{scale:1.2,speed:.8,frame:0,colorCell1:"hsla(40, 100%, 50%, 1)",colorCell2:"hsla(311, 100%, 59%, 1)",colorCell3:"hsla(180, 100%, 65%, 1)",colorMid:"hsla(0, 0%, 100%, 1)",colorGradient:1,distance:.25,edgesSize:.15,edgesSoftness:.01,middleSize:.7,middleSoftness:1}},_r={name:"Tiles",params:{scale:1.3,speed:1,frame: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)",colorGradient:0,distance:.05,edgesSize:.25,edgesSoftness:.02,middleSize:0,middleSoftness:0}},Gr=[S,yr,br,xr,Rr,Mr,kr,_r],Cr=({scale:s,colorCell1:o,colorCell2:a,colorCell3:r,colorMid:n,colorGradient:e,distance:t,edgesSize:l,edgesSoftness:m,middleSize:c,middleSoftness:i,...h})=>{let P=Sr(()=>({u_scale:s??S.params.scale,u_colorCell1:v(o,S.params.colorCell1),u_colorCell2:v(a,S.params.colorCell2),u_colorCell3:v(r,S.params.colorCell3),u_colorMid:v(n,S.params.colorMid),u_colorGradient:e??S.params.colorGradient,u_distance:t??S.params.distance,u_edgesSize:l??S.params.edgesSize,u_edgesSoftness:m??S.params.edgesSoftness,u_middleSize:c??S.params.middleSize,u_middleSoftness:i??S.params.middleSoftness}),[s,o,r,a,n,e,t,l,m,c,i]);return Nr(p,{...h,fragmentShader:gr,uniforms:P})};import{}from"@paper-design/shaders";import{useMemo as Dr}from"react";import{getShaderColorFromString as q,warpFragmentShader as Wr,PatternShapes as g}from"@paper-design/shaders";import{jsx as Tr}from"react/jsx-runtime";var u={name:"Default",params:{scale:1,rotation:0,speed:.1,frame: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:g.Checks}},wr={name:"Cauldron Pot",params:{scale:1.1,rotation:1.62,speed:1,frame: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:g.Edge}},Ur={name:"Silk",params:{scale:.26,rotation:0,speed:.5,frame: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:g.Stripes}},zr={name:"Passion",params:{scale:.25,rotation:1.35,speed:.3,frame: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:g.Checks}},Fr={name:"Phantom",params:{scale:.68,rotation:1.8,speed:1.25,frame: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:g.Checks}},vr={name:"The Abyss",params:{scale:.1,rotation:2,speed:.06,frame: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:g.Edge}},Or={name:"Live Ink",params:{scale:.7,rotation:1.5,speed:.25,frame: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:0,distortion:.25,swirl:.8,swirlIterations:10,shapeScale:.26,shape:g.Checks}},Ir={name:"Iceberg",params:{scale:1.1,rotation:2,speed:.05,frame: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:g.Checks}},qr={name:"Nectar",params:{scale:.24,rotation:0,speed:.42,frame: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:g.Edge}},Vr={name:"Filtered Light",params:{scale:2,rotation:.44,speed:.32,frame: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:g.Stripes}},Er={name:"Kelp",params:{scale:.38,rotation:.6,speed:2,frame: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:g.Stripes}},Xr=[u,vr,wr,Vr,Ir,Or,Er,qr,zr,Fr,Ur],Yr=({scale:s,rotation:o,color1:a,color2:r,color3:n,proportion:e,softness:t,distortion:l,swirl:m,swirlIterations:c,shapeScale:i,shape:h,...P})=>{let N=Dr(()=>({u_scale:s??u.params.scale,u_rotation:o??u.params.rotation,u_color1:q(a,u.params.color1),u_color2:q(r,u.params.color2),u_color3:q(n,u.params.color2),u_proportion:e??u.params.proportion,u_softness:t??u.params.softness,u_distortion:l??u.params.distortion,u_swirl:m??u.params.swirl,u_swirlIterations:c??u.params.swirlIterations,u_shapeScale:i??u.params.shapeScale,u_shape:h??u.params.shape}),[s,o,a,r,n,e,t,l,m,c,i,h]);return Tr(p,{...P,fragmentShader:Wr,uniforms:N})};import{PatternShapes as Ra}from"@paper-design/shaders";import{useMemo as Br}from"react";import{getShaderColorFromString as O,godRaysFragmentShader as Lr}from"@paper-design/shaders";import{jsx as Qr}from"react/jsx-runtime";var f={name:"Default",params:{colorBack:"hsla(215, 100%, 11%, 1)",color1:"hsla(45, 100%, 70%, 1)",color2:"hsla(10, 100%, 80%, 1)",color3:"hsla(178, 100%, 83%, 1)",offsetX:-.6,offsetY:-.6,frequency:6,spotty:.28,midIntensity:.97,midSize:2,density:.3,blending:0,speed:1,frame:0}},Ar={name:"Aurora",params:{colorBack:"hsla(0, 0%, 25%, 1)",color1:"hsla(239, 100%, 70%, 1)",color2:"hsla(150, 100%, 70%, 1)",color3:"hsla(200, 100%, 70%, 1)",offsetX:0,offsetY:1,frequency:2.4,spotty:.9,midIntensity:.8,midSize:2.1,density:.5,blending:1,speed:.5,frame:0}},Hr={name:"Warp",params:{colorBack:"hsla(0, 0%, 0%, 1)",color1:"hsla(317, 100%, 50%, 1)",color2:"hsla(25, 100%, 50%, 1)",color3:"hsla(0, 0%, 100%, 1)",offsetX:0,offsetY:0,frequency:1.2,spotty:.15,midIntensity:0,midSize:0,density:.79,blending:.4,speed:2,frame:0}},$r={name:"Linear",params:{colorBack:"hsla(0, 0%, 0%, 1)",color1:"hsl(0 0% 100% / 12%)",color2:"hsl(0 0% 100% / 24%)",color3:"hsl(0 0% 100% / 16%)",offsetX:.2,offsetY:-.7,frequency:1.2,spotty:.25,midSize:1.1,midIntensity:.75,density:.79,blending:1,speed:.5,frame:0}},Kr={name:"Ether",params:{colorBack:"hsl(226.7 50% 7.1% / 100%)",color1:"hsl(215 100% 53.9% / 65.1%)",color2:"hsl(214.4 85.9% 86.1% / 74.9%)",color3:"hsl(225 31.4% 20% / 100%)",offsetX:-.6,offsetY:0,frequency:.3,spotty:.77,midSize:1.1,midIntensity:.5,density:.6,blending:.6,speed:1,frame:0}},Zr=[f,Ar,Hr,$r,Kr],Jr=({colorBack:s,color1:o,color2:a,color3:r,offsetX:n,offsetY:e,frequency:t,spotty:l,midIntensity:m,midSize:c,density:i,blending:h,...P})=>{let N=Br(()=>({u_colorBack:O(s,f.params.colorBack),u_color1:O(o,f.params.color1),u_color2:O(a,f.params.color2),u_color3:O(r,f.params.color3),u_offsetX:n??f.params.offsetX,u_offsetY:e??f.params.offsetY,u_frequency:t??f.params.frequency,u_spotty:l??f.params.spotty,u_midIntensity:m??f.params.midIntensity,u_midSize:c??f.params.midSize,u_density:i??f.params.density,u_blending:h??f.params.blending}),[s,o,a,r,n,e,t,l,m,c,i,h]);return Qr(p,{...P,fragmentShader:Lr,uniforms:N})};import{}from"@paper-design/shaders";import{useMemo as jr}from"react";import{getShaderColorFromString as L,spiralFragmentShader as eo}from"@paper-design/shaders";import{jsx as po}from"react/jsx-runtime";var d={name:"Default",params:{color1:"hsla(0, 0%, 98%, 1)",color2:"hsla(0, 0%, 50%, 1)",scale:1,offsetX:0,offsetY:0,spiralDensity:0,spiralDistortion:0,strokeWidth:.5,strokeTaper:0,strokeCap:0,noiseFreq:0,noisePower:0,softness:.01,speed:1,frame:0}},ro={name:"Noisy",params:{color1:"hsla(87, 77%, 53%, 1)",color2:"hsla(109, 70%, 31%, 1)",scale:1.3,offsetX:0,offsetY:0,spiralDensity:.5,spiralDistortion:0,strokeWidth:.5,strokeTaper:0,strokeCap:.5,noiseFreq:.1,noisePower:1,softness:0,speed:1,frame:0}},oo={name:"Droplet",params:{color1:"hsla(320, 50%, 50%, 1)",color2:"hsla(190, 50%, 95%, 1)",scale:.65,offsetX:0,offsetY:0,spiralDensity:0,spiralDistortion:0,strokeWidth:.05,strokeTaper:0,strokeCap:1,noiseFreq:0,noisePower:0,softness:0,speed:1,frame:0}},so={name:"Sand",params:{color1:"hsla(45, 25%, 50%, 1)",color2:"hsla(0, 0%, 87%, 1)",scale:3,offsetX:0,offsetY:0,spiralDensity:0,spiralDistortion:0,strokeWidth:.15,strokeTaper:0,strokeCap:0,noiseFreq:30,noisePower:1,softness:.2,speed:0,frame:0}},ao={name:"Swirl",params:{color1:"hsla(160, 50%, 80%, 1)",color2:"hsla(220, 50%, 20%, 1)",scale:4,offsetX:0,offsetY:0,spiralDensity:.8,spiralDistortion:0,strokeWidth:.5,strokeTaper:0,strokeCap:0,noiseFreq:0,noisePower:0,softness:.5,speed:1,frame:0}},to={name:"Hook",params:{color1:"hsla(0, 0%, 0%, 1)",color2:"hsla(200, 50%, 70%, 1)",scale:.8,offsetX:0,offsetY:0,spiralDensity:0,spiralDistortion:0,strokeWidth:.5,strokeTaper:.5,strokeCap:0,noiseFreq:0,noisePower:0,softness:.02,speed:3,frame:0}},no={name:"Vinyl",params:{color1:"hsla(0, 0%, 15%, 1)",color2:"hsla(320, 5%, 75%, 1)",scale:1,offsetX:0,offsetY:0,spiralDensity:0,spiralDistortion:.3,strokeWidth:.95,strokeTaper:0,strokeCap:1,noiseFreq:0,noisePower:0,softness:.11,speed:1,frame:0}},lo=[d,ro,oo,ao,so,to,no],io=({color1:s,color2:o,scale:a,offsetX:r,offsetY:n,spiralDensity:e,spiralDistortion:t,strokeWidth:l,strokeTaper:m,strokeCap:c,noiseFreq:i,noisePower:h,softness:P,...N})=>{let A=jr(()=>({u_color1:L(s,d.params.color1),u_color2:L(o,d.params.color2),u_scale:a??d.params.scale,u_offsetX:r??d.params.offsetX,u_offsetY:n??d.params.offsetY,u_spiralDensity:e??d.params.spiralDensity,u_spiralDistortion:t??d.params.spiralDistortion,u_strokeWidth:l??d.params.strokeWidth,u_strokeTaper:m??d.params.strokeTaper,u_strokeCap:c??d.params.strokeCap,u_noiseFreq:i??d.params.noiseFreq,u_noisePower:h??d.params.noisePower,u_softness:P??d.params.softness}),[s,o,a,r,n,e,t,l,m,c,i,h,P]);return po(p,{...N,fragmentShader:eo,uniforms:A})};import{}from"@paper-design/shaders";import{getShaderColorFromString as Ua}from"@paper-design/shaders";export{Fe as DotGrid,Js as DotGridShapes,xe as DotOrbit,Jr as GodRays,re as MeshGradient,He as Metaballs,Pe as NeuroNoise,Ra as PatternShapes,hr as PerlinNoise,p as ShaderMount,me as SmokeRing,io as Spiral,Ye as SteppedSimplexNoise,Cr as Voronoi,Yr as Warp,ar as Waves,ze as dotGridPresets,be as dotOrbitPresets,Ua as getShaderColorFromString,Zr as godRaysPresets,ee as meshGradientPresets,Ae as metaballsPresets,he as neuroNoisePresets,fr as perlinNoisePresets,pe as smokeRingPresets,lo as spiralPresets,Xe as steppedSimplexNoisePresets,Gr as voronoiPresets,Xr as warpPresets,sr as wavesPresets};
+
+// packages/shaders-react/src/shader-mount.tsx
+import { useEffect, useRef as useRef2, forwardRef, useState } from "react";
+import { ShaderMount as ShaderMountVanilla } from "@paper-design/shaders";
+
+// packages/shaders-react/src/use-merge-refs.ts
+import * as React from "react";
+function useMergeRefs(refs) {
+  const cleanupRef = React.useRef(void 0);
+  const refEffect = React.useCallback((instance) => {
+    const cleanups = refs.map((ref) => {
+      if (ref == null) {
+        return;
+      }
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === "function" ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach((refCleanup) => refCleanup?.());
+    };
+  }, refs);
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (value) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = void 0;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
+    };
+  }, refs);
+}
+
+// packages/shaders-react/src/shader-mount.tsx
+import { jsx } from "react/jsx-runtime";
+var processUniforms = (uniforms) => {
+  const processedUniforms = {};
+  const imageLoadPromises = [];
+  const isValidUrl = (url) => {
+    try {
+      if (url.startsWith("/")) return true;
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const isExternalUrl = (url) => {
+    try {
+      if (url.startsWith("/")) return false;
+      const urlObject = new URL(url, window.location.origin);
+      return urlObject.origin !== window.location.origin;
+    } catch {
+      return false;
+    }
+  };
+  Object.entries(uniforms).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      if (!isValidUrl(value)) {
+        console.warn(`Uniform "${key}" has invalid URL "${value}". Skipping image loading.`);
+        return;
+      }
+      const imagePromise = new Promise((resolve, reject) => {
+        const img = new Image();
+        if (isExternalUrl(value)) {
+          img.crossOrigin = "anonymous";
+        }
+        img.onload = () => {
+          processedUniforms[key] = img;
+          resolve();
+        };
+        img.onerror = () => {
+          console.error(`Could not set uniforms. Failed to load image at ${value}`);
+          reject();
+        };
+        img.src = value;
+      });
+      imageLoadPromises.push(imagePromise);
+    } else {
+      processedUniforms[key] = value;
+    }
+  });
+  return Promise.all(imageLoadPromises).then(() => processedUniforms);
+};
+var ShaderMount = forwardRef(
+  function ShaderMountImpl({
+    shaderMountRef: externalShaderMountRef,
+    fragmentShader,
+    uniforms = {},
+    webGlContextAttributes,
+    speed = 1,
+    frame = 0,
+    ...divProps
+  }, forwardedRef) {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const divRef = useRef2(null);
+    const shaderMountRef = useRef2(null);
+    useEffect(() => {
+      const initShader = async () => {
+        const processedUniforms = await processUniforms(uniforms);
+        if (divRef.current && !shaderMountRef.current) {
+          shaderMountRef.current = new ShaderMountVanilla(
+            divRef.current,
+            fragmentShader,
+            processedUniforms,
+            webGlContextAttributes,
+            speed,
+            frame
+          );
+          if (externalShaderMountRef) {
+            externalShaderMountRef.current = shaderMountRef.current;
+          }
+          setIsInitialized(true);
+        }
+      };
+      initShader();
+      return () => {
+        shaderMountRef.current?.dispose();
+        shaderMountRef.current = null;
+      };
+    }, [fragmentShader, webGlContextAttributes]);
+    useEffect(() => {
+      const updateUniforms = async () => {
+        const processedUniforms = await processUniforms(uniforms);
+        shaderMountRef.current?.setUniforms(processedUniforms);
+      };
+      updateUniforms();
+    }, [uniforms, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setSpeed(speed);
+    }, [speed, isInitialized]);
+    useEffect(() => {
+      shaderMountRef.current?.setFrame(frame);
+    }, [frame, isInitialized]);
+    return /* @__PURE__ */ jsx("div", { ref: useMergeRefs([divRef, forwardedRef]), ...divProps });
+  }
+);
+ShaderMount.displayName = "ShaderMount";
+
+// packages/shaders-react/src/shaders/mesh-gradient.tsx
+import { useMemo as useMemo2 } from "react";
+import { getShaderColorFromString, meshGradientFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var defaultPreset = {
+  name: "Default",
+  params: {
+    speed: 0.15,
+    frame: 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)"
+  }
+};
+var beachPreset = {
+  name: "Beach",
+  params: {
+    speed: 0.1,
+    frame: 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)"
+  }
+};
+var fadedPreset = {
+  name: "Faded",
+  params: {
+    speed: -0.3,
+    frame: 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)"
+  }
+};
+var meshGradientPresets = [defaultPreset, beachPreset, fadedPreset];
+var MeshGradient = ({ color1, color2, color3, color4, ...props }) => {
+  const uniforms = useMemo2(() => {
+    return {
+      u_color1: getShaderColorFromString(color1, defaultPreset.params.color1),
+      u_color2: getShaderColorFromString(color2, defaultPreset.params.color2),
+      u_color3: getShaderColorFromString(color3, defaultPreset.params.color3),
+      u_color4: getShaderColorFromString(color4, defaultPreset.params.color4)
+    };
+  }, [color1, color2, color3, color4]);
+  return /* @__PURE__ */ jsx2(ShaderMount, { ...props, fragmentShader: meshGradientFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/smoke-ring.tsx
+import { useMemo as useMemo3 } from "react";
+import { getShaderColorFromString as getShaderColorFromString2, smokeRingFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var defaultPreset2 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    speed: 0.5,
+    frame: 0,
+    colorInner: "hsla(0, 0%, 100%, 1)",
+    colorOuter: "hsla(38, 4%, 38%, 1)",
+    noiseScale: 1,
+    thickness: 0.5
+  }
+};
+var cloudPreset = {
+  name: "Cloud",
+  params: {
+    scale: 1,
+    speed: 1,
+    frame: 0,
+    colorInner: "hsla(0, 0%, 100%, 1)",
+    colorOuter: "hsla(0, 0%, 100%, 1)",
+    noiseScale: 1.8,
+    thickness: 0.7
+  },
+  style: {
+    background: "hsla(218, 100%, 62%, 1)"
+  }
+};
+var firePreset = {
+  name: "Fire",
+  params: {
+    scale: 1,
+    speed: 4,
+    frame: 0,
+    colorInner: "hsla(40, 100%, 50%, 1)",
+    colorOuter: "hsla(0, 100%, 50%, 1)",
+    noiseScale: 1.4,
+    thickness: 0.35
+  },
+  style: {
+    background: "hsla(20, 100%, 5%, 1)"
+  }
+};
+var electricPreset = {
+  name: "Electric",
+  params: {
+    scale: 1,
+    speed: -2.5,
+    frame: 0,
+    colorInner: "hsla(47, 100%, 64%, 1)",
+    colorOuter: "hsla(47, 100%, 64%, 1)",
+    noiseScale: 1.8,
+    thickness: 0.1
+  },
+  style: {
+    background: "hsla(47, 50%, 7%, 1)"
+  }
+};
+var poisonPreset = {
+  name: "Poison",
+  params: {
+    scale: 1,
+    speed: 3,
+    frame: 0,
+    colorInner: "hsla(120, 100%, 3%, 1)",
+    colorOuter: "hsla(120, 100%, 66%, 1)",
+    noiseScale: 5,
+    thickness: 0.6
+  },
+  style: {
+    background: "hsla(120, 100%, 3%, 1)"
+  }
+};
+var smokeRingPresets = [
+  defaultPreset2,
+  cloudPreset,
+  firePreset,
+  electricPreset,
+  poisonPreset
+];
+var SmokeRing = ({
+  scale,
+  colorInner,
+  colorOuter,
+  noiseScale,
+  thickness,
+  ...props
+}) => {
+  const uniforms = useMemo3(() => {
+    return {
+      u_scale: scale ?? defaultPreset2.params.scale,
+      u_colorInner: getShaderColorFromString2(colorInner, defaultPreset2.params.colorInner),
+      u_colorOuter: getShaderColorFromString2(colorOuter, defaultPreset2.params.colorOuter),
+      u_noiseScale: noiseScale ?? defaultPreset2.params.noiseScale,
+      u_thickness: thickness ?? defaultPreset2.params.thickness
+    };
+  }, [scale, colorInner, colorOuter, noiseScale, thickness]);
+  return /* @__PURE__ */ jsx3(ShaderMount, { ...props, fragmentShader: smokeRingFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/neuro-noise.tsx
+import { useMemo as useMemo4 } from "react";
+import { getShaderColorFromString as getShaderColorFromString3, neuroNoiseFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var defaultPreset3 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    speed: 1,
+    frame: 0,
+    colorFront: "hsla(261, 100%, 82%, 1)",
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    brightness: 1.3
+  }
+};
+var marblePreset = {
+  name: "Marble",
+  params: {
+    scale: 0.4,
+    speed: 0,
+    frame: 0,
+    colorFront: "hsla(230, 24%, 15%, 1)",
+    colorBack: "hsla(0, 0%, 97%, 1)",
+    brightness: 1.1
+  }
+};
+var neuroNoisePresets = [defaultPreset3, marblePreset];
+var NeuroNoise = ({
+  scale,
+  colorFront,
+  colorBack,
+  brightness,
+  ...props
+}) => {
+  const uniforms = useMemo4(() => {
+    return {
+      u_scale: scale ?? defaultPreset3.params.scale,
+      u_colorFront: getShaderColorFromString3(colorFront, defaultPreset3.params.colorFront),
+      u_colorBack: getShaderColorFromString3(colorBack, defaultPreset3.params.colorBack),
+      u_brightness: brightness ?? defaultPreset3.params.brightness
+    };
+  }, [scale, colorFront, colorBack, brightness]);
+  return /* @__PURE__ */ jsx4(ShaderMount, { ...props, fragmentShader: neuroNoiseFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/dot-orbit.tsx
+import { useMemo as useMemo5 } from "react";
+import { getShaderColorFromString as getShaderColorFromString4, dotOrbitFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var defaultPreset4 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    speed: 2,
+    frame: 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: 0.7,
+    dotSizeRange: 0.4,
+    spreading: 1
+  }
+};
+var dotOrbitPresets = [defaultPreset4];
+var DotOrbit = ({
+  scale,
+  color1,
+  color2,
+  color3,
+  color4,
+  dotSize,
+  dotSizeRange,
+  spreading,
+  ...props
+}) => {
+  const uniforms = useMemo5(() => {
+    return {
+      u_scale: scale ?? defaultPreset4.params.scale,
+      u_color1: getShaderColorFromString4(color1, defaultPreset4.params.color1),
+      u_color2: getShaderColorFromString4(color2, defaultPreset4.params.color2),
+      u_color3: getShaderColorFromString4(color3, defaultPreset4.params.color3),
+      u_color4: getShaderColorFromString4(color4, defaultPreset4.params.color4),
+      u_dotSize: dotSize ?? defaultPreset4.params.dotSize,
+      u_dotSizeRange: dotSizeRange ?? defaultPreset4.params.dotSizeRange,
+      u_spreading: spreading ?? defaultPreset4.params.spreading
+    };
+  }, [scale, color1, color2, color3, color4, dotSize, dotSizeRange, spreading]);
+  return /* @__PURE__ */ jsx5(ShaderMount, { ...props, fragmentShader: dotOrbitFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/dot-grid.tsx
+import { useMemo as useMemo6 } from "react";
+import {
+  dotGridFragmentShader,
+  getShaderColorFromString as getShaderColorFromString5,
+  DotGridShapes
+} from "@paper-design/shaders";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var defaultPreset5 = {
+  name: "Default",
+  params: {
+    colorFill: "hsla(0, 0%, 0%, 1)",
+    colorStroke: "hsla(40, 100%, 50%, 1)",
+    dotSize: 2,
+    gridSpacingX: 50,
+    gridSpacingY: 50,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: DotGridShapes.Circle
+  }
+};
+var macrodataPreset = {
+  name: "Macrodata",
+  params: {
+    colorFill: "hsla(218, 100%, 67%, 1)",
+    colorStroke: "hsla(0, 0%, 0%, 1)",
+    dotSize: 3,
+    gridSpacingX: 25,
+    gridSpacingY: 25,
+    strokeWidth: 0,
+    sizeRange: 0.25,
+    opacityRange: 0.9,
+    shape: DotGridShapes.Circle
+  },
+  style: {
+    background: "hsla(211, 37%, 13%, 1)"
+  }
+};
+var trianglesPreset = {
+  name: "Triangles",
+  params: {
+    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: DotGridShapes.Triangle
+  },
+  style: {
+    background: "hsla(0, 0%, 100%, 1)"
+  }
+};
+var bubblesPreset = {
+  name: "Bubbles",
+  params: {
+    colorFill: "hsla(100, 30%, 100%, 1)",
+    colorStroke: "hsla(0, 100%, 0%, 1)",
+    dotSize: 28,
+    gridSpacingX: 60,
+    gridSpacingY: 60,
+    strokeWidth: 12,
+    sizeRange: 0.7,
+    opacityRange: 1.3,
+    shape: DotGridShapes.Circle
+  },
+  style: {
+    background: "hsla(234, 100%, 31%, .5)"
+  }
+};
+var treeLinePreset = {
+  name: "Tree line",
+  params: {
+    colorFill: "hsla(150, 80%, 10%, 1)",
+    colorStroke: "hsla(0, 0%, 0%, 1)",
+    dotSize: 8,
+    gridSpacingX: 20,
+    gridSpacingY: 90,
+    strokeWidth: 0,
+    sizeRange: 1,
+    opacityRange: 0.6,
+    shape: DotGridShapes.Circle
+  },
+  style: {
+    background: "hsla(100, 100%, 36%, .05)"
+  }
+};
+var diamondsPreset = {
+  name: "Diamonds",
+  params: {
+    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: DotGridShapes.Diamond
+  },
+  style: {
+    background: "hsla(0, 0%, 0%, 0)"
+  }
+};
+var wallpaperPreset = {
+  name: "Wallpaper",
+  params: {
+    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: DotGridShapes.Diamond
+  },
+  style: {
+    background: "hsla(154, 33%, 19%, 1)"
+  }
+};
+var matrixPreset = {
+  name: "Enter the Matrix",
+  params: {
+    colorFill: "hsla(182, 100%, 64%, 1)",
+    colorStroke: "hsla(0, 100%, 100%, 0)",
+    dotSize: 2,
+    gridSpacingX: 10,
+    gridSpacingY: 10,
+    strokeWidth: 0.5,
+    sizeRange: 0.25,
+    opacityRange: 1,
+    shape: DotGridShapes.Triangle
+  },
+  style: {
+    background: "hsla(0, 100%, 0%, 1)"
+  }
+};
+var waveformPreset = {
+  name: "Waveform",
+  params: {
+    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: DotGridShapes.Square
+  },
+  style: {
+    background: "hsla(0, 100%, 100%, 1)"
+  }
+};
+var dotGridPresets = [
+  defaultPreset5,
+  macrodataPreset,
+  trianglesPreset,
+  bubblesPreset,
+  treeLinePreset,
+  diamondsPreset,
+  wallpaperPreset,
+  matrixPreset,
+  waveformPreset
+];
+var DotGrid = ({
+  colorFill,
+  colorStroke,
+  dotSize,
+  gridSpacingX,
+  gridSpacingY,
+  strokeWidth,
+  sizeRange,
+  opacityRange,
+  shape,
+  ...props
+}) => {
+  const uniforms = useMemo6(() => {
+    return {
+      u_colorFill: getShaderColorFromString5(colorFill, defaultPreset5.params.colorStroke),
+      u_colorStroke: getShaderColorFromString5(colorStroke, defaultPreset5.params.colorStroke),
+      u_dotSize: dotSize ?? defaultPreset5.params.dotSize,
+      u_gridSpacingX: gridSpacingX ?? defaultPreset5.params.gridSpacingX,
+      u_gridSpacingY: gridSpacingY ?? defaultPreset5.params.gridSpacingY,
+      u_strokeWidth: strokeWidth ?? defaultPreset5.params.strokeWidth,
+      u_sizeRange: sizeRange ?? defaultPreset5.params.sizeRange,
+      u_opacityRange: opacityRange ?? defaultPreset5.params.opacityRange,
+      u_shape: shape ?? defaultPreset5.params.shape
+    };
+  }, [colorFill, colorStroke, dotSize, gridSpacingX, gridSpacingY, strokeWidth, sizeRange, opacityRange, shape]);
+  return /* @__PURE__ */ jsx6(ShaderMount, { ...props, fragmentShader: dotGridFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import { DotGridShapes as DotGridShapes2 } from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/stepped-simplex-noise.tsx
+import { useMemo as useMemo7 } from "react";
+import {
+  getShaderColorFromString as getShaderColorFromString6,
+  steppedSimplexNoiseFragmentShader
+} from "@paper-design/shaders";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var defaultPreset6 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    speed: 0.15,
+    frame: 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
+  }
+};
+var magmaPreset = {
+  name: "Magma",
+  params: {
+    scale: 0.3,
+    speed: 0.2,
+    frame: 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
+  }
+};
+var bloodCellPreset = {
+  name: "Blood cell",
+  params: {
+    scale: 1.2,
+    speed: 0.22,
+    frame: 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
+  }
+};
+var firstContactPreset = {
+  name: "First contact",
+  params: {
+    scale: 1.2,
+    speed: -0.1,
+    frame: 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
+  }
+};
+var steppedSimplexNoisePresets = [
+  defaultPreset6,
+  magmaPreset,
+  bloodCellPreset,
+  firstContactPreset
+];
+var SteppedSimplexNoise = ({
+  scale,
+  color1,
+  color2,
+  color3,
+  color4,
+  color5,
+  stepsNumber,
+  ...props
+}) => {
+  const uniforms = useMemo7(() => {
+    return {
+      u_scale: scale ?? defaultPreset6.params.scale,
+      u_color1: getShaderColorFromString6(color1, defaultPreset6.params.color1),
+      u_color2: getShaderColorFromString6(color2, defaultPreset6.params.color2),
+      u_color3: getShaderColorFromString6(color3, defaultPreset6.params.color3),
+      u_color4: getShaderColorFromString6(color4, defaultPreset6.params.color4),
+      u_color5: getShaderColorFromString6(color5, defaultPreset6.params.color5),
+      u_steps_number: stepsNumber ?? defaultPreset6.params.stepsNumber
+    };
+  }, [scale, color1, color2, color3, color4, color5, stepsNumber]);
+  return /* @__PURE__ */ jsx7(ShaderMount, { ...props, fragmentShader: steppedSimplexNoiseFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/metaballs.tsx
+import { useMemo as useMemo8 } from "react";
+import { getShaderColorFromString as getShaderColorFromString7, metaballsFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var defaultPreset7 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    speed: 0.6,
+    frame: 0,
+    color1: "hsla(350, 90%, 55%, 1)",
+    color2: "hsla(350, 80%, 60%, 1)",
+    color3: "hsla(20, 85%, 70%, 1)",
+    ballSize: 1,
+    visibilityRange: 0.4
+  }
+};
+var metaballsPresets = [defaultPreset7];
+var Metaballs = ({
+  scale,
+  color1,
+  color2,
+  color3,
+  ballSize,
+  visibilityRange,
+  ...props
+}) => {
+  const uniforms = useMemo8(() => {
+    return {
+      u_scale: scale ?? defaultPreset7.params.scale,
+      u_color1: getShaderColorFromString7(color1, defaultPreset7.params.color1),
+      u_color2: getShaderColorFromString7(color2, defaultPreset7.params.color2),
+      u_color3: getShaderColorFromString7(color3, defaultPreset7.params.color3),
+      u_ballSize: ballSize ?? defaultPreset7.params.ballSize,
+      u_visibilityRange: visibilityRange ?? defaultPreset7.params.visibilityRange
+    };
+  }, [scale, color1, color2, color3, ballSize, visibilityRange]);
+  return /* @__PURE__ */ jsx8(ShaderMount, { ...props, fragmentShader: metaballsFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/waves.tsx
+import { useMemo as useMemo9 } from "react";
+import { getShaderColorFromString as getShaderColorFromString8, wavesFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var defaultPreset8 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    rotation: 0,
+    color: "hsla(204, 47%, 45%, 1)",
+    shape: 1,
+    frequency: 0.5,
+    amplitude: 0.5,
+    spacing: 0.75,
+    dutyCycle: 0.2,
+    softness: 0
+  }
+};
+var spikesPreset = {
+  name: "Spikes",
+  params: {
+    scale: 2.3,
+    rotation: 0,
+    color: "hsla(290, 52%, 15%, 1)",
+    shape: 0,
+    frequency: 0.5,
+    amplitude: 0.9,
+    spacing: 0.37,
+    dutyCycle: 0.93,
+    softness: 0.15
+  },
+  style: {
+    background: "hsla(65, 100%, 95%, 1)"
+  }
+};
+var groovyPreset = {
+  name: "Groovy",
+  params: {
+    scale: 0.5,
+    rotation: 1,
+    color: "hsla(20, 100%, 71%, 1)",
+    shape: 2.37,
+    frequency: 0.2,
+    amplitude: 0.67,
+    spacing: 1.17,
+    dutyCycle: 0.57,
+    softness: 0
+  },
+  style: {
+    background: "hsla(60, 100%, 97%, 1)"
+  }
+};
+var tangledUpPreset = {
+  name: "Tangled up",
+  params: {
+    scale: 3.04,
+    rotation: 1,
+    color: "hsla(85.5, 35.7%, 78%, 1)",
+    shape: 3,
+    frequency: 0.44,
+    amplitude: 0.57,
+    spacing: 1.05,
+    dutyCycle: 0.97,
+    softness: 0
+  },
+  style: {
+    background: "hsla(198.7, 66.7%, 14.1%, 1)"
+  }
+};
+var zigZagPreset = {
+  name: "Zig zag",
+  params: {
+    scale: 2.7,
+    rotation: 1,
+    color: "hsla(0, 0%, 90%, 1)",
+    shape: 0,
+    frequency: 0.6,
+    amplitude: 0.8,
+    spacing: 0.5,
+    dutyCycle: 1,
+    softness: 0.5
+  },
+  style: {
+    background: "hsla(0, 0%, 0%, 1)"
+  }
+};
+var waveRidePreset = {
+  name: "Ride the wave",
+  params: {
+    scale: 0.84,
+    rotation: 0,
+    color: "hsla(0, 0%, 12%, 1)",
+    shape: 2.23,
+    frequency: 0.1,
+    amplitude: 0.6,
+    spacing: 0.41,
+    dutyCycle: 0.99,
+    softness: 0
+  },
+  style: {
+    background: "hsla(65, 100%, 95%, 1)"
+  }
+};
+var wavesPresets = [
+  defaultPreset8,
+  spikesPreset,
+  groovyPreset,
+  tangledUpPreset,
+  zigZagPreset,
+  waveRidePreset
+];
+var Waves = ({
+  scale,
+  rotation,
+  color,
+  shape,
+  frequency,
+  amplitude,
+  spacing,
+  dutyCycle,
+  softness,
+  ...props
+}) => {
+  const uniforms = useMemo9(() => {
+    return {
+      u_scale: scale ?? defaultPreset8.params.scale,
+      u_rotation: rotation ?? defaultPreset8.params.rotation,
+      u_color: getShaderColorFromString8(color, defaultPreset8.params.color),
+      u_shape: shape ?? defaultPreset8.params.shape,
+      u_frequency: frequency ?? defaultPreset8.params.frequency,
+      u_amplitude: amplitude ?? defaultPreset8.params.amplitude,
+      u_spacing: spacing ?? defaultPreset8.params.spacing,
+      u_dutyCycle: dutyCycle ?? defaultPreset8.params.dutyCycle,
+      u_softness: softness ?? defaultPreset8.params.softness
+    };
+  }, [scale, rotation, color, shape, frequency, amplitude, spacing, dutyCycle, softness]);
+  return /* @__PURE__ */ jsx9(ShaderMount, { ...props, fragmentShader: wavesFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/perlin-noise.tsx
+import { useMemo as useMemo10 } from "react";
+import { getShaderColorFromString as getShaderColorFromString9, perlinNoiseFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var defaultPreset9 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    speed: 0.5,
+    frame: 0,
+    color: "hsla(0, 0%, 15%, 1)",
+    proportion: 0.65,
+    softness: 0.1,
+    octaveCount: 2,
+    persistence: 1,
+    lacunarity: 1.5
+  }
+};
+var nintendoWaterPreset = {
+  name: "Nintendo Water",
+  params: {
+    scale: 0.2,
+    speed: 0.4,
+    frame: 0,
+    color: "hsla(200, 66%, 90%, 1)",
+    proportion: 0.42,
+    softness: 0,
+    octaveCount: 2,
+    persistence: 0.55,
+    lacunarity: 1.8
+  },
+  style: {
+    background: "hsla(220, 66%, 50%, 1)"
+  }
+};
+var colonyPreset = {
+  name: "Colony",
+  params: {
+    scale: 0.15,
+    speed: 0,
+    frame: 0,
+    color: "hsla(230, 80%, 20%, 1)",
+    octaveCount: 6,
+    persistence: 1,
+    lacunarity: 2.55,
+    proportion: 0.65,
+    softness: 0.35
+  },
+  style: {
+    background: "hsla(56, 86%, 81%, 1)"
+  }
+};
+var phosphenesPreset = {
+  name: "Phosphenes",
+  params: {
+    scale: 0.03,
+    speed: 0.15,
+    frame: 0,
+    color: "hsla(150, 50%, 60%, 1)",
+    proportion: 0.45,
+    softness: 0.45,
+    octaveCount: 6,
+    persistence: 0.3,
+    lacunarity: 3
+  },
+  style: {
+    background: "hsla(350, 80%, 70%, 1)"
+  }
+};
+var mossPreset = {
+  name: "Moss",
+  params: {
+    scale: 0.15,
+    speed: 0.02,
+    frame: 0,
+    color: "hsla(0, 0%, 15%, 1)",
+    proportion: 0.65,
+    softness: 0.35,
+    octaveCount: 6,
+    persistence: 1,
+    lacunarity: 2.55
+  },
+  style: {
+    background: "hsla(137, 100%, 51%, 1)"
+  }
+};
+var wormsPreset = {
+  name: "Worms",
+  params: {
+    scale: 2,
+    speed: 0,
+    frame: 0,
+    color: "hsla(0, 0%, 35%, 1)",
+    proportion: 0.5,
+    softness: 0,
+    octaveCount: 1,
+    persistence: 1,
+    lacunarity: 1.5
+  },
+  style: {
+    background: "hsla(0, 100%, 100%, 1)"
+  }
+};
+var perlinNoisePresets = [
+  defaultPreset9,
+  nintendoWaterPreset,
+  colonyPreset,
+  phosphenesPreset,
+  mossPreset,
+  wormsPreset
+];
+var PerlinNoise = ({
+  scale,
+  color,
+  proportion,
+  softness,
+  octaveCount,
+  persistence,
+  lacunarity,
+  ...props
+}) => {
+  const uniforms = useMemo10(() => {
+    return {
+      u_scale: scale ?? defaultPreset9.params.scale,
+      u_color: getShaderColorFromString9(color, defaultPreset9.params.color),
+      u_proportion: proportion ?? defaultPreset9.params.proportion,
+      u_softness: softness ?? defaultPreset9.params.softness,
+      u_octaveCount: octaveCount ?? defaultPreset9.params.octaveCount,
+      u_persistence: persistence ?? defaultPreset9.params.persistence,
+      u_lacunarity: lacunarity ?? defaultPreset9.params.lacunarity
+    };
+  }, [scale, color, proportion, softness, octaveCount, persistence, lacunarity]);
+  return /* @__PURE__ */ jsx10(ShaderMount, { ...props, fragmentShader: perlinNoiseFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/voronoi.tsx
+import { useMemo as useMemo11 } from "react";
+import { getShaderColorFromString as getShaderColorFromString10, voronoiFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var defaultPreset10 = {
+  name: "Default",
+  params: {
+    scale: 1.5,
+    speed: 0.5,
+    frame: 0,
+    colorCell1: "hsla(15, 80%, 50%, 1)",
+    colorCell2: "hsla(180, 80%, 50%, 1)",
+    colorCell3: "hsla(200, 80%, 50%, 1)",
+    colorMid: "hsla(0, 0%, 0%, 1)",
+    colorGradient: 0.5,
+    distance: 0.25,
+    edgesSize: 0.15,
+    edgesSoftness: 0.01,
+    middleSize: 0,
+    middleSoftness: 0
+  }
+};
+var classicPreset = {
+  name: "Classic",
+  params: {
+    scale: 3,
+    speed: 0.8,
+    frame: 0,
+    colorCell1: "hsla(0, 100%, 100%, 1)",
+    colorCell2: "hsla(0, 0%, 100%, 1)",
+    colorCell3: "hsla(0, 100%, 0%, 1)",
+    colorMid: "hsla(0, 0%, 0%, 1)",
+    colorGradient: 1,
+    distance: 0.45,
+    edgesSize: 0.02,
+    edgesSoftness: 0.07,
+    middleSize: 0,
+    middleSoftness: 0
+  }
+};
+var giraffePreset = {
+  name: "Giraffe",
+  params: {
+    scale: 1,
+    speed: 0.6,
+    frame: 0,
+    colorCell1: "hsla(32, 100%, 18%, 1)",
+    colorCell2: "hsla(42, 93%, 35%, 1)",
+    colorCell3: "hsla(32, 100%, 18%, 1)",
+    colorMid: "hsla(0, 0%, 0%, 1)",
+    colorGradient: 1,
+    distance: 0.25,
+    edgesSize: 0.2,
+    edgesSoftness: 0.01,
+    middleSize: 0,
+    middleSoftness: 0
+  }
+};
+var eyesPreset = {
+  name: "Eyes",
+  params: {
+    scale: 1.6,
+    speed: 0.6,
+    frame: 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)",
+    colorGradient: 1,
+    distance: 0.25,
+    edgesSize: 0.62,
+    edgesSoftness: 0.01,
+    middleSize: 0.1,
+    middleSoftness: 0
+  }
+};
+var bubblesPreset2 = {
+  name: "Bubbles",
+  params: {
+    scale: 2,
+    speed: 0.5,
+    frame: 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)",
+    colorGradient: 1,
+    distance: 0.5,
+    edgesSize: 0.81,
+    edgesSoftness: 0,
+    middleSize: 0,
+    middleSoftness: 0
+  }
+};
+var cellsPreset = {
+  name: "Cells",
+  params: {
+    scale: 2,
+    speed: 1,
+    frame: 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)",
+    colorGradient: 1,
+    distance: 0.38,
+    edgesSize: 0.1,
+    edgesSoftness: 0.02,
+    middleSize: 0,
+    middleSoftness: 0
+  }
+};
+var glowPreset = {
+  name: "Glow",
+  params: {
+    scale: 1.2,
+    speed: 0.8,
+    frame: 0,
+    colorCell1: "hsla(40, 100%, 50%, 1)",
+    colorCell2: "hsla(311, 100%, 59%, 1)",
+    colorCell3: "hsla(180, 100%, 65%, 1)",
+    colorMid: "hsla(0, 0%, 100%, 1)",
+    colorGradient: 1,
+    distance: 0.25,
+    edgesSize: 0.15,
+    edgesSoftness: 0.01,
+    middleSize: 0.7,
+    middleSoftness: 1
+  }
+};
+var tilesPreset = {
+  name: "Tiles",
+  params: {
+    scale: 1.3,
+    speed: 1,
+    frame: 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)",
+    colorGradient: 0,
+    distance: 0.05,
+    edgesSize: 0.25,
+    edgesSoftness: 0.02,
+    middleSize: 0,
+    middleSoftness: 0
+  }
+};
+var voronoiPresets = [
+  defaultPreset10,
+  classicPreset,
+  giraffePreset,
+  eyesPreset,
+  bubblesPreset2,
+  cellsPreset,
+  glowPreset,
+  tilesPreset
+];
+var Voronoi = ({
+  scale,
+  colorCell1,
+  colorCell2,
+  colorCell3,
+  colorMid,
+  colorGradient,
+  distance,
+  edgesSize,
+  edgesSoftness,
+  middleSize,
+  middleSoftness,
+  ...props
+}) => {
+  const uniforms = useMemo11(() => {
+    return {
+      u_scale: scale ?? defaultPreset10.params.scale,
+      u_colorCell1: getShaderColorFromString10(colorCell1, defaultPreset10.params.colorCell1),
+      u_colorCell2: getShaderColorFromString10(colorCell2, defaultPreset10.params.colorCell2),
+      u_colorCell3: getShaderColorFromString10(colorCell3, defaultPreset10.params.colorCell3),
+      u_colorMid: getShaderColorFromString10(colorMid, defaultPreset10.params.colorMid),
+      u_colorGradient: colorGradient ?? defaultPreset10.params.colorGradient,
+      u_distance: distance ?? defaultPreset10.params.distance,
+      u_edgesSize: edgesSize ?? defaultPreset10.params.edgesSize,
+      u_edgesSoftness: edgesSoftness ?? defaultPreset10.params.edgesSoftness,
+      u_middleSize: middleSize ?? defaultPreset10.params.middleSize,
+      u_middleSoftness: middleSoftness ?? defaultPreset10.params.middleSoftness
+    };
+  }, [
+    scale,
+    colorCell1,
+    colorCell3,
+    colorCell2,
+    colorMid,
+    colorGradient,
+    distance,
+    edgesSize,
+    edgesSoftness,
+    middleSize,
+    middleSoftness
+  ]);
+  return /* @__PURE__ */ jsx11(ShaderMount, { ...props, fragmentShader: voronoiFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/warp.tsx
+import { useMemo as useMemo12 } from "react";
+import {
+  getShaderColorFromString as getShaderColorFromString11,
+  warpFragmentShader,
+  PatternShapes
+} from "@paper-design/shaders";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var defaultPreset11 = {
+  name: "Default",
+  params: {
+    scale: 1,
+    rotation: 0,
+    speed: 0.1,
+    frame: 0,
+    color1: "hsla(0, 0%, 15%, 1)",
+    color2: "hsla(203, 80%, 70%, 1)",
+    color3: "hsla(0, 0%, 100%, 1)",
+    proportion: 0.35,
+    softness: 1,
+    distortion: 0.25,
+    swirl: 0.8,
+    swirlIterations: 10,
+    shapeScale: 0.1,
+    shape: PatternShapes.Checks
+  }
+};
+var presetCauldron = {
+  name: "Cauldron Pot",
+  params: {
+    scale: 1.1,
+    rotation: 1.62,
+    speed: 1,
+    frame: 0,
+    color1: "hsla(100, 51%, 75%, 1)",
+    color2: "hsla(220, 39%, 32%, 1)",
+    color3: "hsla(129.2, 41.9%, 6.1%, 1)",
+    proportion: 0.64,
+    softness: 0.95,
+    distortion: 0.2,
+    swirl: 0.86,
+    swirlIterations: 7,
+    shapeScale: 0,
+    shape: PatternShapes.Edge
+  }
+};
+var presetSilk = {
+  name: "Silk",
+  params: {
+    scale: 0.26,
+    rotation: 0,
+    speed: 0.5,
+    frame: 0,
+    color1: "hsla(0, 9%, 7%, 1)",
+    color2: "hsla(8, 13%, 34%, 1)",
+    color3: "hsla(5, 8%, 71%, 1)",
+    proportion: 0,
+    softness: 1,
+    distortion: 0.3,
+    swirl: 0.6,
+    swirlIterations: 11,
+    shapeScale: 0.05,
+    shape: PatternShapes.Stripes
+  }
+};
+var presetPassion = {
+  name: "Passion",
+  params: {
+    scale: 0.25,
+    rotation: 1.35,
+    speed: 0.3,
+    frame: 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: 0.5,
+    softness: 1,
+    distortion: 0.09,
+    swirl: 0.9,
+    swirlIterations: 6,
+    shapeScale: 0.25,
+    shape: PatternShapes.Checks
+  }
+};
+var presetPhantom = {
+  name: "Phantom",
+  params: {
+    scale: 0.68,
+    rotation: 1.8,
+    speed: 1.25,
+    frame: 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.45,
+    softness: 1,
+    distortion: 0.16,
+    swirl: 0.3,
+    swirlIterations: 7,
+    shapeScale: 0.1,
+    shape: PatternShapes.Checks
+  }
+};
+var presetAbyss = {
+  name: "The Abyss",
+  params: {
+    scale: 0.1,
+    rotation: 2,
+    speed: 0.06,
+    frame: 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: 0.09,
+    swirl: 0.48,
+    swirlIterations: 4,
+    shapeScale: 0.1,
+    shape: PatternShapes.Edge
+  }
+};
+var presetInk = {
+  name: "Live Ink",
+  params: {
+    scale: 0.7,
+    rotation: 1.5,
+    speed: 0.25,
+    frame: 0,
+    color1: "hsla(210, 11.1%, 7.1%, 1)",
+    color2: "hsla(165, 9%, 65.1%, 1)",
+    color3: "hsla(84, 100%, 97.1%, 1)",
+    proportion: 0.35,
+    softness: 0,
+    distortion: 0.25,
+    swirl: 0.8,
+    swirlIterations: 10,
+    shapeScale: 0.26,
+    shape: PatternShapes.Checks
+  }
+};
+var presetIceberg = {
+  name: "Iceberg",
+  params: {
+    scale: 1.1,
+    rotation: 2,
+    speed: 0.05,
+    frame: 0,
+    color1: "hsla(0, 0%, 100%, 1)",
+    color2: "hsla(220, 38.7%, 32%, 1)",
+    color3: "hsla(129.2, 41.9%, 6.1%, 1)",
+    proportion: 0.3,
+    softness: 1,
+    distortion: 0.2,
+    swirl: 0.86,
+    swirlIterations: 7,
+    shapeScale: 0,
+    shape: PatternShapes.Checks
+  }
+};
+var presetNectar = {
+  name: "Nectar",
+  params: {
+    scale: 0.24,
+    rotation: 0,
+    speed: 0.42,
+    frame: 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: 0.24,
+    softness: 1,
+    distortion: 0.21,
+    swirl: 0.57,
+    swirlIterations: 10,
+    shapeScale: 0.32,
+    shape: PatternShapes.Edge
+  }
+};
+var presetFilteredLight = {
+  name: "Filtered Light",
+  params: {
+    scale: 2,
+    rotation: 0.44,
+    speed: 0.32,
+    frame: 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: 0.25,
+    softness: 1,
+    distortion: 0.06,
+    swirl: 0,
+    swirlIterations: 0,
+    shapeScale: 0,
+    shape: PatternShapes.Stripes
+  }
+};
+var presetKelp = {
+  name: "Kelp",
+  params: {
+    scale: 0.38,
+    rotation: 0.6,
+    speed: 2,
+    frame: 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: 0.15,
+    swirlIterations: 0,
+    shapeScale: 0.74,
+    shape: PatternShapes.Stripes
+  }
+};
+var warpPresets = [
+  defaultPreset11,
+  presetAbyss,
+  presetCauldron,
+  presetFilteredLight,
+  presetIceberg,
+  presetInk,
+  presetKelp,
+  presetNectar,
+  presetPassion,
+  presetPhantom,
+  presetSilk
+];
+var Warp = ({
+  scale,
+  rotation,
+  color1,
+  color2,
+  color3,
+  proportion,
+  softness,
+  distortion,
+  swirl,
+  swirlIterations,
+  shapeScale,
+  shape,
+  ...props
+}) => {
+  const uniforms = useMemo12(() => {
+    return {
+      u_scale: scale ?? defaultPreset11.params.scale,
+      u_rotation: rotation ?? defaultPreset11.params.rotation,
+      u_color1: getShaderColorFromString11(color1, defaultPreset11.params.color1),
+      u_color2: getShaderColorFromString11(color2, defaultPreset11.params.color2),
+      u_color3: getShaderColorFromString11(color3, defaultPreset11.params.color2),
+      u_proportion: proportion ?? defaultPreset11.params.proportion,
+      u_softness: softness ?? defaultPreset11.params.softness,
+      u_distortion: distortion ?? defaultPreset11.params.distortion,
+      u_swirl: swirl ?? defaultPreset11.params.swirl,
+      u_swirlIterations: swirlIterations ?? defaultPreset11.params.swirlIterations,
+      u_shapeScale: shapeScale ?? defaultPreset11.params.shapeScale,
+      u_shape: shape ?? defaultPreset11.params.shape
+    };
+  }, [
+    scale,
+    rotation,
+    color1,
+    color2,
+    color3,
+    proportion,
+    softness,
+    distortion,
+    swirl,
+    swirlIterations,
+    shapeScale,
+    shape
+  ]);
+  return /* @__PURE__ */ jsx12(ShaderMount, { ...props, fragmentShader: warpFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import { PatternShapes as PatternShapes2 } from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/god-rays.tsx
+import { useMemo as useMemo13 } from "react";
+import { getShaderColorFromString as getShaderColorFromString12, godRaysFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var defaultPreset12 = {
+  name: "Default",
+  params: {
+    colorBack: "hsla(215, 100%, 11%, 1)",
+    color1: "hsla(45, 100%, 70%, 1)",
+    color2: "hsla(10, 100%, 80%, 1)",
+    color3: "hsla(178, 100%, 83%, 1)",
+    offsetX: -0.6,
+    offsetY: -0.6,
+    frequency: 6,
+    spotty: 0.28,
+    midIntensity: 0.97,
+    midSize: 2,
+    density: 0.3,
+    blending: 0,
+    speed: 1,
+    frame: 0
+  }
+};
+var auroraPreset = {
+  name: "Aurora",
+  params: {
+    colorBack: "hsla(0, 0%, 25%, 1)",
+    color1: "hsla(239, 100%, 70%, 1)",
+    color2: "hsla(150, 100%, 70%, 1)",
+    color3: "hsla(200, 100%, 70%, 1)",
+    offsetX: 0,
+    offsetY: 1,
+    frequency: 2.4,
+    spotty: 0.9,
+    midIntensity: 0.8,
+    midSize: 2.1,
+    density: 0.5,
+    blending: 1,
+    speed: 0.5,
+    frame: 0
+  }
+};
+var warpPreset = {
+  name: "Warp",
+  params: {
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    color1: "hsla(317, 100%, 50%, 1)",
+    color2: "hsla(25, 100%, 50%, 1)",
+    color3: "hsla(0, 0%, 100%, 1)",
+    offsetX: 0,
+    offsetY: 0,
+    frequency: 1.2,
+    spotty: 0.15,
+    midIntensity: 0,
+    midSize: 0,
+    density: 0.79,
+    blending: 0.4,
+    speed: 2,
+    frame: 0
+  }
+};
+var linearPreset = {
+  name: "Linear",
+  params: {
+    colorBack: "hsla(0, 0%, 0%, 1)",
+    color1: "hsl(0 0% 100% / 12%)",
+    color2: "hsl(0 0% 100% / 24%)",
+    color3: "hsl(0 0% 100% / 16%)",
+    offsetX: 0.2,
+    offsetY: -0.7,
+    frequency: 1.2,
+    spotty: 0.25,
+    midSize: 1.1,
+    midIntensity: 0.75,
+    density: 0.79,
+    blending: 1,
+    speed: 0.5,
+    frame: 0
+  }
+};
+var etherPreset = {
+  name: "Ether",
+  params: {
+    colorBack: "hsl(226.7 50% 7.1% / 100%)",
+    color1: "hsl(215 100% 53.9% / 65.1%)",
+    color2: "hsl(214.4 85.9% 86.1% / 74.9%)",
+    color3: "hsl(225 31.4% 20% / 100%)",
+    offsetX: -0.6,
+    offsetY: 0,
+    frequency: 0.3,
+    spotty: 0.77,
+    midSize: 1.1,
+    midIntensity: 0.5,
+    density: 0.6,
+    blending: 0.6,
+    speed: 1,
+    frame: 0
+  }
+};
+var godRaysPresets = [defaultPreset12, auroraPreset, warpPreset, linearPreset, etherPreset];
+var GodRays = ({
+  colorBack,
+  color1,
+  color2,
+  color3,
+  offsetX,
+  offsetY,
+  frequency,
+  spotty,
+  midIntensity,
+  midSize,
+  density,
+  blending,
+  ...props
+}) => {
+  const uniforms = useMemo13(() => {
+    return {
+      u_colorBack: getShaderColorFromString12(colorBack, defaultPreset12.params.colorBack),
+      u_color1: getShaderColorFromString12(color1, defaultPreset12.params.color1),
+      u_color2: getShaderColorFromString12(color2, defaultPreset12.params.color2),
+      u_color3: getShaderColorFromString12(color3, defaultPreset12.params.color3),
+      u_offsetX: offsetX ?? defaultPreset12.params.offsetX,
+      u_offsetY: offsetY ?? defaultPreset12.params.offsetY,
+      u_frequency: frequency ?? defaultPreset12.params.frequency,
+      u_spotty: spotty ?? defaultPreset12.params.spotty,
+      u_midIntensity: midIntensity ?? defaultPreset12.params.midIntensity,
+      u_midSize: midSize ?? defaultPreset12.params.midSize,
+      u_density: density ?? defaultPreset12.params.density,
+      u_blending: blending ?? defaultPreset12.params.blending
+    };
+  }, [
+    colorBack,
+    color1,
+    color2,
+    color3,
+    offsetX,
+    offsetY,
+    frequency,
+    spotty,
+    midIntensity,
+    midSize,
+    density,
+    blending
+  ]);
+  return /* @__PURE__ */ jsx13(ShaderMount, { ...props, fragmentShader: godRaysFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+
+// packages/shaders-react/src/shaders/spiral.tsx
+import { useMemo as useMemo14 } from "react";
+import { getShaderColorFromString as getShaderColorFromString13, spiralFragmentShader } from "@paper-design/shaders";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var defaultPreset13 = {
+  name: "Default",
+  params: {
+    color1: "hsla(0, 0%, 98%, 1)",
+    color2: "hsla(0, 0%, 50%, 1)",
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    spiralDensity: 0,
+    spiralDistortion: 0,
+    strokeWidth: 0.5,
+    strokeTaper: 0,
+    strokeCap: 0,
+    noiseFreq: 0,
+    noisePower: 0,
+    softness: 0.01,
+    speed: 1,
+    frame: 0
+  }
+};
+var noisyPreset = {
+  name: "Noisy",
+  params: {
+    color1: "hsla(87, 77%, 53%, 1)",
+    color2: "hsla(109, 70%, 31%, 1)",
+    scale: 1.3,
+    offsetX: 0,
+    offsetY: 0,
+    spiralDensity: 0.5,
+    spiralDistortion: 0,
+    strokeWidth: 0.5,
+    strokeTaper: 0,
+    strokeCap: 0.5,
+    noiseFreq: 0.1,
+    noisePower: 1,
+    softness: 0,
+    speed: 1,
+    frame: 0
+  }
+};
+var dropletPreset = {
+  name: "Droplet",
+  params: {
+    color1: "hsla(320, 50%, 50%, 1)",
+    color2: "hsla(190, 50%, 95%, 1)",
+    scale: 0.65,
+    offsetX: 0,
+    offsetY: 0,
+    spiralDensity: 0,
+    spiralDistortion: 0,
+    strokeWidth: 0.05,
+    strokeTaper: 0,
+    strokeCap: 1,
+    noiseFreq: 0,
+    noisePower: 0,
+    softness: 0,
+    speed: 1,
+    frame: 0
+  }
+};
+var sandPreset = {
+  name: "Sand",
+  params: {
+    color1: "hsla(45, 25%, 50%, 1)",
+    color2: "hsla(0, 0%, 87%, 1)",
+    scale: 3,
+    offsetX: 0,
+    offsetY: 0,
+    spiralDensity: 0,
+    spiralDistortion: 0,
+    strokeWidth: 0.15,
+    strokeTaper: 0,
+    strokeCap: 0,
+    noiseFreq: 30,
+    noisePower: 1,
+    softness: 0.2,
+    speed: 0,
+    frame: 0
+  }
+};
+var swirlPreset = {
+  name: "Swirl",
+  params: {
+    color1: "hsla(160, 50%, 80%, 1)",
+    color2: "hsla(220, 50%, 20%, 1)",
+    scale: 4,
+    offsetX: 0,
+    offsetY: 0,
+    spiralDensity: 0.8,
+    spiralDistortion: 0,
+    strokeWidth: 0.5,
+    strokeTaper: 0,
+    strokeCap: 0,
+    noiseFreq: 0,
+    noisePower: 0,
+    softness: 0.5,
+    speed: 1,
+    frame: 0
+  }
+};
+var hookPreset = {
+  name: "Hook",
+  params: {
+    color1: "hsla(0, 0%, 0%, 1)",
+    color2: "hsla(200, 50%, 70%, 1)",
+    scale: 0.8,
+    offsetX: 0,
+    offsetY: 0,
+    spiralDensity: 0,
+    spiralDistortion: 0,
+    strokeWidth: 0.5,
+    strokeTaper: 0.5,
+    strokeCap: 0,
+    noiseFreq: 0,
+    noisePower: 0,
+    softness: 0.02,
+    speed: 3,
+    frame: 0
+  }
+};
+var vinylPreset = {
+  name: "Vinyl",
+  params: {
+    color1: "hsla(0, 0%, 15%, 1)",
+    color2: "hsla(320, 5%, 75%, 1)",
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    spiralDensity: 0,
+    spiralDistortion: 0.3,
+    strokeWidth: 0.95,
+    strokeTaper: 0,
+    strokeCap: 1,
+    noiseFreq: 0,
+    noisePower: 0,
+    softness: 0.11,
+    speed: 1,
+    frame: 0
+  }
+};
+var spiralPresets = [
+  defaultPreset13,
+  noisyPreset,
+  dropletPreset,
+  swirlPreset,
+  sandPreset,
+  hookPreset,
+  vinylPreset
+];
+var Spiral = ({
+  color1,
+  color2,
+  scale,
+  offsetX,
+  offsetY,
+  spiralDensity,
+  spiralDistortion,
+  strokeWidth,
+  strokeTaper,
+  strokeCap,
+  noiseFreq,
+  noisePower,
+  softness,
+  ...props
+}) => {
+  const uniforms = useMemo14(() => {
+    return {
+      u_color1: getShaderColorFromString13(color1, defaultPreset13.params.color1),
+      u_color2: getShaderColorFromString13(color2, defaultPreset13.params.color2),
+      u_scale: scale ?? defaultPreset13.params.scale,
+      u_offsetX: offsetX ?? defaultPreset13.params.offsetX,
+      u_offsetY: offsetY ?? defaultPreset13.params.offsetY,
+      u_spiralDensity: spiralDensity ?? defaultPreset13.params.spiralDensity,
+      u_spiralDistortion: spiralDistortion ?? defaultPreset13.params.spiralDistortion,
+      u_strokeWidth: strokeWidth ?? defaultPreset13.params.strokeWidth,
+      u_strokeTaper: strokeTaper ?? defaultPreset13.params.strokeTaper,
+      u_strokeCap: strokeCap ?? defaultPreset13.params.strokeCap,
+      u_noiseFreq: noiseFreq ?? defaultPreset13.params.noiseFreq,
+      u_noisePower: noisePower ?? defaultPreset13.params.noisePower,
+      u_softness: softness ?? defaultPreset13.params.softness
+    };
+  }, [
+    color1,
+    color2,
+    scale,
+    offsetX,
+    offsetY,
+    spiralDensity,
+    spiralDistortion,
+    strokeWidth,
+    strokeTaper,
+    strokeCap,
+    noiseFreq,
+    noisePower,
+    softness
+  ]);
+  return /* @__PURE__ */ jsx14(ShaderMount, { ...props, fragmentShader: spiralFragmentShader, uniforms });
+};
+
+// packages/shaders-react/src/index.ts
+import {} from "@paper-design/shaders";
+import { getShaderColorFromString as getShaderColorFromString14 } from "@paper-design/shaders";
+export {
+  DotGrid,
+  DotGridShapes2 as DotGridShapes,
+  DotOrbit,
+  GodRays,
+  MeshGradient,
+  Metaballs,
+  NeuroNoise,
+  PatternShapes2 as PatternShapes,
+  PerlinNoise,
+  ShaderMount,
+  SmokeRing,
+  Spiral,
+  SteppedSimplexNoise,
+  Voronoi,
+  Warp,
+  Waves,
+  dotGridPresets,
+  dotOrbitPresets,
+  getShaderColorFromString14 as getShaderColorFromString,
+  godRaysPresets,
+  meshGradientPresets,
+  metaballsPresets,
+  neuroNoisePresets,
+  perlinNoisePresets,
+  smokeRingPresets,
+  spiralPresets,
+  steppedSimplexNoisePresets,
+  voronoiPresets,
+  warpPresets,
+  wavesPresets
+};
 //# sourceMappingURL=index.js.map