https://andreaeverman.com/dist/animated-bg-pixel-blast.19939decf9f6b17a7afc.js

1(self.webpackChunkfolio=self.webpackChunkfolio||[]).push([[2258],{25518(e,n,t){"use strict";t.r(n),t.d(n,{default:()=>r});var a=t(31601),i=t.n(a),l=t(76314),o=t.n(l)()(i());o.push([e.id,"\n.pixel-blast-root[data-v-167e9766] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n",""]);const r=o},74195(e,n,t){"use strict";t.r(n),t.d(n,{default:()=>c});var a=t(20641),i=t(90033),l=t(66374),o=t(24922),r=t(39437),u=t(50953);function f(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!t){if(Array.isArray(e)||(t=function(e,n){if(e){if("string"==typeof e)return s(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?s(e,n):void 0}}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var a=0,i=function(){};return{s:i,n:function(){return a>=e.length?{done:!0}:{done:!1,value:e[a++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,o=!0,r=!1;return{s:function(){t=t.call(e)},n:function(){var e=t.next();return o=e.done,e},e:function(e){r=!0,l=e},f:function(){try{o||null==t.return||t.return()}finally{if(r)throw l}}}}function s(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,a=Array(n);t<n;t++)a[t]=e[t];return a}const d=(0,a.pM)({__name:"PixelBlast",props:{variant:{default:"square"},pixelSize:{default:3},color:{default:"#B19EEF"},className:{},style:{},antialias:{type:Boolean,default:!0},patternScale:{default:2},patternDensity:{default:1},liquid:{type:Boolean,default:!1},liquidStrength:{default:.1},liquidRadius:{default:1},pixelSizeJitter:{default:0},enableRipples:{type:Boolean,default:!0},rippleIntensityScale:{default:1},rippleThickness:{default:.1},rippleSpeed:{default:.3},liquidWobbleSpeed:{default:4.5},autoPauseOffscreen:{type:Boolean,default:!0},speed:{default:.5},transparent:{type:Boolean,default:!0},edgeFade:{default:.5},noiseAmount:{default:0}},setup:function(e){var n=function(){var e=64,n=document.createElement("canvas");n.width=e,n.height=e;var t=n.getContext("2d");if(!t)throw new Error("2D context not available");t.fillStyle="black",t.fillRect(0,0,n.width,n.height);var a=new o.gPd(n);a.minFilter=o.k6q,a.magFilter=o.k6q,a.generateMipmaps=!1;var i=[],l=null,r=64,u=6.4,f=function(n){var a,i=n.x*e,l=(1-n.y)*e,o=1;n.age<19.2?(a=n.age/19.2,o=Math.sin(a*Math.PI/2)):o=function(e){return-e*(e-2)}(1-(n.age-19.2)/44.8)||0,o*=n.force;var r="".concat((n.vx+1)/2*255,", ").concat((n.vy+1)/2*255,", ").concat(255*o),f=320;t.shadowOffsetX=f,t.shadowOffsetY=f,t.shadowBlur=u,t.shadowColor="rgba(".concat(r,",").concat(.22*o,")"),t.beginPath(),t.fillStyle="rgba(255,0,0,1)",t.arc(i-f,l-f,u,0,2*Math.PI),t.fill()};return{canvas:n,texture:a,addTouch:function(e){var n=0,t=0,a=0;if(l){var o=e.x-l.x,r=e.y-l.y;if(0===o&&0===r)return;var u=o*o+r*r,f=Math.sqrt(u);t=o/(f||1),a=r/(f||1),n=Math.min(1e4*u,1)}l={x:e.x,y:e.y},i.push({x:e.x,y:e.y,age:0,force:n,vx:t,vy:a})},update:function(){t.fillStyle="black",t.fillRect(0,0,n.width,n.height);for(var e=i.length-1;e>=0;e--){var l=i[e],o=.015625*l.force*(1-l.age/r);l.x+=l.vx*o,l.y+=l.vy*o,l.age++,l.age>r&&i.splice(e,1)}for(var u=0;u<i.length;u++)f(i[u]);a.needsUpdate=!0},set radiusScale(e){u=6.4*e},get radiusScale(){return u/6.4},size:e}},t={square:0,circle:1,triangle:2,diamond:3},s=e,d=(0,a.rk)("containerRef"),c=(0,u.KR)({visible:!0}),v=(0,u.KR)(s.speed),p=(0,u.KR)(null),m=(0,u.KR)(null),h=null,x=function(){var e=d.value;if(e){v.value=s.speed;var a,i,u,x,g={antialias:s.antialias,liquid:s.liquid,noiseAmount:s.noiseAmount},y=!1;if(p.value){if(m.value){var S,w=f(["antialias","liquid","noiseAmount"]);try{for(w.s();!(S=w.n()).done;){var E=S.value;if(m.value[E]!==g[E]){y=!0;break}}}catch(e){w.e(e)}finally{w.f()}}}else y=!0;if(y){var R;if(p.value){var C,b,T,A=p.value;null===(C=A.resizeObserver)||void 0===C||C.disconnect(),cancelAnimationFrame(A.raf),null===(b=A.quad)||void 0===b||b.geometry.dispose(),A.material.dispose(),null===(T=A.composer)||void 0===T||T.dispose(),A.renderer.dispose(),A.renderer.domElement.parentElement===e&&e.removeChild(A.renderer.domElement),p.value=null}var P=document.createElement("canvas");if(!P.getContext("webgl2",{antialias:s.antialias,alpha:!0}))return;var q=new r.JeP({canvas:P,antialias:s.antialias,alpha:!0});q.domElement.style.width="100%",q.domElement.style.height="100%",q.setP

1ixelRatio(Math.min(window.devicePixelRatio||1,2)),e.appendChild(q.domElement);var k={uResolution:{value:new o.I9Y(0,0)},uTime:{value:0},uColor:{value:new o.Q1f(s.color)},uClickPos:{value:Array.from({length:10},function(){return new o.I9Y(-1,-1)})},uClickTimes:{value:new Float32Array(10)},uShapeType:{value:null!==(R=t[s.variant])&&void 0!==R?R:0},uPixelSize:{value:s.pixelSize*q.getPixelRatio()},uScale:{value:s.patternScale},uDensity:{value:s.patternDensity},uPixelJitter:{value:s.pixelSizeJitter},uEnableRipples:{value:s.enableRipples?1:0},uRippleSpeed:{value:s.rippleSpeed},uRippleThickness:{value:s.rippleThickness},uRippleIntensity:{value:s.rippleIntensityScale},uEdgeFade:{value:s.edgeFade}},I=new o.Z58,M=new o.qUd(-1,1,1,-1,0,1),z=new o.BKk({vertexShader:"\nvoid main() {\n  gl_Position = vec4(position, 1.0);\n}\n",fragmentShader:"\nprecision highp float;\n\nuniform vec3  uColor;\nuniform vec2  uResolution;\nuniform float uTime;\nuniform float uPixelSize;\nuniform float uScale;\nuniform float uDensity;\nuniform float uPixelJitter;\nuniform int   uEnableRipples;\nuniform float uRippleSpeed;\nuniform float uRippleThickness;\nuniform float uRippleIntensity;\nuniform float uEdgeFade;\n\nuniform int   uShapeType;\nconst int SHAPE_SQUARE   = 0;\nconst int SHAPE_CIRCLE   = 1;\nconst int SHAPE_TRIANGLE = 2;\nconst int SHAPE_DIAMOND  = 3;\n\nconst int   MAX_CLICKS = 10;\n\nuniform vec2  uClickPos  [MAX_CLICKS];\nuniform float uClickTimes[MAX_CLICKS];\n\nout vec4 fragColor;\n\nfloat Bayer2(vec2 a) {\n  a = floor(a);\n  return fract(a.x / 2. + a.y * a.y * .75);\n}\n#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))\n#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))\n\n#define FBM_OCTAVES     5\n#define FBM_LACUNARITY  1.25\n#define FBM_GAIN        1.0\n\nfloat hash11(float n){ return fract(sin(n)*43758.5453); }\n\nfloat vnoise(vec3 p){\n  vec3 ip = floor(p);\n  vec3 fp = fract(p);\n  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);\n  float x00 = mix(n000, n100, w.x);\n  float x10 = mix(n010, n110, w.x);\n  float x01 = mix(n001, n101, w.x);\n  float x11 = mix(n011, n111, w.x);\n  float y0  = mix(x00, x10, w.y);\n  float y1  = mix(x01, x11, w.y);\n  return mix(y0, y1, w.z) * 2.0 - 1.0;\n}\n\nfloat fbm2(vec2 uv, float t){\n  vec3 p = vec3(uv * uScale, t);\n  float amp = 1.0;\n  float freq = 1.0;\n  float sum = 1.0;\n  for (int i = 0; i < FBM_OCTAVES; ++i){\n    sum  += amp * vnoise(p * freq);\n    freq *= FBM_LACUNARITY;\n    amp  *= FBM_GAIN;\n  }\n  return sum * 0.5 + 0.5;\n}\n\nfloat maskCircle(vec2 p, float cov){\n  float r = sqrt(cov) * .25;\n  float d = length(p - 0.5) - r;\n  float aa = 0.5 * fwidth(d);\n  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));\n}\n\nfloat maskTriangle(vec2 p, vec2 id, float cov){\n  bool flip = mod(id.x + id.y, 2.0) > 0.5;\n  if (flip) p.x = 1.0 - p.x;\n  float r = sqrt(cov);\n  float d  = p.y - r*(1.0 - p.x);\n  float aa = fwidth(d);\n  return cov * clamp(0.5 - d/aa, 0.0, 1.0);\n}\n\nfloat maskDiamond(vec2 p, float cov){\n  float r = sqrt(cov) * 0.564;\n  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);\n}\n\nvoid main(){\n  float pixelSize = uPixelSize;\n  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;\n  float aspectRatio = uResolution.x / uResolution.y;\n\n  vec2 pixelId = floor(fragCoord / pixelSize);\n  vec2 pixelUV = fract(fragCoord / pixelSize);\n\n  float cellPixelSize = 8.0 * pixelSize;\n  vec2 cellId = floor(fragCoord / cellPixelSize);\n  vec2 cellCoord = cellId * cellPixelSize;

1\n  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);\n\n  float base = fbm2(uv, uTime * 0.05);\n  base = base * 0.5 - 0.65;\n\n  float feed = base + (uDensity - 0.5) * 0.3;\n\n  float speed     = uRippleSpeed;\n  float thickness = uRippleThickness;\n  const float dampT     = 1.0;\n  const float dampR     = 10.0;\n\n  if (uEnableRipples == 1) {\n    for (int i = 0; i < MAX_CLICKS; ++i){\n      vec2 pos = uClickPos[i];\n      if (pos.x < 0.0) continue;\n      float cellPixelSize = 8.0 * pixelSize;\n      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);\n      float t = max(uTime - uClickTimes[i], 0.0);\n      float r = distance(uv, cuv);\n      float waveR = speed * t;\n      float ring  = exp(-pow((r - waveR) / thickness, 2.0));\n      float atten = exp(-dampT * t) * exp(-dampR * r);\n      feed = max(feed, ring * atten * uRippleIntensity);\n    }\n  }\n\n  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;\n  float bw = step(0.5, feed + bayer);\n\n  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);\n  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;\n  float coverage = bw * jitterScale;\n  float M;\n  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);\n  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);\n  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);\n  else                                   M = coverage;\n\n  if (uEdgeFade > 0.0) {\n    vec2 norm = gl_FragCoord.xy / uResolution;\n    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));\n    float fade = smoothstep(0.0, uEdgeFade, edge);\n    M *= fade;\n  }\n\n  vec3 color = uColor;\n  fragColor = vec4(color, M);\n}\n",uniforms:k,transparent:!0,glslVersion:o.Wdf,depthTest:!1,depthWrite:!1}),F=new o.bdM(2,2),_=new o.eaF(F,z);I.add(_);var B=new o.zD7,D=function(){var n,t=e.clientWidth||1,a=e.clientHeight||1;q.setSize(t,a,!1),k.uResolution.value.set(q.domElement.width,q.domElement.height),null!==(n=p.value)&&void 0!==n&&n.composer&&p.value.composer.setSize(q.domElement.width,q.domElement.height),k.uPixelSize.value=s.pixelSize*q.getPixelRatio()};D();var O=new ResizeObserver(D);O.observe(e);var L,U,V,N=1e3*function(){var e;if("undefined"!=typeof window&&null!==(e=window.crypto)&&void 0!==e&&e.getRandomValues){var n=new Uint32Array(1);return window.crypto.getRandomValues(n),n[0]/4294967295}return Math.random()}();if(s.liquid){(U=n()).radiusScale=s.liquidRadius,L=new l.s0(q);var H=new l.AH(I,M);a=U.texture,i={strength:s.liquidStrength,freq:s.liquidWobbleSpeed},V=new l.Mj("LiquidEffect","\n    uniform sampler2D uTexture;\n    uniform float uStrength;\n    uniform float uTime;\n    uniform float uFreq;\n\n    void mainUv(inout vec2 uv) {\n      vec4 tex = texture2D(uTexture, uv);\n      float vx = tex.r * 2.0 - 1.0;\n      float vy = tex.g * 2.0 - 1.0;\n      float intensity = tex.b;\n\n      float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);\n\n      float amt = uStrength * intensity * wave;\n\n      uv += vec2(vx, vy) * amt;\n    }\n    ",{uniforms:new Map([["uTexture",new o.nc$(a)],["uStrength",new o.nc$(null!==(u=null==i?void 0:i.strength)&&void 0!==u?u:.025)],["uTime",new o.nc$(0)],["uFreq",new o.nc$(null!==(x=null==i?void 0:i.freq)&&void 0!==x?x:4.5)]])});var K=new l.Vu(M,V);K.renderToScreen=!0,L.addPass(H),L.addPass(K)}if(s.noiseAmount>0){L||(L=new l.s0(q)).addPass(new l.AH(I,M));var J=new l.Mj("NoiseEffect","uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} ",{uniforms:new Map([["uTime",new o.nc$(0)],["uAmount",new o.nc$(s.noiseAmount)]])}),X=new l.Vu(M,J);X.renderToScreen=!0,L&&L.passes.length>0&&L.passes.forEach(function(e){"renderToScreen"in e&&(e.renderToScreen=!1)}),L.addPass(X)}L&&L.setSize(q.domElement.width,q.domElement.height);var $=function(e){var n=q.domElement.getBoundingClientRect(),t=q.domElement.width/n.width,a=q.domElement.height/n.height;return{fx:(e.clientX-n.left)*t,fy:(n.height-(e.clientY-n.top))*a,w:q.domElement.width,h:q.domElement.height}};q.domElement.addEventListener("pointerdown",function(e){var n,t,a=$(e),i=a.fx,l=a.fy,o=null!==(n=null===(t=p.value)||void 0===t?void 0:t.clickIx)&&void 0!==n?n:0;k.uClickPos.value[o].set(i,l),k.uClickTimes.value[o]=k.uTime.value,p.value&&(p.value.clickIx=(o+1)%10)},{passive:!0}),q.domElement.addEventListener("pointermove",function(e){if(U){var n=$(e),t=n.fx,a=n.fy,i=n.w,l=n.h;U.addTouch({x:t/i,y:a/l})}},{passive:!0});var j=0,W=function(){!s.autoPauseOffscreen||c.value.visible?(k.uTime.value=N+B.getElapsedTime()*v.value,V&&(V.uniforms.get("uTime").value=k.uTime.value),L?(U&&U.update(),L.passes.forEac

1h(function(e){if(e instanceof l.Vu){var n=e.effects;null==n||n.forEach(function(e){var n=e.uniforms.get("uTime");n&&(n.value=k.uTime.value)})}}),L.render()):q.render(I,M),j=requestAnimationFrame(W)):j=requestAnimationFrame(W)};j=requestAnimationFrame(W),p.value={renderer:q,scene:I,camera:M,material:z,clock:B,clickIx:0,uniforms:k,resizeObserver:O,raf:j,quad:_,timeOffset:N,composer:L,touch:U,liquidEffect:V}}else{var Y,G=p.value;if(G.uniforms.uShapeType.value=null!==(Y=t[s.variant])&&void 0!==Y?Y:0,G.uniforms.uPixelSize.value=s.pixelSize*G.renderer.getPixelRatio(),G.uniforms.uColor.value.set(s.color),G.uniforms.uScale.value=s.patternScale,G.uniforms.uDensity.value=s.patternDensity,G.uniforms.uPixelJitter.value=s.pixelSizeJitter,G.uniforms.uEnableRipples.value=s.enableRipples?1:0,G.uniforms.uRippleIntensity.value=s.rippleIntensityScale,G.uniforms.uRippleThickness.value=s.rippleThickness,G.uniforms.uRippleSpeed.value=s.rippleSpeed,G.uniforms.uEdgeFade.value=s.edgeFade,s.transparent?G.renderer.setClearAlpha(0):G.renderer.setClearColor(0,1),G.liquidEffect){var Q,Z,ee=null===(Q=G.liquidEffect)||void 0===Q?void 0:Q.uniforms.get("uStrength");ee&&(ee.value=s.liquidStrength);var ne=null===(Z=G.liquidEffect)||void 0===Z?void 0:Z.uniforms.get("uFreq");ne&&(ne.value=s.liquidWobbleSpeed)}G.touch&&(G.touch.radiusScale=s.liquidRadius)}m.value=g,h=function(){var n,t,a;if((!p.value||!y)&&p.value){var i=p.value;null===(n=i.resizeObserver)||void 0===n||n.disconnect(),cancelAnimationFrame(i.raf),null===(t=i.quad)||void 0===t||t.geometry.dispose(),i.material.dispose(),null===(a=i.composer)||void 0===a||a.dispose(),i.renderer.dispose(),i.renderer.domElement.parentElement===e&&e.removeChild(i.renderer.domElement),p.value=null}}}};return(0,a.sV)(function(){x()}),(0,a.xo)(function(){var e;null===(e=h)||void 0===e||e()}),(0,a.wB)(s,function(){var e;null===(e=h)||void 0===e||e(),x()},{deep:!0}),function(n,t){return(0,a.uX)(),(0,a.CE)("div",{ref_key:"containerRef",ref:d,class:(0,i.C4)(["pixel-blast-root",e.className]),style:(0,i.Tr)(e.style),"aria-label":"PixelBlast interactive background"},null,6)}}});t(90091);const c=(0,t(66262).A)(d,[["__scopeId","data-v-167e9766"]])},90091(e,n,t){var a=t(25518);a.__esModule&&(a=a.default),"string"==typeof a&&(a=[[e.id,a,""]]),a.locals&&(e.exports=a.locals);(0,t(70534).A)("2b880d2e",a,!1,{})}}]);