1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7181],{7181:(e,t,i)=>{i.d(t,{U$:()=>E});var r=i(65162);let o=`#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}`,a=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,t,i,r,o=0,s=0,n=2,u=a,h=[]){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]")){const e=this.ownerDocument.createElement("style");e.innerHTML=l,e.setAttribute("data-paper-shader",""),this.ownerDocument.head.prepend(e)}const c=this.ownerDocument.createElement("canvas");this.canvasElement=c,this.parentElement.prepend(c),this.fragmentShader=t,this.providedUniforms=i,this.mipmaps=h,this.currentFrame=s,this.minPixelRatio=n,this.maxPixelCount=u;const f=c.getContext("webgl2",r);if(!f)throw Error("Paper Shaders: WebGL is not supported in this browser");this.gl=f,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),visualViewport?.addEventListener("resize",this.handleVisualViewportChange),this.setSpeed(o),this.parentElement.setAttribute("data-paper-shader",""),this.parentElement.paperShaderMount=this,this.ownerDocument.addEventListener("visibilitychange",this.handleDocumentVisibilityChange)}initProgram=()=>{let e=function(e,t,i){let r=e.getShaderPrecisionFormat(e.FRAGMENT_SHADER,e.MEDIUM_FLOAT),o=r?r.precision:null;o&&o<23&&(t=t.replace(/precision\s+(lowp|mediump)\s+float;/g,"precision highp float;"),i=i.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 a=n(e,e.VERTEX_SHADER,t),s=n(e,e.FRAGMENT_SHADER,i);if(!a||!s)return null;let l=e.createProgram();return l?(e.attachShader(l,a),e.attachShader(l,s),e.linkProgram(l),e.getProgramParameter(l,e.LINK_STATUS))?(e.detachShader(l,a),e.detachShader(l,s),e.deleteShader(a),e.deleteShader(s),l):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(l)),e.deleteProgram(l),e.deleteShader(a),e.deleteShader(s),null):null}(this.gl,o,this.fragmentShader);e&&(this.program=e)};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t),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(([t,i])=>{if(e[t]=this.gl.getUniformLocation(this.program,t),i instanceof HTMLImageElement){let i=`${t}AspectRatio`;e[i]=this.gl.getUniformLocation(this.program,i)}}),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 t=e.devicePixelContentBoxSize?.[0];void 0!==t&&(this.devicePixelsSupported=!0,this.parentDevicePixelWidth=t.inlineSize,this.parentDevicePixelHeight=t.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,t=0,i=Math.max(1,window.devicePixelRatio),r=visualViewport?.scale??1;if(this.devicePixelsSupported){let o=Math.max(1,this.minPixelRatio/i);e=this.parentDevicePixelWidth*o*r,t=this.parentDevicePixelHeight*o*r}else{var o;let a,s,n=Math.max(i,this.minPixelRatio)*r;this.isSafari&&(n*=Math.max(1,(o=this.ownerDocument,(s=Math.round(100*(a=outerWidth/((visualViewport?.scale??1)*(visualViewport?.width??window.innerWidth)+(window.innerWidth-o.documentElement.clientWidth)))))%5==0?s/100:33===s?1/3:67===s?2/3:133===s?4/3:a))),e=Math.round(this.parentWidth)*n,t=Math.round(this.parentHeight)*n}let a=Math.min(1,Math.sqrt(this.maxPixelCount)/Math.sqrt(e*t)),s=Math.round(e*a),n=Math.round(t*a),l=s/Math.round(this.parentWidth);(this.canvasElement.width!==s||this.canvasElement.height!==n||this.renderScale!==l)&&(this.renderScale=l,this.canvasElement.width=s,this.canvasElement.height=n,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 t=e-this.lastRenderTime;this.lastRenderTime=e,0!==this.currentSpeed&&(this.currentFrame+=t*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,t)=>
151{if(!t.complete||0===t.naturalWidth)throw Error(`Paper Shaders: image for uniform ${e} must be fully loaded`);let i=this.textures.get(e);i&&this.gl.deleteTexture(i),this.textureUnitMap.has(e)||this.textureUnitMap.set(e,this.textureUnitMap.size);let r=this.textureUnitMap.get(e);this.gl.activeTexture(this.gl.TEXTURE0+r);let o=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,o),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,t),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 a=this.gl.getError();if(a!==this.gl.NO_ERROR||null===o)return void console.error("Paper Shaders: WebGL error when uploading texture:",a);this.textures.set(e,o);let s=this.uniformLocations[e];if(s){this.gl.uniform1i(s,r);let i=`${e}AspectRatio`,o=this.uniformLocations[i];if(o){let e=t.naturalWidth/t.naturalHeight;this.gl.uniform1f(o,e)}}};areUniformValuesEqual=(e,t)=>e===t||!!(Array.isArray(e)&&Array.isArray(t))&&e.length===t.length&&e.every((e,i)=>this.areUniformValuesEqual(e,t[i]));setUniformValues=e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([e,t])=>{let i=t;if(t instanceof HTMLImageElement&&(i=`${t.src.slice(0,200)}|${t.naturalWidth}x${t.naturalHeight}`),this.areUniformValuesEqual(this.uniformCache[e],i))return;this.uniformCache[e]=i;let r=this.uniformLocations[e];if(!r)return void console.warn(`Uniform location for ${e} not found`);if(t instanceof HTMLImageElement)this.setTextureUniform(e,t);else if(Array.isArray(t)){let i=null,o=null;if(void 0!==t[0]&&Array.isArray(t[0])){let r=t[0].length;if(!t.every(e=>e.length===r))return void console.warn(`All child arrays must be the same length for ${e}`);i=t.flat(),o=r}else o=(i=t).length;switch(o){case 2:this.gl.uniform2fv(r,i);break;case 3:this.gl.uniform3fv(r,i);break;case 4:this.gl.uniform4fv(r,i);break;case 9:this.gl.uniformMatrix3fv(r,!1,i);break;case 16:this.gl.uniformMatrix4fv(r,!1,i);break;default:console.warn(`Unsupported uniform array length: ${o}`)}}else"number"==typeof t?this.gl.uniform1f(r,t):"boolean"==typeof t?this.gl.uniform1i(r,+!!t):console.warn(`Unsupported uniform type for ${e}: ${typeof t}`)})};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=a)=>{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 n(e,t,i){let r=e.createShader(t);return r?(e.shaderSource(r,i),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS))?r:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(r)),e.deleteShader(r),null):null}let l=`@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}`;
168function u(e){if(e.naturalWidth<1024&&e.naturalHeight<1024){if(e.naturalWidth<1||e.naturalHeight<1)return;let t=e.naturalWidth/e.naturalHeight;e.width=Math.round(t>1?1024*t:1024),e.height=Math.round(t>1?1024:1024/t)}}var h=i(4930);async function c(e){let t={},i=[];return Object.entries(e).forEach(([e,r])=>{if("string"==typeof r){let o=r||"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";if(!(e=>{try{if(e.startsWith("/"))return!0;return new URL(e),!0}catch{return!1}})(o))return void console.warn(`Uniform "${e}" has invalid URL "${o}". Skipping image loading.`);let a=new Promise((i,r)=>{let a=new Image;(e=>{try{if(e.startsWith("/"))return!1;return new URL(e,window.location.origin).origin!==window.location.origin}catch{return!1}})(o)&&(a.crossOrigin="anonymous"),a.onload=()=>{u(a),t[e]=a,i()},a.onerror=()=>{console.error(`Could not set uniforms. Failed to load image at ${o}`),r()},a.src=o});i.push(a)}else r instanceof HTMLImageElement&&u(r),t[e]=r}),await Promise.all(i),t}let f=(0,r.forwardRef)(function({fragmentShader:e,uniforms:t,webGlContextAttributes:i,speed:o=0,frame:a=0,width:n,height:l,minPixelRatio:u,maxPixelCount:f,mipmaps:p,style:g,...d},m){var v;let x,_,[S,b]=(0,r.useState)(!1),y=(0,r.useRef)(null),R=(0,r.useRef)(null),U=(0,r.useRef)(i);(0,r.useEffect)(()=>((async()=>{let i=await c(t);y.current&&!R.current&&(R.current=new s(y.current,e,i,U.current,o,a,u,f,p),b(!0))})(),()=>{R.current?.dispose(),R.current=null}),[e]),(0,r.useEffect)(()=>{let e=!1;return(async()=>{let i=await c(t);e||R.current?.setUniforms(i)})(),()=>{e=!0}},[t,S]),(0,r.useEffect)(()=>{R.current?.setSpeed(o)},[o,S]),(0,r.useEffect)(()=>{R.current?.setMaxPixelCount(f)},[f,S]),(0,r.useEffect)(()=>{R.current?.setMinPixelRatio(u)},[u,S]),(0,r.useEffect)(()=>{R.current?.setFrame(a)},[a,S]);let E=(v=[y,m],x=r.useRef(void 0),_=r.useCallback(e=>{let t=v.map(t=>{if(null!=t){if("function"==typeof t){let i=t(e);return"function"==typeof i?i:()=>{t(null)}}return t.current=e,()=>{t.current=null}}});return()=>{t.forEach(e=>e?.())}},v),r.useMemo(()=>v.every(e=>null==e)?null:e=>{x.current&&(x.current(),x.current=void 0),null!=e&&(x.current=_(e))},v));return(0,h.jsx)("div",{ref:E,style:void 0!==n||void 0!==l?{width:"string"==typeof n&&!1===isNaN(+n)?+n:n,height:"string"==typeof l&&!1===isNaN(+l)?+l:l,...g}:g,...d})});f.displayName="ShaderMount";let p={fit:"contain",scale:1,rotation:0,offsetX:0,offsetY:0,originX:.5,originY:.5,worldWidth:0,worldHeight:0},g={none:0,contain:1,cover:2};function d(e){if(Array.isArray(e))return 4===e.length?e:3===e.length?[...e,1]:v;if("string"!=typeof e)return v;let t,i,r,o=1;if(e.startsWith("#")){var a;[t,i,r,o]=(3===(a=(a=e).replace(/^#/,"")).length&&(a=a.split("").map(e=>e+e).join("")),6===a.length&&(a+="ff"),[parseInt(a.slice(0,2),16)/255,parseInt(a.slice(2,4),16)/255,parseInt(a.slice(4,6),16)/255,parseInt(a.slice(6,8),16)/255])}else if(e.startsWith("rgb")){let a;[t,i,r,o]=(a=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i))?[parseInt(a[1]??"0")/255,parseInt(a[2]??"0")/255,parseInt(a[3]??"0")/255,void 0===a[4]?1:parseFloat(a[4])]:[0,0,0,1]}else{let a;if(!e.startsWith("hsl"))return console.error("Unsupported color format",e),v;[t,i,r,o]=function(e){let t,i,r,[o,a,s,n]=e,l=o/360,u=a/100,h=s/100;if(0===a)t=i=r=h;else{let e=(e,t,i)=>(i<0&&(i+=1),i>1&&(i-=1),i<1/6)?e+(t-e)*6*i:i<.5?t:i<2/3?e+(t-e)*(2/3-i)*6:e,o=h<.5?h*(1+u):h+u-h*u,a=2*h-o;t=e(a,o,l+1/3),i=e(a,o,l),r=e(a,o,l-1/3)}return[t,i,r,n]}((a=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i))?[parseInt(a[1]??"0"),parseInt(a[2]??"0"),parseInt(a[3]??"0"),void 0===a[4]?1:parseFloat(a[4])]:[0,0,0,1])}return[m(t,0,1),m(i,0,1),m(r,0,1),m(o,0,1)]}let m=(e,t,i)=>Math.min(Math.max(e,t),i),v=[0,0,0,1],x=` 169#define TWO_PI 6.28318530718 170#define PI 3.14159265358979323846 171`,_=` 172vec2 rotate(vec2 uv, float th) { 173 return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv; 174} 175`,S=` 176 float hash21(vec2 p) { 177 p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1; 178 p += dot(p, p + 19.19); 179 return fract(p.x * p.y); 180 } 181`,b=`#version 300 es 182precision mediump float; 183 184uniform float u_rotation; 185 186uniform float u_time; 187 188uniform vec4 u_colorFront; 189uniform vec4 u_colorBack; 190uniform float u_radius; 191uniform float u_contrast; 192 193uniform sampler2D u_image; 194uniform float u_imageAspectRatio; 195 196uniform float u_size; 197uniform float u_grainMixer; 198uniform float u_grainOverlay; 199uniform float u_grainSize; 200uniform float u_grid; 201uniform bool u_originalColors; 202uniform bool u_inverted; 203uniform float u_type; 204 205in vec2 v_imageUV; 206 207out vec4 fragColor; 208 209${x} 210${_} 211${S} 212 213float valueNoise(vec2 st) { 214 vec2 i = floor(st); 215 vec2 f = fract(st);
216 float a = hash21(i); 217 float b = hash21(i + vec2(1.0, 0.0)); 218 float c = hash21(i + vec2(0.0, 1.0)); 219 float d = hash21(i + vec2(1.0, 1.0)); 220 vec2 u = f * f * (3.0 - 2.0 * f); 221 float x1 = mix(a, b, u.x); 222 float x2 = mix(c, d, u.x); 223 return mix(x1, x2, u.y); 224} 225 226float lst(float edge0, float edge1, float x) { 227 return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); 228} 229 230float sst(float edge0, float edge1, float x) { 231 return smoothstep(edge0, edge1, x); 232} 233 234float getCircle(vec2 uv, float r, float baseR) { 235 r = mix(.25 * baseR, 0., r); 236 float d = length(uv - .5); 237 float aa = fwidth(d); 238 return 1. - smoothstep(r - aa, r + aa, d); 239} 240 241float getCell(vec2 uv) { 242 float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x)); 243 float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y)); 244 return insideX * insideY; 245} 246 247float getCircleWithHole(vec2 uv, float r, float baseR) { 248 float cell = getCell(uv); 249 250 r = mix(.75 * baseR, 0., r); 251 float rMod = mod(r, .5); 252 253 float d = length(uv - .5); 254 float aa = fwidth(d); 255 float circle = 1. - smoothstep(rMod - aa, rMod + aa, d); 256 if (r < .5) { 257 return circle; 258 } else { 259 return cell - circle; 260 } 261} 262 263float getGooeyBall(vec2 uv, float r, float baseR) { 264 float d = length(uv - .5); 265 float sizeRadius = .3; 266 if (u_grid == 1.) { 267 sizeRadius = .42; 268 } 269 sizeRadius = mix(sizeRadius * baseR, 0., r); 270 d = 1. - sst(0., sizeRadius, d); 271 272 d = pow(d, 2. + baseR); 273 return d; 274} 275 276float getSoftBall(vec2 uv, float r, float baseR) { 277 float d = length(uv - .5); 278 float sizeRadius = clamp(baseR, 0., 1.); 279 sizeRadius = mix(.5 * sizeRadius, 0., r); 280 d = 1. - lst(0., sizeRadius, d); 281 float powRadius = 1. - lst(0., 2., baseR); 282 d = pow(d, 4. + 3. * powRadius); 283 return d; 284} 285 286float getUvFrame(vec2 uv, vec2 pad) { 287 float aa = 0.0001; 288 289 float left = smoothstep(-pad.x, -pad.x + aa, uv.x); 290 float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x); 291 float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y); 292 float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y); 293 294 return left * right * bottom * top; 295} 296 297float sigmoid(float x, float k) { 298 return 1.0 / (1.0 + exp(-k * (x - 0.5))); 299} 300 301float getLumAtPx(vec2 uv, float contrast) { 302 vec4 tex = texture(u_image, uv); 303 vec3 color = vec3( 304 sigmoid(tex.r, contrast), 305 sigmoid(tex.g, contrast), 306 sigmoid(tex.b, contrast) 307 ); 308 float lum = dot(vec3(0.2126, 0.7152, 0.0722), color); 309 lum = mix(1., lum, tex.a); 310 lum = u_inverted ? (1. - lum) : lum; 311 return lum; 312} 313 314float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) { 315 p += inCellOffset; 316 vec2 uv_i = floor(p); 317 vec2 uv_f = fract(p); 318 vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5); 319 float outOfFrame = getUvFrame(samplingUV, pad * stepSize); 320 321 float lum = getLumAtPx(samplingUV, contrast); 322 ballColor = texture(u_image, samplingUV); 323 ballColor.rgb *= ballColor.a; 324 ballColor *= outOfFrame; 325 326 float ball = 0.; 327 if (u_type == 0.) { 328 // classic 329 ball = getCircle(uv_f, lum, baseR); 330 } else if (u_type == 1.) { 331 // gooey 332 ball = getGooeyBall(uv_f, lum, baseR); 333 } else if (u_type == 2.) { 334 // holes 335 ball = getCircleWithHole(uv_f, lum, baseR); 336 } else if (u_type == 3.) { 337 // soft 338 ball = getSoftBall(uv_f, lum, baseR); 339 } 340 341 return ball * outOfFrame; 342} 343 344 345void main() { 346 347 float stepMultiplier = 1.; 348 if (u_type == 0.) { 349 // classic 350 stepMultiplier = 2.; 351 } else if (u_type == 1. || u_type == 3.) { 352 // gooey & soft 353 stepMultiplier = 6.; 354 } 355 356 float cellsPerSide = mix(300., 7., pow(u_size, .7)); 357 cellsPerSide /= stepMultiplier; 358 float cellSizeY = 1. / cellsPerSide; 359 vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.); 360 if (u_type == 1. && u_grid == 1.) { 361 // gooey diagonal grid works differently 362 pad *= .7; 363 } 364 365 vec2 uv = v_imageUV; 366 uv -= vec2(.5); 367 uv /= pad; 368 369 float contrast = mix(0., 15., pow(u_contrast, 1.5)); 370 float baseRadius = u_radius; 371 if (u_originalColors == true) { 372 contrast = mix(.1, 4., pow(u_contrast, 2.)); 373 baseRadius = 2. * pow(.5 * u_radius, .3); 374 } 375 376 float totalShape = 0.; 377 vec3 totalColor = vec3(0.); 378 float totalOpacity = 0.; 379 380 vec4 ballColor; 381 float shape; 382 float stepSize = 1. / stepMultiplier; 383 for (float x = -0.5; x < 0.5; x += stepSize) { 384 for (float y = -0.5; y < 0.5; y += stepSize) { 385 vec2 offset = vec2(x, y); 386 387 if (u_grid == 1.) { 388 float rowIndex = floor((y + .5) / stepSize); 389 float colIndex = floor((x + .5) / stepSize); 390 if (stepSize == 1.) { 391 rowIndex = floor(uv.y + y + 1.); 392 if (u_type == 1.) { 393 colIndex = floor(uv.x + x + 1.); 394 } 395 } 396 if (u_type == 1.) { 397 if (mod(rowIndex + colIndex, 2.) == 1.) { 398 continue; 399 } 400 } else { 401 if (mod(rowIndex, 2.) == 1.) { 402 offset.x += .5 * stepSize; 403 } 404 } 405 } 406 407 shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor); 408 totalColor += ballColor.rgb * shape; 409 totalShape += shape; 410 totalOpacity += shape; 411 } 412 } 413 414 const float eps = 1e-4; 415 416 totalColor /= max(totalShape, eps); 417 totalOpacity /= max(totalShape, eps); 418 419 float finalShape = 0.; 420 if (u_type == 0.) { 421 finalShape = min(1., totalShape); 422 } else if (u_type == 1.) { 423 float aa = fwidth(totalShape); 424 float th = .5; 425 finalShape = smoothstep(th - aa, th + aa, totalShape); 426 } else if (u_type == 2.) { 427 finalShape = min(1., totalShape); 428 } else if (u_type == 3.) { 429 finalShape = totalShape; 430 } 431 432 vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio); 433 vec2 grainUV = v_imageUV - .5; 434 grainUV *= grainSize; 435 grainUV += .5; 436 float grain = valueNoise(grainUV); 437 grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain); 438 grain *= u_grainMixer; 439 finalShape = mix(finalShape, 0., grain); 440 441 vec3 color = vec3(0.); 442 float opacity = 0.; 443 444 if (u_originalColors == true) { 445 color = totalColor * finalShape; 446 opacity = totalOpacity * finalShape; 447 448 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 449 color = color + bgColor * (1. - opacity); 450 opacity = opacity + u_colorBack.a * (1. - opacity); 451 } else { 452 vec3 fgColor = u_colorFront.rgb * u_colorFront.a; 453 float fgOpacity = u_colorFront.a; 454 vec3 bgColor = u_colorBack.rgb * u_colorBack.a; 455 float bgOpacity = u_colorBack.a; 456 457 color = fgColor * finalShape; 458 opacity = fgOpacity * finalShape; 459 color += bgColor * (1. - opacity); 460 opacity += bgOpacity * (1. - opacity); 461 } 462 463 float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.)); 464 grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5); 465 grainOverlay = pow(grainOverlay, 1.3); 466 467 float grainOverlayV = grainOverlay * 2. - 1.; 468 vec3 grainOverlayColor = vec3(step(0., grainOverlayV)); 469 float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV); 470 grainOverlayStrength = pow(grainOverlayStrength, .8); 471 color = mix(color, grainOverlayColor, .5 * grainOverlayStrength); 472 473 opacity += .5 * grainOverlayStrength; 474 opacity = clamp(opacity, 0., 1.); 475 476 fragColor = vec4(color, opacity); 477} 478`,y={classic:0,gooey:1,holes:2,soft:3},R={square:0,hex:1}
478,U={name:"Default",params:{...p,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"}},E=(0,r.memo)(function({speed:e=U.params.speed,frame:t=U.params.frame,colorFront:i=U.params.colorFront,colorBack:r=U.params.colorBack,image:o="",size:a=U.params.size,radius:s=U.params.radius,contrast:n=U.params.contrast,originalColors:l=U.params.originalColors,inverted:u=U.params.inverted,grainMixer:c=U.params.grainMixer,grainOverlay:p=U.params.grainOverlay,grainSize:m=U.params.grainSize,grid:v=U.params.grid,type:x=U.params.type,fit:_=U.params.fit,scale:S=U.params.scale,rotation:E=U.params.rotation,originX:w=U.params.originX,originY:z=U.params.originY,offsetX:B=U.params.offsetX,offsetY:A=U.params.offsetY,worldWidth:V=U.params.worldWidth,worldHeight:O=U.params.worldHeight,...C}){let T={u_image:o,u_colorFront:d(i),u_colorBack:d(r),u_size:a,u_radius:s,u_contrast:n,u_originalColors:l,u_inverted:u,u_grainMixer:c,u_grainOverlay:p,u_grainSize:m,u_grid:R[v],u_type:y[x],u_fit:g[_],u_rotation:E,u_scale:S,u_offsetX:B,u_offsetY:A,u_originX:w,u_originY:z,u_worldWidth:V,u_worldHeight:O};return(0,h.jsx)(f,{...C,speed:e,frame:t,fragmentShader:b,uniforms:T})},function(e,t){for(let i in e){if("colors"===i){let i=Array.isArray(e.colors),r=Array.isArray(t.colors);if(!i||!r){if(!1===Object.is(e.colors,t.colors))return!1;continue}if(e.colors?.length!==t.colors?.length||!e.colors?.every((e,i)=>e===t.colors?.[i]))return!1;continue}if(!1===Object.is(e[i],t[i]))return!1}return!0})}}]);
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.