https://gizellehurtado.com/dist/animated-bg-line-waves.0d556fda2c2d4279b803.js

1(self.webpackChunkfolio=self.webpackChunkfolio||[]).push([[6182],{77945(e,n,o){"use strict";o.r(n),o.d(n,{default:()=>u});var t=o(31601),a=o.n(t),l=o(76314),r=o.n(l)()(a());r.push([e.id,"\n.line-waves-root[data-v-7bb83a14] {\n  width: 100%;\n  height: 100%;\n}\n",""]);const u=r},41533(e,n,o){"use strict";o.r(n),o.d(n,{default:()=>s});var t=o(20641),a=o(29412),l=o(82459),r=o(4347),u=o(39040);const i=(0,t.pM)({__name:"LineWaves",props:{speed:{default:.3},innerLineCount:{default:32},outerLineCount:{default:36},warpIntensity:{default:1},rotation:{default:-45},edgeFadeWidth:{default:0},colorCycleSpeed:{default:1},brightness:{default:.2},color1:{default:"#ffffff"},color2:{default:"#ffffff"},color3:{default:"#ffffff"},enableMouseInteraction:{type:Boolean,default:!0},mouseInfluence:{default:2}},setup:function(e){function n(e){var n=e.replace("#","");return[parseInt(n.slice(0,2),16)/255,parseInt(n.slice(2,4),16)/255,parseInt(n.slice(4,6),16)/255]}var o=e,i=(0,t.rk)("containerRef"),s=null,f=function(){if(i.value){var e=i.value,t=new a.A({alpha:!0,premultipliedAlpha:!1}),f=t.gl;f.clearColor(0,0,0,0);var c=[.5,.5],d=[.5,.5];t.setSize(e.offsetWidth,e.offsetHeight);var v=new l.l(f),p=o.rotation*Math.PI/180,m=new r.B(f,{vertex:"\nattribute vec2 uv;\nattribute vec2 position;\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 0, 1);\n}\n",fragment:"\nprecision highp float;\n\nuniform float uTime;\nuniform vec3 uResolution;\nuniform float uSpeed;\nuniform float uInnerLines;\nuniform float uOuterLines;\nuniform float uWarpIntensity;\nuniform float uRotation;\nuniform float uEdgeFadeWidth;\nuniform float uColorCycleSpeed;\nuniform float uBrightness;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform vec2 uMouse;\nuniform float uMouseInfluence;\nuniform bool uEnableMouse;\n\n#define HALF_PI 1.5707963\n\nfloat hashF(float n) {\n  return fract(sin(n * 127.1) * 43758.5453123);\n}\n\nfloat smoothNoise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  return mix(hashF(i), hashF(i + 1.0), u);\n}\n\nfloat displaceA(float coord, float t) {\n  float result = sin(coord * 2.123) * 0.2;\n  result += sin(coord * 3.234 + t * 4.345) * 0.1;\n  result += sin(coord * 0.589 + t * 0.934) * 0.5;\n  return result;\n}\n\nfloat displaceB(float coord, float t) {\n  float result = sin(coord * 1.345) * 0.3;\n  result += sin(coord * 2.734 + t * 3.345) * 0.2;\n  result += sin(coord * 0.189 + t * 0.934) * 0.3;\n  return result;\n}\n\nvec2 rotate2D(vec2 p, float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  return vec2(p.x * c - p.y * s, p.x * s + p.y * c);\n}\n\nvoid main() {\n  vec2 coords = gl_FragCoord.xy / uResolution.xy;\n  coords = coords * 2.0 - 1.0;\n  coords = rotate2D(coords, uRotation);\n\n  float halfT = uTime * uSpeed * 0.5;\n  float fullT = uTime * uSpeed;\n\n  float mouseWarp = 0.0;\n  if (uEnableMouse) {\n    vec2 mPos = rotate2D(uMouse * 2.0 - 1.0, uRotation);\n    float mDist = length(coords - mPos);\n    mouseWarp = uMouseInfluence * exp(-mDist * mDist * 4.0);\n  }\n\n  float warpAx = coords.x + displaceA(coords.y, halfT) * uWarpIntensity + mouseWarp;\n  float warpAy = coords.y - displaceA(coords.x * cos(fullT) * 1.235, halfT) * uWarpIntensity;\n  float warpBx = coords.x + displaceB(coords.y, halfT) * uWarpIntensity + mouseWarp;\n  float warpBy = coords.y - displaceB(coords.x * sin(fullT) * 1.235, halfT) * uWarpIntensity;\n\n  vec2 fieldA = vec2(warpAx, warpAy);\n  vec2 fieldB = vec2(warpBx, warpBy);\n  vec2 blended = mix(fieldA, fieldB, mix(fieldA, fieldB, 0.5));\n\n  float fadeTop = smoothstep(uEdgeFadeWidth, uEdgeFadeWidth + 0.4, blended.y);\n  float fadeBottom = smoothstep(-uEdgeFadeWidth, -(uEdgeFadeWidth + 0.4), blended.y);\n  float vMask = 1.0 - max(fadeTop, fadeBottom);\n\n  float tileCount = mix(uOuterLines, uInnerLines, vMask);\n  float scaledY = blended.y * tileCount;\n  float nY = smoothNoise(abs(scaledY));\n\n  float ridge = pow(\n    step(abs(nY - blended.x) * 2.0, HALF_PI) * cos(2.0 * (nY - blended.x)),\n    5.0\n  );\n\n  float lines = 0.0;\n  for (float i = 1.0; i < 3.0; i += 1.0) {\n    lines += pow(max(fract(scaledY), fract(-scaledY)), i * 2.0);\n  }\n\n  float pattern = vMask * lines;\n\n  float cycleT = fullT * uColorCycleSpeed;\n  float rChannel = (pattern + lines * ridge) * (cos(blended.y + cycleT * 0.234) * 0.5 + 1.0);\n  float gChannel = (pattern + vMask * ridge) * (sin(blended.x + cycleT * 1.745) * 0.5 + 1.0);\n  float bChannel = (pattern + lines * ridge) * (cos(blended.x + cycleT * 0.534) * 0.5 + 1.0);\n\n  vec3 col = (rChannel * uColor1 + gChannel * uColor2 + bChannel * uColor3) * uBrightness;\n  float alpha = clamp(length(col), 0.0, 1.0);\n\n  gl_FragColor = vec4(col, alpha);\n}\n",uniforms:{uTime:{value:0},uResolution:{value:[f.canvas.width,f.canvas.height,f.canvas.width/f.canvas.height]},uSpeed:{value:o.speed},uInnerLines:{value:o.innerLineCount},uOuterLines:{value:o.outerLineCount},uWarpIntensity:{value:o.warpIntensity},uRotation:{value:p},uEdgeFadeWidth:{value:o.edgeFadeWidth},uColorCycleSpeed:{value:o.colorCycleSpeed},uBrightness:{value:o.brightness}

1,uColor1:{value:n(o.color1)},uColor2:{value:n(o.color2)},uColor3:{value:n(o.color3)},uMouse:{value:new Float32Array([.5,.5])},uMouseInfluence:{value:o.mouseInfluence},uEnableMouse:{value:o.enableMouseInteraction}}});window.addEventListener("resize",w);var h=null;"undefined"!=typeof ResizeObserver&&(h=new ResizeObserver(w)).observe(e);var g,y=new u.e(f,{geometry:v,program:m});e.appendChild(f.canvas),o.enableMouseInteraction&&(f.canvas.addEventListener("mousemove",C),f.canvas.addEventListener("mouseleave",b)),g=requestAnimationFrame(function e(n){g=requestAnimationFrame(e),m.uniforms.uTime.value=.001*n,o.enableMouseInteraction?(c[0]+=.05*(d[0]-c[0]),c[1]+=.05*(d[1]-c[1]),m.uniforms.uMouse.value[0]=c[0],m.uniforms.uMouse.value[1]=c[1]):(m.uniforms.uMouse.value[0]=.5,m.uniforms.uMouse.value[1]=.5),t.render({scene:y})}),s=function(){var n,t;cancelAnimationFrame(g),window.removeEventListener("resize",w),null===(n=h)||void 0===n||n.disconnect(),o.enableMouseInteraction&&(f.canvas.removeEventListener("mousemove",C),f.canvas.removeEventListener("mouseleave",b)),e.removeChild(f.canvas),null===(t=f.getExtension("WEBGL_lose_context"))||void 0===t||t.loseContext()}}function C(e){var n=f.canvas.getBoundingClientRect();d=[(e.clientX-n.left)/n.width,1-(e.clientY-n.top)/n.height]}function b(){d=[.5,.5]}function w(){t.setSize(e.offsetWidth,e.offsetHeight),m.uniforms.uResolution.value=[f.canvas.width,f.canvas.height,f.canvas.width/f.canvas.height]}};return(0,t.sV)(function(){f()}),(0,t.xo)(function(){var e;null===(e=s)||void 0===e||e()}),(0,t.wB)(function(){return[o.speed,o.innerLineCount,o.outerLineCount,o.warpIntensity,o.rotation,o.edgeFadeWidth,o.colorCycleSpeed,o.brightness,o.color1,o.color2,o.color3,o.enableMouseInteraction,o.mouseInfluence]},function(){var e;null===(e=s)||void 0===e||e(),f()}),function(e,n){return(0,t.uX)(),(0,t.CE)("div",{ref_key:"containerRef",ref:i,class:"line-waves-root"},null,512)}}});o(58850);const s=(0,o(66262).A)(i,[["__scopeId","data-v-7bb83a14"]])},58850(e,n,o){var t=o(77945);t.__esModule&&(t=t.default),"string"==typeof t&&(t=[[e.id,t,""]]),t.locals&&(e.exports=t.locals);(0,o(70534).A)("703cc154",t,!1,{})},82459(e,n,o){"use strict";o.d(n,{l:()=>a});var t=o(2727);class a extends t.V{constructor(e,{attributes:n={}}={}){Object.assign(n,{position:{size:2,data:new Float32Array([-1,-1,3,-1,-1,3])},uv:{size:2,data:new Float32Array([0,0,2,0,0,2])}}),super(e,n)}}}}]);