1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3583],{93583:(e,o,a)=>{a.r(o),a.d(o,{ColorPanels:()=>oF,Dithering:()=>of,DotGrid:()=>el,DotOrbit:()=>eo,FlutedGlass:()=>o2,GodRays:()=>eZ,GrainGradient:()=>o_,HalftoneCmyk:()=>aO,HalftoneDots:()=>aR,Heatmap:()=>ad,ImageDithering:()=>at,LiquidMetal:()=>aA,MeshGradient:()=>E,Metaballs:()=>ey,NeuroNoise:()=>K,PaperTexture:()=>oK,PerlinNoise:()=>eV,PulsingBorder:()=>oB,ShaderMount:()=>p,SimplexNoise:()=>ep,SmokeRing:()=>Q,Spiral:()=>e5,StaticMeshGradient:()=>oD,StaticRadialGradient:()=>oQ,Swirl:()=>e7,Voronoi:()=>eD,Warp:()=>eH,Water:()=>o6,Waves:()=>eB,colorPanelsMeta:()=>oS,colorPanelsPresets:()=>oV,ditheringPresets:()=>on,dotGridPresets:()=>es,dotOrbitMeta:()=>q,dotOrbitPresets:()=>ee,flutedGlassPresets:()=>o1,getShaderColorFromString:()=>_,godRaysMeta:()=>eL,godRaysPresets:()=>eJ,grainGradientMeta:()=>oc,grainGradientPresets:()=>ov,halftoneCmykPresets:()=>aI,halftoneDotsPresets:()=>aU,heatmapMeta:()=>ar,heatmapPresets:()=>ap,imageDitheringPresets:()=>aa,isPaperShaderElement:()=>f,liquidMetalPresets:()=>aw,meshGradientMeta:()=>V,meshGradientPresets:()=>O,metaballsMeta:()=>ed,metaballsPresets:()=>ex,neuroNoisePresets:()=>j,paperTexturePresets:()=>oj,perlinNoisePresets:()=>eR,pulsingBorderMeta:()=>ox,pulsingBorderPresets:()=>oC,simplexNoiseMeta:()=>en,simplexNoisePresets:()=>em,smokeRingMeta:()=>W,smokeRingPresets:()=>N,spiralPresets:()=>e2,staticMeshGradientMeta:()=>oz,staticMeshGradientPresets:()=>oE,staticRadialGradientMeta:()=>oY,staticRadialGradientPresets:()=>oN,swirlMeta:()=>e3,swirlPresets:()=>e6,voronoiMeta:()=>eF,voronoiPresets:()=>eE,warpMeta:()=>eY,warpPresets:()=>eX,waterPresets:()=>o9,wavesPresets:()=>eC});var t=a(12115);let r=`#version 300 es 2precision mediump float; 3 4layout(location = 0) in vec4 a_position; 5 6uniform vec2 u_resolution; 7uniform float u_pixelRatio; 8uniform float u_imageAspectRatio; 9uniform float u_originX; 10uniform float u_originY; 11uniform float u_worldWidth; 12uniform float u_worldHeight; 13uniform float u_fit; 14uniform float u_scale; 15uniform float u_rotation; 16uniform float u_offsetX; 17uniform float u_offsetY; 18 19out vec2 v_objectUV; 20out vec2 v_objectBoxSize; 21out vec2 v_responsiveUV; 22out vec2 v_responsiveBoxGivenSize; 23out vec2 v_patternUV; 24out vec2 v_patternBoxSize; 25out vec2 v_imageUV; 26 27vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) { 28 vec2 box = vec2(0.);
29 // fit = none 30 box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y); 31 float noFitBoxWidth = box.x; 32 if (u_fit == 1.) { // fit = contain 33 box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y); 34 } else if (u_fit == 2.) { // fit = cover 35 box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y); 36 } 37 box.y = box.x / boxRatio; 38 return vec3(box, noFitBoxWidth); 39} 40 41void main() { 42 gl_Position = a_position; 43 44 vec2 uv = gl_Position.xy * .5; 45 vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5); 46 vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight); 47 givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio; 48 float r = u_rotation * 3.14159265358979323846 / 180.; 49 mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r)); 50 vec2 graphicOffset = vec2(-u_offsetX, u_offsetY); 51 52 53 // =================================================== 54 55 float fixedRatio = 1.; 56 vec2 fixedRatioBoxGivenSize = vec2( 57 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 58 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 59 ); 60 61 v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy; 62 vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize; 63 64 v_objectUV = uv; 65 v_objectUV *= objectWorldScale; 66 v_objectUV += boxOrigin * (objectWorldScale - 1.); 67 v_objectUV += graphicOffset; 68 v_objectUV /= u_scale; 69 v_objectUV = graphicRotation * v_objectUV; 70 71 // =================================================== 72 73 v_responsiveBoxGivenSize = vec2( 74 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 75 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 76 ); 77 float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y; 78 vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy; 79 vec2 responsiveBoxScale = u_resolution.xy / responsiveBoxSize; 80 81 #ifdef ADD_HELPERS 82 v_responsiveHelperBox = uv; 83 v_responsiveHelperBox *= responsiveBoxScale; 84 v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.); 85 #endif 86 87 v_responsiveUV = uv; 88 v_responsiveUV *= responsiveBoxScale; 89 v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.); 90 v_responsiveUV += graphicOffset; 91 v_responsiveUV /= u_scale; 92 v_responsiveUV.x *= responsiveRatio; 93 v_responsiveUV = graphicRotation * v_responsiveUV; 94 v_responsiveUV.x /= responsiveRatio; 95 96 // =================================================== 97 98 float patternBoxRatio = givenBoxSize.x / givenBoxSize.y; 99 vec2 patternBoxGivenSize = vec2( 100 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 101 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 102 ); 103 patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y; 104 105 vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize); 106 v_patternBoxSize = boxSizeData.xy; 107 float patternBoxNoFitBoxWidth = boxSizeData.z; 108 vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize; 109 110 v_patternUV = uv; 111 v_patternUV += graphicOffset / patternBoxScale; 112 v_patternUV += boxOrigin; 113 v_patternUV -= boxOrigin / patternBoxScale; 114 v_patternUV *= u_resolution.xy; 115 v_patternUV /= u_pixelRatio; 116 if (u_fit > 0.) { 117 v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x); 118 } 119 v_patternUV /= u_scale; 120 v_patternUV = graphicRotation * v_patternUV; 121 v_patternUV += boxOrigin / patternBoxScale; 122 v_patternUV -= boxOrigin; 123 // x100 is a default multiplier between vertex and fragmant shaders 124 // we use it to avoid UV presision issues 125 v_patternUV *= .01; 126 127 // =================================================== 128 129 vec2 imageBoxSize; 130 if (u_fit == 1.) { // contain 131 imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 132 } else if (u_fit == 2.) { // cover 133 imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 134 } else { 135 imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio); 136 } 137 imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio; 138 vec2 imageBoxScale = u_resolution.xy / imageBoxSize; 139 140 v_imageUV = uv; 141 v_imageUV *= imageBoxScale; 142 v_imageUV += boxOrigin * (imageBoxScale - 1.); 143 v_imageUV += graphicOffset; 144 v_imageUV /= u_scale; 145 v_imageUV.x *= u_imageAspectRatio; 146 v_imageUV = graphicRotation * v_imageUV; 147 v_imageUV.x /= u_imageAspectRatio; 148 149 v_imageUV += .5; 150 v_imageUV.y = 1. - v_imageUV.y; 151}`,i=8294400;class s{parentElement;canvasElement;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastRenderTime=0;currentFrame=0;speed=0;currentSpeed=0;providedUniforms;mipmaps=[];hasBeenDisposed=!1;resolutionChanged=!0;textures=new Map;minPixelRatio;maxPixelCount;isSafari=(function(){let e=navigator.userAgent.toLowerCase();return e.includes("safari")&&!e.includes("chrome")&&!e.includes("android")})();uniformCache={};textureUnitMap=new Map;ownerDocument;
151constructor(e,o,a,t,r=0,s=0,l=2,f=i,c=[]){if(e?.nodeType===1)this.parentElement=e;else throw Error("Paper Shaders: parent element must be an HTMLElement");if(this.ownerDocument=e.ownerDocument,!this.ownerDocument.querySelector("style[data-paper-shader]")){let e=this.ownerDocument.createElement("style");e.innerHTML=n,e.setAttribute("data-paper-shader",""),this.ownerDocument.head.prepend(e)}let u=this.ownerDocument.createElement("canvas");this.canvasElement=u,this.parentElement.prepend(u),this.fragmentShader=o,this.providedUniforms=a,this.mipmaps=c,this.currentFrame=s,this.minPixelRatio=l,this.maxPixelCount=f;let m=u.getContext("webgl2",t);if(!m)throw Error("Paper Shaders: WebGL is not supported in this browser");this.gl=m,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),visualViewport?.addEventListener("resize",this.handleVisualViewportChange),this.setSpeed(r),this.parentElement.setAttribute("data-paper-shader",""),this.parentElement.paperShaderMount=this,this.ownerDocument.addEventListener("visibilitychange",this.handleDocumentVisibilityChange)}initProgram=()=>{let e=function(e,o,a){let t=e.getShaderPrecisionFormat(e.FRAGMENT_SHADER,e.MEDIUM_FLOAT),r=t?t.precision:null;r&&r<23&&(o=o.replace(/precision\s+(lowp|mediump)\s+float;/g,"precision highp float;"),a=a.replace(/precision\s+(lowp|mediump)\s+float/g,"precision highp float").replace(/\b(uniform|varying|attribute)\s+(lowp|mediump)\s+(\w+)/g,"$1 highp $3"));let i=l(e,e.VERTEX_SHADER,o),s=l(e,e.FRAGMENT_SHADER,a);if(!i||!s)return null;let n=e.createProgram();return n?(e.attachShader(n,i),e.attachShader(n,s),e.linkProgram(n),e.getProgramParameter(n,e.LINK_STATUS))?(e.detachShader(n,i),e.detachShader(n,s),e.deleteShader(i),e.deleteShader(s),n):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(n)),e.deleteProgram(n),e.deleteShader(i),e.deleteShader(s),null):null}(this.gl,r,this.fragmentShader);e&&(this.program=e)};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),o=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,o),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{let e={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([o,a])=>{if(e[o]=this.gl.getUniformLocation(this.program,o),a instanceof HTMLImageElement){let a=`${o}AspectRatio`;e[a]=this.gl.getUniformLocation(this.program,a)}}),this.uniformLocations=e};renderScale=1;parentWidth=0;parentHeight=0;parentDevicePixelWidth=0;parentDevicePixelHeight=0;devicePixelsSupported=!1;resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(([e])=>{if(e?.borderBoxSize[0]){let o=e.devicePixelContentBoxSize?.[0];void 0!==o&&(this.devicePixelsSupported=!0,this.parentDevicePixelWidth=o.inlineSize,this.parentDevicePixelHeight=o.blockSize),this.parentWidth=e.borderBoxSize[0].inlineSize,this.parentHeight=e.borderBoxSize[0].blockSize}this.handleResize()}),this.resizeObserver.observe(this.parentElement)};handleVisualViewportChange=()=>{this.resizeObserver?.disconnect(),this.setupResizeObserver()};handleResize=()=>{let e=0,o=0,a=Math.max(1,window.devicePixelRatio),t=visualViewport?.scale??1;if(this.devicePixelsSupported){let r=Math.max(1,this.minPixelRatio/a);e=this.parentDevicePixelWidth*r*t,o=this.parentDevicePixelHeight*r*t}else{let r=Math.max(a,this.minPixelRatio)*t;this.isSafari&&(r*=Math.max(1,function(e){let o=visualViewport?.scale??1,a=visualViewport?.width??window.innerWidth,t=outerWidth/(o*a+(window.innerWidth-e.documentElement.clientWidth)),r=Math.round(100*t);return r%5==0?r/100:33===r?1/3:67===r?2/3:133===r?4/3:t}(this.ownerDocument))),e=Math.round(this.parentWidth)*r,o=Math.round(this.parentHeight)*r}let r=Math.min(1,Math.sqrt(this.maxPixelCount)/Math.sqrt(e*o)),i=Math.round(e*r),s=Math.round(o*r),l=i/Math.round(this.parentWidth);(this.canvasElement.width!==i||this.canvasElement.height!==s||this.renderScale!==l)&&(this.renderScale=l,this.canvasElement.width=i,this.canvasElement.height=s,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=e=>{if(this.hasBeenDisposed)return;if(null===this.program)return void console.warn("Tried to render before program or gl was initialized");let o=e-this.lastRenderTime;this.lastRenderTime=e,0!==this.currentSpeed&&(this.currentFrame+=o*this.currentSpeed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,.001*this.currentFrame),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,this.renderScale),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),0!==this.currentSpeed?this.requestRender():this.rafId=null};requestRender=()=>{null!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};setTextureUniform=(e,o)=>
151{if(!o.complete||0===o.naturalWidth)throw Error(`Paper Shaders: image for uniform ${e} must be fully loaded`);let a=this.textures.get(e);a&&this.gl.deleteTexture(a),this.textureUnitMap.has(e)||this.textureUnitMap.set(e,this.textureUnitMap.size);let t=this.textureUnitMap.get(e);this.gl.activeTexture(this.gl.TEXTURE0+t);let r=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,r),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,o),this.mipmaps.includes(e)&&(this.gl.generateMipmap(this.gl.TEXTURE_2D),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR_MIPMAP_LINEAR));let i=this.gl.getError();if(i!==this.gl.NO_ERROR||null===r)return void console.error("Paper Shaders: WebGL error when uploading texture:",i);this.textures.set(e,r);let s=this.uniformLocations[e];if(s){this.gl.uniform1i(s,t);let a=`${e}AspectRatio`,r=this.uniformLocations[a];if(r){let e=o.naturalWidth/o.naturalHeight;this.gl.uniform1f(r,e)}}};areUniformValuesEqual=(e,o)=>
151e===o||!!(Array.isArray(e)&&Array.isArray(o))&&e.length===o.length&&e.every((e,a)=>this.areUniformValuesEqual(e,o[a]));setUniformValues=e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([e,o])=>{let a=o;if(o instanceof HTMLImageElement&&(a=`${o.src.slice(0,200)}|${o.naturalWidth}x${o.naturalHeight}`),this.areUniformValuesEqual(this.uniformCache[e],a))return;this.uniformCache[e]=a;let t=this.uniformLocations[e];if(!t)return void console.warn(`Uniform location for ${e} not found`);if(o instanceof HTMLImageElement)this.setTextureUniform(e,o);else if(Array.isArray(o)){let a=null,r=null;if(void 0!==o[0]&&Array.isArray(o[0])){let t=o[0].length;if(!o.every(e=>e.length===t))return void console.warn(`All child arrays must be the same length for ${e}`);a=o.flat(),r=t}else r=(a=o).length;switch(r){case 2:this.gl.uniform2fv(t,a);break;case 3:this.gl.uniform3fv(t,a);break;case 4:this.gl.uniform4fv(t,a);break;case 9:this.gl.uniformMatrix3fv(t,!1,a);break;case 16:this.gl.uniformMatrix4fv(t,!1,a);break;default:console.warn(`Unsupported uniform array length: ${r}`)}}else"number"==typeof o?this.gl.uniform1f(t,o):"boolean"==typeof o?this.gl.uniform1i(t,+!!o):console.warn(`Unsupported uniform type for ${e}: ${typeof o}`)})};getCurrentFrame=()=>this.currentFrame;setFrame=e=>{this.currentFrame=e,this.lastRenderTime=performance.now(),this.render(performance.now())};setSpeed=(e=1)=>{this.speed=e,this.setCurrentSpeed(this.ownerDocument.hidden?0:e)};setCurrentSpeed=e=>{this.currentSpeed=e,null===this.rafId&&0!==e&&(this.lastRenderTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),null!==this.rafId&&0===e&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setMaxPixelCount=(e=i)=>{this.maxPixelCount=e,this.handleResize()};setMinPixelRatio=(e=2)=>{this.minPixelRatio=e,this.handleResize()};setUniforms=e=>{this.setUniformValues(e),this.providedUniforms={...this.providedUniforms,...e},this.render(performance.now())};handleDocumentVisibilityChange=()=>{this.setCurrentSpeed(this.ownerDocument.hidden?0:this.speed)};dispose=()=>{this.hasBeenDisposed=!0,null!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEach(e=>{this.gl.deleteTexture(e)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),visualViewport?.removeEventListener("resize",this.handleVisualViewportChange),this.ownerDocument.removeEventListener("visibilitychange",this.handleDocumentVisibilityChange),this.uniformLocations={},this.canvasElement.remove(),delete this.parentElement.paperShaderMount}}function l(e,o,a){let t=e.createShader(o);return t?(e.shaderSource(t,a),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS))?t:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(t)),e.deleteShader(t),null):null}let n=`@layer paper-shaders { 152 :where([data-paper-shader]) { 153 isolation: isolate; 154 position: relative; 155 156 & canvas { 157 contain: strict; 158 display: block; 159 position: absolute; 160 inset: 0; 161 z-index: -1; 162 width: 100%; 163 height: 100%; 164 border-radius: inherit; 165 corner-shape: inherit; 166 } 167 } 168}`;function f(e){return"paperShaderMount"in e}function c(e){if(e.naturalWidth<1024&&e.naturalHeight<1024){if(e.naturalWidth<1||e.naturalHeight<1)return;let o=e.naturalWidth/e.naturalHeight;e.width=Math.round(o>1?1024*o:1024),e.height=Math.round(o>1?1024:1024/o)}}var u=a(95155);async function m(e){let o={},a=[];return Object.entries(e).forEach(e=>{let[t,r]=e;if("string"==typeof r){let e=r||"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";if(!(e=>{try{if(e.startsWith("/"))return!0;return new URL(e),!0}catch(e){return!1}})(e))return void console.warn('Uniform "'.concat(t,'" has invalid URL "').concat(e,'". Skipping image loading.'));let i=new Promise((a,r)=>{let i=new Image;(e=>{try{if(e.startsWith("/"))return!1;return new URL(e,window.location.origin).origin!==window.location.origin}catch(e){return!1}})(e)&&(i.crossOrigin="anonymous"),i.onload=()=>{c(i),o[t]=i,a()},i.onerror=()=>{console.error("Could not set uniforms. Failed to load image at ".concat(e)),r()},i.src=e});a.push(i)}else r instanceof HTMLImageElement&&c(r),o[t]=r}),await Promise.all(a),o}let p=(0,t.forwardRef)(function(e,o){let{fragmentShader:a,uniforms:r,webGlContextAttributes:i,speed:l=0,frame:n=0,width:f,height:c,minPixelRatio:p,maxPixelCount:d,mipmaps:g,style:h,...v}=e,[_,x]=(0,t.useState)(!1),y=(0,t.useRef)(null),w=(0,t.useRef)(null),A=(0,t.useRef)(i);(0,t.useEffect)(()=>((async()=>{let e=await m(r);
168y.current&&!w.current&&(w.current=new s(y.current,a,e,A.current,l,n,p,d,g),x(!0))})(),()=>{var e;null==(e=w.current)||e.dispose(),w.current=null}),[a]),(0,t.useEffect)(()=>{let e=!1;return(async()=>{let o=await m(r);if(!e){var a;null==(a=w.current)||a.setUniforms(o)}})(),()=>{e=!0}},[r,_]),(0,t.useEffect)(()=>{var e;null==(e=w.current)||e.setSpeed(l)},[l,_]),(0,t.useEffect)(()=>{var e;null==(e=w.current)||e.setMaxPixelCount(d)},[d,_]),(0,t.useEffect)(()=>{var e;null==(e=w.current)||e.setMinPixelRatio(p)},[p,_]),(0,t.useEffect)(()=>{var e;null==(e=w.current)||e.setFrame(n)},[n,_]);let b=function(e){let o=t.useRef(void 0),a=t.useCallback(o=>{let a=e.map(e=>{if(null!=e){if("function"==typeof e){let a=e(o);return"function"==typeof a?a:()=>{e(null)}}return e.current=o,()=>{e.current=null}}});return()=>{a.forEach(e=>e?.())}},e);return t.useMemo(()=>e.every(e=>null==e)?null:e=>{o.current&&(o.current(),o.current=void 0),null!=e&&(o.current=a(e))},e)}([y,o]);return(0,u.jsx)("div",{ref:b,style:void 0!==f||void 0!==c?{width:"string"==typeof f&&!1===isNaN(+f)?+f:f,height:"string"==typeof c&&!1===isNaN(+c)?+c:c,...h}:h,...v})});function d(e,o){for(let a in e){if("colors"===a){let a=Array.isArray(e.colors),t=Array.isArray(o.colors);if(!a||!t){if(!1===Object.is(e.colors,o.colors))return!1;continue}if(e.colors?.length!==o.colors?.length||!e.colors?.every((e,a)=>e===o.colors?.[a]))return!1;continue}if(!1===Object.is(e[a],o[a]))return!1}return!0}p.displayName="ShaderMount";let g={fit:"contain",scale:1,rotation:0,offsetX:0,offsetY:0,originX:.5,originY:.5,worldWidth:0,worldHeight:0},h={fit:"none",scale:1,rotation:0,offsetX:0,offsetY:0,originX:.5,originY:.5,worldWidth:0,worldHeight:0},v={none:0,contain:1,cover:2};function _(e){if(Array.isArray(e))return 4===e.length?e:3===e.length?[...e,1]:y;if("string"!=typeof e)return y;let o,a,t,r=1;if(e.startsWith("#"))[o,a,t,r]=function(e){3===(e=e.replace(/^#/,"")).length&&(e=e.split("").map(e=>e+e).join("")),6===e.length&&(e+="ff");let o=parseInt(e.slice(0,2),16)/255,a=parseInt(e.slice(2,4),16)/255;return[o,a,parseInt(e.slice(4,6),16)/255,parseInt(e.slice(6,8),16)/255]}(e);else if(e.startsWith("rgb"))[o,a,t,r]=function(e){let o=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0")/255,parseInt(o[2]??"0")/255,parseInt(o[3]??"0")/255,void 0===o[4]?1:parseFloat(o[4])]:[0,0,0,1]}(e);else{if(!e.startsWith("hsl"))return console.error("Unsupported color format",e),y;[o,a,t,r]=function(e){let o,a,t,[r,i,s,l]=e,n=r/360,f=i/100,c=s/100;if(0===i)o=a=t=c;else{let e=(e,o,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<1/6)?e+(o-e)*6*a:a<.5?o:a<2/3?e+(o-e)*(2/3-a)*6:e,r=c<.5?c*(1+f):c+f-c*f,i=2*c-r;o=e(i,r,n+1/3),a=e(i,r,n),t=e(i,r,n-1/3)}return[o,a,t,l]}(function(e){let o=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0"),parseInt(o[2]??"0"),parseInt(o[3]??"0"),void 0===o[4]?1:parseFloat(o[4])]:[0,0,0,1]}(e))}return[x(o,0,1),x(a,0,1),x(t,0,1),x(r,0,1)]}let x=(e,o,a)=>Math.min(Math.max(e,o),a),y=[0,0,0,1],w=` 169#define TWO_PI 6.28318530718 170#define PI 3.14159265358979323846 171`,A=` 172vec2 rotate(vec2 uv, float th) { 173 return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv; 174} 175`,b=` 176 float hash11(float p) { 177 p = fract(p * 0.3183099) + 0.1; 178 p *= p + 19.19; 179 return fract(p * p); 180 } 181`,C=` 182 float hash21(vec2 p) { 183 p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1; 184 p += dot(p, p + 19.19); 185 return fract(p.x * p.y); 186 } 187`,B=` 188 float randomR(vec2 p) { 189 vec2 uv = floor(p) / 100. + .5; 190 return texture(u_noiseTexture, fract(uv)).r; 191 } 192`,S=` 193 vec2 randomGB(vec2 p) { 194 vec2 uv = floor(p) / 100. + .5; 195 return texture(u_noiseTexture, fract(uv)).gb; 196 } 197`,k=` 198 color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5); 199`,U=` 200vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); } 201float snoise(vec2 v) { 202 const vec4 C = vec4(0.211324865405187, 0.366025403784439, 203 -0.577350269189626, 0.024390243902439); 204 vec2 i = floor(v + dot(v, C.yy)); 205 vec2 x0 = v - i + dot(i, C.xx); 206 vec2 i1; 207 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); 208 vec4 x12 = x0.xyxy + C.xxzz; 209 x12.xy -= i1; 210 i = mod(i, 289.0); 211 vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) 212 + i.x + vec3(0.0, i1.x, 1.0)); 213 vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), 214 dot(x12.zw, x12.zw)), 0.0); 215 m = m * m; 216 m = m * m; 217 vec3 x = 2.0 * fract(p * C.www) - 1.0; 218 vec3 h = abs(x) - 0.5; 219 vec3 ox = floor(x + 0.5); 220 vec3 a0 = x - ox; 221 m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h); 222 vec3 g; 223 g.x = a0.x * x0.x + h.x * x0.y; 224 g.yz = a0.yz * x12.xz + h.yz * x12.yw; 225 return 130.0 * dot(m, g); 226} 227`,R=` 228float fiberRandom(vec2 p) { 229 vec2 uv = floor(p) / 100.; 230 return texture(u_noiseTexture, fract(uv)).b; 231} 232 233float fiberValueNoise(vec2 st) { 234 vec2 i = floor(st); 235 vec2 f = fract(st); 236 float a = fiberRandom(i); 237 float b = fiberRandom(i + vec2(1.0, 0.0)); 238 float c = fiberRandom(i + vec2(0.0, 1.0)); 239 float d = fiberRandom(i + vec2(1.0, 1.0)); 240 vec2 u = f * f * (3.0 - 2.0 * f); 241 float x1 = mix(a, b, u.x); 242 float x2 = mix(c, d, u.x); 243 return mix(x1, x2, u.y); 244} 245 246float fiberNoiseFbm(in vec2 n, vec2 seedOffset) { 247 float total = 0.0, amplitude = 1.; 248 for (int i = 0; i < 4; i++) { 249 n = rotate(n, .7); 250 total += fiberValueNoise(n + seedOffset) * amplitude; 251 n *= 2.; 252 amplitude *= 0.6; 253 } 254 return total; 255} 256 257float fiberNoise(vec2 uv, vec2 seedOffset) { 258 float epsilon = 0.001; 259 float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset); 260 float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset); 261 float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset); 262 float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset); 263 return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon); 264} 265`,V={maxColorCount:10},F=`#version 300 es 266precision mediump float; 267 268uniform float u_time; 269 270uniform vec4 u_colors[${V.maxColorCount}]; 271uniform float u_colorsCount; 272 273uniform float u_distortion; 274uniform float u_swirl; 275uniform float u_grainMixer; 276uniform float u_grainOverlay; 277 278in vec2 v_objectUV; 279out vec4 fragColor; 280 281${w} 282${A} 283${C} 284 285float valueNoise(vec2 st) { 286 vec2 i = floor(st); 287 vec2 f = fract(st);
288 float a = hash21(i); 289 float b = hash21(i + vec2(1.0, 0.0)); 290 float c = hash21(i + vec2(0.0, 1.0)); 291 float d = hash21(i + vec2(1.0, 1.0)); 292 vec2 u = f * f * (3.0 - 2.0 * f); 293 float x1 = mix(a, b, u.x); 294 float x2 = mix(c, d, u.x); 295 return mix(x1, x2, u.y); 296} 297 298float noise(vec2 n, vec2 seedOffset) { 299 return valueNoise(n + seedOffset); 300} 301 302vec2 getPosition(int i, float t) { 303 float a = float(i) * .37; 304 float b = .6 + fract(float(i) / 3.) * .9; 305 float c = .8 + fract(float(i + 1) / 4.); 306 307 float x = sin(t * b + a); 308 float y = cos(t * c + a * 1.5); 309 310 return .5 + .5 * vec2(x, y); 311} 312 313void main() { 314 vec2 uv = v_objectUV; 315 uv += .5; 316 vec2 grainUV = uv * 1000.; 317 318 float grain = noise(grainUV, vec2(0.)); 319 float mixerGrain = .4 * u_grainMixer * (grain - .5); 320 321 const float firstFrameOffset = 41.5; 322 float t = .5 * (u_time + firstFrameOffset); 323 324 float radius = smoothstep(0., 1., length(uv - .5)); 325 float center = 1. - radius; 326 for (float i = 1.; i <= 2.; i++) { 327 uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y)); 328 uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x)); 329 } 330 331 vec2 uvRotated = uv; 332 uvRotated -= vec2(.5); 333 float angle = 3. * u_swirl * radius; 334 uvRotated = rotate(uvRotated, -angle); 335 uvRotated += vec2(.5); 336 337 vec3 color = vec3(0.); 338 float opacity = 0.; 339 float totalWeight = 0.; 340 341 for (int i = 0; i < ${V.maxColorCount}; i++) { 342 if (i >= int(u_colorsCount)) break; 343 344 vec2 pos = getPosition(i, t) + mixerGrain; 345 vec3 colorFraction = u_colors[i].rgb * u_colors[i].a; 346 float opacityFraction = u_colors[i].a; 347 348 float dist = length(uvRotated - pos); 349 350 dist = pow(dist, 3.5); 351 float weight = 1. / (dist + 1e-3); 352 color += colorFraction * weight; 353 opacity += opacityFraction * weight; 354 totalWeight += weight; 355 } 356 357 color /= max(1e-4, totalWeight); 358 opacity /= max(1e-4, totalWeight); 359 360 float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.)); 361 grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5); 362 grainOverlay = pow(grainOverlay, 1.3); 363 364 float grainOverlayV = grainOverlay * 2. - 1.; 365 vec3 grainOverlayColor = vec3(step(0., grainOverlayV)); 366 float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV); 367 grainOverlayStrength = pow(grainOverlayStrength, .8); 368 color = mix(color, grainOverlayColor, .35 * grainOverlayStrength); 369 370 opacity += .5 * grainOverlayStrength; 371 opacity = clamp(opacity, 0., 1.); 372 373 fragColor = vec4(color, opacity); 374} 375`,z={name:"Default",params:{...g,speed:1,frame:0,colors:["#e0eaff","#241d9a","#f75092","#9f50d3"],distortion:.8,swirl:.1,grainMixer:0,grainOverlay:0}},M={name:"Purple",params:{...g,speed:.6,frame:0,colors:["#aaa7d7","#3c2b8e"],distortion:1,swirl:1,grainMixer:0,grainOverlay:0}},I={name:"Beach",params:{...g,speed:.1,frame:0,colors:["#bcecf6","#00aaff","#00f7ff","#ffd447"],distortion:.8,swirl:.35,grainMixer:0,grainOverlay:0}},O=[z,{name:"Ink",params:{...g,speed:1,frame:0,colors:["#ffffff","#000000"],distortion:1,swirl:.2,rotation:90,grainMixer:0,grainOverlay:0}},M,I],E=(0,t.memo)(function({speed:e=z.params.speed,frame:o=z.params.frame,colors:a=z.params.colors,distortion:t=z.params.distortion,swirl:r=z.params.swirl,grainMixer:i=z.params.grainMixer,grainOverlay:s=z.params.grainOverlay,fit:l=z.params.fit,rotation:n=z.params.rotation,scale:f=z.params.scale,originX:c=z.params.originX,originY:m=z.params.originY,offsetX:d=z.params.offsetX,offsetY:g=z.params.offsetY,worldWidth:h=z.params.worldWidth,worldHeight:x=z.params.worldHeight,...y}){let w={u_colors:a.map(_),u_colorsCount:a.length,u_distortion:t,u_swirl:r,u_grainMixer:i,u_grainOverlay:s,u_fit:v[l],u_rotation:n,u_scale:f,u_offsetX:d,u_offsetY:g,u_originX:c,u_originY:m,u_worldWidth:h,u_worldHeight:x};return(0,u.jsx)(p,{...y,speed:e,frame:o,fragmentShader:F,uniforms:w})},d);function D(){if("undefined"==typeof window)return;let e=new Image;return e.src=Y,e}let Y=
vendor: 23,248 bytes, line 375
375"data:image/png;base64,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"
375,W={maxColorCount:10,maxNoiseIterations:8},P=`#version 300 es 376precision mediump float; 377 378uniform float u_time; 379 380uniform sampler2D u_noiseTexture; 381 382uniform vec4 u_colorBack; 383uniform vec4 u_colors[${W.maxColorCount}]; 384uniform float u_colorsCount; 385 386uniform float u_thickness; 387uniform float u_radius; 388uniform float u_innerShape; 389uniform float u_noiseScale; 390uniform float u_noiseIterations; 391 392in vec2 v_objectUV; 393 394out vec4 fragColor; 395 396${w} 397${B} 398float valueNoise(vec2 st) { 399 vec2 i = floor(st); 400 vec2 f = fract(st); 401 float a = randomR(i); 402 float b = randomR(i + vec2(1.0, 0.0)); 403 float c = randomR(i + vec2(0.0, 1.0)); 404 float d = randomR(i + vec2(1.0, 1.0)); 405 vec2 u = f * f * (3.0 - 2.0 * f); 406 float x1 = mix(a, b, u.x); 407 float x2 = mix(c, d, u.x); 408 return mix(x1, x2, u.y); 409} 410vec2 fbm(vec2 n0, vec2 n1) { 411 vec2 total = vec2(0.0); 412 float amplitude = .4; 413 for (int i = 0; i < ${W.maxNoiseIterations}; i++) { 414 if (i >= int(u_noiseIterations)) break; 415 total.x += valueNoise(n0) * amplitude; 416 total.y += valueNoise(n1) * amplitude; 417 n0 *= 1.99; 418 n1 *= 1.99; 419 amplitude *= 0.65; 420 } 421 return total; 422} 423 424float getNoise(vec2 uv, vec2 pUv, float t) { 425 vec2 pUvLeft = pUv + .03 * t; 426 float period = max(abs(u_noiseScale * TWO_PI), 1e-6); 427 vec2 pUvRight = vec2(fract(pUv.x / period) * period, pUv.y) + .03 * t; 428 vec2 noise = fbm(pUvLeft, pUvRight); 429 return mix(noise.y, noise.x, smoothstep(-.25, .25, uv.x)); 430} 431 432float getRingShape(vec2 uv) { 433 float radius = u_radius; 434 float thickness = u_thickness; 435 436 float distance = length(uv); 437 float ringValue = 1. - smoothstep(radius, radius + thickness, distance); 438 ringValue *= smoothstep(radius - pow(u_innerShape, 3.) * thickness, radius, distance); 439 440 return ringValue; 441} 442 443void main() { 444 vec2 shape_uv = v_objectUV; 445 446 float t = u_time; 447 448 float cycleDuration = 3.; 449 float period2 = 2.0 * cycleDuration; 450 float localTime1 = fract((0.1 * t + cycleDuration) / period2) * period2; 451 float localTime2 = fract((0.1 * t) / period2) * period2; 452 float timeBlend = .5 + .5 * sin(.1 * t * PI / cycleDuration - .5 * PI); 453 454 float atg = atan(shape_uv.y, shape_uv.x) + .001; 455 float l = length(shape_uv); 456 float radialOffset = .5 * l - inversesqrt(max(1e-4, l)); 457 vec2 polar_uv1 = vec2(atg, localTime1 - radialOffset) * u_noiseScale; 458 vec2 polar_uv2 = vec2(atg, localTime2 - radialOffset) * u_noiseScale; 459 460 float noise1 = getNoise(shape_uv, polar_uv1, t); 461 float noise2 = getNoise(shape_uv, polar_uv2, t); 462 463 float noise = mix(noise1, noise2, timeBlend); 464 465 shape_uv *= (.8 + 1.2 * noise); 466 467 float ringShape = getRingShape(shape_uv); 468 469 float mixer = ringShape * ringShape * (u_colorsCount - 1.); 470 int idxLast = int(u_colorsCount) - 1; 471 vec4 gradient = u_colors[idxLast]; 472 gradient.rgb *= gradient.a; 473 for (int i = ${W.maxColorCount} - 2; i >= 0; i--) { 474 float localT = clamp(mixer - float(idxLast - i - 1), 0., 1.); 475 vec4 c = u_colors[i]; 476 c.rgb *= c.a; 477 gradient = mix(gradient, c, localT); 478 } 479 480 vec3 color = gradient.rgb * ringShape; 481 float opacity = gradient.a * ringShape; 482 483 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 484 color = color + bgColor * (1. - opacity); 485 opacity = opacity + u_colorBack.a * (1. - opacity); 486 487 ${k} 488 489 fragColor = vec4(color, opacity); 490} 491`,T={name:"Default",params:{...g,speed:.5,frame:0,colorBack:"#000000",colors:["#ffffff"],noiseScale:3,noiseIterations:8,radius:.25,thickness:.65,innerShape:.7,scale:.8}},G={name:"Solar",params:{...g,speed:1,frame:0,colorBack:"#000000",colors:["#ffffff","#ffca0a","#fc6203","#fc620366"],noiseScale:2,noiseIterations:3,radius:.4,thickness:.8,innerShape:4,scale:2,offsetY:1}},N=[T,{name:"Line",params:{...g,frame:0,colorBack:"#000000",colors:["#4540a4","#1fe8ff"],noiseScale:1.1,noiseIterations:2,radius:.38,thickness:.01,innerShape:.88,speed:4}},G,{name:"Cloud",params:{...g,frame:0,colorBack:"#81ADEC",colors:["#ffffff"],noiseScale:3,noiseIterations:10,radius:.5,thickness:.65,innerShape:.85,speed:.5,scale:2.5}}],Q=(0,t.memo)(function({speed:e=T.params.speed,frame:o=T.params.frame,colorBack:a=T.params.colorBack,colors:t=T.params.colors,noiseScale:r=T.params.noiseScale,thickness:i=T.params.thickness,radius:s=T.params.radius,innerShape:l=T.params.innerShape,noiseIterations:n=T.params.noiseIterations,fit:f=T.params.fit,scale:c=T.params.scale,rotation:m=T.params.rotation,originX:d=T.params.originX,originY:g=T.params.originY,offsetX:h=T.params.offsetX,offsetY:x=T.params.offsetY,worldWidth:y=T.params.worldWidth,worldHeight:w=T.params.worldHeight,...A}){let b={u_colorBack:_(a),u_colors:t.map(_),u_colorsCount:t.length,u_noiseScale:r,u_thickness:i,u_radius:s,u_innerShape:l,u_noiseIterations:n,u_noiseTexture:D(),u_fit:v[f],u_scale:c,u_rotation:m,u_offsetX:h,u_offsetY:x,u_originX:d,u_originY:g,u_worldWidth:y,u_worldHeight:w};return(0,u.jsx)(p,{...A,speed:e,frame:o,fragmentShader:P,uniforms:b})},d),X=`#version 300 es 492precision mediump float; 493 494uniform float u_time; 495uniform vec2 u_resolution; 496uniform float u_pixelRatio; 497 498uniform vec4 u_colorFront; 499uniform vec4 u_colorMid; 500uniform vec4 u_colorBack; 501uniform float u_brightness; 502uniform float u_contrast; 503 504in vec2 v_patternUV; 505 506out vec4 fragColor; 507 508${A} 509 510float neuroShape(vec2 uv, float t) { 511 vec2 sine_acc = vec2(0.); 512 vec2 res = vec2(0.); 513 float scale = 8.; 514 515 for (int j = 0; j < 15; j++) { 516 uv = rotate(uv, 1.); 517 sine_acc = rotate(sine_acc, 1.); 518 vec2 layer = uv * scale + float(j) + sine_acc - t; 519 sine_acc += sin(layer); 520 res += (.5 + .5 * cos(layer)) / scale; 521 scale *= (1.2); 522 } 523 return res.x + res.y; 524} 525 526void main() { 527 vec2 shape_uv = v_patternUV; 528 shape_uv *= .13; 529 530 float t = .5 * u_time; 531 532 float noise = neuroShape(shape_uv, t); 533 534 noise = (1. + u_brightness) * noise * noise; 535 noise = pow(noise, .7 + 6. * u_contrast); 536 noise = min(1.4, noise); 537 538 float blend = smoothstep(0.7, 1.4, noise); 539 540 vec4 frontC = u_colorFront; 541 frontC.rgb *= frontC.a; 542 vec4 midC = u_colorMid; 543 midC.rgb *= midC.a; 544 vec4 blendFront = mix(midC, frontC, blend); 545 546 float safeNoise = max(noise, 0.0); 547 vec3 color = blendFront.rgb * safeNoise; 548 float opacity = clamp(blendFront.a * safeNoise, 0., 1.); 549 550 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 551 color = color + bgColor * (1. - opacity); 552 opacity = opacity + u_colorBack.a * (1. - opacity); 553 554 ${k} 555 556 fragColor = vec4(color, opacity); 557} 558`,H={name:"Default",params:{...h,speed:1,frame:0,colorFront:"#ffffff",colorMid:"#47a6ff",colorBack:"#000000",brightness:.05,contrast:.3}},L={name:"Sensation",params:{...h,speed:1,frame:0,colorFront:"#00c8ff",colorMid:"#fbff00",colorBack:"#8b42ff",brightness:.19,contrast:.12,scale:3}},j=[H,L,{name:"Bloodstream",params:{...h,speed:1,frame:0,colorFront:"#ff0000",colorMid:"#ff0000",colorBack:"#ffffff",brightness:.24,contrast:.17,scale:.7}},{name:"Ghost",params:{...h,speed:1,frame:0,colorFront:"#ffffff",colorMid:"#000000",colorBack:"#ffffff",brightness:0,contrast:1,scale:.55}}],K=(0,t.memo)(function({speed:e=H.params.speed,frame:o=H.params.frame,colorFront:a=H.params.colorFront,colorMid:t=H.params.colorMid,colorBack:r=H.params.colorBack,brightness:i=H.params.brightness,contrast:s=H.params.contrast,fit:l=H.params.fit,scale:n=H.params.scale,rotation:f=H.params.rotation,originX:c=H.params.originX,originY:m=H.params.originY,offsetX:d=H.params.offsetX,offsetY:g=H.params.offsetY,worldWidth:h=H.params.worldWidth,worldHeight:x=H.params.worldHeight,...y}){let w={u_colorFront:_(a),u_colorMid:_(t),u_colorBack:_(r),u_brightness:i,u_contrast:s,u_fit:v[l],u_scale:n,u_rotation:f,u_offsetX:d,u_offsetY:g,u_originX:c,u_originY:m,u_worldWidth:h,u_worldHeight:x};return(0,u.jsx)(p,{...y,speed:e,frame:o,fragmentShader:X,uniforms:w})},d),q={maxColorCount:10},J=`#version 300 es 559precision mediump float; 560 561uniform float u_time; 562 563uniform sampler2D u_noiseTexture; 564 565uniform vec4 u_colorBack; 566uniform vec4 u_colors[${q.maxColorCount}]; 567uniform float u_colorsCount; 568uniform float u_stepsPerColor; 569uniform float u_size; 570uniform float u_sizeRange; 571uniform float u_spreading; 572 573in vec2 v_patternUV; 574 575out vec4 fragColor; 576 577${w} 578${A} 579${B} 580${S} 581 582
583vec3 voronoiShape(vec2 uv, float time) { 584 vec2 i_uv = floor(uv); 585 vec2 f_uv = fract(uv); 586 587 float spreading = .25 * clamp(u_spreading, 0., 1.); 588 589 float minDist = 1.; 590 vec2 randomizer = vec2(0.); 591 for (int y = -1; y <= 1; y++) { 592 for (int x = -1; x <= 1; x++) { 593 vec2 tileOffset = vec2(float(x), float(y)); 594 vec2 rand = randomGB(i_uv + tileOffset); 595 vec2 cellCenter = vec2(.5 + 1e-4); 596 cellCenter += spreading * cos(time + TWO_PI * rand); 597 cellCenter -= .5; 598 cellCenter = rotate(cellCenter, randomR(vec2(rand.x, rand.y)) + .1 * time); 599 cellCenter += .5; 600 float dist = length(tileOffset + cellCenter - f_uv); 601 if (dist < minDist) { 602 minDist = dist; 603 randomizer = rand; 604 } 605 } 606 } 607 608 return vec3(minDist, randomizer); 609} 610 611void main() { 612 613 vec2 shape_uv = v_patternUV; 614 shape_uv *= 1.5; 615 616 const float firstFrameOffset = -10.; 617 float t = u_time + firstFrameOffset; 618 619 vec3 voronoi = voronoiShape(shape_uv, t) + 1e-4; 620 621 float radius = .25 * clamp(u_size, 0., 1.) - .5 * clamp(u_sizeRange, 0., 1.) * voronoi[2]; 622 float dist = voronoi[0]; 623 float edgeWidth = fwidth(dist); 624 float dots = 1. - smoothstep(radius - edgeWidth, radius + edgeWidth, dist); 625 626 float shape = voronoi[1]; 627 628 float mixer = shape * (u_colorsCount - 1.); 629 mixer = (shape - .5 / u_colorsCount) * u_colorsCount; 630 float steps = max(1., u_stepsPerColor); 631 632 vec4 gradient = u_colors[0]; 633 gradient.rgb *= gradient.a; 634 for (int i = 1; i < ${q.maxColorCount}; i++) { 635 if (i >= int(u_colorsCount)) break; 636 float localT = clamp(mixer - float(i - 1), 0.0, 1.0); 637 localT = round(localT * steps) / steps; 638 vec4 c = u_colors[i]; 639 c.rgb *= c.a; 640 gradient = mix(gradient, c, localT); 641 } 642 643 if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) { 644 float localT = mixer + 1.; 645 if (mixer > (u_colorsCount - 1.)) { 646 localT = mixer - (u_colorsCount - 1.); 647 } 648 localT = round(localT * steps) / steps; 649 vec4 cFst = u_colors[0]; 650 cFst.rgb *= cFst.a; 651 vec4 cLast = u_colors[int(u_colorsCount - 1.)]; 652 cLast.rgb *= cLast.a; 653 gradient = mix(cLast, cFst, localT); 654 } 655 656 vec3 color = gradient.rgb * dots; 657 float opacity = gradient.a * dots; 658 659 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 660 color = color + bgColor * (1. - opacity); 661 opacity = opacity + u_colorBack.a * (1. - opacity); 662 663 fragColor = vec4(color, opacity); 664} 665`,Z={name:"Default",params:{...h,speed:1.5,frame:0,colorBack:"#000000",colors:["#ffc96b","#ff6200","#ff2f00","#421100","#1a0000"],size:1,sizeRange:0,spreading:1,stepsPerColor:4}},$={name:"Shine",params:{...h,speed:.1,frame:0,colors:["#ffffff","#006aff","#fff675"],colorBack:"#000000",stepsPerColor:4,size:.3,sizeRange:.2,spreading:1,scale:.4}},ee=[Z,{name:"Bubbles",params:{...h,speed:.4,frame:0,colors:["#D0D2D5"],colorBack:"#989CA4",stepsPerColor:2,size:.9,sizeRange:.7,spreading:1,scale:1.64}},$,{name:"Hallucinatory",params:{...h,speed:5,frame:0,colors:["#000000"],colorBack:"#ffe500",stepsPerColor:2,size:.65,sizeRange:0,spreading:.3,scale:.5}}],eo=(0,t.memo)(function({speed:e=Z.params.speed,frame:o=Z.params.frame,colorBack:a=Z.params.colorBack,colors:t=Z.params.colors,size:r=Z.params.size,sizeRange:i=Z.params.sizeRange,spreading:s=Z.params.spreading,stepsPerColor:l=Z.params.stepsPerColor,fit:n=Z.params.fit,scale:f=Z.params.scale,rotation:c=Z.params.rotation,originX:m=Z.params.originX,originY:d=Z.params.originY,offsetX:g=Z.params.offsetX,offsetY:h=Z.params.offsetY,worldWidth:x=Z.params.worldWidth,worldHeight:y=Z.params.worldHeight,...w}){let A={u_colorBack:_(a),u_colors:t.map(_),u_colorsCount:t.length,u_size:r,u_sizeRange:i,u_spreading:s,u_stepsPerColor:l,u_noiseTexture:D(),u_fit:v[n],u_scale:f,u_rotation:c,u_offsetX:g,u_offsetY:h,u_originX:m,u_originY:d,u_worldWidth:x,u_worldHeight:y};return(0,u.jsx)(p,{...w,speed:e,frame:o,fragmentShader:J,uniforms:A})},d),ea=`#version 300 es 666precision mediump float; 667 668uniform vec4 u_colorBack; 669uniform vec4 u_colorFill; 670uniform vec4 u_colorStroke; 671uniform float u_dotSize; 672uniform float u_gapX; 673uniform float u_gapY; 674uniform float u_strokeWidth; 675uniform float u_sizeRange; 676uniform float u_opacityRange; 677uniform float u_shape; 678 679in vec2 v_patternUV; 680 681out vec4 fragColor; 682 683${w} 684${U} 685 686float polygon(vec2 p, float N, float rot) { 687 float a = atan(p.x, p.y) + rot; 688 float r = TWO_PI / float(N); 689 690 return cos(floor(.5 + a / r) * r - a) * length(p); 691} 692 693void main() { 694 695 // x100 is a default multiplier between vertex and fragmant shaders 696 // we use it to avoid UV presision issues 697 vec2 shape_uv = 100. * v_patternUV; 698 699 vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
700 vec2 grid = fract(shape_uv / gap) + 1e-4; 701 vec2 grid_idx = floor(shape_uv / gap); 702 float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y)); 703 float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x)); 704 705 vec2 center = vec2(0.5) - 1e-3; 706 vec2 p = (grid - center) * vec2(u_gapX, u_gapY); 707 708 float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange); 709 float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange); 710 711 float dist; 712 if (u_shape < 0.5) { 713 // Circle 714 dist = length(p); 715 } else if (u_shape < 1.5) { 716 // Diamond 717 strokeWidth *= 1.5; 718 dist = polygon(1.5 * p, 4., .25 * PI); 719 } else if (u_shape < 2.5) { 720 // Square 721 dist = polygon(1.03 * p, 4., 1e-3); 722 } else { 723 // Triangle 724 strokeWidth *= 1.5; 725 p = p * 2. - 1.; 726 p *= .9; 727 p.y = 1. - p.y; 728 p.y -= .75 * baseSize; 729 dist = polygon(p, 3., 1e-3); 730 } 731 732 float edgeWidth = fwidth(dist); 733 float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth); 734 float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist); 735 float stroke = shapeOuter - shapeInner; 736 737 float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange); 738 stroke *= dotOpacity; 739 shapeInner *= dotOpacity; 740 741 stroke *= u_colorStroke.a; 742 shapeInner *= u_colorFill.a; 743 744 vec3 color = vec3(0.); 745 color += stroke * u_colorStroke.rgb; 746 color += shapeInner * u_colorFill.rgb; 747 color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a; 748 749 float opacity = 0.; 750 opacity += stroke; 751 opacity += shapeInner; 752 opacity += (1. - opacity) * u_colorBack.a; 753 754 fragColor = vec4(color, opacity); 755} 756`,et={circle:0,diamond:1,square:2,triangle:3},er={name:"Default",params:{...h,colorBack:"#000000",colorFill:"#ffffff",colorStroke:"#ffaa00",size:2,gapX:32,gapY:32,strokeWidth:0,sizeRange:0,opacityRange:0,shape:"circle"}},ei={name:"Triangles",params:{...h,colorBack:"#ffffff",colorFill:"#ffffff",colorStroke:"#808080",size:5,gapX:32,gapY:32,strokeWidth:1,sizeRange:0,opacityRange:0,shape:"triangle"}},es=[er,ei,{name:"Tree line",params:{...h,colorBack:"#f4fce7",colorFill:"#052e19",colorStroke:"#000000",size:8,gapX:20,gapY:90,strokeWidth:0,sizeRange:1,opacityRange:.6,shape:"circle"}},{name:"Wallpaper",params:{...h,colorBack:"#204030",colorFill:"#000000",colorStroke:"#bd955b",size:9,gapX:32,gapY:32,strokeWidth:1,sizeRange:0,opacityRange:0,shape:"diamond"}}],el=(0,t.memo)(function({colorBack:e=er.params.colorBack,colorFill:o=er.params.colorFill,colorStroke:a=er.params.colorStroke,size:t=er.params.size,gapX:r=er.params.gapX,gapY:i=er.params.gapY,strokeWidth:s=er.params.strokeWidth,sizeRange:l=er.params.sizeRange,opacityRange:n=er.params.opacityRange,shape:f=er.params.shape,fit:c=er.params.fit,scale:m=er.params.scale,rotation:d=er.params.rotation,originX:g=er.params.originX,originY:h=er.params.originY,offsetX:x=er.params.offsetX,offsetY:y=er.params.offsetY,worldWidth:w=er.params.worldWidth,worldHeight:A=er.params.worldHeight,maxPixelCount:b=0x136a400,...C}){let B={u_colorBack:_(e),u_colorFill:_(o),u_colorStroke:_(a),u_dotSize:t,u_gapX:r,u_gapY:i,u_strokeWidth:s,u_sizeRange:l,u_opacityRange:n,u_shape:et[f],u_fit:v[c],u_scale:m,u_rotation:d,u_offsetX:x,u_offsetY:y,u_originX:g,u_originY:h,u_worldWidth:w,u_worldHeight:A};return(0,u.jsx)(p,{...C,maxPixelCount:b,fragmentShader:ea,uniforms:B})},d),en={maxColorCount:10},ef=`#version 300 es 757precision mediump float; 758 759uniform float u_time; 760uniform float u_scale; 761 762uniform vec4 u_colors[${en.maxColorCount}]; 763uniform float u_colorsCount; 764uniform float u_stepsPerColor; 765uniform float u_softness; 766 767in vec2 v_patternUV; 768 769out vec4 fragColor; 770 771${U} 772 773float getNoise(vec2 uv, float t) { 774 float noise = .5 * snoise(uv - vec2(0., .3 * t)); 775 noise += .5 * snoise(2. * uv + vec2(0., .32 * t)); 776 777 return noise; 778} 779 780float steppedSmooth(float m, float steps, float softness) { 781 float stepT = floor(m * steps) / steps; 782 float f = m * steps - floor(m * steps); 783 float fw = steps * fwidth(m); 784 float smoothed = smoothstep(.5 - softness, min(1., .5 + softness + fw), f); 785 return stepT + smoothed / steps; 786} 787 788void main() { 789 vec2 shape_uv = v_patternUV; 790 shape_uv *= .1; 791 792 float t = .2 * u_time; 793 794 float shape = .5 + .5 * getNoise(shape_uv, t); 795 796 bool u_extraSides = true; 797 798 float mixer = shape * (u_colorsCount - 1.); 799 if (u_extraSides == true) { 800 mixer = (shape - .5 / u_colorsCount) * u_colorsCount; 801 } 802 803 float steps = max(1., u_stepsPerColor); 804 805 vec4 gradient = u_colors[0]; 806 gradient.rgb *= gradient.a; 807 for (int i = 1; i < ${en.maxColorCount}; i++) { 808 if (i >= int(u_colorsCount)) break; 809 810 float localM = clamp(mixer - float(i - 1), 0., 1.); 811 localM = steppedSmooth(localM, steps, .5 * u_softness); 812 813 vec4 c = u_colors[i]; 814 c.rgb *= c.a; 815 gradient = mix(gradient, c, localM); 816 } 817 818 if (u_extraSides == true) { 819 if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) { 820 float localM = mixer + 1.; 821 if (mixer > (u_colorsCount - 1.)) { 822 localM = mixer - (u_colorsCount - 1.); 823 } 824 localM = steppedSmooth(localM, steps, .5 * u_softness); 825 vec4 cFst = u_colors[0]; 826 cFst.rgb *= cFst.a; 827 vec4 cLast = u_colors[int(u_colorsCount - 1.)]; 828 cLast.rgb *= cLast.a; 829 gradient = mix(cLast, cFst, localM); 830 } 831 } 832 833 vec3 color = gradient.rgb; 834 float opacity = gradient.a; 835 836 ${k} 837 838 fragColor = vec4(color, opacity); 839} 840`,ec={name:"Default",params:{...h,scale:.6,speed:.5,frame:0,colors:["#4449CF","#FFD1E0","#F94446","#FFD36B","#FFFFFF"],stepsPerColor:2,softness:0}},eu={name:"Bubblegum",params:{...h,speed:2,frame:0,colors:["#ffffff","#ff9e9e","#5f57ff","#00f7ff"],stepsPerColor:1,softness:1,scale:1.6}},em=[ec,{name:"Spots",params:{...h,speed:.6,frame:0,colors:["#ff7b00","#f9ffeb","#320d82"],stepsPerColor:1,softness:0,scale:1}}
840,{name:"First contact",params:{...h,speed:2,frame:0,colors:["#e8cce6","#120d22","#442c44","#e6baba","#fff5f5"],stepsPerColor:2,softness:0,scale:.2}},eu],ep=(0,t.memo)(function({speed:e=ec.params.speed,frame:o=ec.params.frame,colors:a=ec.params.colors,stepsPerColor:t=ec.params.stepsPerColor,softness:r=ec.params.softness,fit:i=ec.params.fit,scale:s=ec.params.scale,rotation:l=ec.params.rotation,originX:n=ec.params.originX,originY:f=ec.params.originY,offsetX:c=ec.params.offsetX,offsetY:m=ec.params.offsetY,worldWidth:d=ec.params.worldWidth,worldHeight:g=ec.params.worldHeight,...h}){let x={u_colors:a.map(_),u_colorsCount:a.length,u_stepsPerColor:t,u_softness:r,u_fit:v[i],u_scale:s,u_rotation:l,u_offsetX:c,u_offsetY:m,u_originX:n,u_originY:f,u_worldWidth:d,u_worldHeight:g};return(0,u.jsx)(p,{...h,speed:e,frame:o,fragmentShader:ef,uniforms:x})},d),ed={maxColorCount:8,maxBallsCount:20},eg=`#version 300 es 841precision mediump float; 842 843uniform float u_time; 844 845uniform sampler2D u_noiseTexture; 846 847uniform vec4 u_colorBack; 848uniform vec4 u_colors[${ed.maxColorCount}]; 849uniform float u_colorsCount; 850uniform float u_size; 851uniform float u_sizeRange; 852uniform float u_count; 853 854in vec2 v_objectUV; 855 856out vec4 fragColor; 857 858${w} 859${B} 860float noise(float x) { 861 float i = floor(x); 862 float f = fract(x); 863 float u = f * f * (3.0 - 2.0 * f); 864 vec2 p0 = vec2(i, 0.0); 865 vec2 p1 = vec2(i + 1.0, 0.0); 866 return mix(randomR(p0), randomR(p1), u); 867} 868 869float getBallShape(vec2 uv, vec2 c, float p) { 870 float s = .5 * length(uv - c); 871 s = 1. - clamp(s, 0., 1.); 872 s = pow(s, p); 873 return s; 874} 875 876void main() { 877 vec2 shape_uv = v_objectUV; 878 879 shape_uv += .5; 880 881 const float firstFrameOffset = 2503.4; 882 float t = .2 * (u_time + firstFrameOffset); 883 884 vec3 totalColor = vec3(0.); 885 float totalShape = 0.; 886 float totalOpacity = 0.; 887 888 for (int i = 0; i < ${ed.maxBallsCount}; i++) { 889 if (i >= int(ceil(u_count))) break; 890 891 float idxFract = float(i) / float(${ed.maxBallsCount}); 892 float angle = TWO_PI * idxFract; 893 894 float speed = 1. - .2 * idxFract; 895 float noiseX = noise(angle * 10. + float(i) + t * speed); 896 float noiseY = noise(angle * 20. + float(i) - t * speed); 897 898 vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5); 899 900 int safeIndex = i % int(u_colorsCount + 0.5); 901 vec4 ballColor = u_colors[safeIndex]; 902 ballColor.rgb *= ballColor.a; 903 904 float sizeFrac = 1.; 905 if (float(i) > floor(u_count - 1.)) { 906 sizeFrac *= fract(u_count); 907 } 908 909 float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac); 910 shape *= pow(u_size, .2); 911 shape = smoothstep(0., 1., shape); 912 913 totalColor += ballColor.rgb * shape; 914 totalShape += shape; 915 totalOpacity += ballColor.a * shape; 916 } 917 918 totalColor /= max(totalShape, 1e-4); 919 totalOpacity /= max(totalShape, 1e-4); 920 921 float edge_width = fwidth(totalShape); 922 float finalShape = smoothstep(.4, .4 + edge_width, totalShape); 923 924 vec3 color = totalColor * finalShape; 925 float opacity = totalOpacity * finalShape; 926 927 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 928 color = color + bgColor * (1. - opacity); 929 opacity = opacity + u_colorBack.a * (1. - opacity); 930 931 ${k} 932 933 fragColor = vec4(color, opacity); 934} 935`,eh={name:"Default",params:{...g,scale:1,speed:1,frame:0,colorBack:"#000000",colors:["#6e33cc","#ff5500","#ffc105","#ffc800","#f585ff"],count:10,size:.83}},ev={name:"Ink Drops",params:{...g,scale:1,speed:2,frame:0,colorBack:"#ffffff00",colors:["#000000"],count:18,size:.1}},e_={name:"Background",params:{...g,speed:.5,frame:0,colors:["#ae00ff","#00ff95","#ffc105"],colorBack:"#2a273f",count:13,size:.81,scale:4,rotation:0,offsetX:-.3}},ex=[eh,ev,{name:"Solar",params:{...g,speed:1,frame:0,colors:["#ffc800","#ff5500","#ffc105"],colorBack:"#102f84",count:7,size:.75,scale:1}},e_],ey=(0,t.memo)(function({speed:e=eh.params.speed,frame:o=eh.params.frame,colorBack:a=eh.params.colorBack,colors:t=eh.params.colors,size:r=eh.params.size,count:i=eh.params.count,fit:s=eh.params.fit,rotation:l=eh.params.rotation,scale:n=eh.params.scale,originX:f=eh.params.originX,originY:c=eh.params.originY,offsetX:m=eh.params.offsetX,offsetY:d=eh.params.offsetY,worldWidth:g=eh.params.worldWidth,worldHeight:h=eh.params.worldHeight,...x}){let y={u_colorBack:_(a),u_colors:t.map(_),u_colorsCount:t.length,u_size:r,u_count:i,u_noiseTexture:D(),u_fit:v[s],u_rotation:l,u_scale:n,u_offsetX:m,u_offsetY:d,u_originX:f,u_originY:c,u_worldWidth:g,u_worldHeight:h};return(0,u.jsx)(p,{...x,speed:e,frame:o,fragmentShader:eg,uniforms:y})},d),ew=`#version 300 es 936precision mediump float; 937 938uniform vec4 u_colorFront; 939uniform vec4 u_colorBack; 940uniform float u_shape; 941uniform float u_frequency; 942uniform float u_amplitude; 943uniform float u_spacing; 944uniform float u_proportion; 945uniform float u_softness; 946 947in vec2 v_patternUV; 948 949out vec4 fragColor; 950 951${w} 952 953void main() { 954 vec2 shape_uv = v_patternUV; 955 shape_uv *= 4.; 956 957 float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI); 958 float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5); 959 float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI); 960 float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI)); 961 962 float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape)); 963 offset = mix(offset, irregular, smoothstep(1., 2., u_shape)); 964 offset = mix(offset, irregular2, smoothstep(2., 3., u_shape)); 965 offset *= 2. * u_amplitude; 966 967 float spacing = (.001 + u_spacing); 968 float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing); 969 970 float aa = .0001 + fwidth(shape); 971 float dc = 1. - clamp(u_proportion, 0., 1.); 972 float e0 = dc - u_softness - aa; 973 float e1 = dc + u_softness + aa;
974 float res = smoothstep(min(e0, e1), max(e0, e1), shape); 975 976 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 977 float fgOpacity = u_colorFront.a; 978 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 979 float bgOpacity = u_colorBack.a; 980 981 vec3 color = fgColor * res; 982 float opacity = fgOpacity * res; 983 984 color += bgColor * (1. - opacity); 985 opacity += bgOpacity * (1. - opacity); 986 987 fragColor = vec4(color, opacity); 988} 989`,eA={name:"Default",params:{...h,scale:.6,colorFront:"#ffbb00",colorBack:"#000000",shape:0,frequency:.5,amplitude:.5,spacing:1.2,proportion:.1,softness:0}},eb={name:"Groovy",params:{...h,scale:5,rotation:90,colorFront:"#fcfcee",colorBack:"#ff896b",shape:3,frequency:.2,amplitude:.25,spacing:1.17,proportion:.57,softness:0}},eC=[eA,eb,{name:"Tangled up",params:{...h,scale:.5,rotation:0,colorFront:"#133a41",colorBack:"#c2d8b6",shape:2.07,frequency:.44,amplitude:.57,spacing:1.05,proportion:.75,softness:0}},{name:"Ride the wave",params:{...h,scale:1.7,rotation:0,colorFront:"#fdffe6",colorBack:"#1f1f1f",shape:2.25,frequency:.2,amplitude:1,spacing:1.25,proportion:1,softness:0}}],eB=(0,t.memo)(function({colorFront:e=eA.params.colorFront,colorBack:o=eA.params.colorBack,shape:a=eA.params.shape,frequency:t=eA.params.frequency,amplitude:r=eA.params.amplitude,spacing:i=eA.params.spacing,proportion:s=eA.params.proportion,softness:l=eA.params.softness,fit:n=eA.params.fit,scale:f=eA.params.scale,rotation:c=eA.params.rotation,offsetX:m=eA.params.offsetX,offsetY:d=eA.params.offsetY,originX:g=eA.params.originX,originY:h=eA.params.originY,worldWidth:x=eA.params.worldWidth,worldHeight:y=eA.params.worldHeight,maxPixelCount:w=0x136a400,...A}){let b={u_colorFront:_(e),u_colorBack:_(o),u_shape:a,u_frequency:t,u_amplitude:r,u_spacing:i,u_proportion:s,u_softness:l,u_fit:v[n],u_scale:f,u_rotation:c,u_offsetX:m,u_offsetY:d,u_originX:g,u_originY:h,u_worldWidth:x,u_worldHeight:y};return(0,u.jsx)(p,{...A,fragmentShader:ew,uniforms:b})},d),eS=`#version 300 es 990precision mediump float; 991 992uniform float u_time; 993 994uniform vec4 u_colorFront; 995uniform vec4 u_colorBack; 996uniform float u_proportion; 997uniform float u_softness; 998uniform float u_octaveCount; 999uniform float u_persistence; 1000uniform float u_lacunarity; 1001 1002in vec2 v_patternUV; 1003 1004out vec4 fragColor; 1005 1006${w} 1007${b} 1008${C} 1009 1010float hash31(vec3 p) { 1011 p = fract(p * 0.3183099) + 0.1; 1012 p += dot(p, p.yzx + 19.19); 1013 return fract(p.x * (p.y + p.z)); 1014} 1015 1016vec3 gradientPredefined(float hash) { 1017 int idx = int(hash * 12.0) % 12; 1018 1019 if (idx == 0) return vec3(1, 1, 0); 1020 if (idx == 1) return vec3(-1, 1, 0); 1021 if (idx == 2) return vec3(1, -1, 0); 1022 if (idx == 3) return vec3(-1, -1, 0); 1023 if (idx == 4) return vec3(1, 0, 1); 1024 if (idx == 5) return vec3(-1, 0, 1); 1025 if (idx == 6) return vec3(1, 0, -1); 1026 if (idx == 7) return vec3(-1, 0, -1); 1027 if (idx == 8) return vec3(0, 1, 1); 1028 if (idx == 9) return vec3(0, -1, 1); 1029 if (idx == 10) return vec3(0, 1, -1); 1030 return vec3(0, -1, -1);// idx == 11 1031} 1032 1033float interpolateSafe(float v000, float v001, float v010, float v011, 1034float v100, float v101, float v110, float v111, vec3 t) { 1035 t = clamp(t, 0.0, 1.0); 1036 1037 float v00 = mix(v000, v100, t.x); 1038 float v01 = mix(v001, v101, t.x); 1039 float v10 = mix(v010, v110, t.x); 1040 float v11 = mix(v011, v111, t.x); 1041 1042 float v0 = mix(v00, v10, t.y); 1043 float v1 = mix(v01, v11, t.y); 1044 1045 return mix(v0, v1, t.z); 1046} 1047 1048vec3 fade(vec3 t) { 1049 return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); 1050} 1051 1052float perlinNoise(vec3 position, float seed) { 1053 position += vec3(seed * 127.1, seed * 311.7, seed * 74.7); 1054 1055 vec3 i = floor(position); 1056 vec3 f = fract(position); 1057 float h000 = hash31(i); 1058 float h001 = hash31(i + vec3(0, 0, 1)); 1059 float h010 = hash31(i + vec3(0, 1, 0)); 1060 float h011 = hash31(i + vec3(0, 1, 1)); 1061 float h100 = hash31(i + vec3(1, 0, 0)); 1062 float h101 = hash31(i + vec3(1, 0, 1)); 1063 float h110 = hash31(i + vec3(1, 1, 0)); 1064 float h111 = hash31(i + vec3(1, 1, 1)); 1065 vec3 g000 = gradientPredefined(h000); 1066 vec3 g001 = gradientPredefined(h001); 1067 vec3 g010 = gradientPredefined(h010); 1068 vec3 g011 = gradientPredefined(h011); 1069 vec3 g100 = gradientPredefined(h100); 1070 vec3 g101 = gradientPredefined(h101); 1071 vec3 g110 = gradientPredefined(h110); 1072 vec3 g111 = gradientPredefined(h111); 1073 float v000 = dot(g000, f - vec3(0, 0, 0)); 1074 float v001 = dot(g001, f - vec3(0, 0, 1)); 1075 float v010 = dot(g010, f - vec3(0, 1, 0)); 1076 float v011 = dot(g011, f - vec3(0, 1, 1)); 1077 float v100 = dot(g100, f - vec3(1, 0, 0)); 1078 float v101 = dot(g101, f - vec3(1, 0, 1)); 1079 float v110 = dot(g110, f - vec3(1, 1, 0)); 1080 float v111 = dot(g111, f - vec3(1, 1, 1)); 1081 1082 vec3 u = fade(f); 1083 return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u); 1084} 1085
1086float p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) { 1087 float value = 0.0; 1088 float amplitude = 1.0; 1089 float frequency = 10.0; 1090 float maxValue = 0.0; 1091 octaveCount = clamp(octaveCount, 1, 8); 1092 1093 for (int i = 0; i < octaveCount; i++) { 1094 float seed = float(i) * 0.7319; 1095 value += perlinNoise(position * frequency, seed) * amplitude; 1096 maxValue += amplitude; 1097 amplitude *= persistence; 1098 frequency *= lacunarity; 1099 } 1100 return value; 1101} 1102 1103float get_max_amp(float persistence, float octaveCount) { 1104 persistence = clamp(persistence * 0.999, 0.0, 0.999); 1105 octaveCount = clamp(octaveCount, 1.0, 8.0); 1106 1107 if (abs(persistence - 1.0) < 0.001) { 1108 return octaveCount; 1109 } 1110 1111 return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence)); 1112} 1113 1114void main() { 1115 vec2 uv = v_patternUV; 1116 uv *= .5; 1117 1118 float t = .2 * u_time; 1119 1120 vec3 p = vec3(uv, t); 1121 1122 float octCount = floor(u_octaveCount); 1123 float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity); 1124 1125 float max_amp = get_max_amp(u_persistence, octCount); 1126 float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0); 1127 float sharpness = clamp(u_softness, 0., 1.); 1128 float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001); 1129 float res = smoothstep( 1130 .5 - .5 * sharpness - smooth_w, 1131 .5 + .5 * sharpness + smooth_w, 1132 noise_normalized 1133 ); 1134 1135 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 1136 float fgOpacity = u_colorFront.a; 1137 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 1138 float bgOpacity = u_colorBack.a; 1139 1140 vec3 color = fgColor * res; 1141 float opacity = fgOpacity * res; 1142 1143 color += bgColor * (1. - opacity); 1144 opacity += bgOpacity * (1. - opacity); 1145 1146 ${k} 1147 1148 fragColor = vec4(color, opacity); 1149} 1150`,ek={name:"Default",params:{...h,speed:.5,frame:0,colorBack:"#632ad5",colorFront:"#fccff7",proportion:.35,softness:.1,octaveCount:1,persistence:1,lacunarity:1.5}},eU={name:"Nintendo Water",params:{...h,scale:5,speed:.4,frame:0,colorBack:"#2d69d4",colorFront:"#d1eefc",proportion:.42,softness:0,octaveCount:2,persistence:.55,lacunarity:1.8}},eR=[ek,eU,{name:"Moss",params:{...h,scale:1/.15,speed:.02,frame:0,colorBack:"#05ff4a",colorFront:"#262626",proportion:.65,softness:.35,octaveCount:6,persistence:1,lacunarity:2.55}},{name:"Worms",params:{...h,scale:.9,speed:0,frame:0,colorBack:"#ffffff00",colorFront:"#595959",proportion:.5,softness:0,octaveCount:1,persistence:1,lacunarity:1.5}}],eV=(0,t.memo)(function({speed:e=ek.params.speed,frame:o=ek.params.frame,colorFront:a=ek.params.colorFront,colorBack:t=ek.params.colorBack,proportion:r=ek.params.proportion,softness:i=ek.params.softness,octaveCount:s=ek.params.octaveCount,persistence:l=ek.params.persistence,lacunarity:n,fit:f=ek.params.fit,worldWidth:c=ek.params.worldWidth,worldHeight:m=ek.params.worldHeight,scale:d=ek.params.scale,rotation:g=ek.params.rotation,originX:h=ek.params.originX,originY:x=ek.params.originY,offsetX:y=ek.params.offsetX,offsetY:w=ek.params.offsetY,...A}){let b={u_colorBack:_(t),u_colorFront:_(a),u_proportion:r,u_softness:i??ek.params.softness,u_octaveCount:s??ek.params.octaveCount,u_persistence:l??ek.params.persistence,u_lacunarity:n??ek.params.lacunarity,u_fit:v[f],u_scale:d,u_rotation:g,u_offsetX:y,u_offsetY:w,u_originX:h,u_originY:x,u_worldWidth:c,u_worldHeight:m};return(0,u.jsx)(p,{...A,speed:e,frame:o,fragmentShader:eS,uniforms:b})},d),eF={maxColorCount:5},ez=`#version 300 es 1151precision mediump float; 1152 1153uniform float u_time; 1154 1155uniform float u_scale; 1156 1157uniform sampler2D u_noiseTexture; 1158 1159uniform vec4 u_colors[${eF.maxColorCount}]; 1160uniform float u_colorsCount; 1161 1162uniform float u_stepsPerColor; 1163uniform vec4 u_colorGlow; 1164uniform vec4 u_colorGap; 1165uniform float u_distortion; 1166uniform float u_gap; 1167uniform float u_glow; 1168 1169in vec2 v_patternUV; 1170 1171out vec4 fragColor; 1172 1173${w} 1174${S} 1175 1176vec4 voronoi(vec2 x, float t) { 1177 vec2 ip = floor(x); 1178 vec2 fp = fract(x); 1179 1180 vec2 mg, mr; 1181 float md = 8.; 1182 float rand = 0.; 1183 1184 for (int j = -1; j <= 1; j++) { 1185 for (int i = -1; i <= 1; i++) { 1186 vec2 g = vec2(float(i), float(j)); 1187 vec2 o = randomGB(ip + g); 1188 float raw_hash = o.x;
1189 o = .5 + u_distortion * sin(t + TWO_PI * o); 1190 vec2 r = g + o - fp; 1191 float d = dot(r, r); 1192 1193 if (d < md) { 1194 md = d; 1195 mr = r; 1196 mg = g; 1197 rand = raw_hash; 1198 } 1199 } 1200 } 1201 1202 md = 8.; 1203 for (int j = -2; j <= 2; j++) { 1204 for (int i = -2; i <= 2; i++) { 1205 vec2 g = mg + vec2(float(i), float(j)); 1206 vec2 o = randomGB(ip + g); 1207 o = .5 + u_distortion * sin(t + TWO_PI * o); 1208 vec2 r = g + o - fp; 1209 if (dot(mr - r, mr - r) > .00001) { 1210 md = min(md, dot(.5 * (mr + r), normalize(r - mr))); 1211 } 1212 } 1213 } 1214 1215 return vec4(md, mr, rand); 1216} 1217 1218void main() { 1219 vec2 shape_uv = v_patternUV; 1220 shape_uv *= 1.25; 1221 1222 float t = u_time; 1223 1224 vec4 voronoiRes = voronoi(shape_uv, t); 1225 1226 float shape = clamp(voronoiRes.w, 0., 1.); 1227 float mixer = shape * (u_colorsCount - 1.); 1228 mixer = (shape - .5 / u_colorsCount) * u_colorsCount; 1229 float steps = max(1., u_stepsPerColor); 1230 1231 vec4 gradient = u_colors[0]; 1232 gradient.rgb *= gradient.a; 1233 for (int i = 1; i < ${eF.maxColorCount}; i++) { 1234 if (i >= int(u_colorsCount)) break; 1235 float localT = clamp(mixer - float(i - 1), 0.0, 1.0); 1236 localT = round(localT * steps) / steps; 1237 vec4 c = u_colors[i]; 1238 c.rgb *= c.a; 1239 gradient = mix(gradient, c, localT); 1240 } 1241 1242 if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) { 1243 float localT = mixer + 1.; 1244 if (mixer > (u_colorsCount - 1.)) { 1245 localT = mixer - (u_colorsCount - 1.); 1246 } 1247 localT = round(localT * steps) / steps; 1248 vec4 cFst = u_colors[0]; 1249 cFst.rgb *= cFst.a; 1250 vec4 cLast = u_colors[int(u_colorsCount - 1.)]; 1251 cLast.rgb *= cLast.a; 1252 gradient = mix(cLast, cFst, localT); 1253 } 1254 1255 vec3 cellColor = gradient.rgb; 1256 float cellOpacity = gradient.a; 1257 1258 float glows = length(voronoiRes.yz * u_glow); 1259 glows = pow(glows, 1.5); 1260 1261 vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows); 1262 float opacity = cellOpacity + u_colorGlow.a * glows; 1263 1264 float edge = voronoiRes.x; 1265 float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap); 1266 edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge); 1267 1268 color = mix(u_colorGap.rgb * u_colorGap.a, color, edge); 1269 opacity = mix(u_colorGap.a, opacity, edge); 1270 1271 fragColor = vec4(color, opacity); 1272} 1273`,eM={name:"Default",params:{...h,speed:.5,frame:0,colors:["#ff8247","#ffe53d"],stepsPerColor:3,colorGlow:"#ffffff",colorGap:"#2e0000",distortion:.4,gap:.04,glow:0,scale:.5}},eI={name:"Cells",params:{...h,scale:.5,speed:.5,frame:0,colors:["#ffffff"],stepsPerColor:1,colorGlow:"#ffffff",colorGap:"#000000",distortion:.5,gap:.03,glow:.8}},eO={name:"Bubbles",params:{...h,scale:.75,speed:.5,frame:0,colors:["#83c9fb"],stepsPerColor:1,colorGlow:"#ffffff",colorGap:"#ffffff",distortion:.4,gap:0,glow:1}},eE=[eM,{name:"Lights",params:{...h,scale:3.3,speed:.5,frame:0,colors:["#fffffffc","#bbff00","#00ffff"],colorGlow:"#ff00d0",colorGap:"#ff00d0",stepsPerColor:2,distortion:.38,gap:0,glow:1}},eI,eO],eD=(0,t.memo)(function({speed:e=eM.params.speed,frame:o=eM.params.frame,colors:a=eM.params.colors,stepsPerColor:t=eM.params.stepsPerColor,colorGlow:r=eM.params.colorGlow,colorGap:i=eM.params.colorGap,distortion:s=eM.params.distortion,gap:l=eM.params.gap,glow:n=eM.params.glow,fit:f=eM.params.fit,scale:c=eM.params.scale,rotation:m=eM.params.rotation,originX:d=eM.params.originX,originY:g=eM.params.originY,offsetX:h=eM.params.offsetX,offsetY:x=eM.params.offsetY,worldWidth:y=eM.params.worldWidth,worldHeight:w=eM.params.worldHeight,...A}){let b={u_colors:a.map(_),u_colorsCount:a.length,u_stepsPerColor:t,u_colorGlow:_(r),u_colorGap:_(i),u_distortion:s,u_gap:l,u_glow:n,u_noiseTexture:D(),u_fit:v[f],u_scale:c,u_rotation:m,u_offsetX:h,u_offsetY:x,u_originX:d,u_originY:g,u_worldWidth:y,u_worldHeight:w};return(0,u.jsx)(p,{...A,speed:e,frame:o,fragmentShader:ez,uniforms:b})},d),eY={maxColorCount:10},eW=`#version 300 es 1274precision mediump float; 1275 1276uniform float u_time; 1277uniform float u_scale; 1278 1279uniform sampler2D u_noiseTexture; 1280 1281uniform vec4 u_colors[${eY.maxColorCount}]; 1282uniform float u_colorsCount; 1283uniform float u_proportion; 1284uniform float u_softness; 1285uniform float u_shape; 1286uniform float u_shapeScale; 1287uniform float u_distortion; 1288uniform float u_swirl; 1289uniform float u_swirlIterations; 1290 1291in vec2 v_patternUV; 1292 1293out vec4 fragColor; 1294 1295${w} 1296${A} 1297float randomG(vec2 p) { 1298 vec2 uv = floor(p) / 100. + .5; 1299 return texture(u_noiseTexture, fract(uv)).g; 1300} 1301float valueNoise(vec2 st) { 1302 vec2 i = floor(st); 1303 vec2 f = fract(st); 1304 float a = randomG(i); 1305 float b = randomG(i + vec2(1.0, 0.0)); 1306 float c = randomG(i + vec2(0.0, 1.0)); 1307 float d = randomG(i + vec2(1.0, 1.0)); 1308 vec2 u = f * f * (3.0 - 2.0 * f); 1309 float x1 = mix(a, b, u.x); 1310 float x2 = mix(c, d, u.x); 1311 return mix(x1, x2, u.y); 1312} 1313 1314 1315void main() { 1316 vec2 uv = v_patternUV; 1317 uv *= .5; 1318 1319 const float firstFrameOffset = 118.; 1320 float t = 0.0625 * (u_time + firstFrameOffset); 1321 1322 float n1 = valueNoise(uv * 1. + t); 1323 float n2 = valueNoise(uv * 2. - t); 1324 float angle = n1 * TWO_PI; 1325 uv.x += 4. * u_distortion * n2 * cos(angle); 1326 uv.y += 4. * u_distortion * n2 * sin(angle); 1327 1328 float swirl = u_swirl; 1329 for (int i = 1; i <= 20; i++) { 1330 if (i >= int(u_swirlIterations)) break; 1331 float iFloat = float(i); 1332 // swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv)))); 1333 uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y); 1334 uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x); 1335 } 1336 1337 float proportion = clamp(u_proportion, 0., 1.); 1338 1339 float shape = 0.; 1340 if (u_shape < .5) { 1341 vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale); 1342 shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y); 1343 shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5); 1344 } else if (u_shape < 1.5) { 1345 vec2 stripesShape_uv = uv * (2. * u_shapeScale); 1346 float f = fract(stripesShape_uv.y); 1347 shape = smoothstep(.0, .55, f) * (1.0 - smoothstep(.45, 1., f)); 1348 shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5); 1349 } else { 1350 float shapeScaling = 5. * (1. - u_shapeScale); 1351 float e0 = 0.45 - shapeScaling; 1352 float e1 = 0.55 + shapeScaling;
1353 shape = smoothstep(min(e0, e1), max(e0, e1), 1.0 - uv.y + 0.3 * (proportion - 0.5)); 1354 } 1355 1356 float mixer = shape * (u_colorsCount - 1.); 1357 vec4 gradient = u_colors[0]; 1358 gradient.rgb *= gradient.a; 1359 float aa = fwidth(shape); 1360 for (int i = 1; i < ${eY.maxColorCount}; i++) { 1361 if (i >= int(u_colorsCount)) break; 1362 float m = clamp(mixer - float(i - 1), 0.0, 1.0); 1363 1364 float localMixerStart = floor(m); 1365 float softness = .5 * u_softness + fwidth(m); 1366 float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart); 1367 float stepped = localMixerStart + smoothed; 1368 1369 m = mix(stepped, m, u_softness); 1370 1371 vec4 c = u_colors[i]; 1372 c.rgb *= c.a; 1373 gradient = mix(gradient, c, m); 1374 } 1375 1376 vec3 color = gradient.rgb; 1377 float opacity = gradient.a; 1378 1379 ${k} 1380 1381 fragColor = vec4(color, opacity); 1382} 1383`,eP={checks:0,stripes:1,edge:2},eT={name:"Default",params:{...h,rotation:0,speed:1,frame:0,colors:["#121212","#9470ff","#121212","#8838ff"],proportion:.45,softness:1,distortion:.25,swirl:.8,swirlIterations:10,shapeScale:.1,shape:"checks"}},eG={name:"Cauldron Pot",params:{...h,scale:.9,rotation:160,speed:10,frame:0,colors:["#a7e58b","#324472","#0a180d"],proportion:.64,softness:1.5,distortion:.2,swirl:.86,swirlIterations:7,shapeScale:.6,shape:"edge"}},eN={name:"Live Ink",params:{...h,scale:1.2,rotation:44,offsetY:-.3,speed:2.5,frame:0,colors:["#111314","#9faeab","#f3fee7","#f3fee7"],proportion:.05,softness:0,distortion:.25,swirl:.8,swirlIterations:10,shapeScale:.28,shape:"checks"}},eQ={name:"Kelp",params:{...h,scale:.8,rotation:50,speed:20,frame:0,colors:["#dbff8f","#404f3e","#091316"],proportion:.67,softness:0,distortion:0,swirl:.2,swirlIterations:3,shapeScale:1,shape:"stripes"}},eX=[eT,eG,eN,eQ,{name:"Nectar",params:{...h,scale:2,offsetY:.6,rotation:0,speed:4.2,frame:0,colors:["#151310","#d3a86b","#f0edea"],proportion:.24,softness:1,distortion:.21,swirl:.57,swirlIterations:10,shapeScale:.75,shape:"edge"}},{name:"Passion",params:{...h,scale:2.5,rotation:1.35,speed:3,frame:0,colors:["#3b1515","#954751","#ffc085"],proportion:.5,softness:1,distortion:.09,swirl:.9,swirlIterations:6,shapeScale:.25,shape:"checks"}}],eH=(0,t.memo)(function({speed:e=eT.params.speed,frame:o=eT.params.frame,colors:a=eT.params.colors,proportion:t=eT.params.proportion,softness:r=eT.params.softness,distortion:i=eT.params.distortion,swirl:s=eT.params.swirl,swirlIterations:l=eT.params.swirlIterations,shapeScale:n=eT.params.shapeScale,shape:f=eT.params.shape,fit:c=eT.params.fit,scale:m=eT.params.scale,rotation:d=eT.params.rotation,originX:g=eT.params.originX,originY:h=eT.params.originY,offsetX:x=eT.params.offsetX,offsetY:y=eT.params.offsetY,worldWidth:w=eT.params.worldWidth,worldHeight:A=eT.params.worldHeight,...b}){let C={u_colors:a.map(_),u_colorsCount:a.length,u_proportion:t,u_softness:r,u_distortion:i,u_swirl:s,u_swirlIterations:l,u_shapeScale:n,u_shape:eP[f],u_noiseTexture:D(),u_scale:m,u_rotation:d,u_fit:v[c],u_offsetX:x,u_offsetY:y,u_originX:g,u_originY:h,u_worldWidth:w,u_worldHeight:A};return(0,u.jsx)(p,{...b,speed:e,frame:o,fragmentShader:eW,uniforms:C})},d),eL={maxColorCount:5},ej=`#version 300 es 1384precision mediump float; 1385 1386uniform float u_time; 1387 1388uniform sampler2D u_noiseTexture; 1389 1390uniform vec4 u_colorBack; 1391uniform vec4 u_colorBloom; 1392uniform vec4 u_colors[${eL.maxColorCount}]; 1393uniform float u_colorsCount; 1394 1395uniform float u_density; 1396uniform float u_spotty; 1397uniform float u_midSize; 1398uniform float u_midIntensity; 1399uniform float u_intensity; 1400uniform float u_bloom; 1401 1402in vec2 v_objectUV; 1403 1404out vec4 fragColor; 1405 1406${w} 1407${A} 1408${B} 1409float valueNoise(vec2 st) { 1410 vec2 i = floor(st); 1411 vec2 f = fract(st); 1412 float a = randomR(i); 1413 float b = randomR(i + vec2(1.0, 0.0)); 1414 float c = randomR(i + vec2(0.0, 1.0)); 1415 float d = randomR(i + vec2(1.0, 1.0)); 1416 vec2 u = f * f * (3.0 - 2.0 * f); 1417 float x1 = mix(a, b, u.x); 1418 float x2 = mix(c, d, u.x); 1419 return mix(x1, x2, u.y); 1420} 1421 1422${b} 1423 1424float raysShape(vec2 uv, float r, float freq, float intensity, float radius) { 1425 float a = atan(uv.y, uv.x); 1426 vec2 left = vec2(a * freq, r); 1427 vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r); 1428 float n_left = pow(valueNoise(left), intensity); 1429 float n_right = pow(valueNoise(right), intensity); 1430 float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x)); 1431 return shape; 1432} 1433 1434void main() { 1435 vec2 shape_uv = v_objectUV; 1436 1437 float t = .2 * u_time; 1438 1439 float radius = length(shape_uv); 1440 float spots = 6.5 * abs(u_spotty); 1441 1442 float intensity = 4. - 3. * clamp(u_intensity, 0., 1.); 1443 1444 float delta = 1. - smoothstep(0., 1., radius); 1445 1446 float midSize = 10. * abs(u_midSize); 1447 float ms_lo = 0.02 * midSize; 1448 float ms_hi = max(midSize, 1e-6); 1449 float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius)); 1450 middleShape = pow(middleShape, 5.0); 1451 1452 vec3 accumColor = vec3(0.0); 1453 float accumAlpha = 0.0; 1454 1455 for (int i = 0; i < ${eL.maxColorCount}; i++) { 1456 if (i >= int(u_colorsCount)) break; 1457
1458 vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0); 1459 1460 float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t; 1461 float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t; 1462 float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.); 1463 float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density; 1464 1465 float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius); 1466 ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius); 1467 ray += (1. + 4. * ray) * middleShape; 1468 ray = clamp(ray, 0.0, 1.0); 1469 1470 float srcAlpha = u_colors[i].a * ray; 1471 vec3 srcColor = u_colors[i].rgb * srcAlpha; 1472 1473 vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor; 1474 float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha; 1475 1476 vec3 addBlendColor = accumColor + srcColor; 1477 float addBlendAlpha = accumAlpha + srcAlpha; 1478 1479 accumColor = mix(alphaBlendColor, addBlendColor, u_bloom); 1480 accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom); 1481 } 1482 1483 float overlayAlpha = u_colorBloom.a; 1484 vec3 overlayColor = u_colorBloom.rgb * overlayAlpha; 1485 1486 vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor; 1487 accumColor = mix(accumColor, colorWithOverlay, u_bloom); 1488 1489 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 1490 1491 vec3 color = accumColor + (1. - accumAlpha) * bgColor; 1492 float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a; 1493 color = clamp(color, 0., 1.); 1494 opacity = clamp(opacity, 0., 1.); 1495 1496 ${k} 1497 1498 fragColor = vec4(color, opacity); 1499} 1500`,eK={name:"Default",params:{...g,offsetX:0,offsetY:-.55,colorBack:"#000000",colorBloom:"#0000ff",colors:["#a600ff6e","#6200fff0","#ffffff","#33fff5"],density:.3,spotty:.3,midIntensity:.4,midSize:.2,intensity:.8,bloom:.4,speed:.75,frame:0}},eq={name:"Warp",params:{...g,colorBack:"#000000",colorBloom:"#222288",colors:["#ff47d4","#ff8c00","#ffffff"],density:.45,spotty:.15,midIntensity:.4,midSize:.33,intensity:.79,bloom:.4,speed:2,frame:0}},eJ=[eK,eq,{name:"Linear",params:{...g,offsetX:.2,offsetY:-.8,colorBack:"#000000",colorBloom:"#eeeeee",colors:["#ffffff1f","#ffffff3d","#ffffff29"],density:.41,spotty:.25,midSize:.1,midIntensity:.75,intensity:.79,bloom:1,speed:.5,frame:0}},{name:"Ether",params:{...g,offsetX:-.6,colorBack:"#090f1d",colorBloom:"#ffffff",colors:["#148effa6","#c4dffebe","#232a47"],density:.03,spotty:.77,midSize:.1,midIntensity:.6,intensity:.6,bloom:.6,speed:1,frame:0}}],eZ=(0,t.memo)(function({speed:e=eK.params.speed,frame:o=eK.params.frame,colorBloom:a=eK.params.colorBloom,colorBack:t=eK.params.colorBack,colors:r=eK.params.colors,density:i=eK.params.density,spotty:s=eK.params.spotty,midIntensity:l=eK.params.midIntensity,midSize:n=eK.params.midSize,intensity:f=eK.params.intensity,bloom:c=eK.params.bloom,fit:m=eK.params.fit,scale:d=eK.params.scale,rotation:g=eK.params.rotation,originX:h=eK.params.originX,originY:x=eK.params.originY,offsetX:y=eK.params.offsetX,offsetY:w=eK.params.offsetY,worldWidth:A=eK.params.worldWidth,worldHeight:b=eK.params.worldHeight,...C}){let B={u_colorBloom:_(a),u_colorBack:_(t),u_colors:r.map(_),u_colorsCount:r.length,u_density:i,u_spotty:s,u_midIntensity:l,u_midSize:n,u_intensity:f,u_bloom:c,u_noiseTexture:D(),u_fit:v[m],u_scale:d,u_rotation:g,u_offsetX:y,u_offsetY:w,u_originX:h,u_originY:x,u_worldWidth:A,u_worldHeight:b};return(0,u.jsx)(p,{...C,speed:e,frame:o,fragmentShader:ej,uniforms:B})},d),e$=`#version 300 es 1501precision mediump float; 1502 1503uniform float u_time; 1504 1505uniform vec4 u_colorBack; 1506uniform vec4 u_colorFront; 1507uniform float u_density; 1508uniform float u_distortion; 1509uniform float u_strokeWidth; 1510uniform float u_strokeCap; 1511uniform float u_strokeTaper; 1512uniform float u_noise; 1513uniform float u_noiseFrequency; 1514uniform float u_softness; 1515 1516in vec2 v_patternUV; 1517 1518out vec4 fragColor; 1519 1520${w} 1521${U} 1522 1523void main() { 1524 vec2 uv = 2. * v_patternUV; 1525 1526 float t = u_time; 1527 float l = length(uv); 1528 float density = clamp(u_density, 0., 1.); 1529 l = pow(max(l, 1e-6), density); 1530 float angle = atan(uv.y, uv.x) - t; 1531 float angleNormalised = angle / TWO_PI; 1532 1533 angleNormalised += .125 * u_noise * snoise(16. * pow(u_noiseFrequency, 3.) * uv); 1534 1535 float offset = l + angleNormalised; 1536 offset -= u_distortion * (sin(4. * l - .5 * t) * cos(PI + l + .5 * t)); 1537 float stripe = fract(offset); 1538 1539 float shape = 2. * abs(stripe - .5); 1540 float width = 1. - clamp(u_strokeWidth, .005 * u_strokeTaper, 1.); 1541 1542 1543 float wCap = mix(width, (1. - stripe) * (1. - step(.5, stripe)), (1. - clamp(l, 0., 1.))); 1544 width = mix(width, wCap, u_strokeCap); 1545 width *= (1. - clamp(u_strokeTaper, 0., 1.) * l); 1546 1547 float fw = fwidth(offset); 1548 float fwMult = 4. - 3. * (smoothstep(.05, .4, 2. * u_strokeWidth) * smoothstep(.05, .4, 2. * (1. - u_strokeWidth))
1548); 1549 float pixelSize = mix(fwMult * fw, fwidth(shape), clamp(fw, 0., 1.)); 1550 pixelSize = mix(pixelSize, .002, u_strokeCap * (1. - clamp(l, 0., 1.))); 1551 1552 float res = smoothstep(width - pixelSize - u_softness, width + pixelSize + u_softness, shape); 1553 1554 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 1555 float fgOpacity = u_colorFront.a; 1556 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 1557 float bgOpacity = u_colorBack.a; 1558 1559 vec3 color = fgColor * res; 1560 float opacity = fgOpacity * res; 1561 1562 color += bgColor * (1. - opacity); 1563 opacity += bgOpacity * (1. - opacity); 1564 1565 ${k} 1566 1567 fragColor = vec4(color, opacity); 1568} 1569`,e0={name:"Default",params:{...h,scale:1,colorBack:"#001429",colorFront:"#79D1FF",density:1,distortion:0,strokeWidth:.5,strokeTaper:0,strokeCap:0,noise:0,noiseFrequency:0,softness:0,speed:1,frame:0}},e1={name:"Droplet",params:{...h,colorBack:"#effafe",colorFront:"#bf40a0",density:.9,distortion:0,strokeWidth:.75,strokeTaper:.18,strokeCap:1,noise:.74,noiseFrequency:.33,softness:.02,speed:1,frame:0}},e2=[e0,{name:"Jungle",params:{...h,scale:1.3,density:.5,colorBack:"#a0ef2a",colorFront:"#288b18",distortion:0,strokeWidth:.5,strokeTaper:0,strokeCap:0,noise:1,noiseFrequency:.25,softness:0,speed:.75,frame:0}},e1,{name:"Swirl",params:{...h,scale:.45,colorBack:"#b3e6d9",colorFront:"#1a2b4d",density:.2,distortion:0,strokeWidth:.5,strokeTaper:0,strokeCap:0,noise:0,noiseFrequency:.3,softness:.5,speed:1,frame:0}}],e5=(0,t.memo)(function({speed:e=e0.params.speed,frame:o=e0.params.frame,colorBack:a=e0.params.colorBack,colorFront:t=e0.params.colorFront,density:r=e0.params.density,distortion:i=e0.params.distortion,strokeWidth:s=e0.params.strokeWidth,strokeTaper:l=e0.params.strokeTaper,strokeCap:n=e0.params.strokeCap,noiseFrequency:f=e0.params.noiseFrequency,noise:c=e0.params.noise,softness:m=e0.params.softness,fit:d=e0.params.fit,rotation:g=e0.params.rotation,scale:h=e0.params.scale,originX:x=e0.params.originX,originY:y=e0.params.originY,offsetX:w=e0.params.offsetX,offsetY:A=e0.params.offsetY,worldWidth:b=e0.params.worldWidth,worldHeight:C=e0.params.worldHeight,...B}){let S={u_colorBack:_(a),u_colorFront:_(t),u_density:r,u_distortion:i,u_strokeWidth:s,u_strokeTaper:l,u_strokeCap:n,u_noiseFrequency:f,u_noise:c,u_softness:m,u_fit:v[d],u_scale:h,u_rotation:g,u_offsetX:w,u_offsetY:A,u_originX:x,u_originY:y,u_worldWidth:b,u_worldHeight:C};return(0,u.jsx)(p,{...B,speed:e,frame:o,fragmentShader:e$,uniforms:S})},d),e3={maxColorCount:10},e4=`#version 300 es 1570precision mediump float; 1571 1572uniform float u_time; 1573 1574uniform vec4 u_colorBack; 1575uniform vec4 u_colors[${e3.maxColorCount}]; 1576uniform float u_colorsCount; 1577uniform float u_bandCount; 1578uniform float u_twist; 1579uniform float u_center; 1580uniform float u_proportion; 1581uniform float u_softness; 1582uniform float u_noise; 1583uniform float u_noiseFrequency; 1584 1585in vec2 v_objectUV; 1586 1587out vec4 fragColor; 1588 1589${w} 1590${U} 1591${A} 1592 1593void main() { 1594 vec2 shape_uv = v_objectUV; 1595 1596 float l = length(shape_uv); 1597 l = max(1e-4, l); 1598 1599 float t = u_time; 1600 1601 float angle = ceil(u_bandCount) * atan(shape_uv.y, shape_uv.x) + t; 1602 float angle_norm = angle / TWO_PI; 1603 1604 float twist = 3. * clamp(u_twist, 0., 1.); 1605 float offset = pow(l, -twist) + angle_norm; 1606 1607 float shape = fract(offset); 1608 shape = 1. - abs(2. * shape - 1.); 1609 shape += u_noise * snoise(15. * pow(u_noiseFrequency, 2.) * shape_uv); 1610 1611 float mid = smoothstep(.2, .2 + .8 * u_center, pow(l, twist)); 1612 shape = mix(0., shape, mid); 1613 1614 float proportion = clamp(u_proportion, 0., 1.); 1615 float exponent = mix(.25, 1., proportion * 2.); 1616 exponent = mix(exponent, 10., max(0., proportion * 2. - 1.)); 1617 shape = pow(shape, exponent); 1618 1619 float mixer = shape * u_colorsCount; 1620 vec4 gradient = u_colors[0]; 1621 gradient.rgb *= gradient.a; 1622 1623 float outerShape = 0.; 1624 for (int i = 1; i < ${e3.maxColorCount+1}; i++) { 1625 if (i > int(u_colorsCount)) break; 1626 1627 float m = clamp(mixer - float(i - 1), 0., 1.); 1628 float aa = fwidth(m); 1629 m = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, m); 1630 1631 if (i == 1) { 1632 outerShape = m; 1633 } 1634 1635 vec4 c = u_colors[i - 1]; 1636 c.rgb *= c.a; 1637 gradient = mix(gradient, c, m); 1638 } 1639 1640 float midAA = .1 * fwidth(pow(l, -twist)); 1641 float outerMid = smoothstep(.2, .2 + midAA, pow(l, twist)); 1642 outerShape = mix(0., outerShape, outerMid); 1643 1644 vec3 color = gradient.rgb * outerShape; 1645 float opacity = gradient.a * outerShape; 1646 1647 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 1648 color = color + bgColor * (1.0 - opacity); 1649 opacity = opacity + u_colorBack.a * (1.0 - opacity); 1650 1651 ${k} 1652 1653 fragColor = vec4(color, opacity); 1654} 1655`,e8={name:"Default",params:{...g,speed:.32,frame:0,colorBack:"#330000",colors:["#ffd1d1","#ff8a8a","#660000"],bandCount:4,twist:.1,center:.2,proportion:.5,softness:0,noiseFrequency:.4,noise:.2}},e9={name:"Opening",params:{...g,offsetX:-.4,offsetY:1,speed:.5,frame:0,colorBack:"#ff8b61",colors:["#fefff0","#ffd8bd","#ff8b61"],bandCount:2,twist:.3,center:.2,proportion:.5,softness:0,noiseFrequency:0,noise:0,scale:1}},e6=[e8,{name:"007",params:{...g,speed:1,frame:0,colorBack:"#E9E7DA",colors:["#000000"],bandCount:5,twist:.3,center:0,proportion:0,softness:0,noiseFrequency:.5,noise:0}},e9,{name:"Candy",params:{...g,speed:1,frame:0,colorBack:"#ffcd66",colors:["#6bbceb","#d7b3ff","#ff9fff"],bandCount:2,twist:.15,center:.2,proportion:.5,softness:1,noiseFrequency:.5,noise:0}}],e7=(0,t.memo)(function({speed:e=e8.params.speed,frame:o=e8.params.frame,colorBack:a=e8.params.colorBack,colors:t=e8.params.colors,bandCount:r=e8.params.bandCount,twist:i=e8.params.twist,center:s=e8.params.center,proportion:l=e8.params.proportion,softness:n=e8.params.softness,noiseFrequency:f=e8.params.noiseFrequency,noise:c=e8.params.noise,fit:m=e8.params.fit,rotation:d=e8.params.rotation,scale:g=e8.params.scale,originX:h=e8.params.originX,originY:x=e8.params.originY,offsetX:y=e8.params.offsetX,offsetY:w=e8.params.offsetY,worldWidth:A=e8.params.worldWidth,worldHeight:b=e8.params.worldHeight,...C}
1655){let B={u_colorBack:_(a),u_colors:t.map(_),u_colorsCount:t.length,u_bandCount:r,u_twist:i,u_center:s,u_proportion:l,u_softness:n,u_noiseFrequency:f,u_noise:c,u_fit:v[m],u_scale:g,u_rotation:d,u_offsetX:y,u_offsetY:w,u_originX:h,u_originY:x,u_worldWidth:A,u_worldHeight:b};return(0,u.jsx)(p,{...C,speed:e,frame:o,fragmentShader:e4,uniforms:B})},d),oe=`#version 300 es 1656precision mediump float; 1657 1658uniform float u_time; 1659 1660uniform vec2 u_resolution; 1661uniform float u_pixelRatio; 1662uniform float u_originX; 1663uniform float u_originY; 1664uniform float u_worldWidth; 1665uniform float u_worldHeight; 1666uniform float u_fit; 1667uniform float u_scale; 1668uniform float u_rotation; 1669uniform float u_offsetX; 1670uniform float u_offsetY; 1671 1672uniform float u_pxSize; 1673uniform vec4 u_colorBack; 1674uniform vec4 u_colorFront; 1675uniform float u_shape; 1676uniform float u_type; 1677 1678out vec4 fragColor; 1679 1680${U} 1681${w} 1682${b} 1683${C} 1684 1685float getSimplexNoise(vec2 uv, float t) { 1686 float noise = .5 * snoise(uv - vec2(0., .3 * t)); 1687 noise += .5 * snoise(2. * uv + vec2(0., .32 * t)); 1688 1689 return noise; 1690} 1691 1692const int bayer2x2[4] = int[4](0, 2, 3, 1); 1693const int bayer4x4[16] = int[16]( 16940, 8, 2, 10, 169512, 4, 14, 6, 16963, 11, 1, 9, 169715, 7, 13, 5 1698); 1699 1700const int bayer8x8[64] = int[64]( 17010, 32, 8, 40, 2, 34, 10, 42, 170248, 16, 56, 24, 50, 18, 58, 26, 170312, 44, 4, 36, 14, 46, 6, 38, 170460, 28, 52, 20, 62, 30, 54, 22, 17053, 35, 11, 43, 1, 33, 9, 41, 170651, 19, 59, 27, 49, 17, 57, 25, 170715, 47, 7, 39, 13, 45, 5, 37, 170863, 31, 55, 23, 61, 29, 53, 21 1709); 1710 1711float getBayerValue(vec2 uv, int size) { 1712 ivec2 pos = ivec2(fract(uv / float(size)) * float(size)); 1713 int index = pos.y * size + pos.x; 1714 1715 if (size == 2) { 1716 return float(bayer2x2[index]) / 4.0; 1717 } else if (size == 4) { 1718 return float(bayer4x4[index]) / 16.0; 1719 } else if (size == 8) { 1720 return float(bayer8x8[index]) / 64.0; 1721 } 1722 return 0.0; 1723} 1724 1725 1726void main() { 1727 float t = .5 * u_time; 1728 1729 float pxSize = u_pxSize * u_pixelRatio; 1730 vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution; 1731 pxSizeUV /= pxSize; 1732 vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize; 1733 vec2 normalizedUV = canvasPixelizedUV / u_resolution; 1734 1735 vec2 ditheringNoiseUV = canvasPixelizedUV; 1736 vec2 shapeUV = normalizedUV; 1737 1738 vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5); 1739 vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight); 1740 givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio; 1741 float r = u_rotation * PI / 180.; 1742 mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r)); 1743 vec2 graphicOffset = vec2(-u_offsetX, u_offsetY); 1744 1745 float patternBoxRatio = givenBoxSize.x / givenBoxSize.y; 1746 vec2 boxSize = vec2( 1747 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 1748 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 1749 ); 1750 1751 if (u_shape > 3.5) { 1752 vec2 objectBoxSize = vec2(0.); 1753 // fit = none 1754 objectBoxSize.x = min(boxSize.x, boxSize.y); 1755 if (u_fit == 1.) { // fit = contain 1756 objectBoxSize.x = min(u_resolution.x, u_resolution.y); 1757 } else if (u_fit == 2.) { // fit = cover 1758 objectBoxSize.x = max(u_resolution.x, u_resolution.y); 1759 } 1760 objectBoxSize.y = objectBoxSize.x; 1761 vec2 objectWorldScale = u_resolution.xy / objectBoxSize; 1762 1763 shapeUV *= objectWorldScale; 1764 shapeUV += boxOrigin * (objectWorldScale - 1.); 1765 shapeUV += vec2(-u_offsetX, u_offsetY); 1766 shapeUV /= u_scale; 1767 shapeUV = graphicRotation * shapeUV; 1768 } else { 1769 vec2 patternBoxSize = vec2(0.); 1770 // fit = none 1771 patternBoxSize.x = patternBoxRatio * min(boxSize.x / patternBoxRatio, boxSize.y); 1772 float patternWorldNoFitBoxWidth = patternBoxSize.x; 1773 if (u_fit == 1.) { // fit = contain 1774 patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y); 1775 } else if (u_fit == 2.) { // fit = cover 1776 patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y); 1777 } 1778 patternBoxSize.y = patternBoxSize.x / patternBoxRatio; 1779 vec2 patternWorldScale = u_resolution.xy / patternBoxSize; 1780 1781 shapeUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale; 1782 shapeUV += boxOrigin; 1783 shapeUV -= boxOrigin / patternWorldScale; 1784 shapeUV *= u_resolution.xy; 1785 shapeUV /= u_pixelRatio; 1786 if (u_fit > 0.) { 1787 shapeUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x); 1788 } 1789 shapeUV /= u_scale; 1790 shapeUV = graphicRotation * shapeUV; 1791 shapeUV += boxOrigin / patternWorldScale; 1792 shapeUV -= boxOrigin; 1793 shapeUV += .5; 1794 } 1795 1796 float shape = 0.; 1797 if (u_shape < 1.5) { 1798 // Simplex noise 1799 shapeUV *= .001; 1800 1801 shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t); 1802 shape = smoothstep(0.3, 0.9, shape); 1803 1804 } else if (u_shape < 2.5) { 1805 // Warp 1806 shapeUV *= .003; 1807 1808 for (float i = 1.0; i < 6.0; i++) { 1809 shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t); 1810 shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t); 1811 } 1812 1813 shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x))); 1814 shape = smoothstep(0.02, 1., shape); 1815 1816 } else if (u_shape < 3.5) { 1817 // Dots 1818 shapeUV *= .05; 1819 1820 float stripeIdx = floor(2. * shapeUV.x / TWO_PI); 1821 float rand = hash11(stripeIdx * 10.); 1822 rand = sign(rand - .5) * pow(.1 + abs(rand), .4); 1823 shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t); 1824 shape = pow(abs(shape), 6.); 1825 1826 } else if (u_shape < 4.5) { 1827 // Sine wave 1828 shapeUV *= 4.; 1829 1830 float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t)); 1831 shape = 1. - smoothstep(-1., 1., shapeUV.y + wave); 1832 1833 } else if (u_shape < 5.5) { 1834 // Ripple 1835 1836 float dist = length(shapeUV); 1837 float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5; 1838 shape = waves; 1839 1840 } else if (u_shape < 6.5) { 1841 // Swirl 1842 1843 float l = length(shapeUV); 1844 float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t; 1845 float twist = 1.2; 1846 float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI; 1847 float mid = smoothstep(0., 1., pow(l, twist)); 1848 shape = mix(0., fract(offset), mid); 1849 1850 } else { 1851 // Sphere 1852 shapeUV *= 2.; 1853 1854 float d = 1. - pow(length(shapeUV), 2.); 1855 vec3 pos = vec3(shapeUV, sqrt(max(0., d)));
1856 vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t))); 1857 shape = .5 + .5 * dot(lightPos, pos); 1858 shape *= step(0., d); 1859 } 1860 1861 1862 int type = int(floor(u_type)); 1863 float dithering = 0.0; 1864 1865 switch (type) { 1866 case 1: { 1867 dithering = step(hash21(ditheringNoiseUV), shape); 1868 } break; 1869 case 2: 1870 dithering = getBayerValue(pxSizeUV, 2); 1871 break; 1872 case 3: 1873 dithering = getBayerValue(pxSizeUV, 4); 1874 break; 1875 default : 1876 dithering = getBayerValue(pxSizeUV, 8); 1877 break; 1878 } 1879 1880 dithering -= .5; 1881 float res = step(.5, shape + dithering); 1882 1883 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 1884 float fgOpacity = u_colorFront.a; 1885 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 1886 float bgOpacity = u_colorBack.a; 1887 1888 vec3 color = fgColor * res; 1889 float opacity = fgOpacity * res; 1890 1891 color += bgColor * (1. - opacity); 1892 opacity += bgOpacity * (1. - opacity); 1893 1894 fragColor = vec4(color, opacity); 1895} 1896`,oo={simplex:1,warp:2,dots:3,wave:4,ripple:5,swirl:6,sphere:7},oa={random:1,"2x2":2,"4x4":3,"8x8":4},ot={name:"Default",params:{...h,speed:1,frame:0,scale:.6,colorBack:"#000000",colorFront:"#00b2ff",shape:"sphere",type:"4x4",size:2}},or={name:"Sine Wave",params:{...h,speed:1,frame:0,colorBack:"#730d54",colorFront:"#00becc",shape:"wave",type:"4x4",size:11,scale:1.2}},oi={name:"Bugs",params:{...h,speed:1,frame:0,colorBack:"#000000",colorFront:"#008000",shape:"dots",type:"random",size:9}},os={name:"Ripple",params:{...g,speed:1,frame:0,colorBack:"#603520",colorFront:"#c67953",shape:"ripple",type:"2x2",size:3}},ol={name:"Swirl",params:{...g,speed:1,frame:0,colorBack:"#00000000",colorFront:"#47a8e1",shape:"swirl",type:"8x8",size:2}},on=[ot,{name:"Warp",params:{...g,speed:1,frame:0,colorBack:"#301c2a",colorFront:"#56ae6c",shape:"warp",type:"4x4",size:2.5}},or,os,oi,ol],of=(0,t.memo)(function({speed:e=ot.params.speed,frame:o=ot.params.frame,colorBack:a=ot.params.colorBack,colorFront:t=ot.params.colorFront,shape:r=ot.params.shape,type:i=ot.params.type,pxSize:s,size:l=void 0===s?ot.params.size:s,fit:n=ot.params.fit,scale:f=ot.params.scale,rotation:c=ot.params.rotation,originX:m=ot.params.originX,originY:d=ot.params.originY,offsetX:g=ot.params.offsetX,offsetY:h=ot.params.offsetY,worldWidth:x=ot.params.worldWidth,worldHeight:y=ot.params.worldHeight,...w}){let A={u_colorBack:_(a),u_colorFront:_(t),u_shape:oo[r],u_type:oa[i],u_pxSize:l,u_fit:v[n],u_scale:f,u_rotation:c,u_offsetX:g,u_offsetY:h,u_originX:m,u_originY:d,u_worldWidth:x,u_worldHeight:y};return(0,u.jsx)(p,{...w,speed:e,frame:o,fragmentShader:oe,uniforms:A})}),oc={maxColorCount:7},ou=`#version 300 es 1897precision lowp float; 1898 1899uniform mediump float u_time; 1900uniform mediump vec2 u_resolution; 1901uniform mediump float u_pixelRatio; 1902 1903uniform sampler2D u_noiseTexture; 1904 1905uniform vec4 u_colorBack; 1906uniform vec4 u_colors[${oc.maxColorCount}]; 1907uniform float u_colorsCount; 1908uniform float u_softness; 1909uniform float u_intensity; 1910uniform float u_noise; 1911uniform float u_shape; 1912 1913uniform mediump float u_originX; 1914uniform mediump float u_originY; 1915uniform mediump float u_worldWidth; 1916uniform mediump float u_worldHeight; 1917uniform mediump float u_fit; 1918 1919uniform mediump float u_scale; 1920uniform mediump float u_rotation; 1921uniform mediump float u_offsetX; 1922uniform mediump float u_offsetY; 1923 1924in vec2 v_objectUV; 1925in vec2 v_patternUV; 1926in vec2 v_objectBoxSize; 1927in vec2 v_patternBoxSize; 1928 1929out vec4 fragColor; 1930 1931${w} 1932${U} 1933${A} 1934${B} 1935 1936float valueNoiseR(vec2 st) { 1937 vec2 i = floor(st); 1938 vec2 f = fract(st); 1939 float a = randomR(i); 1940 float b = randomR(i + vec2(1.0, 0.0)); 1941 float c = randomR(i + vec2(0.0, 1.0)); 1942 float d = randomR(i + vec2(1.0, 1.0)); 1943 vec2 u = f * f * (3.0 - 2.0 * f); 1944 float x1 = mix(a, b, u.x); 1945 float x2 = mix(c, d, u.x); 1946 return mix(x1, x2, u.y); 1947} 1948vec4 fbmR(vec2 n0, vec2 n1, vec2 n2, vec2 n3) { 1949 float amplitude = 0.2; 1950 vec4 total = vec4(0.); 1951 for (int i = 0; i < 3; i++) { 1952 n0 = rotate(n0, 0.3); 1953 n1 = rotate(n1, 0.3); 1954 n2 = rotate(n2, 0.3); 1955 n3 = rotate(n3, 0.3); 1956 total.x += valueNoiseR(n0) * amplitude; 1957 total.y += valueNoiseR(n1) * amplitude; 1958 total.z += valueNoiseR(n2) * amplitude; 1959 total.z += valueNoiseR(n3) * amplitude; 1960 n0 *= 1.99; 1961 n1 *= 1.99; 1962 n2 *= 1.99; 1963 n3 *= 1.99; 1964 amplitude *= 0.6; 1965 } 1966 return total; 1967} 1968 1969${b} 1970 1971vec2 truchet(vec2 uv, float idx){ 1972 idx = fract(((idx - .5) * 2.)); 1973 if (idx > 0.75) { 1974 uv = vec2(1.0) - uv; 1975 } else if (idx > 0.5) { 1976 uv = vec2(1.0 - uv.x, uv.y); 1977 } else if (idx > 0.25) { 1978 uv = 1.0 - vec2(1.0 - uv.x, uv.y); 1979 } 1980 return uv; 1981} 1982 1983void main() { 1984 1985 const float firstFrameOffset = 7.; 1986 float t = .1 * (u_time + firstFrameOffset); 1987 1988 vec2 shape_uv = vec2(0.); 1989 vec2 grain_uv = vec2(0.); 1990 1991 float r = u_rotation * PI / 180.; 1992 float cr = cos(r); 1993 float sr = sin(r); 1994 mat2 graphicRotation = mat2(cr, sr, -sr, cr); 1995 vec2 graphicOffset = vec2(-u_offsetX, u_offsetY); 1996 1997 if (u_shape > 3.5) { 1998 shape_uv = v_objectUV; 1999 grain_uv = shape_uv; 2000 2001 // apply inverse transform to grain_uv so it respects the originXY 2002 grain_uv = transpose(graphicRotation) * grain_uv; 2003 grain_uv *= u_scale; 2004 grain_uv -= graphicOffset; 2005 grain_uv *= v_objectBoxSize; 2006 grain_uv *= .7; 2007 } else { 2008 shape_uv = .5 * v_patternUV; 2009 grain_uv = 100. * v_patternUV; 2010 2011 // apply inverse transform to grain_uv so it respects the originXY 2012 grain_uv = transpose(graphicRotation) * grain_uv; 2013 grain_uv *= u_scale; 2014 if (u_fit > 0.) { 2015 vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight); 2016 givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio; 2017 float patternBoxRatio = givenBoxSize.x / givenBoxSize.y; 2018 vec2 patternBoxGivenSize = vec2( 2019 (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x, 2020 (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y 2021 ); 2022 patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y; 2023 float patternBoxNoFitBoxWidth = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y); 2024 grain_uv /= (patternBoxNoFitBoxWidth / v_patternBoxSize.x); 2025 } 2026 vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize; 2027 grain_uv -= graphicOffset / patternBoxScale; 2028 grain_uv *= 1.6; 2029 } 2030 2031 2032 float shape = 0.; 2033 2034 if (u_shape < 1.5) { 2035 // Sine wave 2036 2037 float wave = cos(.5 * shape_uv.x - 4. * t) * sin(1.5 * shape_uv.x + 2. * t) * (.75 + .25 * cos(6. * t)); 2038 shape = 1. - smoothstep(-1., 1., shape_uv.y + wave); 2039 2040 } else if (u_shape < 2.5) { 2041 // Grid (dots) 2042 2043 float stripeIdx = floor(2. * shape_uv.x / TWO_PI); 2044 float rand = hash11(stripeIdx * 100.); 2045 rand = sign(rand - .5) * pow(4. * abs(rand), .3); 2046 shape = sin(shape_uv.x) * cos(shape_uv.y - 5. * rand * t); 2047 shape = pow(abs(shape), 4.); 2048 2049 } else if (u_shape < 3.5) { 2050 // Truchet pattern 2051 2052 float n2 = valueNoiseR(shape_uv * .4 - 3.75 * t); 2053 shape_uv.x += 10.; 2054 shape_uv *= .6; 2055
2056 vec2 tile = truchet(fract(shape_uv), randomR(floor(shape_uv))); 2057 2058 float distance1 = length(tile); 2059 float distance2 = length(tile - vec2(1.)); 2060 2061 n2 -= .5; 2062 n2 *= .1; 2063 shape = smoothstep(.2, .55, distance1 + n2) * (1. - smoothstep(.45, .8, distance1 - n2)); 2064 shape += smoothstep(.2, .55, distance2 + n2) * (1. - smoothstep(.45, .8, distance2 - n2)); 2065 2066 shape = pow(shape, 1.5); 2067 2068 } else if (u_shape < 4.5) { 2069 // Corners 2070 2071 shape_uv *= .6; 2072 vec2 outer = vec2(.5); 2073 2074 vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * sin(5.25 * t))); 2075 vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv); 2076 shape = 1. - bl.x * bl.y * tr.x * tr.y; 2077 2078 shape_uv = -shape_uv; 2079 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(3. * t), .2 - .1 * cos(5.25 * t))); 2080 tr = smoothstep(vec2(0.), outer, 1. - shape_uv); 2081 shape -= bl.x * bl.y * tr.x * tr.y; 2082 2083 shape = 1. - smoothstep(0., 1., shape); 2084 2085 } else if (u_shape < 5.5) { 2086 // Ripple 2087 2088 shape_uv *= 2.; 2089 float dist = length(.4 * shape_uv); 2090 float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5; 2091 shape = waves; 2092 2093 } else if (u_shape < 6.5) { 2094 // Blob 2095 2096 t *= 2.; 2097 2098 vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.)); 2099 vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t)); 2100 vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t)); 2101 vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.)); 2102 2103 shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.); 2104 shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.); 2105 shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.); 2106 shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.); 2107 2108 shape = smoothstep(.0, .9, shape); 2109 float edge = smoothstep(.25, .3, shape); 2110 shape = mix(.0, shape, edge); 2111 2112 } else { 2113 // Sphere 2114 2115 shape_uv *= 2.; 2116 float d = 1. - pow(length(shape_uv), 2.); 2117 vec3 pos = vec3(shape_uv, sqrt(max(d, 0.))); 2118 vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t))); 2119 shape = .5 + .5 * dot(lightPos, pos); 2120 shape *= step(0., d); 2121 } 2122 2123 float baseNoise = snoise(grain_uv * .5); 2124 vec4 fbmVals = fbmR( 2125 .002 * grain_uv + 10., 2126 .003 * grain_uv, 2127 .001 * grain_uv, 2128 rotate(.4 * grain_uv, 2.) 2129 ); 2130 float grainDist = baseNoise * snoise(grain_uv * .2) - fbmVals.x - fbmVals.y; 2131 float rawNoise = .75 * baseNoise - fbmVals.w - fbmVals.z; 2132 float noise = clamp(rawNoise, 0., 1.); 2133 2134 shape += u_intensity * 2. / u_colorsCount * (grainDist + .5); 2135 shape += u_noise * 10. / u_colorsCount * noise; 2136 2137 float aa = fwidth(shape); 2138 2139 shape = clamp(shape - .5 / u_colorsCount, 0., 1.); 2140 float totalShape = smoothstep(0., u_softness + 2. * aa, clamp(shape * u_colorsCount, 0., 1.)); 2141 float mixer = shape * (u_colorsCount - 1.); 2142 2143 int cntStop = int(u_colorsCount) - 1; 2144 vec4 gradient = u_colors[0]; 2145 gradient.rgb *= gradient.a; 2146 for (int i = 1; i < ${oc.maxColorCount}; i++) { 2147 if (i > cntStop) break; 2148 2149 float localT = clamp(mixer - float(i - 1), 0., 1.); 2150 localT = smoothstep(.5 - .5 * u_softness - aa, .5 + .5 * u_softness + aa, localT); 2151 2152 vec4 c = u_colors[i]; 2153 c.rgb *= c.a; 2154 gradient = mix(gradient, c, localT); 2155 } 2156 2157 vec3 color = gradient.rgb * totalShape; 2158 float opacity = gradient.a * totalShape; 2159 2160 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 2161 color = color + bgColor * (1.0 - opacity); 2162 opacity = opacity + u_colorBack.a * (1.0 - opacity); 2163 2164 fragColor = vec4(color, opacity); 2165} 2166`,om={wave:1,dots:2,truchet:3,corners:4,ripple:5,blob:6,sphere:7},op={name:"Default",params:{...g,speed:1,frame:0,colorBack:"#000000",colors:["#7300ff","#eba8ff","#00bfff","#2a00ff"],softness:.5,intensity:.5,noise:.25,shape:"corners"}},od={name:"Wave",params:{...h,speed:1,frame:0,colorBack:"#000a0f",colors:["#c4730b","#bdad5f","#d8ccc7"],softness:.7,intensity:.15,noise:.5,shape:"wave"}},og={name:"Dots",params:{...h,scale:.6,speed:1,frame:0,colorBack:"#0a0000",colors:["#6f0000","#0080ff","#f2ebc9","#33cc33"],softness:1,intensity:1,noise:.7,shape:"dots"}},oh={name:"Truchet",params:{...h,speed:1,frame:0,colorBack:"#0a0000",colors:["#6f2200","#eabb7c","#39b523"],softness:0,intensity:.2,noise:1,shape:"truchet"}},ov=[op,od,og,oh,{name:"Ripple",params:{...g,scale:.5,speed:1,frame:0,colorBack:"#140a00",colors:["#6f2d00","#88ddae","#2c0b1d"],softness:.5,intensity:.5,noise:.5,shape:"ripple"}}
2166,{name:"Blob",params:{...g,scale:1.3,speed:1,frame:0,colorBack:"#0f0e18",colors:["#3e6172","#a49b74","#568c50"],softness:0,intensity:.15,noise:.5,shape:"blob"}}],o_=(0,t.memo)(function({speed:e=op.params.speed,frame:o=op.params.frame,colorBack:a=op.params.colorBack,colors:t=op.params.colors,softness:r=op.params.softness,intensity:i=op.params.intensity,noise:s=op.params.noise,shape:l=op.params.shape,fit:n=op.params.fit,scale:f=op.params.scale,rotation:c=op.params.rotation,originX:m=op.params.originX,originY:d=op.params.originY,offsetX:g=op.params.offsetX,offsetY:h=op.params.offsetY,worldWidth:x=op.params.worldWidth,worldHeight:y=op.params.worldHeight,...w}){let A={u_colorBack:_(a),u_colors:t.map(_),u_colorsCount:t.length,u_softness:r,u_intensity:i,u_noise:s,u_shape:om[l],u_noiseTexture:D(),u_fit:v[n],u_scale:f,u_rotation:c,u_offsetX:g,u_offsetY:h,u_originX:m,u_originY:d,u_worldWidth:x,u_worldHeight:y};return(0,u.jsx)(p,{...w,speed:e,frame:o,fragmentShader:ou,uniforms:A})}),ox={maxColorCount:5,maxSpots:4},oy=`#version 300 es 2167precision lowp float; 2168 2169uniform float u_time; 2170 2171uniform vec4 u_colorBack; 2172uniform vec4 u_colors[${ox.maxColorCount}]; 2173uniform float u_colorsCount; 2174uniform float u_roundness; 2175uniform float u_thickness; 2176uniform float u_marginLeft; 2177uniform float u_marginRight; 2178uniform float u_marginTop; 2179uniform float u_marginBottom; 2180uniform float u_aspectRatio; 2181uniform float u_softness; 2182uniform float u_intensity; 2183uniform float u_bloom; 2184uniform float u_spotSize; 2185uniform float u_spots; 2186uniform float u_pulse; 2187uniform float u_smoke; 2188uniform float u_smokeSize; 2189 2190uniform sampler2D u_noiseTexture; 2191 2192in vec2 v_responsiveUV; 2193in vec2 v_responsiveBoxGivenSize; 2194in vec2 v_patternUV; 2195 2196out vec4 fragColor; 2197 2198${w} 2199 2200float beat(float time) { 2201 float first = pow(abs(sin(time * TWO_PI)), 10.); 2202 float second = pow(abs(sin((time - .15) * TWO_PI)), 10.); 2203 2204 return clamp(first + 0.6 * second, 0.0, 1.0); 2205} 2206 2207float sst(float edge0, float edge1, float x) { 2208 return smoothstep(edge0, edge1, x); 2209} 2210 2211float roundedBox(vec2 uv, vec2 halfSize, float distance, float cornerDistance, float thickness, float softness) { 2212 float borderDistance = abs(distance); 2213 float aa = 2. * fwidth(distance); 2214 float border = 1. - sst(min(mix(thickness, -thickness, softness), thickness + aa), max(mix(thickness, -thickness, softness), thickness + aa), borderDistance); 2215 float cornerFadeCircles = 0.; 2216 cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv + halfSize) / thickness))); 2217 cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(-halfSize.x, halfSize.y)) / thickness))); 2218 cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - vec2(halfSize.x, -halfSize.y)) / thickness))); 2219 cornerFadeCircles = mix(1., cornerFadeCircles, sst(0., 1., length((uv - halfSize) / thickness))); 2220 aa = fwidth(cornerDistance); 2221 float cornerFade = sst(0., mix(aa, thickness, softness), cornerDistance); 2222 cornerFade *= cornerFadeCircles; 2223 border += cornerFade; 2224 return border; 2225} 2226 2227${S} 2228 2229float randomG(vec2 p) { 2230 vec2 uv = floor(p) / 100. + .5; 2231 return texture(u_noiseTexture, fract(uv)).g; 2232} 2233float valueNoise(vec2 st) { 2234 vec2 i = floor(st); 2235 vec2 f = fract(st); 2236 float a = randomG(i); 2237 float b = randomG(i + vec2(1.0, 0.0)); 2238 float c = randomG(i + vec2(0.0, 1.0)); 2239 float d = randomG(i + vec2(1.0, 1.0)); 2240 vec2 u = f * f * (3.0 - 2.0 * f); 2241 float x1 = mix(a, b, u.x); 2242 float x2 = mix(c, d, u.x); 2243 return mix(x1, x2, u.y); 2244} 2245 2246void main() { 2247 const float firstFrameOffset = 109.; 2248 float t = 1.2 * (u_time + firstFrameOffset); 2249 2250 vec2 borderUV = v_responsiveUV; 2251 float pulse = u_pulse * beat(.18 * u_time); 2252 2253 float canvasRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y; 2254 vec2 halfSize = vec2(.5); 2255 borderUV.x *= max(canvasRatio, 1.); 2256 borderUV.y /= min(canvasRatio, 1.); 2257 halfSize.x *= max(canvasRatio, 1.); 2258 halfSize.y /= min(canvasRatio, 1.); 2259 2260 float mL = u_marginLeft; 2261 float mR = u_marginRight; 2262 float mT = u_marginTop; 2263 float mB = u_marginBottom; 2264 float mX = mL + mR; 2265 float mY = mT + mB; 2266 2267 if (u_aspectRatio > 0.) { 2268 float shapeRatio = canvasRatio * (1. - mX) / max(1. - mY, 1e-6); 2269 float freeX = shapeRatio >
2269 1. ? (1. - mX) * (1. - 1. / max(abs(shapeRatio), 1e-6)) : 0.; 2270 float freeY = shapeRatio < 1. ? (1. - mY) * (1. - shapeRatio) : 0.; 2271 mL += freeX * 0.5; 2272 mR += freeX * 0.5; 2273 mT += freeY * 0.5; 2274 mB += freeY * 0.5; 2275 mX = mL + mR; 2276 mY = mT + mB; 2277 } 2278 2279 float thickness = .5 * u_thickness * min(halfSize.x, halfSize.y); 2280 2281 halfSize.x *= (1. - mX); 2282 halfSize.y *= (1. - mY); 2283 2284 vec2 centerShift = vec2( 2285 (mL - mR) * max(canvasRatio, 1.) * 0.5, 2286 (mB - mT) / min(canvasRatio, 1.) * 0.5 2287 ); 2288 2289 borderUV -= centerShift; 2290 halfSize -= mix(thickness, 0., u_softness); 2291 2292 float radius = mix(0., min(halfSize.x, halfSize.y), u_roundness); 2293 vec2 d = abs(borderUV) - halfSize + radius; 2294 float outsideDistance = length(max(d, .0001)) - radius; 2295 float insideDistance = min(max(d.x, d.y), .0001); 2296 float cornerDistance = abs(min(max(d.x, d.y) - .45 * radius, .0)); 2297 float distance = outsideDistance + insideDistance; 2298 2299 float borderThickness = mix(thickness, 3. * thickness, u_softness); 2300 float border = roundedBox(borderUV, halfSize, distance, cornerDistance, borderThickness, u_softness); 2301 border = pow(border, 1. + u_softness); 2302 2303 vec2 smokeUV = .3 * u_smokeSize * v_patternUV; 2304 float smoke = clamp(3. * valueNoise(2.7 * smokeUV + .5 * t), 0., 1.); 2305 smoke -= valueNoise(3.4 * smokeUV - .5 * t); 2306 float smokeThickness = thickness + .2; 2307 smokeThickness = min(.4, max(smokeThickness, .1)); 2308 smoke *= roundedBox(borderUV, halfSize, distance, cornerDistance, smokeThickness, 1.); 2309 smoke = 30. * smoke * smoke; 2310 smoke *= mix(0., .5, pow(u_smoke, 2.)); 2311 smoke *= mix(1., pulse, u_pulse); 2312 smoke = clamp(smoke, 0., 1.); 2313 border += smoke; 2314 2315 border = clamp(border, 0., 1.); 2316 2317 vec3 blendColor = vec3(0.); 2318 float blendAlpha = 0.; 2319 vec3 addColor = vec3(0.); 2320 float addAlpha = 0.; 2321 2322 float bloom = 4. * u_bloom; 2323 float intensity = 1. + (1. + 4. * u_softness) * u_intensity; 2324 2325 float angle = atan(borderUV.y, borderUV.x) / TWO_PI; 2326 2327 for (int colorIdx = 0; colorIdx < ${ox.maxColorCount}; colorIdx++) { 2328 if (colorIdx >= int(u_colorsCount)) break; 2329 float colorIdxF = float(colorIdx); 2330 2331 vec3 c = u_colors[colorIdx].rgb * u_colors[colorIdx].a; 2332 float a = u_colors[colorIdx].a; 2333 2334 for (int spotIdx = 0; spotIdx < ${ox.maxSpots}; spotIdx++) { 2335 if (spotIdx >= int(u_spots)) break; 2336 float spotIdxF = float(spotIdx); 2337 2338 vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF)); 2339 2340 float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.; 2341 time *= mix(1., -1., step(.5, randVal.y)); 2342 2343 float mask = .5 + .5 * mix( 2344 sin(t + spotIdxF * (5. - 1.5 * colorIdxF)), 2345 cos(t + spotIdxF * (3. + 1.3 * colorIdxF)), 2346 step(mod(colorIdxF, 2.), .5) 2347 ); 2348 2349 float p = clamp(2. * u_pulse - randVal.x, 0., 1.); 2350 mask = mix(mask, pulse, p); 2351 2352 float atg1 = fract(angle + time); 2353 float spotSize = .05 + .6 * pow(u_spotSize, 2.) + .05 * randVal.x; 2354 spotSize = mix(spotSize, .1, p); 2355 float sector = sst(.5 - spotSize, .5, atg1) * (1. - sst(.5, .5 + spotSize, atg1)); 2356 2357 sector *= mask; 2358 sector *= border; 2359 sector *= intensity; 2360 sector = clamp(sector, 0., 1.); 2361 2362 vec3 srcColor = c * sector; 2363 float srcAlpha = a * sector; 2364 2365 blendColor += ((1. - blendAlpha) * srcColor); 2366 blendAlpha = blendAlpha + (1. - blendAlpha) * srcAlpha; 2367 addColor += srcColor; 2368 addAlpha += srcAlpha; 2369 } 2370 } 2371 2372 vec3 accumColor = mix(blendColor, addColor, bloom); 2373 float accumAlpha = mix(blendAlpha, addAlpha, bloom); 2374 accumAlpha = clamp(accumAlpha, 0., 1.); 2375 2376 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 2377 vec3 color = accumColor + (1. - accumAlpha) * bgColor; 2378 float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a; 2379 2380 ${k} 2381 2382 fragColor = vec4(color, opacity); 2383}`,ow={auto:0,square:1},oA={name:"Default",params:{...g,speed:1,frame:0,scale:.6,colorBack:"#000000",colors:["#0dc1fd","#d915ef","#ff3f2ecc"],roundness:.25,thickness:.1,margin:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,aspectRatio:"auto",softness:.75,intensity:.2,bloom:.25,spots:5,spotSize:.5,pulse:.25,smoke:.3,smokeSize:.6}},ob={name:"Circle",params:{...g,aspectRatio:"square",scale:.6,speed:1,frame:0,colorBack:"#000000",colors:["#0dc1fd","#d915ef","#ff3f2ecc"],roundness:1,margin:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,thickness:0,softness:.75,intensity:.2,bloom:.45,spots:3,spotSize:.4,pulse:.5,smoke:1,smokeSize:0}},oC=[oA,ob,{name:"Northern lights",params:{...g,speed:.18,scale:1.1,frame:0,colors:["#4c4794","#774a7d","#12694a","#0aff78","#4733cc"],colorBack:"#0c182c",roundness:0,thickness:1,softness:1,margin:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,aspectRatio:"auto",intensity:.1,bloom:.2,spots:4,spotSize:.25,pulse:0,smoke:.32,smokeSize:.5}},{name:"Solid line",params:{...g,speed:1,frame:0,colors:["#81ADEC"],colorBack:"#00000000",roundness:0,thickness:.05,margin:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,aspectRatio:"auto",softness:0,intensity:0,bloom:.15,spots:4,spotSize:1,pulse:0,smoke:0,smokeSize:0}}],oB=(0,t.memo)(function({speed:e=oA.params.speed,frame:o=oA.params.frame,colors:a=oA.params.colors,colorBack:t=oA.params.colorBack,roundness:r=oA.params.roundness,thickness:i=oA.params.thickness,aspectRatio:s=oA.params.aspectRatio,softness:l=oA.params.softness,bloom:n=oA.params.bloom,intensity:f=oA.params.intensity,spots:c=oA.params.spots,spotSize:m=oA.params.spotSize,pulse:d=oA.params.pulse,smoke:g=oA.params.smoke,smokeSize:h=oA.params.smokeSize,margin:x,marginLeft:y=x??oA.params.marginLeft,marginRight:w=x??oA.params.marginRight,marginTop:A=x??oA.params.marginTop,marginBottom:b=x??oA.params.marginBottom,fit:C=oA.params.fit,rotation:B=oA.params.rotation,scale:S=oA.params.scale,originX:k=oA.params.originX,originY:U=oA.params.originY,offsetX:R=oA.params.offsetX,offsetY:V=oA.params.offsetY,worldWidth:F=oA.params.worldWidth,worldHeight:z=oA.params.worldHeight,...M}
2383){let I={u_colorBack:_(t),u_colors:a.map(_),u_colorsCount:a.length,u_roundness:r,u_thickness:i,u_marginLeft:y,u_marginRight:w,u_marginTop:A,u_marginBottom:b,u_aspectRatio:ow[s],u_softness:l,u_intensity:f,u_bloom:n,u_spots:c,u_spotSize:m,u_pulse:d,u_smoke:g,u_smokeSize:h,u_noiseTexture:D(),u_fit:v[C],u_rotation:B,u_scale:S,u_offsetX:R,u_offsetY:V,u_originX:k,u_originY:U,u_worldWidth:F,u_worldHeight:z};return(0,u.jsx)(p,{...M,speed:e,frame:o,fragmentShader:oy,uniforms:I})},d),oS={maxColorCount:7},ok=`#version 300 es 2384precision lowp float; 2385 2386uniform float u_time; 2387uniform mediump float u_scale; 2388 2389uniform vec4 u_colors[${oS.maxColorCount}]; 2390uniform float u_colorsCount; 2391uniform vec4 u_colorBack; 2392uniform float u_density; 2393uniform float u_angle1; 2394uniform float u_angle2; 2395uniform float u_length; 2396uniform bool u_edges; 2397uniform float u_blur; 2398uniform float u_fadeIn; 2399uniform float u_fadeOut; 2400uniform float u_gradient; 2401 2402in vec2 v_objectUV; 2403 2404out vec4 fragColor; 2405 2406${w} 2407 2408const float zLimit = .5; 2409 2410vec2 getPanel(float angle, vec2 uv, float invLength, float aa) { 2411 float sinA = sin(angle); 2412 float cosA = cos(angle); 2413 2414 float denom = sinA - uv.y * cosA; 2415 if (abs(denom) < .01) return vec2(0.); 2416 2417 float z = uv.y / denom; 2418 2419 if (z <= 0. || z > zLimit) return vec2(0.); 2420 2421 float zRatio = z / zLimit; 2422 float panelMap = 1. - zRatio; 2423 float x = uv.x * (cosA * z + 1.) * invLength; 2424 2425 float zOffset = zRatio - .5; 2426 float left = -.5 + zOffset * u_angle1; 2427 float right = .5 - zOffset * u_angle2; 2428 float blurX = aa + 2. * panelMap * u_blur; 2429 2430 float leftEdge1 = left - blurX; 2431 float leftEdge2 = left + .25 * blurX; 2432 float rightEdge1 = right - .25 * blurX; 2433 float rightEdge2 = right + blurX; 2434 2435 float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x)); 2436 panel *= mix(0., panel, smoothstep(0., .01 / max(u_scale, 1e-6), panelMap)); 2437 2438 float midScreen = abs(sinA); 2439 if (u_edges == true) { 2440 panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0)); 2441 } else if (midScreen < .07) { 2442 panel *= (midScreen * 15.); 2443 } 2444 2445 return vec2(panel, panelMap); 2446} 2447
2448vec4 blendColor(vec4 colorA, float panelMask, float panelMap) { 2449 float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap); 2450 2451 fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap); 2452 2453 vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade); 2454 float blendedAlpha = mix(0., colorA.a, fade); 2455 2456 return vec4(blendedRGB, blendedAlpha) * panelMask; 2457} 2458 2459void main() { 2460 vec2 uv = v_objectUV; 2461 uv *= 1.25; 2462 2463 float t = .02 * u_time; 2464 t = fract(t); 2465 bool reverseTime = (t < 0.5); 2466 2467 vec3 color = vec3(0.); 2468 float opacity = 0.; 2469 2470 float aa = .005 / u_scale; 2471 int colorsCount = int(u_colorsCount); 2472 2473 vec4 premultipliedColors[${oS.maxColorCount}]; 2474 for (int i = 0; i < ${oS.maxColorCount}; i++) { 2475 if (i >= colorsCount) break; 2476 vec4 c = u_colors[i]; 2477 c.rgb *= c.a; 2478 premultipliedColors[i] = c; 2479 } 2480 2481 float invLength = 1.5 / max(u_length, .001); 2482 2483 float totalColorWeight = 0.; 2484 int panelsNumber = 12; 2485 2486 float densityNormalizer = 1.; 2487 if (colorsCount == 4) { 2488 panelsNumber = 16; 2489 densityNormalizer = 1.34; 2490 } else if (colorsCount == 5) { 2491 panelsNumber = 20; 2492 densityNormalizer = 1.67; 2493 } else if (colorsCount == 7) { 2494 panelsNumber = 14; 2495 densityNormalizer = 1.17; 2496 } 2497 2498 float fPanelsNumber = float(panelsNumber); 2499 2500 float totalPanelsShape = 0.; 2501 float panelGrad = 1. - clamp(u_gradient, 0., 1.); 2502 2503 for (int set = 0; set < 2; set++) { 2504 bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime); 2505 if (!isForward) continue; 2506 2507 for (int i = 0; i <= 20; i++) { 2508 if (i >= panelsNumber) break; 2509 2510 int idx = panelsNumber - 1 - i; 2511 2512 float offset = float(idx) / fPanelsNumber; 2513 if (set == 1) { 2514 offset += .5; 2515 } 2516 2517 float densityFract = densityNormalizer * fract(t + offset); 2518 float angleNorm = densityFract / u_density; 2519 if (densityFract >= .5 || angleNorm >= .3) continue; 2520 2521 float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.); 2522 float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.); 2523 if (smoothDensity * smoothAngle < .001) continue; 2524 2525 if (angleNorm > .5) { 2526 angleNorm = 0.5; 2527 } 2528 vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa); 2529 if (panel[0] <= .001) continue; 2530 float panelMask = panel[0] * smoothDensity * smoothAngle; 2531 float panelMap = panel[1]; 2532 2533 int colorIdx = idx % colorsCount; 2534 int nextColorIdx = (idx + 1) % colorsCount; 2535 2536 vec4 colorA = premultipliedColors[colorIdx]; 2537 vec4 colorB = premultipliedColors[nextColorIdx]; 2538 2539 colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad)); 2540 vec4 blended = blendColor(colorA, panelMask, panelMap); 2541 color = blended.rgb + color * (1. - blended.a); 2542 opacity = blended.a + opacity * (1. - blended.a); 2543 } 2544 2545 2546 for (int i = 0; i <= 20; i++) { 2547 if (i >= panelsNumber) break; 2548 2549 int idx = panelsNumber - 1 - i; 2550 2551 float offset = float(idx) / fPanelsNumber; 2552 if (set == 0) { 2553 offset += .5; 2554 } 2555 2556 float densityFract = densityNormalizer * fract(-t + offset); 2557 float angleNorm = -densityFract / u_density; 2558 if (densityFract >= .5 || angleNorm < -.3) continue; 2559 2560 float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.); 2561 float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.); 2562 if (smoothDensity * smoothAngle < .001) continue; 2563 2564 vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa); 2565 float panelMask = panel[0] * smoothDensity * smoothAngle; 2566 if (panelMask <= .001) continue; 2567 float panelMap = panel[1]; 2568 2569 int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount; 2570 if (colorIdx < 0) colorIdx += colorsCount; 2571 int nextColorIdx = (colorIdx + 1) % colorsCount; 2572 2573 vec4 colorA = premultipliedColors[colorIdx]; 2574 vec4 colorB = premultipliedColors[nextColorIdx]; 2575 2576 colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad)); 2577 vec4 blended = blendColor(colorA, panelMask, panelMap); 2578 color = blended.rgb + color * (1. - blended.a); 2579 opacity = blended.a + opacity * (1. - blended.a); 2580 } 2581 } 2582 2583 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 2584 color = color + bgColor * (1.0 - opacity); 2585 opacity = opacity + u_colorBack.a * (1.0 - opacity); 2586 2587 ${k} 2588 2589 fragColor = vec4(color, opacity); 2590} 2591`,oU={name:"Default",params:{...g,speed:.5,frame:0,colors:["#ff9d00","#fd4f30","#809bff","#6d2eff","#333aff","#f15cff","#ffd557"],colorBack:"#000000",angle1:0,angle2:0,length:1.1,edges:!1,blur:0,fadeIn:1,fadeOut:.3,gradient:0,density:3,scale:.8}},oR={name:"Glass",params:{...g,rotation:112,speed:1,frame:0,colors:["#00cfff","#ff2d55","#34c759","#af52de"],colorBack:"#ffffff00",angle1:.3,angle2:.3,length:1,edges:!0,blur:.25,fadeIn:.85,fadeOut:.3,gradient:0,density:1.6}},oV=[oU,oR,{name:"Gradient",params:{...g,speed:.5,frame:0,colors:["#f2ff00","#00000000","#00000000","#5a0283","#005eff"],colorBack:"#8ffff2",angle1:.4,angle2:.4,length:3,edges:!1,blur:.5,fadeIn:1,fadeOut:.39,gradient:.78,density:1.65,scale:1.72,rotation:270,offsetX:.18}},{name:"Opening",params:{...g,speed:2,frame:0,colors:["#00ffff"],colorBack:"#570044",angle1:-1,angle2:-1,length:.52,edges:!1,blur:0,fadeIn:0,fadeOut:1,gradient:0,density:2.21,scale:2.32,rotation:360,offsetX:-.3,offsetY:.6}}],oF=(0,t.memo)(function({speed:e=oU.params.speed,frame:o=oU.params.frame,colors:a=oU.params.colors,colorBack:t=oU.params.colorBack,angle1:r=oU.params.angle1,angle2:i=oU.params.angle2,length:s=oU.params.length,edges:l=oU.params.edges,blur:n=oU.params.blur,fadeIn:f=oU.params.fadeIn,fadeOut:c=oU.params.fadeOut,density:m=oU.params.density,gradient:d=oU.params.gradient,fit:g=oU.params.fit,scale:h=oU.params.scale,rotation:x=oU.params.rotation,originX:y=oU.params.originX,originY:w=oU.params.originY,offsetX:A=oU.params.offsetX,offsetY:b=oU.params.offsetY,worldWidth:C=oU.params.worldWidth,worldHeight:B=oU.params.worldHeight,...S}){let k={u_colors:a.map(_),u_colorsCount:a.length,u_colorBack:_(t),u_angle1:r,u_angle2:i,u_length:s,u_edges:l,u_blur:n,u_fadeIn:f,u_fadeOut:c,u_density:m,u_gradient:d,u_fit:v[g],u_scale:h,u_rotation:x,u_offsetX:A,u_offsetY:b,u_originX:y,u_originY:w,u_worldWidth:C,u_worldHeight:B};return(0,u.jsx)(p,{...S,speed:e,frame:o,fragmentShader:ok,uniforms:k})},d),oz={maxColorCount:10},oM=`#version 300 es 2592precision mediump float; 2593 2594uniform vec4 u_colors[${oz.maxColorCount}]; 2595uniform float u_colorsCount; 2596 2597uniform float u_positions; 2598uniform float u_waveX; 2599uniform float u_waveXShift; 2600uniform float u_waveY; 2601uniform float u_waveYShift;
2602uniform float u_mixing; 2603uniform float u_grainMixer; 2604uniform float u_grainOverlay; 2605 2606in vec2 v_objectUV; 2607out vec4 fragColor; 2608 2609${w} 2610${A} 2611${C} 2612 2613float valueNoise(vec2 st) { 2614 vec2 i = floor(st); 2615 vec2 f = fract(st); 2616 float a = hash21(i); 2617 float b = hash21(i + vec2(1.0, 0.0)); 2618 float c = hash21(i + vec2(0.0, 1.0)); 2619 float d = hash21(i + vec2(1.0, 1.0)); 2620 vec2 u = f * f * (3.0 - 2.0 * f); 2621 float x1 = mix(a, b, u.x); 2622 float x2 = mix(c, d, u.x); 2623 return mix(x1, x2, u.y); 2624} 2625 2626float noise(vec2 n, vec2 seedOffset) { 2627 return valueNoise(n + seedOffset); 2628} 2629 2630vec2 getPosition(int i, float t) { 2631 float a = float(i) * .37; 2632 float b = .6 + mod(float(i), 3.) * .3; 2633 float c = .8 + mod(float(i + 1), 4.) * 0.25; 2634 2635 float x = sin(t * b + a); 2636 float y = cos(t * c + a * 1.5); 2637 2638 return .5 + .5 * vec2(x, y); 2639} 2640 2641void main() { 2642 vec2 uv = v_objectUV; 2643 uv += .5; 2644 vec2 grainUV = uv * 1000.; 2645 2646 float grain = noise(grainUV, vec2(0.)); 2647 float mixerGrain = .4 * u_grainMixer * (grain - .5); 2648 2649 float radius = smoothstep(0., 1., length(uv - .5)); 2650 float center = 1. - radius; 2651 for (float i = 1.; i <= 2.; i++) { 2652 uv.x += u_waveX * center / i * cos(TWO_PI * u_waveXShift + i * 2. * smoothstep(.0, 1., uv.y)); 2653 uv.y += u_waveY * center / i * cos(TWO_PI * u_waveYShift + i * 2. * smoothstep(.0, 1., uv.x)); 2654 } 2655 2656 vec3 color = vec3(0.); 2657 float opacity = 0.; 2658 float totalWeight = 0.; 2659 float positionSeed = 25. + .33 * u_positions; 2660 2661 for (int i = 0; i < ${oz.maxColorCount}; i++) { 2662 if (i >= int(u_colorsCount)) break; 2663 2664 vec2 pos = getPosition(i, positionSeed) + mixerGrain; 2665 float dist = length(uv - pos); 2666 dist = length(uv - pos); 2667 2668 vec3 colorFraction = u_colors[i].rgb * u_colors[i].a; 2669 float opacityFraction = u_colors[i].a; 2670 2671 float mixing = pow(u_mixing, .7); 2672 float power = mix(2., 1., mixing); 2673 dist = pow(dist, power); 2674 2675 float w = 1. / (dist + 1e-3);
2676 float baseSharpness = mix(.0, 8., clamp(w, 0., 1.)); 2677 float sharpness = mix(baseSharpness, 1., mixing); 2678 w = pow(w, sharpness); 2679 color += colorFraction * w; 2680 opacity += opacityFraction * w; 2681 totalWeight += w; 2682 } 2683 2684 color /= max(1e-4, totalWeight); 2685 opacity /= max(1e-4, totalWeight); 2686 2687 float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.)); 2688 grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5); 2689 grainOverlay = pow(grainOverlay, 1.3); 2690 2691 float grainOverlayV = grainOverlay * 2. - 1.; 2692 vec3 grainOverlayColor = vec3(step(0., grainOverlayV)); 2693 float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV); 2694 grainOverlayStrength = pow(grainOverlayStrength, .8); 2695 color = mix(color, grainOverlayColor, .35 * grainOverlayStrength); 2696 2697 opacity += .5 * grainOverlayStrength; 2698 opacity = clamp(opacity, 0., 1.); 2699 2700 fragColor = vec4(color, opacity); 2701} 2702`,oI={name:"Default",params:{...g,rotation:270,speed:0,frame:0,colors:["#ffad0a","#6200ff","#e2a3ff","#ff99fd"],positions:2,waveX:1,waveXShift:.6,waveY:1,waveYShift:.21,mixing:.93,grainMixer:0,grainOverlay:0}},oO={name:"Sea",params:{...g,speed:0,frame:0,colors:["#013b65","#03738c","#a3d3ff","#f2faef"],positions:0,waveX:.53,waveXShift:0,waveY:.95,waveYShift:.64,mixing:.5,grainMixer:0,grainOverlay:0}},oE=[oI,{name:"1960s",params:{...g,speed:0,frame:0,colors:["#000000","#082400","#b1aa91","#8e8c15"],positions:42,waveX:.45,waveXShift:0,waveY:1,waveYShift:0,mixing:0,grainMixer:.37,grainOverlay:.78}},{name:"Sunset",params:{...g,speed:0,frame:0,colors:["#264653","#9c2b2b","#f4a261","#ffffff"],positions:0,waveX:.6,waveXShift:.7,waveY:.7,waveYShift:.7,mixing:.5,grainMixer:0,grainOverlay:0}},oO],oD=(0,t.memo)(function({speed:e=oI.params.speed,frame:o=oI.params.frame,colors:a=oI.params.colors,positions:t=oI.params.positions,waveX:r=oI.params.waveX,waveXShift:i=oI.params.waveXShift,waveY:s=oI.params.waveY,waveYShift:l=oI.params.waveYShift,mixing:n=oI.params.mixing,grainMixer:f=oI.params.grainMixer,grainOverlay:c=oI.params.grainOverlay,fit:m=oI.params.fit,rotation:d=oI.params.rotation,scale:g=oI.params.scale,originX:h=oI.params.originX,originY:x=oI.params.originY,offsetX:y=oI.params.offsetX,offsetY:w=oI.params.offsetY,worldWidth:A=oI.params.worldWidth,worldHeight:b=oI.params.worldHeight,...C}){let B={u_colors:a.map(_),u_colorsCount:a.length,u_positions:t,u_waveX:r,u_waveXShift:i,u_waveY:s,u_waveYShift:l,u_mixing:n,u_grainMixer:f,u_grainOverlay:c,u_fit:v[m],u_rotation:d,u_scale:g,u_offsetX:y,u_offsetY:w,u_originX:h,u_originY:x,u_worldWidth:A,u_worldHeight:b};return(0,u.jsx)(p,{...C,speed:e,frame:o,fragmentShader:oM,uniforms:B})},d),oY={maxColorCount:10},oW=`#version 300 es 2703precision mediump float; 2704 2705uniform vec4 u_colorBack; 2706uniform vec4 u_colors[${oY.maxColorCount}]; 2707uniform float u_colorsCount; 2708 2709uniform float u_radius; 2710uniform float u_focalDistance; 2711uniform float u_focalAngle; 2712uniform float u_falloff; 2713uniform float u_mixing; 2714uniform float u_distortion; 2715uniform float u_distortionShift; 2716uniform float u_distortionFreq; 2717uniform float u_grainMixer; 2718uniform float u_grainOverlay; 2719 2720in vec2 v_objectUV; 2721out vec4 fragColor; 2722 2723${w} 2724${A} 2725${C} 2726 2727float valueNoise(vec2 st) { 2728 vec2 i = floor(st); 2729 vec2 f = fract(st); 2730 float a = hash21(i); 2731 float b = hash21(i + vec2(1.0, 0.0)); 2732 float c = hash21(i + vec2(0.0, 1.0)); 2733 float d = hash21(i + vec2(1.0, 1.0)); 2734 vec2 u = f * f * (3.0 - 2.0 * f); 2735 float x1 = mix(a, b, u.x); 2736 float x2 = mix(c, d, u.x); 2737 return mix(x1, x2, u.y); 2738} 2739 2740float noise(vec2 n, vec2 seedOffset) { 2741 return valueNoise(n + seedOffset); 2742} 2743 2744vec2 getPosition(int i, float t) { 2745 float a = float(i) * .37; 2746 float b = .6 + mod(float(i), 3.) * .3; 2747 float c = .8 + mod(float(i + 1), 4.) * 0.25; 2748 2749 float x = sin(t * b + a); 2750 float y = cos(t * c + a * 1.5); 2751 2752 return .5 + .5 * vec2(x, y); 2753} 2754 2755void main() { 2756 vec2 uv = 2. * v_objectUV; 2757 vec2 grainUV = uv * 1000.; 2758 2759 vec2 center = vec2(0.); 2760 float angleRad = -radians(u_focalAngle + 90.); 2761 vec2 focalPoint = vec2(cos(angleRad), sin(angleRad)) * u_focalDistance; 2762 float radius = u_radius; 2763 2764 vec2 c_to_uv = uv - center; 2765 vec2 f_to_uv = uv - focalPoint; 2766 vec2 f_to_c = center - focalPoint; 2767 float r = length(c_to_uv); 2768 2769 float fragAngle = atan(c_to_uv.y, c_to_uv.x); 2770 float angleDiff = fract((fragAngle - angleRad + PI) / TWO_PI) * TWO_PI - PI; 2771 2772 float halfAngle = acos(clamp(radius / max(u_focalDistance, 1e-4), 0.0, 1.0)); 2773 float e0 = 0.6 * PI, e1 = halfAngle;
2774 float lo = min(e0, e1), hi = max(e0, e1); 2775 float s = smoothstep(lo, hi, abs(angleDiff)); 2776 float isInSector = (e1 >= e0) ? (1.0 - s) : s; 2777 2778 float a = dot(f_to_uv, f_to_uv); 2779 float b = -2.0 * dot(f_to_uv, f_to_c); 2780 float c = dot(f_to_c, f_to_c) - radius * radius; 2781 2782 float discriminant = b * b - 4.0 * a * c; 2783 float t = 1.0; 2784 2785 if (discriminant >= 0.0) { 2786 float sqrtD = sqrt(discriminant); 2787 float div = max(1e-4, 2.0 * a); 2788 float t0 = (-b - sqrtD) / div; 2789 float t1 = (-b + sqrtD) / div; 2790 t = max(t0, t1); 2791 if (t < 0.0) t = 0.0; 2792 } 2793 2794 float dist = length(f_to_uv); 2795 float normalized = dist / max(1e-4, length(f_to_uv * t)); 2796 float shape = clamp(normalized, 0.0, 1.0); 2797 2798 float falloffMapped = mix(.2 + .8 * max(0., u_falloff + 1.), mix(1., 15., u_falloff * u_falloff), step(.0, u_falloff)); 2799 2800 float falloffExp = mix(falloffMapped, 1., shape); 2801 shape = pow(shape, falloffExp); 2802 shape = 1. - clamp(shape, 0., 1.); 2803 2804 2805 float outerMask = .002; 2806 float outer = 1.0 - smoothstep(radius - outerMask, radius + outerMask, r); 2807 outer = mix(outer, 1., isInSector); 2808 2809 shape = mix(0., shape, outer); 2810 shape *= 1. - smoothstep(radius - .01, radius, r); 2811 2812 float angle = atan(f_to_uv.y, f_to_uv.x); 2813 shape -= pow(u_distortion, 2.) * shape * pow(abs(sin(PI * clamp(length(f_to_uv) - 0.2 + u_distortionShift, 0.0, 1.0))), 4.0) * (sin(u_distortionFreq * angle) + cos(floor(0.65 * u_distortionFreq) * angle)); 2814 2815 float grain = noise(grainUV, vec2(0.)); 2816 float mixerGrain = .4 * u_grainMixer * (grain - .5); 2817 2818 float mixer = shape * u_colorsCount + mixerGrain; 2819 vec4 gradient = u_colors[0]; 2820 gradient.rgb *= gradient.a; 2821 2822 float outerShape = 0.; 2823 for (int i = 1; i < ${oY.maxColorCount+1}; i++) { 2824 if (i > int(u_colorsCount)) break; 2825 float mLinear = clamp(mixer - float(i - 1), 0.0, 1.0); 2826 2827 float aa = fwidth(mLinear); 2828 float width = min(u_mixing, 0.5); 2829 float t = clamp((mLinear - (0.5 - width - aa)) / (2. * width + 2. * aa), 0., 1.); 2830 float p = mix(2., 1., clamp((u_mixing - 0.5) * 2., 0., 1.)); 2831 float m = t < 0.5 2832 ? 0.5 * pow(2. * t, p) 2833 : 1. - 0.5 * pow(2. * (1. - t), p); 2834 2835 float quadBlend = clamp((u_mixing - 0.5) * 2., 0., 1.); 2836 m = mix(m, m * m, 0.5 * quadBlend); 2837 2838 if (i == 1) { 2839 outerShape = m; 2840 } 2841 2842 vec4 c = u_colors[i - 1]; 2843 c.rgb *= c.a; 2844 gradient = mix(gradient, c, m); 2845 } 2846 2847 vec3 color = gradient.rgb * outerShape; 2848 float opacity = gradient.a * outerShape; 2849 2850 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 2851 color = color + bgColor * (1.0 - opacity); 2852 opacity = opacity + u_colorBack.a * (1.0 - opacity); 2853 2854 float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.)); 2855 grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5); 2856 grainOverlay = pow(grainOverlay, 1.3); 2857 2858 float grainOverlayV = grainOverlay * 2. - 1.; 2859 vec3 grainOverlayColor = vec3(step(0., grainOverlayV)); 2860 float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV); 2861 grainOverlayStrength = pow(grainOverlayStrength, .8); 2862 color = mix(color, grainOverlayColor, .35 * grainOverlayStrength); 2863 2864 opacity += .5 * grainOverlayStrength; 2865 opacity = clamp(opacity, 0., 1.); 2866 2867 fragColor = vec4(color, opacity); 2868} 2869`,oP={name:"Default",params:{...g,scale:1,speed:0,frame:0,colorBack:"#000000",colors:["#00bbff","#00ffe1","#ffffff"],radius:.8,focalDistance:.99,focalAngle:0,falloff:.24,mixing:.5,distortion:0,distortionShift:0,distortionFreq:12,grainMixer:0,grainOverlay:0}},oT={name:"Cross Section",params:{...g,scale:1,speed:0,frame:0,colorBack:"#3d348b",colors:["#7678ed","#f7b801","#f18701","#37a066"],radius:1,focalDistance:0,focalAngle:0,falloff:0,mixing:0,distortion:1,distortionShift:0,distortionFreq:12,grainMixer:0,grainOverlay:0}},oG={name:"Radial",params:{...g,scale:1,speed:0,frame:0,colorBack:"#264653",colors:["#9c2b2b","#f4a261","#ffffff"],radius:1,focalDistance:0,focalAngle:0,falloff:0,mixing:1,distortion:0,distortionShift:0,distortionFreq:12,grainMixer:0,grainOverlay:0}},oN=[oP,{name:"Lo-Fi",params:{...g,speed:0,frame:0,colorBack:"#2e1f27",colors:["#d72638","#3f88c5","#f49d37"],radius:1,focalDistance:0,focalAngle:0,falloff:.9,mixing:.7,distortion:0,distortionShift:0,distortionFreq:12,grainMixer:1,grainOverlay:.5}},oT,oG],oQ=(0,t.memo)(function({speed:e=oP.params.speed,frame:o=oP.params.frame,colorBack:a=oP.params.colorBack,colors:t=oP.params.colors,radius:r=oP.params.radius,focalDistance:i=oP.params.focalDistance,focalAngle:s=oP.params.focalAngle,falloff:l=oP.params.falloff,grainMixer:n=oP.params.grainMixer,mixing:f=oP.params.mixing,distortion:c=oP.params.distortion,distortionShift:m=oP.params.distortionShift,distortionFreq:d=oP.params.distortionFreq,grainOverlay:g=oP.params.grainOverlay,fit:h=oP.params.fit,rotation:x=oP.params.rotation,scale:y=oP.params.scale,originX:w=oP.params.originX,originY:A=oP.params.originY,offsetX:b=oP.params.offsetX,offsetY:C=oP.params.offsetY,worldWidth:B=oP.params.worldWidth,worldHeight:S=oP.params.worldHeight,...k}){let U={u_colorBack:_(a),u_colors:t.map(_),u_colorsCount:t.length,u_radius:r,u_focalDistance:i,u_focalAngle:s,u_falloff:l,u_mixing:f,u_distortion:c,u_distortionShift:m,u_distortionFreq:d,u_grainMixer:n,u_grainOverlay:g,u_fit:v[h],u_rotation:x,u_scale:y,u_offsetX:b,u_offsetY:C,u_originX:w,u_originY:A,u_worldWidth:B,u_worldHeight:S}
2869;return(0,u.jsx)(p,{...k,speed:e,frame:o,fragmentShader:oW,uniforms:U})},d),oX=`#version 300 es 2870precision mediump float; 2871 2872uniform vec2 u_resolution; 2873uniform float u_pixelRatio; 2874 2875uniform vec4 u_colorFront; 2876uniform vec4 u_colorBack; 2877 2878uniform sampler2D u_image; 2879uniform float u_imageAspectRatio; 2880 2881uniform float u_contrast; 2882uniform float u_roughness; 2883uniform float u_fiber; 2884uniform float u_fiberSize; 2885uniform float u_crumples; 2886uniform float u_crumpleSize; 2887uniform float u_folds; 2888uniform float u_foldCount; 2889uniform float u_drops; 2890uniform float u_seed; 2891uniform float u_fade; 2892 2893uniform sampler2D u_noiseTexture; 2894 2895in vec2 v_imageUV; 2896 2897out vec4 fragColor; 2898 2899float getUvFrame(vec2 uv) { 2900 float aax = 2. * fwidth(uv.x); 2901 float aay = 2. * fwidth(uv.y); 2902 2903 float left = smoothstep(0., aax, uv.x); 2904 float right = 1. - smoothstep(1. - aax, 1., uv.x); 2905 float bottom = smoothstep(0., aay, uv.y); 2906 float top = 1. - smoothstep(1. - aay, 1., uv.y); 2907 2908 return left * right * bottom * top; 2909} 2910 2911${w} 2912${A} 2913${B} 2914float valueNoise(vec2 st) { 2915 vec2 i = floor(st); 2916 vec2 f = fract(st); 2917 float a = randomR(i); 2918 float b = randomR(i + vec2(1.0, 0.0)); 2919 float c = randomR(i + vec2(0.0, 1.0)); 2920 float d = randomR(i + vec2(1.0, 1.0)); 2921 vec2 u = f * f * (3.0 - 2.0 * f); 2922 float x1 = mix(a, b, u.x); 2923 float x2 = mix(c, d, u.x); 2924 return mix(x1, x2, u.y); 2925} 2926float fbm(vec2 n) { 2927 float total = 0.0, amplitude = .4; 2928 for (int i = 0; i < 3; i++) { 2929 total += valueNoise(n) * amplitude; 2930 n *= 1.99; 2931 amplitude *= 0.65; 2932 } 2933 return total; 2934} 2935 2936 2937float randomG(vec2 p) { 2938 vec2 uv = floor(p) / 50. + .5; 2939 return texture(u_noiseTexture, fract(uv)).g; 2940} 2941float roughness(vec2 p) { 2942 p *= .1; 2943 float o = 0.; 2944 for (float i = 0.; ++i < 4.; p *= 2.1) { 2945 vec4 w = vec4(floor(p), ceil(p)); 2946 vec2 f = fract(p); 2947 o += mix( 2948 mix(randomG(w.xy), randomG(w.xw), f.y), 2949 mix(randomG(w.zy), randomG(w.zw), f.y), 2950 f.x); 2951 o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y))); 2952 } 2953 return o / 3.; 2954} 2955 2956${R} 2957 2958vec2 randomGB(vec2 p) { 2959 vec2 uv = floor(p) / 50. + .5; 2960 return texture(u_noiseTexture, fract(uv)).gb; 2961} 2962float crumpledNoise(vec2 t, float pw) { 2963 vec2 p = floor(t); 2964 float wsum = 0.; 2965 float cl = 0.; 2966 for (int y = -1; y < 2; y += 1) { 2967 for (int x = -1; x < 2; x += 1) { 2968 vec2 b = vec2(float(x), float(y)); 2969 vec2 q = b + p; 2970 vec2 q2 = q - floor(q / 8.) * 8.; 2971 vec2 c = q + randomGB(q2); 2972 vec2 r = c - t; 2973 float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw); 2974 cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w; 2975 wsum += w; 2976 } 2977 } 2978 return pow(wsum != 0.0 ? cl / wsum : 0.0, .5) * 2.; 2979} 2980float crumplesShape(vec2 uv) { 2981 return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.); 2982} 2983 2984 2985vec2 folds(vec2 uv) { 2986 vec3 pp = vec3(0.); 2987 float l = 9.; 2988 for (float i = 0.; i < 15.; i++) { 2989 if (i >= u_foldCount) break; 2990 vec2 rand = randomGB(vec2(i, i * u_seed)); 2991 float an = rand.x * TWO_PI; 2992 vec2 p = vec2(cos(an), sin(an)) * rand.y; 2993 float dist = distance(uv, p); 2994 l = min(l, dist); 2995 2996 if (l == dist) { 2997 pp.xy = (uv - p.xy); 2998 pp.z = dist; 2999 } 3000 } 3001 return mix(pp.xy, vec2(0.), pow(pp.z, .25)); 3002} 3003 3004float drops(vec2 uv) { 3005 vec2 iDropsUV = floor(uv); 3006 vec2 fDropsUV = fract(uv); 3007 float dropsMinDist = 1.; 3008 for (int j = -1; j <= 1; j++) { 3009 for (int i = -1; i <= 1; i++) { 3010 vec2 neighbor = vec2(float(i), float(j)); 3011 vec2 offset = randomGB(iDropsUV + neighbor); 3012 offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset); 3013 vec2 pos = neighbor + offset - fDropsUV; 3014 float dist = length(pos); 3015 dropsMinDist = min(dropsMinDist, dropsMinDist*dist); 3016 } 3017 } 3018 return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5)); 3019} 3020 3021float lst(float edge0, float edge1, float x) { 3022 return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); 3023} 3024 3025void main() { 3026 3027 vec2 imageUV = v_imageUV; 3028 vec2 patternUV = v_imageUV - .5; 3029 patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.)); 3030 3031 vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio; 3032 float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.)); 3033 3034 vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.; 3035 float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV)); 3036
3037 vec2 fiberUV = 2. / u_fiberSize * patternUV; 3038 float fiber = fiberNoise(fiberUV, vec2(0.)); 3039 fiber = .5 * u_fiber * (fiber - 1.); 3040 3041 vec2 normal = vec2(0.); 3042 vec2 normalImage = vec2(0.); 3043 3044 vec2 foldsUV = patternUV * .12; 3045 foldsUV = rotate(foldsUV, 4. * u_seed); 3046 vec2 w = folds(foldsUV); 3047 foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed)); 3048 vec2 w2 = folds(foldsUV); 3049 3050 float drops = u_drops * drops(patternUV * 2.); 3051 3052 float fade = u_fade * fbm(.17 * patternUV + 10. * u_seed); 3053 fade = clamp(8. * fade * fade * fade, 0., 1.); 3054 3055 w = mix(w, vec2(0.), fade); 3056 w2 = mix(w2, vec2(0.), fade); 3057 crumples = mix(crumples, 0., fade); 3058 drops = mix(drops, 0., fade); 3059 fiber *= mix(1., .5, fade); 3060 roughness *= mix(1., .5, fade); 3061 3062 normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2); 3063 normalImage.xy += u_folds * 2. * w; 3064 3065 normal.xy += crumples; 3066 normalImage.xy += 1.5 * crumples; 3067 3068 normal.xy += 3. * drops; 3069 normalImage.xy += .2 * drops; 3070 3071 normal.xy += u_roughness * 1.5 * roughness; 3072 normal.xy += fiber; 3073 3074 normalImage += u_roughness * .75 * roughness; 3075 normalImage += .2 * fiber; 3076 3077 vec3 lightPos = vec3(1., 2., 1.); 3078 float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos)); 3079 3080 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 3081 float fgOpacity = u_colorFront.a; 3082 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 3083 float bgOpacity = u_colorBack.a; 3084 3085 imageUV += .02 * normalImage; 3086 float frame = getUvFrame(imageUV); 3087 vec4 image = texture(u_image, imageUV); 3088 image.rgb += .6 * pow(u_contrast, .4) * (res - .7); 3089 3090 frame *= image.a; 3091 3092 vec3 color = fgColor * res; 3093 float opacity = fgOpacity * res; 3094 3095 color += bgColor * (1. - opacity); 3096 opacity += bgOpacity * (1. - opacity); 3097 opacity = mix(opacity, 1., frame); 3098 3099 color -= .007 * drops; 3100 3101 color.rgb = mix(color, image.rgb, frame); 3102 3103 fragColor = vec4(color, opacity); 3104} 3105`,oH={name:"Default",params:{...g,fit:"cover",scale:.6,speed:0,frame:0,colorFront:"#9fadbc",colorBack:"#ffffff",contrast:.3,roughness:.4,fiber:.3,fiberSize:.2,crumples:.3,crumpleSize:.35,folds:.65,foldCount:5,fade:0,drops:.2,seed:5.8}},oL={name:"Abstract",params:{...g,fit:"cover",speed:0,frame:0,scale:.6,colorFront:"#00eeff",colorBack:"#ff0a81",contrast:.85,roughness:0,fiber:.1,fiberSize:.2,crumples:0,crumpleSize:.3,folds:1,foldCount:3,fade:0,drops:.2,seed:2.2}},oj=[oH,{name:"Cardboard",params:{...g,fit:"cover",speed:0,frame:0,scale:.6,colorFront:"#c7b89e",colorBack:"#999180",contrast:.4,roughness:0,fiber:.35,fiberSize:.14,crumples:.7,crumpleSize:.1,folds:0,foldCount:1,fade:0,drops:.1,seed:1.6}},oL,{name:"Details",params:{...g,speed:0,frame:0,fit:"cover",scale:3,colorFront:"#00000000",colorBack:"#00000000",contrast:0,roughness:1,fiber:.27,fiberSize:.22,crumples:1,crumpleSize:.5,folds:1,foldCount:15,fade:0,drops:0,seed:6}}],oK=(0,t.memo)(function({speed:e=oH.params.speed,frame:o=oH.params.frame,colorFront:a=oH.params.colorFront,colorBack:t=oH.params.colorBack,image:r="",contrast:i=oH.params.contrast,roughness:s=oH.params.roughness,fiber:l=oH.params.fiber,crumples:n=oH.params.crumples,folds:f=oH.params.folds,drops:c=oH.params.drops,seed:m=oH.params.seed,fiberScale:d,fiberSize:g=void 0===d?oH.params.fiberSize:.2/d,crumplesScale:h,crumpleSize:x=void 0===h?oH.params.crumpleSize:.2/h,blur:y,fade:w=void 0===y?oH.params.fade:y,foldsNumber:A,foldCount:b=void 0===A?oH.params.foldCount:A,fit:C=oH.params.fit,scale:B=oH.params.scale,rotation:S=oH.params.rotation,originX:k=oH.params.originX,originY:U=oH.params.originY,offsetX:R=oH.params.offsetX,offsetY:V=oH.params.offsetY,worldWidth:F=oH.params.worldWidth,worldHeight:z=oH.params.worldHeight,...M}){let I="undefined"!=typeof window&&{u_noiseTexture:D()},O={u_image:r,u_colorFront:_(a),u_colorBack:_(t),u_contrast:i,u_roughness:s,u_fiber:l,u_fiberSize:g,u_crumples:n,u_crumpleSize:x,u_foldCount:b,u_folds:f,u_fade:w,u_drops:c,u_seed:m,...I,u_fit:v[C],u_scale:B,u_rotation:S,u_offsetX:R,u_offsetY:V,u_originX:k,u_originY:U,u_worldWidth:F,u_worldHeight:z};return(0,u.jsx)(p,{...M,speed:e,frame:o,fragmentShader:oX,mipmaps:["u_image"],uniforms:O})},d),oq=`#version 300 es 3106precision mediump float; 3107 3108uniform vec2 u_resolution; 3109uniform float u_pixelRatio; 3110uniform float u_rotation; 3111 3112uniform vec4 u_colorBack; 3113uniform vec4 u_colorShadow; 3114uniform vec4 u_colorHighlight; 3115 3116uniform sampler2D u_image; 3117uniform float u_imageAspectRatio; 3118 3119uniform float u_size; 3120uniform float u_shadows; 3121uniform float u_angle; 3122uniform float u_stretch; 3123uniform float u_shape; 3124uniform float u_distortion; 3125uniform float u_highlights; 3126uniform float u_distortionShape; 3127uniform float u_shift; 3128uniform float u_blur; 3129uniform float u_edges; 3130uniform float u_marginLeft; 3131uniform float u_marginRight; 3132uniform float u_marginTop; 3133uniform float u_marginBottom; 3134uniform float u_grainMixer; 3135uniform float u_grainOverlay; 3136 3137in vec2 v_imageUV; 3138 3139out vec4 fragColor; 3140 3141${w} 3142${A} 3143${C} 3144 3145float valueNoise(vec2 st) { 3146 vec2 i = floor(st); 3147 vec2 f = fract(st);
3148 float a = hash21(i); 3149 float b = hash21(i + vec2(1.0, 0.0)); 3150 float c = hash21(i + vec2(0.0, 1.0)); 3151 float d = hash21(i + vec2(1.0, 1.0)); 3152 vec2 u = f * f * (3.0 - 2.0 * f); 3153 float x1 = mix(a, b, u.x); 3154 float x2 = mix(c, d, u.x); 3155 return mix(x1, x2, u.y); 3156} 3157 3158float getUvFrame(vec2 uv, float softness) { 3159 float aax = 2. * fwidth(uv.x); 3160 float aay = 2. * fwidth(uv.y); 3161 float left = smoothstep(0., aax + softness, uv.x); 3162 float right = 1. - smoothstep(1. - softness - aax, 1., uv.x); 3163 float bottom = smoothstep(0., aay + softness, uv.y); 3164 float top = 1. - smoothstep(1. - softness - aay, 1., uv.y); 3165 return left * right * bottom * top; 3166} 3167 3168const int MAX_RADIUS = 50; 3169vec4 samplePremultiplied(sampler2D tex, vec2 uv) { 3170 vec4 c = texture(tex, uv); 3171 c.rgb *= c.a; 3172 return c; 3173} 3174vec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) { 3175 if (sigma <= .5) return texture(tex, uv); 3176 int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma))); 3177 3178 float twoSigma2 = 2.0 * sigma * sigma; 3179 float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma); 3180 3181 vec4 sum = samplePremultiplied(tex, uv) * gaussianNorm; 3182 float weightSum = gaussianNorm; 3183 3184 for (int i = 1; i <= MAX_RADIUS; i++) { 3185 if (i > radius) break; 3186 3187 float x = float(i); 3188 float w = exp(-(x * x) / twoSigma2) * gaussianNorm; 3189 3190 vec2 offset = dir * texelSize * x; 3191 vec4 s1 = samplePremultiplied(tex, uv + offset); 3192 vec4 s2 = samplePremultiplied(tex, uv - offset); 3193 3194 sum += (s1 + s2) * w; 3195 weightSum += 2.0 * w; 3196 } 3197 3198 vec4 result = sum / weightSum; 3199 if (result.a > 0.) { 3200 result.rgb /= result.a; 3201 } 3202 3203 return result; 3204} 3205 3206vec2 rotateAspect(vec2 p, float a, float aspect) { 3207 p.x *= aspect; 3208 p = rotate(p, a); 3209 p.x /= aspect; 3210 return p; 3211} 3212 3213float smoothFract(float x) { 3214 float f = fract(x); 3215 float w = fwidth(x); 3216 3217 float edge = abs(f - 0.5) - 0.5; 3218 float band = smoothstep(-w, w, edge); 3219 3220 return mix(f, 1.0 - f, band); 3221} 3222 3223void main() { 3224 3225 float patternRotation = -u_angle * PI / 180.; 3226 float patternSize = mix(200., 5., u_size); 3227 3228 vec2 uv = v_imageUV; 3229 3230 vec2 uvMask = gl_FragCoord.xy / u_resolution.xy; 3231 vec2 sw = vec2(.005); 3232 vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom); 3233 float mask = 3234 smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) * 3235 smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) * 3236 smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) * 3237 smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y); 3238 float maskOuter = 3239 smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) * 3240 smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) * 3241 smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) * 3242 smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y); 3243 float maskStroke = maskOuter - mask; 3244 float maskInner = 3245 smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) * 3246 smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) * 3247 smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) * 3248 smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y); 3249 float maskStrokeInner = maskInner - mask; 3250 3251 uv -= .5; 3252 uv *= patternSize; 3253 uv = rotateAspect(uv, patternRotation, u_imageAspectRatio); 3254 3255 float curve = 0.; 3256 float patternY = uv.y / u_imageAspectRatio; 3257 if (u_shape > 4.5) { 3258 // pattern 3259 curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY); 3260 } else if (u_shape > 3.5) { 3261 // zigzag 3262 curve = 10. * abs(fract(.1 * patternY) - .5); 3263 } else if (u_shape > 2.5) { 3264 // wave 3265 curve = 4. * sin(.23 * patternY); 3266 } else if (u_shape > 1.5) { 3267 // lines irregular 3268 curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x); 3269 } else { 3270 // lines 3271 } 3272 3273 vec2 UvToFract = uv + curve; 3274 vec2 fractOrigUV = fract(uv); 3275 vec2 floorOrigUV = floor(uv); 3276 3277 float x = smoothFract(UvToFract.x); 3278 float xNonSmooth = fract(UvToFract.x) + .0001; 3279 3280 float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x)); 3281 highlightsWidth += 2. * maskStrokeInner; 3282 float highlights = smoothstep(0., highlightsWidth, xNonSmooth); 3283 highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth); 3284 highlights = 1. - highlights; 3285 highlights *= u_highlights; 3286 highlights = clamp(highlights, 0., 1.); 3287 highlights *= mask; 3288 3289 float shadows = pow(x, 1.3); 3290 float distortion = 0.; 3291 float fadeX = 1.; 3292 float frameFade = 0.; 3293 3294 float aa = fwidth(xNonSmooth); 3295 aa = max(aa, fwidth(uv.x)); 3296 aa = max(aa, fwidth(UvToFract.x)); 3297 aa = max(aa, .0001); 3298 3299 if (u_distortionShape == 1.) { 3300 distortion = -pow(1.5 * x, 3.); 3301 distortion += (.5 - u_shift); 3302 3303 frameFade = pow(1.5 * x, 3.); 3304 aa = max(.2, aa); 3305 aa += mix(.2, 0., u_size); 3306 fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth); 3307 distortion = mix(.5, distortion, fadeX); 3308 } else if (u_distortionShape == 2.) { 3309 distortion = 2. * pow(x, 2.); 3310 distortion -= (.5 + u_shift); 3311 3312 frameFade = pow(abs(x - .5), 4.); 3313 aa = max(.2, aa); 3314 aa += mix(.2, 0., u_size); 3315 fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth); 3316 distortion = mix(.5, distortion, fadeX); 3317 frameFade = mix(1., frameFade, .5 * fadeX); 3318 } else if (u_distortionShape == 3.) { 3319 distortion = pow(2. * (xNonSmooth - .5), 6.); 3320 distortion -= .25; 3321 distortion -= u_shift; 3322 3323 frameFade = 1. - 2. * pow(abs(x - .4), 2.); 3324 aa = .15; 3325 aa += mix(.1, 0., u_size); 3326 fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth); 3327 frameFade = mix(1., frameFade, fadeX); 3328 3329 } else if (u_distortionShape == 4.) { 3330 x = xNonSmooth; 3331 distortion = sin((x + .25) * TWO_PI); 3332 shadows = .5 + .5 * asin(distortion) / (.5 * PI); 3333 distortion *= .5; 3334 distortion -= u_shift; 3335 frameFade = .5 + .5 * sin(x * TWO_PI); 3336 } else if (u_distortionShape == 5.) { 3337 distortion -= pow(abs(x), .2) * x; 3338 distortion += .33; 3339 distortion -= 3. * u_shift; 3340 distortion *= .33; 3341 3342 frameFade = .3 * (smoothstep(.0, 1., x)); 3343 shadows = pow(x, 2.5); 3344 3345 aa = max(.1, aa); 3346 aa += mix(.1, 0., u_size); 3347 fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth); 3348 distortion *= fadeX; 3349 } 3350 3351 vec2 dudx = dFdx(v_imageUV); 3352 vec2 dudy = dFdy(v_imageUV); 3353 vec2 grainUV = v_imageUV - .5; 3354 grainUV *= (.8 / vec2(length(dudx), length(dudy))); 3355 grainUV += .5; 3356 float grain = valueNoise(grainUV); 3357 grain = smoothstep(.4, .7, grain); 3358 grain *= u_grainMixer; 3359 distortion = mix(distortion, 0., grain); 3360
3361 shadows = min(shadows, 1.); 3362 shadows += maskStrokeInner; 3363 shadows *= mask; 3364 shadows = min(shadows, 1.); 3365 shadows *= pow(u_shadows, 2.); 3366 shadows = clamp(shadows, 0., 1.); 3367 3368 distortion *= 3. * u_distortion; 3369 frameFade *= u_distortion; 3370 3371 fractOrigUV.x += distortion; 3372 floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, u_imageAspectRatio); 3373 fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, u_imageAspectRatio); 3374 3375 uv = (floorOrigUV + fractOrigUV) / patternSize; 3376 uv += pow(maskStroke, 4.); 3377 3378 uv += vec2(.5); 3379 3380 uv = mix(v_imageUV, uv, smoothstep(0., .7, mask)); 3381 float blur = mix(0., 50., u_blur); 3382 blur = mix(0., blur, smoothstep(.5, 1., mask)); 3383 3384 float edgeDistortion = mix(.0, .04, u_edges); 3385 edgeDistortion += .06 * frameFade * u_edges; 3386 edgeDistortion *= mask; 3387 float frame = getUvFrame(uv, edgeDistortion); 3388 3389 float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth); 3390 stretch = pow(stretch, 2.); 3391 stretch *= mask; 3392 stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade); 3393 uv.y = mix(uv.y, .5, u_stretch * stretch); 3394 3395 vec4 image = getBlur(u_image, uv, 1. / u_resolution / u_pixelRatio, vec2(0., 1.), blur); 3396 image.rgb *= image.a; 3397 vec4 backColor = u_colorBack; 3398 backColor.rgb *= backColor.a; 3399 vec4 highlightColor = u_colorHighlight; 3400 highlightColor.rgb *= highlightColor.a; 3401 vec4 shadowColor = u_colorShadow; 3402 3403 vec3 color = highlightColor.rgb * highlights; 3404 float opacity = highlightColor.a * highlights; 3405 3406 shadows = mix(shadows * shadowColor.a, 0., highlights); 3407 color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows); 3408 color += .5 * pow(shadows, .5) * shadowColor.rgb; 3409 opacity += shadows; 3410 color = clamp(color, vec3(0.), vec3(1.)); 3411 opacity = clamp(opacity, 0., 1.); 3412 3413 color += image.rgb * (1. - opacity) * frame; 3414 opacity += image.a * (1. - opacity) * frame; 3415 3416 color += backColor.rgb * (1. - opacity); 3417 opacity += backColor.a * (1. - opacity); 3418 3419 float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.)); 3420 grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5); 3421 grainOverlay = pow(grainOverlay, 1.3); 3422 3423 float grainOverlayV = grainOverlay * 2. - 1.; 3424 vec3 grainOverlayColor = vec3(step(0., grainOverlayV)); 3425 float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV); 3426 grainOverlayStrength = pow(grainOverlayStrength, .8); 3427 grainOverlayStrength *= mask; 3428 color = mix(color, grainOverlayColor, .35 * grainOverlayStrength); 3429 3430 opacity += .5 * grainOverlayStrength; 3431 opacity = clamp(opacity, 0., 1.); 3432 3433 fragColor = vec4(color, opacity); 3434} 3435`,oJ={lines:1,linesIrregular:2,wave:3,zigzag:4,pattern:5},oZ={prism:1,lens:2,contour:3,cascade:4,flat:5},o$={name:"Default",params:{...g,fit:"cover",speed:0,frame:0,colorBack:"#00000000",colorShadow:"#000000",colorHighlight:"#ffffff",shadows:.25,size:.5,angle:0,distortionShape:"prism",highlights:.1,shape:"lines",distortion:.5,shift:0,blur:0,edges:.25,stretch:0,margin:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,grainMixer:0,grainOverlay:0}},o0={name:"Waves",params:{...g,fit:"cover",scale:1.2,speed:0,frame:0,colorBack:"#00000000",colorShadow:"#000000",colorHighlight:"#ffffff",shadows:0,size:.9,angle:0,distortionShape:"contour",highlights:0,shape:"wave",distortion:.5,shift:0,blur:.1,edges:.5,stretch:1,margin:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,grainMixer:0,grainOverlay:.05}},o1=[o$,{name:"Abstract",params:{...g,fit:"cover",scale:4,speed:0,frame:0,colorBack:"#00000000",colorShadow:"#000000",colorHighlight:"#ffffff",shadows:0,size:.7,angle:30,distortionShape:"flat",highlights:0,shape:"linesIrregular",distortion:1,shift:0,blur:1,edges:.5,stretch:1,margin:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,grainMixer:.1,grainOverlay:.1}},o0,{name:"Folds",params:{...g,fit:"cover",speed:0,frame:0,colorBack:"#00000000",colorShadow:"#000000",colorHighlight:"#ffffff",shadows:.4,size:.4,angle:0,distortionShape:"cascade",highlights:0,shape:"lines",distortion:.75,shift:0,blur:.25,edges:.5,stretch:0,margin:.1,marginLeft:.1,marginRight:.1,marginTop:.1,marginBottom:.1,grainMixer:0,grainOverlay:0}}],o2=(0,t.memo)(function({speed:e=o$.params.speed,frame:o=o$.params.frame,colorBack:a=o$.params.colorBack,colorShadow:t=o$.params.colorShadow,colorHighlight:r=o$.params.colorHighlight,image:i="",shadows:s=o$.params.shadows,angle:l=o$.params.angle,distortion:n=o$.params.distortion,distortionShape:f=o$.params.distortionShape,highlights:c=o$.params.highlights,shape:m=o$.params.shape,shift:d=o$.params.shift,blur:g=o$.params.blur,edges:h=o$.params.edges,margin:x,marginLeft:y=x??o$.params.marginLeft,marginRight:w=x??o$.params.marginRight,marginTop:A=x??o$.params.marginTop,marginBottom:b=x??o$.params.marginBottom,grainMixer:C=o$.params.grainMixer,grainOverlay:B=o$.params.grainOverlay,stretch:S=o$.params.stretch,count:k,size:U=void 0===k?o$.params.size:Math.pow(1/(1.6*k),1/6)/.7-.5,fit:R=o$.params.fit,scale:V=o$.params.scale,rotation:F=o$.params.rotation,originX:z=o$.params.originX,originY:M=o$.params.originY,offsetX:I=o$.params.offsetX,offsetY:O=o$.params.offsetY,worldWidth:E=o$.params.worldWidth,worldHeight:D=o$.params.worldHeight,...Y}){let W={u_image:i,u_colorBack:_(a),u_colorShadow:_(t),u_colorHighlight:_(r),u_shadows:s,u_size:U,u_angle:l,u_distortion:n,u_shift:d,u_blur:g,u_edges:h,u_stretch:S,u_distortionShape:oZ[f],u_highlights:c,u_shape:oJ[m],u_marginLeft:y,u_marginRight:w,u_marginTop:A,u_marginBottom:b,u_grainMixer:C,u_grainOverlay:B,u_fit:v[R],u_scale:V,u_rotation:F,u_offsetX:I,u_offsetY:O,u_originX:z,u_originY:M,u_worldWidth:E,u_worldHeight:D};return(0,u.jsx)(p,{...Y,speed:e,frame:o,fragmentShader:oq,mipmaps:["u_image"],uniforms:W})}),o5=`#version 300 es 3436precision mediump float; 3437 3438uniform float u_time; 3439 3440uniform vec4 u_colorBack; 3441uniform vec4 u_colorHighlight; 3442 3443uniform sampler2D u_image; 3444uniform float u_imageAspectRatio; 3445 3446uniform float u_size; 3447uniform float u_highlights; 3448uniform float u_layering; 3449uniform float u_edges; 3450uniform float u_caustic; 3451uniform float u_waves; 3452 3453in vec2 v_imageUV; 3454 3455out vec4 fragColor; 3456 3457${w} 3458${A} 3459${U} 3460 3461float getUvFrame(vec2 uv) { 3462 float aax = 2. * fwidth(uv.x); 3463 float aay = 2. * fwidth(uv.y); 3464 3465 float left = smoothstep(0., aax, uv.x); 3466 float right = 1.0 - smoothstep(1. - aax, 1., uv.x); 3467 float bottom = smoothstep(0., aay, uv.y); 3468 float top = 1.0 - smoothstep(1. - aay, 1., uv.y); 3469 3470 return left * right * bottom * top; 3471} 3472 3473mat2 rotate2D(float r) { 3474 return mat2(cos(r), sin(r), -sin(r), cos(r)); 3475} 3476 3477float getCausticNoise(vec2 uv, float t, float scale) { 3478 vec2 n = vec2(.1); 3479 vec2 N = vec2(.1); 3480 mat2 m = rotate2D(.5); 3481 for (int j = 0; j < 6; j++) { 3482 uv *= m; 3483 n *= m; 3484 vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t; 3485 n += sin(q); 3486 N += cos(q) / scale; 3487 scale *= 1.1; 3488 } 3489 return (N.x + N.y + 1.); 3490} 3491 3492void main() { 3493 vec2 imageUV = v_imageUV; 3494 vec2 patternUV = v_imageUV - .5; 3495 patternUV = (patternUV * vec2(u_imageAspectRatio, 1.)); 3496 patternUV /= (.01 + .09 * u_size); 3497 3498 float t = u_time; 3499 3500 float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t)); 3501 3502 float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5); 3503 3504 causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.); 3505 causticNoise = causticNoise * causticNoise; 3506 3507 float edgesDistortion = smoothstep(0., .1, imageUV.x); 3508 edgesDistortion *= smoothstep(0., .1, imageUV.y); 3509 edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x))); 3510 edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y)); 3511 edgesDistortion = mix(edgesDistortion, 1., u_edges); 3512 3513 float causticNoiseDistortion = .02 * causticNoise * edgesDistortion; 3514
3515 float wavesDistortion = .1 * u_waves * wavesNoise; 3516 3517 imageUV += vec2(wavesDistortion, -wavesDistortion); 3518 imageUV += (u_caustic * causticNoiseDistortion); 3519 3520 float frame = getUvFrame(imageUV); 3521 3522 vec4 image = texture(u_image, imageUV); 3523 vec4 backColor = u_colorBack; 3524 backColor.rgb *= backColor.a; 3525 3526 vec3 color = mix(backColor.rgb, image.rgb, image.a * frame); 3527 float opacity = backColor.a + image.a * frame; 3528 3529 causticNoise = max(-.2, causticNoise); 3530 3531 float hightlight = .025 * u_highlights * causticNoise; 3532 hightlight *= u_colorHighlight.a; 3533 color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise); 3534 opacity += hightlight; 3535 3536 color += hightlight * (.5 + .5 * wavesNoise); 3537 opacity += hightlight * (.5 + .5 * wavesNoise); 3538 3539 opacity = clamp(opacity, 0., 1.); 3540 3541 fragColor = vec4(color, opacity); 3542} 3543`,o3={name:"Default",params:{...g,scale:.8,speed:1,frame:0,colorBack:"#909090",colorHighlight:"#ffffff",highlights:.07,layering:.5,edges:.8,waves:.3,caustic:.1,size:1}},o4={name:"Abstract",params:{...g,fit:"cover",scale:3,speed:1,frame:0,colorBack:"#909090",colorHighlight:"#ffffff",highlights:0,layering:0,edges:1,waves:1,caustic:.4,size:.15}},o8={name:"Streaming",params:{...g,fit:"contain",scale:.4,speed:2,frame:0,colorBack:"#909090",colorHighlight:"#ffffff",highlights:0,layering:0,edges:0,waves:.5,caustic:0,size:.5}},o9=[o3,{name:"Slow-mo",params:{...g,fit:"cover",scale:1,speed:.1,frame:0,colorBack:"#909090",colorHighlight:"#ffffff",highlights:.4,layering:0,edges:0,waves:0,caustic:.2,size:.7}},o4,o8],o6=(0,t.memo)(function({speed:e=o3.params.speed,frame:o=o3.params.frame,colorBack:a=o3.params.colorBack,colorHighlight:t=o3.params.colorHighlight,image:r="",highlights:i=o3.params.highlights,layering:s=o3.params.layering,waves:l=o3.params.waves,edges:n=o3.params.edges,caustic:f=o3.params.caustic,effectScale:c,size:m=void 0===c?o3.params.size:10/9/c-1/9,fit:d=o3.params.fit,scale:g=o3.params.scale,rotation:h=o3.params.rotation,originX:x=o3.params.originX,originY:y=o3.params.originY,offsetX:w=o3.params.offsetX,offsetY:A=o3.params.offsetY,worldWidth:b=o3.params.worldWidth,worldHeight:C=o3.params.worldHeight,...B}){let S={u_image:r,u_colorBack:_(a),u_colorHighlight:_(t),u_highlights:i,u_layering:s,u_waves:l,u_edges:n,u_caustic:f,u_size:m,u_fit:v[d],u_rotation:h,u_scale:g,u_offsetX:w,u_offsetY:A,u_originX:x,u_originY:y,u_worldWidth:b,u_worldHeight:C};return(0,u.jsx)(p,{...B,speed:e,frame:o,fragmentShader:o5,mipmaps:["u_image"],uniforms:S})},d),o7=`#version 300 es 3544precision mediump float; 3545 3546uniform vec2 u_resolution; 3547uniform float u_pixelRatio; 3548uniform float u_originX; 3549uniform float u_originY; 3550uniform float u_worldWidth; 3551uniform float u_worldHeight; 3552uniform float u_fit; 3553 3554uniform float u_scale; 3555uniform float u_rotation; 3556uniform float u_offsetX; 3557uniform float u_offsetY; 3558 3559uniform vec4 u_colorFront; 3560uniform vec4 u_colorBack; 3561uniform vec4 u_colorHighlight; 3562 3563uniform sampler2D u_image; 3564uniform float u_imageAspectRatio; 3565 3566uniform float u_type; 3567uniform float u_pxSize; 3568uniform bool u_originalColors; 3569uniform bool u_inverted; 3570uniform float u_colorSteps; 3571 3572out vec4 fragColor; 3573 3574 3575${C} 3576${w} 3577 3578float getUvFrame(vec2 uv, vec2 pad) { 3579 float aa = 0.0001; 3580 3581 float left = smoothstep(-pad.x, -pad.x + aa, uv.x); 3582 float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x); 3583 float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y); 3584 float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y); 3585 3586 return left * right * bottom * top; 3587} 3588 3589vec2 getImageUV(vec2 uv) { 3590 vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5); 3591 float r = u_rotation * PI / 180.; 3592 mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r)); 3593 vec2 graphicOffset = vec2(-u_offsetX, u_offsetY); 3594 3595 vec2 imageBoxSize; 3596 if (u_fit == 1.) { // contain 3597 imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 3598 } else if (u_fit == 2.) { // cover 3599 imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio; 3600 } else { 3601 imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio); 3602 } 3603 imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio; 3604 vec2 imageBoxScale = u_resolution.xy / imageBoxSize; 3605 3606 vec2 imageUV = uv; 3607 imageUV *= imageBoxScale; 3608 imageUV += boxOrigin * (imageBoxScale - 1.); 3609 imageUV += graphicOffset; 3610 imageUV /= u_scale; 3611 imageUV.x *= u_imageAspectRatio; 3612 imageUV = graphicRotation * imageUV; 3613 imageUV.x /= u_imageAspectRatio; 3614 3615 imageUV += .5; 3616 imageUV.y = 1. - imageUV.y; 3617 3618 return imageUV; 3619} 3620 3621const int bayer2x2[4] = int[4](0, 2, 3, 1); 3622const int bayer4x4[16] = int[16]( 36230, 8, 2, 10, 362412, 4, 14, 6, 36253, 11, 1, 9, 362615, 7, 13, 5 3627); 3628 3629const int bayer8x8[64] = int[64]( 36300, 32, 8, 40, 2, 34, 10, 42, 363148, 16, 56, 24, 50, 18, 58, 26, 363212, 44, 4, 36, 14, 46, 6, 38, 363360, 28, 52, 20, 62, 30, 54, 22, 36343, 35, 11, 43, 1, 33, 9, 41, 363551, 19, 59, 27, 49, 17, 57, 25, 363615, 47, 7, 39, 13, 45, 5, 37, 363763, 31, 55, 23, 61, 29, 53, 21 3638); 3639 3640float getBayerValue(vec2 uv, int size) { 3641 ivec2 pos = ivec2(fract(uv / float(size)) * float(size)); 3642 int index = pos.y * size + pos.x; 3643 3644 if (size == 2) { 3645 return float(bayer2x2[index]) / 4.0; 3646 } else if (size == 4) { 3647 return float(bayer4x4[index]) / 16.0; 3648 } else if (size == 8) { 3649 return float(bayer8x8[index]) / 64.0; 3650 } 3651 return 0.0; 3652} 3653 3654 3655void main() { 3656 3657 float pxSize = u_pxSize * u_pixelRatio; 3658 vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution; 3659 pxSizeUV /= pxSize; 3660 vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize; 3661 vec2 normalizedUV = canvasPixelizedUV / u_resolution; 3662 3663 vec2 imageUV = getImageUV(normalizedUV); 3664 vec2 ditheringNoiseUV = canvasPixelizedUV; 3665 vec4 image = texture(u_image, imageUV); 3666 float frame = getUvFrame(imageUV, pxSize / u_resolution); 3667 3668 int type = int(floor(u_type)); 3669 float dithering = 0.0; 3670 3671 float lum = dot(vec3(.2126, .7152, .0722), image.rgb); 3672 lum = u_inverted ? (1. - lum) : lum; 3673 3674 switch (type) { 3675 case 1: { 3676 dithering = step(hash21(ditheringNoiseUV), lum); 3677 } break; 3678 case 2: 3679 dithering = getBayerValue(pxSizeUV, 2); 3680 break; 3681 case 3: 3682 dithering = getBayerValue(pxSizeUV, 4); 3683 break; 3684 default : 3685 dithering = getBayerValue(pxSizeUV, 8); 3686 break; 3687 } 3688 3689 float colorSteps = max(floor(u_colorSteps), 1.); 3690 vec3 color = vec3(0.0); 3691 float opacity = 1.; 3692 3693 dithering -= .5; 3694 float brightness = clamp(lum + dithering / colorSteps, 0.0, 1.0); 3695 brightness = mix(0.0, brightness, frame); 3696 brightness = mix(0.0, brightness, image.a); 3697 float quantLum = floor(brightness * colorSteps + 0.5) / colorSteps; 3698 quantLum = mix(0.0, quantLum, frame); 3699 3700 if (u_originalColors == true) { 3701 vec3 normColor = image.rgb / max(lum, 0.001); 3702 color = normColor * quantLum; 3703 3704 float quantAlpha = floor(image.a * colorSteps + 0.5) / colorSteps; 3705 opacity = mix(quantLum, 1., quantAlpha); 3706 } else { 3707 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 3708 float fgOpacity = u_colorFront.a; 3709 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 3710 float bgOpacity = u_colorBack.a; 3711 vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a; 3712 float hlOpacity = u_colorHighlight.a; 3713 3714 fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness)); 3715 fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness)); 3716 3717 color = fgColor * quantLum; 3718 opacity = fgOpacity * quantLum; 3719 color += bgColor * (1.0 - opacity); 3720 opacity += bgOpacity * (1.0 - opacity); 3721 } 3722 3723 fragColor = vec4(color, opacity); 3724} 3725`,ae={name:"Default",params:{...g,fit:"cover",speed:0,frame:0,colorFront:"#94ffaf",colorBack:"#000c38",colorHighlight:"#eaff94",type:"8x8",size:2,colorSteps:2,originalColors:!1,inverted:!1}}
3725,ao={name:"Retro",params:{...g,fit:"cover",speed:0,frame:0,colorFront:"#eeeeee",colorBack:"#5452ff",colorHighlight:"#eeeeee",type:"2x2",size:3,colorSteps:1,originalColors:!0,inverted:!1}},aa=[ae,{name:"Noise",params:{...g,fit:"cover",speed:0,frame:0,colorFront:"#a2997c",colorBack:"#000000",colorHighlight:"#ededed",type:"random",size:1,colorSteps:1,originalColors:!1,inverted:!1}},ao,{name:"Natural",params:{...g,fit:"cover",speed:0,frame:0,colorFront:"#ffffff",colorBack:"#000000",colorHighlight:"#ffffff",type:"8x8",size:2,colorSteps:5,originalColors:!0,inverted:!1}}],at=(0,t.memo)(function({speed:e=ae.params.speed,frame:o=ae.params.frame,colorFront:a=ae.params.colorFront,colorBack:t=ae.params.colorBack,colorHighlight:r=ae.params.colorHighlight,image:i="",type:s=ae.params.type,colorSteps:l=ae.params.colorSteps,originalColors:n=ae.params.originalColors,inverted:f=ae.params.inverted,pxSize:c,size:m=void 0===c?ae.params.size:c,fit:d=ae.params.fit,scale:g=ae.params.scale,rotation:h=ae.params.rotation,originX:x=ae.params.originX,originY:y=ae.params.originY,offsetX:w=ae.params.offsetX,offsetY:A=ae.params.offsetY,worldWidth:b=ae.params.worldWidth,worldHeight:C=ae.params.worldHeight,...B}){let S={u_image:i,u_colorFront:_(a),u_colorBack:_(t),u_colorHighlight:_(r),u_type:oa[s],u_pxSize:m,u_colorSteps:l,u_originalColors:n,u_inverted:f,u_fit:v[d],u_rotation:h,u_scale:g,u_offsetX:w,u_offsetY:A,u_originX:x,u_originY:y,u_worldWidth:b,u_worldHeight:C};return(0,u.jsx)(p,{...B,speed:e,frame:o,fragmentShader:o7,uniforms:S})},d),ar={maxColorCount:10},ai=`#version 300 es 3726precision highp float; 3727 3728in mediump vec2 v_imageUV; 3729in mediump vec2 v_objectUV; 3730out vec4 fragColor; 3731 3732uniform sampler2D u_image; 3733uniform float u_time; 3734uniform mediump float u_imageAspectRatio; 3735 3736uniform vec4 u_colorBack; 3737uniform vec4 u_colors[${ar.maxColorCount}]; 3738uniform float u_colorsCount; 3739 3740uniform float u_angle; 3741uniform float u_noise; 3742uniform float u_innerGlow; 3743uniform float u_outerGlow; 3744uniform float u_contour; 3745 3746#define TWO_PI 6.28318530718 3747#define PI 3.14159265358979323846 3748 3749float getImgFrame(vec2 uv, float th) { 3750 float frame = 1.; 3751 frame *= smoothstep(0., th, uv.y); 3752 frame *= 1. - smoothstep(1. - th, 1., uv.y); 3753 frame *= smoothstep(0., th, uv.x); 3754 frame *= 1. - smoothstep(1. - th, 1., uv.x); 3755 return frame; 3756} 3757 3758float circle(vec2 uv, vec2 c, vec2 r) { 3759 return 1. - smoothstep(r[0], r[1], length(uv - c)); 3760} 3761 3762float lst(float edge0, float edge1, float x) { 3763 return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); 3764} 3765 3766float sst(float edge0, float edge1, float x) { 3767 return smoothstep(edge0, edge1, x); 3768} 3769 3770float shadowShape(vec2 uv, float t, float contour) { 3771 vec2 scaledUV = uv; 3772 3773 // base shape tranjectory 3774 float posY = mix(-1., 2., t); 3775 3776 // scaleX when it's moving down 3777 scaledUV.y -= .5; 3778 float mainCircleScale = sst(0., .8, posY) * lst(1.4, .9, posY); 3779 scaledUV *= vec2(1., 1. + 1.5 * mainCircleScale); 3780 scaledUV.y += .5; 3781 3782 // base shape 3783 float innerR = .4; 3784 float outerR = 1. - .3 * (sst(.1, .2, t) * (1. - sst(.2, .5, t))); 3785 float s = circle(scaledUV, vec2(.5, posY - .2), vec2(innerR, outerR)); 3786 float shapeSizing = sst(.2, .3, t) * sst(.6, .3, t); 3787 s = pow(s, 1.4); 3788 s *= 1.2; 3789 3790 // flat gradient to take over the shadow shape 3791 float topFlattener = 0.; 3792 { 3793 float pos = posY - uv.y; 3794 float edge = 1.2; 3795 topFlattener = lst(-.4, 0., pos) * (1. - sst(.0, edge, pos)); 3796 topFlattener = pow(topFlattener, 3.); 3797 float topFlattenerMixer = (1. - sst(.0, .3, pos)); 3798 s = mix(topFlattener, s, topFlattenerMixer); 3799 } 3800 3801 // apple right circle 3802 { 3803 float visibility = sst(.6, .7, t) * (1. - sst(.8, .9, t)); 3804 float angle = -2. -t * TWO_PI; 3805 float rightCircle = circle(uv, vec2(.95 - .2 * cos(angle), .4 - .1 * sin(angle)), vec2(.15, .3)); 3806 rightCircle *= visibility; 3807 s = mix(s, 0., rightCircle); 3808 } 3809 3810 // apple top circle 3811 { 3812 float topCircle = circle(uv, vec2(.5, .19), vec2(.05, .25)); 3813 topCircle += 2. * contour * circle(uv, vec2(.5, .19), vec2(.2, .5)); 3814 float visibility = .55 * sst(.2, .3, t) * (1. - sst(.3, .45, t)); 3815 topCircle *= visibility; 3816 s = mix(s, 0., topCircle); 3817 } 3818
3819 float leafMask = circle(uv, vec2(.53, .13), vec2(.08, .19)); 3820 leafMask = mix(leafMask, 0., 1. - sst(.4, .54, uv.x)); 3821 leafMask = mix(0., leafMask, sst(.0, .2, uv.y)); 3822 leafMask *= (sst(.5, 1.1, posY) * sst(1.5, 1.3, posY)); 3823 s += leafMask; 3824 3825 // apple bottom circle 3826 { 3827 float visibility = sst(.0, .4, t) * (1. - sst(.6, .8, t)); 3828 s = mix(s, 0., visibility * circle(uv, vec2(.52, .92), vec2(.09, .25))); 3829 } 3830 3831 // random balls that are invisible if apple logo is selected 3832 { 3833 float pos = sst(.0, .6, t) * (1. - sst(.6, 1., t)); 3834 s = mix(s, .5, circle(uv, vec2(.0, 1.2 - .5 * pos), vec2(.1, .3))); 3835 s = mix(s, .0, circle(uv, vec2(1., .5 + .5 * pos), vec2(.1, .3))); 3836 3837 s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * sst(.7, .5, t)), vec2(.07, .22))); 3838 s = mix(s, 1., circle(uv, vec2(.95, .2 + .2 * sst(.3, .4, t) * (1. - sst(.5, .7, t))), vec2(.07, .22))); 3839 s /= max(1e-4, sst(1., .85, uv.y)); 3840 } 3841 3842 s = clamp(0., 1., s); 3843 return s; 3844} 3845 3846float blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) { 3847 vec2 texel = 1.0 / vec2(textureSize(tex, 0)); 3848 vec2 r = radius * texel; 3849 3850 float w1 = 1.0, w2 = 2.0, w4 = 4.0; 3851 float norm = 16.0; 3852 float sum = w4 * centerSample; 3853 3854 sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).g; 3855 sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).g; 3856 sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).g; 3857 sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).g; 3858 3859 sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).g; 3860 sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).g; 3861 sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).g; 3862 sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).g; 3863 3864 return sum / norm; 3865} 3866 3867void main() { 3868 vec2 uv = v_objectUV + .5; 3869 uv.y = 1. - uv.y; 3870 3871 vec2 imgUV = v_imageUV; 3872 imgUV -= .5; 3873 imgUV *= 0.5714285714285714; 3874 imgUV += .5; 3875 float imgSoftFrame = getImgFrame(imgUV, .03); 3876 3877 vec4 img = texture(u_image, imgUV); 3878 vec2 dudx = dFdx(imgUV); 3879 vec2 dudy = dFdy(imgUV); 3880 3881 if (img.a == 0.) { 3882 fragColor = u_colorBack; 3883 return; 3884 } 3885 3886 float t = .1 * u_time; 3887 t -= .3; 3888 3889 float tCopy = t + 1. / 3.; 3890 float tCopy2 = t + 2. / 3.; 3891 3892 t = mod(t, 1.); 3893 tCopy = mod(tCopy, 1.); 3894 tCopy2 = mod(tCopy2, 1.); 3895 3896 vec2 animationUV = imgUV - vec2(.5); 3897 float angle = -u_angle * PI / 180.; 3898 float cosA = cos(angle); 3899 float sinA = sin(angle); 3900 animationUV = vec2( 3901 animationUV.x * cosA - animationUV.y * sinA, 3902 animationUV.x * sinA + animationUV.y * cosA 3903 ) + vec2(.5); 3904 3905 float shape = img[0]; 3906 3907 img[1] = blurEdge3x3(u_image, imgUV, dudx, dudy, 8., img[1]); 3908 3909 float outerBlur = 1. - mix(1., img[1], shape); 3910 float innerBlur = mix(img[1], 0., shape); 3911 float contour = mix(img[2], 0., shape); 3912 3913 outerBlur *= imgSoftFrame; 3914 3915 float shadow = shadowShape(animationUV, t, innerBlur); 3916 float shadowCopy = shadowShape(animationUV, tCopy, innerBlur); 3917 float shadowCopy2 = shadowShape(animationUV, tCopy2, innerBlur); 3918 3919 float inner = .8 + .8 * innerBlur; 3920 inner = mix(inner, 0., shadow); 3921 inner = mix(inner, 0., shadowCopy); 3922 inner = mix(inner, 0., shadowCopy2); 3923 3924 inner *= mix(0., 2., u_innerGlow); 3925 3926 inner += (u_contour * 2.) * contour; 3927 inner = min(1., inner); 3928 inner *= (1. - shape); 3929 3930 float outer = 0.; 3931 { 3932 t *= 3.; 3933 t = mod(t - .1, 1.); 3934 3935 outer = .9 * pow(outerBlur, .8); 3936 float y = mod(animationUV.y - t, 1.); 3937 float animatedMask = sst(.3, .65, y) * (1. - sst(.65, 1., y)); 3938 animatedMask = .5 + animatedMask; 3939 outer *= animatedMask; 3940 outer *= mix(0., 5., pow(u_outerGlow, 2.)); 3941 outer *= imgSoftFrame; 3942 } 3943 3944 inner = pow(inner, 1.2); 3945 float heat = clamp(inner + outer, 0., 1.); 3946 3947 heat += (.005 + .35 * u_noise) * (fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123) - .5); 3948 3949 float mixer = heat * u_colorsCount; 3950 vec4 gradient = u_colors[0]; 3951 gradient.rgb *= gradient.a; 3952 float outerShape = 0.; 3953 for (int i = 1; i < ${ar.maxColorCount+1}; i++) { 3954 if (i > int(u_colorsCount)) break; 3955 float m = clamp(mixer - float(i - 1), 0., 1.); 3956 if (i == 1) { 3957 outerShape = m; 3958 } 3959 vec4 c = u_colors[i - 1]; 3960 c.rgb *= c.a; 3961 gradient = mix(gradient, c, m); 3962 } 3963 3964 vec3 color = gradient.rgb * outerShape; 3965 float opacity = gradient.a * outerShape; 3966 3967 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 3968 color = color + bgColor * (1.0 - opacity); 3969 opacity = opacity + u_colorBack.a * (1.0 - opacity); 3970 3971 color += .02 * (fract(sin(dot(uv + 1., vec2(12.9898, 78.233))) * 43758.5453123) - .5); 3972 3973 fragColor = vec4(color, opacity); 3974} 3975`;function as(e){let o=document.createElement("canvas");return new Promise((a,t)=>{let r=new Image;r.crossOrigin="anonymous",r.addEventListener("load",()=>{("string"==typeof e?e.endsWith(".svg"):"image/svg+xml"===e.type)&&(r.width=1e3,r.height=1e3);
3975let i=r.naturalWidth/r.naturalHeight,s=Math.floor(150),l=Math.ceil(2.5*s),n=1e3,f=1e3;i>1?f=Math.floor(1e3/i):n=Math.floor(1e3*i),o.width=n+2*l,o.height=f+2*l;let c=o.getContext("2d",{willReadFrequently:!0});if(!c)throw Error("Failed to get canvas 2d context");c.fillStyle="white",c.fillRect(0,0,o.width,o.height),c.drawImage(r,l,l,n,f);let{width:u,height:m}=o,p=c.getImageData(0,0,u,m).data,d=u*m,g=new Uint8ClampedArray(d);for(let e=0;e<d;e++){let o=4*e,a=p[o]??0,t=p[o+1]??0,r=p[o+2]??0;g[e]=.299*a+.587*t+.114*r|0}let h=Math.max(1,Math.round(.12*s)),v=an(g,u,m,s,3),_=an(g,u,m,h,3),x=an(g,u,m,5,1),y=c.createImageData(u,m),w=y.data;for(let e=0;e<d;e++){let o=4*e;w[o]=x[e]??0,w[o+1]=v[e]??0,w[o+2]=_[e]??0,w[o+3]=255}c.putImageData(y,0,0),o.toBlob(e=>{if(!e)return void t(Error("Failed to create PNG blob"));a({blob:e})},"image/png")}),r.addEventListener("error",()=>{t(Error("Failed to load image"))}),r.src="string"==typeof e?e:URL.createObjectURL(e)})}function al(e,o,a,t){if(t<=0)return e.slice();let r=new Uint8ClampedArray(o*a),i=new Uint32Array(o*a);for(let t=0;t<a;t++){let a=0;for(let r=0;r<o;r++){let s=t*o+r;a+=e[s]??0,i[s]=a+(t>0?i[s-o]??0:0)}}for(let e=0;e<a;e++){let s=Math.max(0,e-t),l=Math.min(a-1,e+t);for(let a=0;a<o;a++){let n=Math.max(0,a-t),f=Math.min(o-1,a+t),c=l*o+f,u=l*o+(n-1),m=(s-1)*o+f,p=(s-1)*o+(n-1),d=i[c]??0,g=n>0?i[u]??0:0,h=d-g-(s>0?i[m]??0:0)+(n>0&&s>0?i[p]??0:0),v=(f-n+1)*(l-s+1);r[e*o+a]=Math.round(h/v)}}return r}function an(e,o,a,t,r){if(t<=0||r<=1)return al(e,o,a,t);let i=e,s=e;for(let e=0;e<r;e++)i=s=al(i,o,a,t);return s}let af="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",ac=[],au=(e,o)=>(function(e,o=null){for(let a of(null===o&&(o=[e]),ac))if(function(e,o){if(e===o)return!0;if(!e||!o)return!1;let a=e.length;if(o.length!==a)return!1;for(let t=0;t<a;t++)if(e[t]!==o[t])return!1;return!0}
3975(o,a.keys)){if(Object.prototype.hasOwnProperty.call(a,"error"))throw a.error;if(Object.prototype.hasOwnProperty.call(a,"response"))return a.response;throw a.promise}let a={keys:o,promise:("object"==typeof e&&"function"==typeof e.then?e:e(...o)).then(e=>{a.response=e}).catch(e=>a.error=e)};throw ac.push(a),a.promise})(e,o),am={name:"Default",params:{...g,scale:.75,speed:1,frame:0,contour:.5,angle:0,noise:0,innerGlow:.5,outerGlow:.5,colorBack:"#000000",colors:["#11206a","#1f3ba2","#2f63e7","#6bd7ff","#ffe679","#ff991e","#ff4c00"]}},ap=[am,{name:"Sepia",params:{...g,scale:.75,speed:.5,frame:0,contour:.5,angle:0,noise:.75,innerGlow:.5,outerGlow:.5,colorBack:"#000000",colors:["#997F45","#ffffff"]}}],ad=(0,t.memo)(function({speed:e=am.params.speed,frame:o=am.params.frame,image:a="",contour:r=am.params.contour,angle:i=am.params.angle,noise:s=am.params.noise,innerGlow:l=am.params.innerGlow,outerGlow:n=am.params.outerGlow,colorBack:f=am.params.colorBack,colors:c=am.params.colors,suspendWhenProcessingImage:m=!1,fit:d=am.params.fit,offsetX:g=am.params.offsetX,offsetY:h=am.params.offsetY,originX:x=am.params.originX,originY:y=am.params.originY,rotation:w=am.params.rotation,scale:A=am.params.scale,worldHeight:b=am.params.worldHeight,worldWidth:C=am.params.worldWidth,...B}){let S,k="string"==typeof a?a:a.src,[U,R]=(0,t.useState)(af);S=m&&"undefined"!=typeof window?au(()=>as(k).then(e=>URL.createObjectURL(e.blob)),[k,"heatmap"]):U,(0,t.useLayoutEffect)(()=>{if(m)return;if(!k)return void R(af);let e=!0;return as(k).then(o=>{e&&R(URL.createObjectURL(o.blob))}),()=>{e=!1}},[k,m]);let V=(0,t.useMemo)(()=>({u_image:S,u_contour:r,u_angle:i,u_noise:s,u_innerGlow:l,u_outerGlow:n,u_colorBack:_(f),u_colors:c.map(_),u_colorsCount:c.length,u_fit:v[d],u_offsetX:g,u_offsetY:h,u_originX:x,u_originY:y,u_rotation:w,u_scale:A,u_worldHeight:b,u_worldWidth:C}),[e,o,r,i,s,l,n,c,f,S,d,g,h,x,y,w,A,b,C]);return(0,u.jsx)(p,{...B,speed:e,frame:o,fragmentShader:ai,mipmaps:["u_image"],uniforms:V})},d),ag=`#version 300 es 3976precision mediump float; 3977 3978uniform sampler2D u_image; 3979uniform float u_imageAspectRatio; 3980 3981uniform vec2 u_resolution; 3982uniform float u_time; 3983 3984uniform vec4 u_colorBack; 3985uniform vec4 u_colorTint; 3986 3987uniform float u_softness; 3988uniform float u_repetition; 3989uniform float u_shiftRed; 3990uniform float u_shiftBlue; 3991uniform float u_distortion; 3992uniform float u_contour; 3993uniform float u_angle; 3994 3995uniform float u_shape; 3996uniform bool u_isImage; 3997 3998in vec2 v_objectUV; 3999in vec2 v_responsiveUV; 4000in vec2 v_responsiveBoxGivenSize; 4001in vec2 v_imageUV; 4002 4003out vec4 fragColor; 4004 4005${w} 4006${A} 4007${U} 4008 4009float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) { 4010 4011 float ch = mix(c2, c1, smoothstep(.0, 2. * blur, stripe_p)); 4012 4013 float border = w[0]; 4014 ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p)); 4015 4016 if (u_isImage == true) { 4017 bump = smoothstep(.2, .8, bump); 4018 } 4019 border = w[0] + .4 * (1. - bump) * w[1]; 4020 ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p)); 4021 4022 border = w[0] + .5 * (1. - bump) * w[1]; 4023 ch = mix(ch, c2, smoothstep(border, border + 2. * blur, stripe_p)); 4024 4025 border = w[0] + w[1]; 4026 ch = mix(ch, c1, smoothstep(border, border + 2. * blur, stripe_p)); 4027 4028 float gradient_t = (stripe_p - w[0] - w[1]) / w[2]; 4029 float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t)); 4030 ch = mix(ch, gradient, smoothstep(border, border + .5 * blur, stripe_p)); 4031 4032 // Tint color is applied with color burn blending 4033 ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a); 4034 return ch; 4035} 4036 4037float getImgFrame(vec2 uv, float th) { 4038 float frame = 1.; 4039 frame *= smoothstep(0., th, uv.y); 4040 frame *= 1.0 - smoothstep(1. - th, 1., uv.y); 4041 frame *= smoothstep(0., th, uv.x); 4042 frame *= 1.0 - smoothstep(1. - th, 1., uv.x); 4043 return frame; 4044} 4045 4046float blurEdge3x3(sampler2D tex, vec2 uv, vec2 dudx, vec2 dudy, float radius, float centerSample) { 4047 vec2 texel = 1.0 / vec2(textureSize(tex, 0)); 4048 vec2 r = radius * texel; 4049 4050 float w1 = 1.0, w2 = 2.0, w4 = 4.0; 4051 float norm = 16.0; 4052 float sum = w4 * centerSample; 4053 4054 sum += w2 * textureGrad(tex, uv + vec2(0.0, -r.y), dudx, dudy).r; 4055 sum += w2 * textureGrad(tex, uv + vec2(0.0, r.y), dudx, dudy).r;
4056 sum += w2 * textureGrad(tex, uv + vec2(-r.x, 0.0), dudx, dudy).r; 4057 sum += w2 * textureGrad(tex, uv + vec2(r.x, 0.0), dudx, dudy).r; 4058 4059 sum += w1 * textureGrad(tex, uv + vec2(-r.x, -r.y), dudx, dudy).r; 4060 sum += w1 * textureGrad(tex, uv + vec2(r.x, -r.y), dudx, dudy).r; 4061 sum += w1 * textureGrad(tex, uv + vec2(-r.x, r.y), dudx, dudy).r; 4062 sum += w1 * textureGrad(tex, uv + vec2(r.x, r.y), dudx, dudy).r; 4063 4064 return sum / norm; 4065} 4066 4067float lst(float edge0, float edge1, float x) { 4068 return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); 4069} 4070 4071void main() { 4072 4073 const float firstFrameOffset = 2.8; 4074 float t = .3 * (u_time + firstFrameOffset); 4075 4076 vec2 uv = v_imageUV; 4077 vec2 dudx = dFdx(v_imageUV); 4078 vec2 dudy = dFdy(v_imageUV); 4079 vec4 img = textureGrad(u_image, uv, dudx, dudy); 4080 4081 if (u_isImage == false) { 4082 uv = v_objectUV + .5; 4083 uv.y = 1. - uv.y; 4084 } 4085 4086 float cycleWidth = u_repetition; 4087 float edge = 0.; 4088 float contOffset = 1.; 4089 4090 vec2 rotatedUV = uv - vec2(.5); 4091 float angle = (-u_angle + 70.) * PI / 180.; 4092 float cosA = cos(angle); 4093 float sinA = sin(angle); 4094 rotatedUV = vec2( 4095 rotatedUV.x * cosA - rotatedUV.y * sinA, 4096 rotatedUV.x * sinA + rotatedUV.y * cosA 4097 ) + vec2(.5); 4098 4099 if (u_isImage == true) { 4100 float edgeRaw = img.r; 4101 edge = blurEdge3x3(u_image, uv, dudx, dudy, 6., edgeRaw); 4102 edge = pow(edge, 1.6); 4103 edge *= mix(0.0, 1.0, smoothstep(0.0, 0.4, u_contour)); 4104 } else { 4105 if (u_shape < 1.) { 4106 // full-fill on canvas 4107 vec2 borderUV = v_responsiveUV + .5; 4108 float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y; 4109 vec2 mask = min(borderUV, 1. - borderUV); 4110 vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize; 4111 float maskX = smoothstep(0.0, pixel_thickness.x, mask.x); 4112 float maskY = smoothstep(0.0, pixel_thickness.y, mask.y); 4113 maskX = pow(maskX, .25); 4114 maskY = pow(maskY, .25); 4115 edge = clamp(1. - maskX * maskY, 0., 1.); 4116 4117 uv = v_responsiveUV; 4118 if (ratio > 1.) { 4119 uv.y /= ratio; 4120 } else { 4121 uv.x *= ratio; 4122 } 4123 uv += .5; 4124 uv.y = 1. - uv.y; 4125 4126 cycleWidth *= 2.; 4127 contOffset = 1.5; 4128 4129 } else if (u_shape < 2.) { 4130 // circle 4131 vec2 shapeUV = uv - .5; 4132 shapeUV *= .67; 4133 edge = pow(clamp(3. * length(shapeUV), 0., 1.), 18.); 4134 } else if (u_shape < 3.) { 4135 // daisy 4136 vec2 shapeUV = uv - .5; 4137 shapeUV *= 1.68; 4138 4139 float r = length(shapeUV) * 2.; 4140 float a = atan(shapeUV.y, shapeUV.x) + .2; 4141 r *= (1. + .05 * sin(3. * a + 2. * t)); 4142 float f = abs(cos(a * 3.)); 4143 edge = smoothstep(f, f + .7, r); 4144 edge *= edge; 4145 4146 uv *= .8; 4147 cycleWidth *= 1.6; 4148 4149 } else if (u_shape < 4.) { 4150 // diamond 4151 vec2 shapeUV = uv - .5; 4152 shapeUV = rotate(shapeUV, .25 * PI); 4153 shapeUV *= 1.42; 4154 shapeUV += .5; 4155 vec2 mask = min(shapeUV, 1. - shapeUV); 4156 vec2 pixel_thickness = vec2(.15); 4157 float maskX = smoothstep(0.0, pixel_thickness.x, mask.x); 4158 float maskY = smoothstep(0.0, pixel_thickness.y, mask.y); 4159 maskX = pow(maskX, .25); 4160 maskY = pow(maskY, .25); 4161 edge = clamp(1. - maskX * maskY, 0., 1.); 4162 } else if (u_shape < 5.) { 4163 // metaballs 4164 vec2 shapeUV = uv - .5; 4165 shapeUV *= 1.3; 4166 edge = 0.; 4167 for (int i = 0; i < 5; i++) { 4168 float fi = float(i); 4169 float speed = 1.5 + 2./3. * sin(fi * 12.345); 4170 float angle = -fi * 1.5; 4171 vec2 dir1 = vec2(cos(angle), sin(angle)); 4172 vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.)); 4173 vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17)); 4174 float d = length(shapeUV + traj); 4175 edge += pow(1.0 - clamp(d, 0.0, 1.0), 4.0); 4176 } 4177 edge = 1. - smoothstep(.65, .9, edge); 4178 edge = pow(edge, 4.); 4179 } 4180 4181 edge = mix(smoothstep(.9 - 2. * fwidth(edge), .9, edge), edge, smoothstep(0.0, 0.4, u_contour)); 4182 4183 } 4184 4185 float opacity = 0.; 4186 if (u_isImage == true) { 4187 opacity = img.g; 4188 float frame = getImgFrame(v_imageUV, 0.); 4189 opacity *= frame; 4190 } else { 4191 opacity = 1. - smoothstep(.9 - 2. * fwidth(edge), .9, edge); 4192 if (u_shape < 2.) { 4193 edge = 1.2 * edge; 4194 } else if (u_shape < 5.) { 4195 edge = 1.8 * pow(edge, 1.5); 4196 } 4197 } 4198 4199 float diagBLtoTR = rotatedUV.x - rotatedUV.y; 4200 float diagTLtoBR = rotatedUV.x + rotatedUV.y; 4201 4202 vec3 color = vec3(0.); 4203 vec3 color1 = vec3(.98, 0.98, 1.);
4204 vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR)); 4205 4206 vec2 grad_uv = uv - .5; 4207 4208 float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR)); 4209 grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI); 4210 float direction = grad_uv.x; 4211 4212 float bump = pow(1.8 * dist, 1.2); 4213 bump = 1. - bump; 4214 bump *= pow(uv.y, .3); 4215 4216 4217 float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump); 4218 float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump); 4219 float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio); 4220 4221 float thin_strip_1_width = cycleWidth * thin_strip_1_ratio; 4222 float thin_strip_2_width = cycleWidth * thin_strip_2_ratio; 4223 4224 float noise = snoise(uv - t); 4225 4226 edge += (1. - edge) * u_distortion * noise; 4227 4228 direction += diagBLtoTR; 4229 float contour = 0.; 4230 direction -= 2. * noise * diagBLtoTR * (smoothstep(0., 1., edge) * (1.0 - smoothstep(0., 1., edge))); 4231 direction *= mix(1., 1. - edge, smoothstep(.5, 1., u_contour)); 4232 direction -= 1.7 * edge * smoothstep(.5, 1., u_contour); 4233 direction += .2 * pow(u_contour, 4.) * (1.0 - smoothstep(0., 1., edge)); 4234 4235 bump *= clamp(pow(uv.y, .1), .3, 1.); 4236 direction *= (.1 + (1.1 - edge) * bump); 4237 4238 direction *= (.4 + .6 * (1.0 - smoothstep(.5, 1., edge))); 4239 direction += .18 * (smoothstep(.1, .2, uv.y) * (1.0 - smoothstep(.2, .4, uv.y))); 4240 direction += .03 * (smoothstep(.1, .2, 1. - uv.y) * (1.0 - smoothstep(.2, .4, 1. - uv.y))); 4241 4242 direction *= (.5 + .5 * pow(uv.y, 2.)); 4243 direction *= cycleWidth; 4244 direction -= t; 4245 4246 4247 float colorDispersion = (1. - bump); 4248 colorDispersion = clamp(colorDispersion, 0., 1.); 4249 float dispersionRed = colorDispersion; 4250 dispersionRed += .03 * bump * noise; 4251 dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * (1.0 - smoothstep(.1, .5, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, 1., bump))); 4252 dispersionRed -= diagBLtoTR; 4253 4254 float dispersionBlue = colorDispersion; 4255 dispersionBlue *= 1.3; 4256 dispersionBlue += (smoothstep(0., .4, uv.y) * (1.0 - smoothstep(.1, .8, uv.y))) * (smoothstep(.4, .6, bump) * (1.0 - smoothstep(.4, .8, bump))); 4257 dispersionBlue -= .2 * edge; 4258 4259 dispersionRed *= (u_shiftRed / 20.); 4260 dispersionBlue *= (u_shiftBlue / 20.); 4261 4262 float blur = 0.; 4263 float rExtraBlur = 0.; 4264 float gExtraBlur = 0.; 4265 if (u_isImage == true) { 4266 float softness = 0.05 * u_softness; 4267 blur = softness + .5 * smoothstep(1., 10., u_repetition) * smoothstep(.0, 1., edge); 4268 float smallCanvasT = 1.0 - smoothstep(100., 500., min(u_resolution.x, u_resolution.y)); 4269 blur += smallCanvasT * smoothstep(.0, 1., edge); 4270 rExtraBlur = softness * (0.05 + .1 * (u_shiftRed / 20.) * bump); 4271 gExtraBlur = softness * 0.05 / max(0.001, abs(1. - diagBLtoTR)); 4272 } else { 4273 blur = u_softness / 15. + .3 * contour; 4274 } 4275 4276 vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio); 4277 w[1] -= .02 * smoothstep(.0, 1., edge + bump); 4278 float stripe_r = fract(direction + dispersionRed); 4279 float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur + fwidth(stripe_r) + rExtraBlur, bump, u_colorTint.r); 4280 float stripe_g = fract(direction); 4281 float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur + fwidth(stripe_g) + gExtraBlur, bump, u_colorTint.g); 4282 float stripe_b = fract(direction - dispersionBlue); 4283 float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur + fwidth(stripe_b), bump, u_colorTint.b); 4284 4285 color = vec3(r, g, b); 4286 color *= opacity; 4287 4288 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 4289 color = color + bgColor * (1. - opacity); 4290 opacity = opacity + u_colorBack.a * (1. - opacity); 4291 4292 ${k} 4293 4294 fragColor = vec4(color, opacity); 4295} 4296`,ah={measurePerformance:!1,workingSize:512,iterations:40};function av(e){let o=document.createElement("canvas"),a=o.getContext("2d"),t="string"==typeof e&&e.startsWith("blob:");return new Promise((r,i)=>{if(!e||!a)return void i(Error("Invalid file or canvas context"));let s=t&&fetch(e).then(e=>e.headers.get("Content-Type")),l=new Image;l.crossOrigin="anonymous";let n=performance.now();l.onload=async()=>{let t,f=await s;t=f?"image/svg+xml"===f:"string"==typeof e?e.endsWith(".svg")||e.startsWith("data:image/svg+xml"):"image/svg+xml"===e.type;
4296let c=l.width||l.naturalWidth,u=l.height||l.naturalHeight;if(t){let e=c/u;c>u?(c=4096,u=4096/e):(u=4096,c=4096*e),l.width=c,l.height=u}let m=Math.min(c,u),p=ah.workingSize/m,d=Math.round(c*p),g=Math.round(u*p);ah.measurePerformance&&(console.log("[Processing Mode]"),console.log(` Original: ${c}\xd7${u}`),console.log(` Working: ${d}\xd7${g} (${(100*p).toFixed(1)}% scale)`),p<1&&console.log(` Speedup: ~${Math.round(1/(p*p))}\xd7`)),o.width=c,o.height=u;let h=document.createElement("canvas");h.width=d,h.height=g;let v=h.getContext("2d");v.drawImage(l,0,0,d,g);let _=performance.now(),x=v.getImageData(0,0,d,g).data,y=new Uint8Array(d*g),w=new Uint8Array(d*g),A=0;for(let e=0,o=0;e<x.length;e+=4,o++){let a=+(0!==x[e+3]);y[o]=a,A+=a}let b=[],C=[];for(let e=0;e<g;e++)for(let o=0;o<d;o++){let a=e*d+o;if(y[a])0!==o&&o!==d-1&&0!==e&&e!==g-1&&y[a-1]&&y[a+1]&&y[a-d]&&y[a+d]&&y[a-d-1]&&y[a-d+1]&&y[a+d-1]&&y[a+d+1]?C.push(a):(w[a]=1,b.push(a))}ah.measurePerformance&&(console.log(`[Mask Building] Time: ${(performance.now()-_).toFixed(2)}ms`),console.log(` Shape pixels: ${A} / ${d*g} (${(A/(d*g)*100).toFixed(1)}%)`),console.log(` Interior pixels: ${C.length}`),console.log(` Boundary pixels: ${b.length}`));let B=function(e,o,a,t,r,i){let s=a.length,l=new Int32Array(4*s);for(let o=0;o<s;o++){let t=a[o],s=t%r,n=Math.floor(t/r);l[4*o+0]=s<r-1&&e[t+1]?t+1:-1,l[4*o+1]=s>0&&e[t-1]?t-1:-1,l[4*o+2]=n>0&&e[t-r]?t-r:-1,l[4*o+3]=n<i-1&&e[t+r]?t+r:-1}return{interiorPixels:a,boundaryPixels:t,pixelCount:s,neighborIndices:l}}(y,0,new Uint32Array(C),new Uint32Array(b),d,g),S=performance.now(),k=function(e,o,a,t,r){let i=ah.iterations,s=new Float32Array(t*r),{interiorPixels:l,neighborIndices:n,pixelCount:f}=e,c=performance.now(),u=[],m=[];for(let e=0;e<f;e++){let o=l[e];(o%t+Math.floor(o/t))%2==0?u.push(e):m.push(e)}for(let e=0;e<i;e++){for(let e of u){let o=l[e],a=n[4*e+0],t=n[4*e+1],r=n[4*e+2],i=n[4*e+3],f=0;a>=0&&(f+=s[a]),t>=0&&(f+=s[t]),r>=0&&(f+=s[r]),i>=0&&(f+=s[i]);let c=(.01+f)/4;s[o]=1.9*c+-.8999999999999999*s[o]}for(let e of m){let o=l[e],a=n[4*e+0],t=n[4*e+1],r=n[4*e+2],i=n[4*e+3],f=0;a>=0&&(f+=s[a]),t>=0&&(f+=s[t]),r>=0&&(f+=s[r]),i>=0&&(f+=s[i]);let c=(.01+f)/4;s[o]=1.9*c+-.8999999999999999*s[o]}}if(ah.measurePerformance){let e=performance.now()-c;console.log(`[Optimized Poisson Solver (SOR \u03C9=1.9)]`),console.log(` Working size: ${t}\xd7${r}`),console.log(` Iterations: ${i}`),console.log(` Time: ${e.toFixed(2)}ms`),console.log(` Interior pixels processed: ${f}`),console.log(` Speed: ${(i*f/(1e3*e)).toFixed(2)} Mpixels/sec`)}return s}(B,0,0,d,g);ah.measurePerformance&&console.log(`[Poisson Solve] Time: ${(performance.now()-S).toFixed(2)}ms`);let U=0;for(let e=0;e<C.length;e++){let o=C[e];k[o]>U&&(U=k[o])}let R=document.createElement("canvas");R.width=d,R.height=g;let V=R.getContext("2d"),F=V.createImageData(d,g);for(let e=0;e<g;e++)for(let o=0;o<d;o++){let a=e*d+o,t=4*a;if(y[a]){let e=255*(1-k[a]/U);F.data[t]=e,F.data[t+1]=e,F.data[t+2]=e,F.data[t+3]=255}else F.data[t]=255,F.data[t+1]=255,F.data[t+2]=255,F.data[t+3]=0}V.putImageData(F,0,0),a.imageSmoothingEnabled=!0,a.imageSmoothingQuality="high",a.drawImage(R,0,0,d,g,0,0,c,u);let z=a.getImageData(0,0,c,u),M=document.createElement("canvas");M.width=c,M.height=u;let I=M.getContext("2d");I.drawImage(l,0,0,c,u);let O=I.getImageData(0,0,c,u);for(let e=0;e<z.data.length;e+=4){let o=O.data[e+3],a=z.data[e+3];0===o?(z.data[e]=255,z.data[e+1]=0):(z.data[e]=0===a?0:z.data[e],z.data[e+1]=o),z.data[e+2]=255,z.data[e+3]=255}a.putImageData(z,0,0),o.toBlob(e=>{if(!e)return void i(Error("Failed to create PNG blob"));if(ah.measurePerformance){let e=performance.now()-n;if(console.log(`[Total Processing Time] ${e.toFixed(2)}ms`),p<1){let o=e*Math.pow(c*u/(d*g),1.5);console.log(`[Estimated time at full resolution] ~${o.toFixed(0)}ms`),console.log(`[Time saved] ~${(o-e).toFixed(0)}ms (${Math.round(o/e)}\xd7 faster)`)}}r({imageData:z,pngBlob:e})},"image/png")},l.onerror=()=>i(Error("Failed to load image")),l.src="string"==typeof e?e:URL.createObjectURL(e)})}let a_={none:0,circle:1,daisy:2,diamond:3,metaballs:4},ax={name:"Default",params:{...g,scale:.6,speed:1,frame:0,colorBack:"#AAAAAC",colorTint:"#ffffff",distortion:.07,repetition:2,shiftRed:.3,shiftBlue:.3,contour:.4,softness:.1,angle:70,shape:"diamond"}},ay={name:"Noir",params:{...g,scale:.6,speed:1,frame:0,colorBack:"#000000",colorTint:"#606060",softness:.45,repetition:1.5,shiftRed:0,shiftBlue:0,distortion:0,contour:0,angle:90,shape:"diamond"}},aw=[ax,ay,{name:"Backdrop",params:{...g,speed:1,frame:0,scale:1.5,colorBack:"#AAAAAC",colorTint:"#ffffff",softness:.05,repetition:1.5,shiftRed:.3,shiftBlue:.3,distortion:.1,contour:.4,shape:"none",angle:90,worldWidth:0,worldHeight:0}}
4296,{name:"Stripes",params:{...g,speed:1,frame:0,scale:.6,colorBack:"#000000",colorTint:"#2c5d72",softness:.8,repetition:6,shiftRed:1,shiftBlue:-1,distortion:.4,contour:.4,shape:"circle",angle:0}}],aA=(0,t.memo)(function({colorBack:e=ax.params.colorBack,colorTint:o=ax.params.colorTint,speed:a=ax.params.speed,frame:r=ax.params.frame,image:i="",contour:s=ax.params.contour,distortion:l=ax.params.distortion,softness:n=ax.params.softness,repetition:f=ax.params.repetition,shiftRed:c=ax.params.shiftRed,shiftBlue:m=ax.params.shiftBlue,angle:d=ax.params.angle,shape:g=ax.params.shape,suspendWhenProcessingImage:h=!1,fit:x=ax.params.fit,scale:y=ax.params.scale,rotation:w=ax.params.rotation,originX:A=ax.params.originX,originY:b=ax.params.originY,offsetX:C=ax.params.offsetX,offsetY:B=ax.params.offsetY,worldWidth:S=ax.params.worldWidth,worldHeight:k=ax.params.worldHeight,...U}){let R,V="string"==typeof i?i:i.src,[F,z]=(0,t.useState)(af);R=h&&"undefined"!=typeof window&&V?au(()=>av(V).then(e=>URL.createObjectURL(e.pngBlob)),[V,"liquid-metal"]):F,(0,t.useLayoutEffect)(()=>{if(h)return;if(!V)return void z(af);let e=!0;return av(V).then(o=>{e&&z(URL.createObjectURL(o.pngBlob))}),()=>{e=!1}},[V,h]);let M={u_colorBack:_(e),u_colorTint:_(o),u_image:R,u_contour:s,u_distortion:l,u_softness:n,u_repetition:f,u_shiftRed:c,u_shiftBlue:m,u_angle:d,u_isImage:!!i,u_shape:a_[g],u_fit:v[x],u_scale:y,u_rotation:w,u_offsetX:C,u_offsetY:B,u_originX:A,u_originY:b,u_worldWidth:S,u_worldHeight:k};return(0,u.jsx)(p,{...U,speed:a,frame:r,fragmentShader:ag,mipmaps:["u_image"],uniforms:M})}),ab=`#version 300 es 4297precision mediump float; 4298 4299uniform float u_rotation; 4300 4301uniform float u_time; 4302 4303uniform vec4 u_colorFront; 4304uniform vec4 u_colorBack; 4305uniform float u_radius; 4306uniform float u_contrast; 4307 4308uniform sampler2D u_image; 4309uniform float u_imageAspectRatio; 4310 4311uniform float u_size; 4312uniform float u_grainMixer; 4313uniform float u_grainOverlay; 4314uniform float u_grainSize; 4315uniform float u_grid; 4316uniform bool u_originalColors; 4317uniform bool u_inverted; 4318uniform float u_type; 4319 4320in vec2 v_imageUV; 4321 4322out vec4 fragColor; 4323 4324${w} 4325${A} 4326${C} 4327 4328float valueNoise(vec2 st) { 4329 vec2 i = floor(st); 4330 vec2 f = fract(st); 4331 float a = hash21(i); 4332 float b = hash21(i + vec2(1.0, 0.0)); 4333 float c = hash21(i + vec2(0.0, 1.0)); 4334 float d = hash21(i + vec2(1.0, 1.0)); 4335 vec2 u = f * f * (3.0 - 2.0 * f); 4336 float x1 = mix(a, b, u.x); 4337 float x2 = mix(c, d, u.x); 4338 return mix(x1, x2, u.y); 4339} 4340 4341float lst(float edge0, float edge1, float x) { 4342 return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); 4343} 4344 4345float sst(float edge0, float edge1, float x) { 4346 return smoothstep(edge0, edge1, x); 4347} 4348 4349float getCircle(vec2 uv, float r, float baseR) { 4350 r = mix(.25 * baseR, 0., r); 4351 float d = length(uv - .5); 4352 float aa = fwidth(d); 4353 return 1. - smoothstep(r - aa, r + aa, d); 4354} 4355 4356float getCell(vec2 uv) { 4357 float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x)); 4358 float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y)); 4359 return insideX * insideY; 4360} 4361 4362float getCircleWithHole(vec2 uv, float r, float baseR) { 4363 float cell = getCell(uv); 4364 4365 r = mix(.75 * baseR, 0., r); 4366 float rMod = mod(r, .5); 4367 4368 float d = length(uv - .5); 4369 float aa = fwidth(d); 4370 float circle = 1. - smoothstep(rMod - aa, rMod + aa, d); 4371 if (r < .5) { 4372 return circle; 4373 } else { 4374 return cell - circle; 4375 } 4376} 4377 4378float getGooeyBall(vec2 uv, float r, float baseR) { 4379 float d = length(uv - .5); 4380 float sizeRadius = .3; 4381 if (u_grid == 1.) { 4382 sizeRadius = .42; 4383 } 4384 sizeRadius = mix(sizeRadius * baseR, 0., r); 4385 d = 1. - sst(0., sizeRadius, d); 4386 4387 d = pow(d, 2. + baseR); 4388 return d; 4389} 4390 4391float getSoftBall(vec2 uv, float r, float baseR) { 4392 float d = length(uv - .5); 4393 float sizeRadius = clamp(baseR, 0., 1.); 4394 sizeRadius = mix(.5 * sizeRadius, 0., r); 4395 d = 1. - lst(0., sizeRadius, d); 4396 float powRadius = 1. - lst(0., 2., baseR); 4397 d = pow(d, 4. + 3. * powRadius); 4398 return d; 4399} 4400 4401float getUvFrame(vec2 uv, vec2 pad) { 4402 float aa = 0.0001; 4403 4404 float left = smoothstep(-pad.x, -pad.x + aa, uv.x); 4405 float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x); 4406 float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y); 4407 float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y); 4408 4409 return left * right * bottom * top; 4410} 4411 4412float sigmoid(float x, float k) { 4413 return 1.0 / (1.0 + exp(-k * (x - 0.5))); 4414} 4415 4416float getLumAtPx(vec2 uv, float contrast) { 4417 vec4 tex = texture(u_image, uv); 4418 vec3 color = vec3( 4419 sigmoid(tex.r, contrast), 4420 sigmoid(tex.g, contrast), 4421 sigmoid(tex.b, contrast) 4422 ); 4423 float lum = dot(vec3(0.2126, 0.7152, 0.0722), color); 4424 lum = mix(1., lum, tex.a); 4425 lum = u_inverted ? (1. - lum) : lum; 4426 return lum; 4427} 4428 4429float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) { 4430 p += inCellOffset; 4431 vec2 uv_i = floor(p); 4432 vec2 uv_f = fract(p); 4433 vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5); 4434 float outOfFrame = getUvFrame(samplingUV, pad * stepSize); 4435 4436 float lum = getLumAtPx(samplingUV, contrast); 4437 ballColor = texture(u_image, samplingUV); 4438 ballColor.rgb *= ballColor.a; 4439 ballColor *= outOfFrame; 4440 4441 float ball = 0.; 4442 if (u_type == 0.) { 4443 // classic 4444 ball = getCircle(uv_f, lum, baseR); 4445 } else if (u_type == 1.) { 4446 // gooey 4447 ball = getGooeyBall(uv_f, lum, baseR); 4448 } else if (u_type == 2.) { 4449 // holes 4450 ball = getCircleWithHole(uv_f, lum, baseR); 4451 } else if (u_type == 3.) { 4452 // soft 4453 ball = getSoftBall(uv_f, lum, baseR); 4454 } 4455 4456 return ball * outOfFrame; 4457} 4458 4459 4460void main() { 4461 4462 float stepMultiplier = 1.; 4463 if (u_type == 0.) { 4464 // classic 4465 stepMultiplier = 2.; 4466 } else if (u_type == 1. || u_type == 3.) { 4467 // gooey & soft 4468 stepMultiplier = 6.; 4469 } 4470 4471 float cellsPerSide = mix(300., 7., pow(u_size, .7)); 4472 cellsPerSide /= stepMultiplier; 4473 float cellSizeY = 1. / cellsPerSide; 4474 vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.); 4475 if (u_type == 1. && u_grid == 1.) { 4476 // gooey diagonal grid works differently 4477 pad *= .7; 4478 } 4479 4480 vec2 uv = v_imageUV; 4481 uv -= vec2(.5); 4482 uv /= pad; 4483 4484 float contrast = mix(0., 15., pow(u_contrast, 1.5)); 4485 float baseRadius = u_radius; 4486 if (u_originalColors == true) { 4487 contrast = mix(.1, 4., pow(u_contrast, 2.)); 4488 baseRadius = 2. * pow(.5 * u_radius, .3); 4489 } 4490 4491 float totalShape = 0.; 4492 vec3 totalColor = vec3(0.); 4493 float totalOpacity = 0.; 4494 4495 vec4 ballColor; 4496 float shape; 4497 float stepSize = 1. / stepMultiplier; 4498 for (float x = -0.5; x < 0.5; x += stepSize) { 4499 for (float y = -0.5; y < 0.5; y += stepSize) { 4500 vec2 offset = vec2(x, y); 4501 4502 if (u_grid == 1.) { 4503 float rowIndex = floor((y + .5) / stepSize); 4504 float colIndex = floor((x + .5) / stepSize); 4505 if (stepSize == 1.) { 4506 rowIndex = floor(uv.y + y + 1.); 4507 if (u_type == 1.) { 4508 colIndex = floor(uv.x + x + 1.); 4509 } 4510 } 4511 if (u_type == 1.) { 4512 if (mod(rowIndex + colIndex, 2.) == 1.) { 4513 continue; 4514 } 4515 } else { 4516 if (mod(rowIndex, 2.) == 1.) { 4517 offset.x += .5 * stepSize; 4518 } 4519 } 4520 } 4521 4522 shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor); 4523 totalColor += ballColor.rgb * shape; 4524 totalShape += shape; 4525 totalOpacity += shape; 4526 } 4527 } 4528 4529 const float eps = 1e-4; 4530 4531 totalColor /= max(totalShape, eps); 4532 totalOpacity /= max(totalShape, eps); 4533 4534 float finalShape = 0.; 4535 if (u_type == 0.) { 4536 finalShape = min(1., totalShape); 4537 } else if (u_type == 1.) { 4538 float aa = fwidth(totalShape); 4539 float th = .5; 4540 finalShape = smoothstep(th - aa, th + aa, totalShape); 4541 } else if (u_type == 2.) { 4542 finalShape = min(1., totalShape); 4543 } else if (u_type == 3.) { 4544 finalShape = totalShape; 4545 } 4546 4547 vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio); 4548 vec2 grainUV = v_imageUV - .5; 4549 grainUV *= grainSize; 4550 grainUV += .5; 4551 float grain = valueNoise(grainUV); 4552 grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain); 4553 grain *= u_grainMixer; 4554 finalShape = mix(finalShape, 0., grain); 4555 4556 vec3 color = vec3(0.); 4557 float opacity = 0.; 4558 4559 if (u_originalColors == true) { 4560 color = totalColor * finalShape; 4561 opacity = totalOpacity * finalShape; 4562 4563 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 4564 color = color + bgColor * (1. - opacity); 4565 opacity = opacity + u_colorBack.a * (1. - opacity); 4566 } else { 4567 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 4568 float fgOpacity = u_colorFront.a; 4569 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 4570 float bgOpacity = u_colorBack.a; 4571 4572 color = fgColor * finalShape; 4573 opacity = fgOpacity * finalShape; 4574 color += bgColor * (1. - opacity); 4575 opacity += bgOpacity * (1. - opacity); 4576 } 4577 4578 float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.)); 4579 grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5); 4580 grainOverlay = pow(grainOverlay, 1.3); 4581 4582 float grainOverlayV = grainOverlay * 2. - 1.; 4583 vec3 grainOverlayColor = vec3(step(0., grainOverlayV)); 4584 float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV); 4585 grainOverlayStrength = pow(grainOverlayStrength, .8); 4586 color = mix(color, grainOverlayColor, .5 * grainOverlayStrength); 4587 4588 opacity += .5 * grainOverlayStrength; 4589 opacity = clamp(opacity, 0., 1.); 4590 4591 fragColor = vec4(color, opacity); 4592} 4593`,aC={classic:0,gooey:1,holes:2,soft:3},aB={square:0,hex:1},aS={name:"Default",params:{...g,fit:"cover",speed:0,frame:0,colorBack:"#f2f1e8",colorFront:"#2b2b2b",size:.5,radius:1.25,contrast:.4,originalColors:!1,inverted:!1,grainMixer:.2,grainOverlay:.2,grainSize:.5,grid:"hex",type:"gooey"}},ak={name:"LED screen",params:{...g,fit:"cover",speed:0,frame:0,colorBack:"#000000",colorFront:"#29ff7b",size:.5,radius:1.5,contrast:.3,originalColors:!1,inverted:!1,grainMixer:0,grainOverlay:0,grainSize:.5,grid:"square",type:"soft"}},aU=[aS,ak,{name:"Mosaic",params:{...g,fit:"cover",speed:0,frame:0,colorBack:"#000000",colorFront:"#b2aeae",size:.6,radius:2,contrast:.01,originalColors:!0,inverted:!1,grainMixer:0,grainOverlay:0,grainSize:.5,grid:"hex",type:"classic"}},{name:"Round and square",params:{...g,fit:"cover",speed:0,frame:0,colorBack:"#141414",colorFront:"#ff8000",size:.8,radius:1,contrast:1,originalColors:!1,inverted:!0,grainMixer:.05,grainOverlay:.3,grainSize:.5,grid:"square",type:"holes"}}],aR=(0,t.memo)(function({speed:e=aS.params.speed,frame:o=aS.params.frame,colorFront:a=aS.params.colorFront,colorBack:t=aS.params.colorBack,image:r="",size:i=aS.params.size,radius:s=aS.params.radius,contrast:l=aS.params.contrast,originalColors:n=aS.params.originalColors,inverted:f=aS.params.inverted,grainMixer:c=aS.params.grainMixer,grainOverlay:m=aS.params.grainOverlay,grainSize:d=aS.params.grainSize,grid:g=aS.params.grid,type:h=aS.params.type,fit:x=aS.params.fit,scale:y=aS.params.scale,rotation:w=aS.params.rotation,originX:A=aS.params.originX,originY:b=aS.params.originY,offsetX:C=aS.params.offsetX,offsetY:B=aS.params.offsetY,worldWidth:S=aS.params.worldWidth,worldHeight:k=aS.params.worldHeight,...U}){let R={u_image:r,u_colorFront:_(a),u_colorBack:_(t),u_size:i,u_radius:s,u_contrast:l,u_originalColors:n,u_inverted:f,u_grainMixer:c,u_grainOverlay:m,u_grainSize:d,u_grid:aB[g],u_type:aC[h],u_fit:v[x],u_rotation:w,u_scale:y,u_offsetX:C,u_offsetY:B,u_originX:A,u_originY:b,u_worldWidth:S,u_worldHeight:k};return(0,u.jsx)(p,{...U,speed:e,frame:o,fragmentShader:ab,uniforms:R})},d),aV=`#version 300 es 4594precision mediump float; 4595 4596uniform sampler2D u_image; 4597uniform float u_imageAspectRatio; 4598 4599uniform vec4 u_colorBack; 4600uniform vec4 u_colorC; 4601uniform vec4 u_colorM; 4602uniform vec4 u_colorY; 4603uniform vec4 u_colorK; 4604uniform float u_size; 4605uniform float u_minDot; 4606uniform float u_contrast; 4607uniform float u_grainSize; 4608uniform float u_grainMixer; 4609uniform float u_grainOverlay; 4610uniform float u_gridNoise; 4611uniform float u_softness; 4612uniform float u_floodC; 4613uniform float u_floodM; 4614uniform float u_floodY; 4615uniform float u_floodK; 4616uniform float u_gainC; 4617uniform float u_gainM; 4618uniform float u_gainY; 4619uniform float u_gainK; 4620uniform float u_type; 4621uniform sampler2D u_noiseTexture; 4622 4623in vec2 v_imageUV; 4624out vec4 fragColor; 4625 4626const float shiftC = -.5; 4627const float shiftM = -.25; 4628const float shiftY = .2; 4629const float shiftK = 0.; 4630 4631// Precomputed sin/cos for rotation angles (15\xb0, 75\xb0, 0\xb0, 45\xb0) 4632const float cosC = 0.9659258; const float sinC = 0.2588190; // 15\xb0 4633const float cosM = 0.2588190; const float sinM = 0.9659258; // 75\xb0 4634const float cosY = 1.0; const float sinY = 0.0; // 0\xb0 4635const float cosK = 0.7071068; const float sinK = 0.7071068; // 45\xb0 4636 4637${w} 4638 4639vec2 randomRG(vec2 p) { 4640 vec2 uv = floor(p) / 100. + .5; 4641 return texture(u_noiseTexture, fract(uv)).rg; 4642} 4643vec3 hash23(vec2 p) { 4644 vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1; 4645 p3 += dot(p3, p3.yzx + 19.19); 4646 return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x)); 4647} 4648 4649float sst(float edge0, float edge1, float x) { 4650 return smoothstep(edge0, edge1, x); 4651} 4652 4653vec3 valueNoise3(vec2 st) { 4654 vec2 i = floor(st); 4655 vec2 f = fract(st); 4656 vec3 a = hash23(i); 4657 vec3 b = hash23(i + vec2(1.0, 0.0)); 4658 vec3 c = hash23(i + vec2(0.0, 1.0)); 4659 vec3 d = hash23(i + vec2(1.0, 1.0)); 4660 vec2 u = f * f * (3.0 - 2.0 * f); 4661 vec3 x1 = mix(a, b, u.x); 4662 vec3 x2 = mix(c, d, u.x); 4663 return mix(x1, x2, u.y); 4664} 4665 4666float getUvFrame(vec2 uv, vec2 pad) { 4667 float left = smoothstep(-pad.x, 0., uv.x); 4668 float right = smoothstep(1. + pad.x, 1., uv.x); 4669 float bottom = smoothstep(-pad.y, 0., uv.y); 4670 float top = smoothstep(1. + pad.y, 1., uv.y); 4671 4672 return left * right * bottom * top; 4673} 4674 4675vec4 RGBAtoCMYK(vec4 rgba) { 4676 float k = 1. - max(max(rgba.r, rgba.g), rgba.b); 4677 float denom = 1. - k; 4678 vec3 cmy = vec3(0.); 4679 if (denom > 1e-5) { 4680 cmy = (1. - rgba.rgb - vec3(k)) / denom; 4681 } 4682 return vec4(cmy, k) * rgba.a; 4683} 4684 4685vec3 applyContrast(vec3 rgb) { 4686 return clamp((rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0); 4687} 4688 4689// Single-component CMYK extractors with contrast built-in, alpha-aware 4690float getCyan(vec4 rgba) { 4691 vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0); 4692 float maxRGB = max(max(c.r, c.g), c.b); 4693 return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a; 4694} 4695float getMagenta(vec4 rgba) { 4696 vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0); 4697 float maxRGB = max(max(c.r, c.g), c.b); 4698 return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a; 4699} 4700float getYellow(vec4 rgba) { 4701 vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0); 4702 float maxRGB = max(max(c.r, c.g), c.b); 4703 return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a; 4704} 4705float getBlack(vec4 rgba) { 4706 vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0); 4707 return (1. - max(max(c.r, c.g), c.b)) * rgba.a; 4708} 4709 4710vec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) { 4711 vec2 cellCenter = floor(uv) + .5 + cellOffset; 4712 return cellCenter + (randomRG(cellCenter + channelIdx * 50.) - .5) * u_gridNoise; 4713} 4714 4715vec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) { 4716 vec2 uvGrid = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift); 4717 return uvGrid * pad + 0.5; 4718} 4719 4720void colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, bool isJoined, inout float outMask) { 4721 float dist = length(pos - cellCenter); 4722 4723 float radius = rad; 4724 radius *= (1. + generalComp); 4725 radius += (.15 + channelgain * radius); 4726 radius = max(0., radius); 4727 radius = mix(0., radius, transparency); 4728 radius += channelAddon; 4729 radius *= (1. - grain); 4730 4731 float mask = 1. - sst(0., radius, dist); 4732 if (isJoined) { 4733 // ink or sharp (joined) 4734 mask = pow(mask, 1.2); 4735 } else { 4736 // dots (separate) 4737 mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask); 4738 } 4739 4740 mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness); 4741 outMask += mask; 4742} 4743 4744vec3 applyInk(vec3 paper, vec3 inkColor, float cov) { 4745 vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0)); 4746 return paper * inkEffect; 4747} 4748 4749void main() { 4750 vec2 uv = v_imageUV; 4751 4752 float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7)); 4753 float cellSizeY = 1.0 / cellsPerSide; 4754 vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0); 4755 vec2 uvGrid = (uv - .5) / pad; 4756 float insideImageBox = getUvFrame(uv, p
4756ad); 4757 4758 float generalComp = .1 * u_softness + .1 * u_gridNoise + .1 * (1. - step(0.5, u_type)) * (1.5 - u_softness); 4759 4760 vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC; 4761 vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM; 4762 vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY; 4763 vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK; 4764 4765 vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio); 4766 vec2 grainUV = (v_imageUV - .5) * grainSize + .5; 4767 vec3 noiseValues = valueNoise3(grainUV); 4768 float grain = sst(.55, 1., noiseValues.r); 4769 grain *= u_grainMixer; 4770 4771 vec4 outMask = vec4(0.); 4772 bool isJoined = u_type > 0.5; 4773 4774 if (u_type < 1.5) { 4775 // dots or ink: per-cell color sampling 4776 for (int dy = -1; dy <= 1; dy++) { 4777 for (int dx = -1; dx <= 1; dx++) { 4778 vec2 cellOffset = vec2(float(dx), float(dy)); 4779 4780 vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.); 4781 vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad)); 4782 colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]); 4783 4784 vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.); 4785 vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad)); 4786 colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]); 4787 4788 vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.); 4789 vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad)); 4790 colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]); 4791 4792 vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.); 4793 vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad)); 4794 colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]); 4795 } 4796 } 4797 } else { 4798 // sharp: direct px color sampling 4799 vec4 tex = texture(u_image, uv); 4800 tex.rgb = applyContrast(tex.rgb); 4801 insideImageBox *= tex.a; 4802 vec4 cmykOriginal = RGBAtoCMYK(tex); 4803 for (int dy = -1; dy <= 1; dy++) { 4804 for (int dx = -1; dx <= 1; dx++) { 4805 vec2 cellOffset = vec2(float(dx), float(dy)); 4806 4807 colorMask(uvC, cellCenterPos(uvC, cellOffset, 0.), cmykOriginal.x, insideImageBox, grain, u_floodC, u_gainC, generalComp, isJoined, outMask[0]); 4808 colorMask(uvM, cellCenterPos(uvM, cellOffset, 1.), cmykOriginal.y, insideImageBox, grain, u_floodM, u_gainM, generalComp, isJoined, outMask[1]); 4809 colorMask(uvY, cellCenterPos(uvY, cellOffset, 2.), cmykOriginal.z, insideImageBox, grain, u_floodY, u_gainY, generalComp, isJoined, outMask[2]); 4810 colorMask(uvK, cellCenterPos(uvK, cellOffset, 3.), cmykOriginal.w, insideImageBox, grain, u_floodK, u_gainK, generalComp, isJoined, outMask[3]); 4811 } 4812 } 4813 } 4814 4815 float shape; 4816 4817 float C = outMask[0]; 4818 float M = outMask[1]; 4819 float Y = outMask[2]; 4820 float K = outMask[3]; 4821 4822 if (isJoined) { 4823 // ink or sharp: apply threshold for joined dots 4824 float th = .5; 4825 float sLeft = th * u_softness; 4826 float sRight = (1. - th) * u_softness + .01; 4827 C = smoothstep(th - sLeft - fwidth(C), th + sRight, C); 4828 M = smoothstep(th - sLeft - fwidth(M), th + sRight, M); 4829 Y = smoothstep(th - sLeft - fwidth(Y), th + sRight, Y); 4830 K = smoothstep(th - sLeft - fwidth(K), th + sRight, K); 4831 } 4832 4833 C *= u_colorC.a; 4834 M *= u_colorM.a; 4835 Y *= u_colorY.a; 4836 K *= u_colorK.a; 4837 4838 vec3 ink = vec3(1.); 4839 ink = applyInk(ink, u_colorK.rgb, K); 4840 ink = applyInk(ink, u_colorC.rgb, C); 4841 ink = applyInk(ink, u_colorM.rgb, M); 4842 ink = applyInk(ink, u_colorY.rgb, Y); 4843 4844 shape = clamp(max(max(C, M), max(Y, K)), 0., 1.); 4845 4846 vec3 color = u_colorBack.rgb * u_colorBack.a; 4847 4848 float opacity = u_colorBack.a; 4849 color = mix(color, ink, shape); 4850 opacity += shape; 4851 opacity = clamp(opacity, 0., 1.); 4852 4853 float grainOverlay = mix(noiseValues.g, noiseValues.b, .5); 4854 grainOverlay = pow(grainOverlay, 1.3); 4855 4856 float grainOverlayV = grainOverlay * 2. - 1.; 4857 vec3 grainOverlayColor = vec3(step(0., grainOverlayV)); 4858 float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV); 4859 grainOverlayStrength = pow(grainOverlayStrength, .8); 4860 color = mix(color, grainOverlayColor, .5 * grainOverlayStrength); 4861 4862 opacity += .5 * grainOverlayStrength; 4863 opacity = clamp(opacity, 0., 1.); 4864 4865 fragColor = vec4(color, opacity); 4866} 4867`,aF={dots:0,ink:1,sharp:2},az={name:"Default",params:{...g,scale:1,fit:"cover",speed:0,frame:0,colorBack:"#fbfaf5",colorC:"#00b4ff",colorM:"#fc519f",colorY:"#ffd800",colorK:"#231f20",size:.2,contrast:1,softness:1,grainSize:.5,grainMixer:0,grainOverlay:0,gridNoise:.2,floodC:.15,floodM:0,floodY:0,floodK:0,gainC:.3,gainM:0,gainY:.2,gainK:0,type:"ink"}},aM={name:"Drops",params:{...g,scale:1,fit:"cover",speed:0,frame:0,colorBack:"#eeefd7",colorC:"#00b2ff",colorM:"#fc4f4f",colorY:"#ffd900",colorK:"#231f20",size:.88,contrast:1.15,softness:0,grainSize:.01,grainMixer:.05,grainOverlay:.25,gridNoise:.5,floodC:.15,floodM:0,floodY:0,floodK:0,gainC:1,gainM:.44,gainY:-1,gainK:0,type:"ink"}},aI=[az,aM,{name:"Newspaper",params:{...g,scale:1,fit:"cover",speed:0,frame:0,colorBack:"#f2f1e8",colorC:"#7a7a75",colorM:"#7a7a75",colorY:"#7a7a75",colorK:"#231f20",size:.01,contrast:2,softness:.2,grainSize:0,grainMixer:0,grainOverlay:.2,gridNoise:.6,floodC:0,floodM:0,floodY:0,floodK:.1,gainC:-.17,gainM:-.45,gainY:-.45,gainK:0,type:"dots"}},{name:"Vintage",params:{...g,scale:1,fit:"cover",speed:0,frame:0,colorBack:"#fffaf0",colorC:"#59afc5",colorM:"#d8697c",colorY:"#fad85c",colorK:"#2d2824",size:.2,contrast:1.25,softness:.4,grainSize:.5,grainMixer:.15,grainOverlay:.1,gridNoise:.45,floodC:.15,floodM:0,floodY:0,floodK:0,gainC:.3,gainM:0,gainY:.2,gainK:0,type:"sharp"}}],aO=(0,t.memo)(function({speed:e=az.params.speed,frame:o=az.params.frame,colorBack:a=az.params.colorBack,colorC:t=az.params.colorC,colorM:r=az.params.colorM,colorY:i=az.params.colorY,colorK:s=az.params.colorK,image:l="",size:n=az.params.size,contrast:f=az.params.contrast,
4867softness:c=az.params.softness,grainSize:m=az.params.grainSize,grainMixer:d=az.params.grainMixer,grainOverlay:g=az.params.grainOverlay,gridNoise:h=az.params.gridNoise,floodC:x=az.params.floodC,floodM:y=az.params.floodM,floodY:w=az.params.floodY,floodK:A=az.params.floodK,gainC:b=az.params.gainC,gainM:C=az.params.gainM,gainY:B=az.params.gainY,gainK:S=az.params.gainK,type:k=az.params.type,fit:U=az.params.fit,scale:R=az.params.scale,rotation:V=az.params.rotation,originX:F=az.params.originX,originY:z=az.params.originY,offsetX:M=az.params.offsetX,offsetY:I=az.params.offsetY,worldWidth:O=az.params.worldWidth,worldHeight:E=az.params.worldHeight,...Y}){let W={u_image:l,u_noiseTexture:D(),u_colorBack:_(a),u_colorC:_(t),u_colorM:_(r),u_colorY:_(i),u_colorK:_(s),u_size:n,u_contrast:f,u_softness:c,u_grainSize:m,u_grainMixer:d,u_grainOverlay:g,u_gridNoise:h,u_floodC:x,u_floodM:y,u_floodY:w,u_floodK:A,u_gainC:b,u_gainM:C,u_gainY:B,u_gainK:S,u_type:aF[k],u_fit:v[U],u_rotation:V,u_scale:R,u_offsetX:M,u_offsetY:I,u_originX:F,u_originY:z,u_worldWidth:O,u_worldHeight:E};return(0,u.jsx)(p,{...Y,speed:e,frame:o,fragmentShader:aV,uniforms:W})},d)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.