https://mindfront.engineering/ts/msp-architecture-canvas.0195d0121…0c028b30a9dd478fce25d47e283977f0d0876544.js

1"use strict";(()=>{function w(m,t,e={}){let{threshold:s=.1,maxDpr:n=2,host:o=m.parentElement??m,measure:i,reducedMotion:h="static",maxDelta:a=.1,manageTransform:l=!0}=e,d=m.getContext("2d");if(!d)return{resize(){},destroy(){},get running(){return!1}};let g=d,u=window.matchMedia("(prefers-reduced-motion: reduce)"),f=0,E=0,p=!1,M=0,R=0,_=!1,C={canvas:m,ctx:g,w:0,h:0,dpr:1};function N(){let b=Math.min(window.devicePixelRatio||1,n),c=i?i(o):o.getBoundingClientRect(),S=Math.max(1,Math.round("w"in c?c.w:c.width)),I=Math.max(1,Math.round("h"in c?c.h:c.height));(m.width!==S*b||m.height!==I*b)&&(m.width=S*b,m.height=I*b),m.style.width=`${S}px`,m.style.height=`${I}px`,l&&g.setTransform(b,0,0,b,0,0),C.w=S,C.h=I,C.dpr=b,t.resize?.(C)}function v(b){if(_)return;let c=(b-M)/1e3;M=b,c>=0||(c=0),c>a&&(c=a),R+=c,t.frame?.(C,c,R),f=requestAnimationFrame(v)}function A(){if(!(p||_)){if(p=!0,t.enter?.(C),u.matches&&h==="static"){t.frame?.(C,0,R);return}M=performance.now(),f=requestAnimationFrame(v)}}function P(){p&&(p=!1,f&&cancelAnimationFrame(f),f=0,t.exit?.())}N();let y=new IntersectionObserver(b=>{for(let c of b)c.isIntersecting?A():P()},{threshold:s});y.observe(o);let D=new ResizeObserver(()=>{E||(E=requestAnimationFrame(()=>{E=0,_||N()}))});D.observe(o);let O=()=>{p&&(P(),A())};return u.addEventListener("change",O),{resize:N,destroy(){_=!0,P(),E&&cancelAnimationFrame(E),y.disconnect(),D.disconnect(),u.removeEventListener("change",O)},get running(){return p}}}var r={MAX_PARTICLES_PER_CONNECTION:12,SPAWN_RATE:.04,PARTICLE_SPEED_MIN:3e-4,PARTICLE_SPEED_MAX:8e-4,PARTICLE_SIZE_MIN:1.5,PARTICLE_SIZE_MAX:3.5,TRAIL_LENGTH:10,NODE_RADIUS:40,NODE_PULSE_SPEED:.001,NODE_GLOW_RADIUS:80,GRID_SPACING:50,GRID_BRIGHTNESS:.04,GRID_DOT_SIZE:1,AMBIENT_DOT_COUNT:60,AMBIENT_DOT_SIZE_MIN:.5,AMBIENT_DOT_SIZE_MAX:2,AMBIENT_BRIGHTNESS_MIN:.02,AMBIENT_BRIGHTNESS_MAX:.08,COLOR_ACCENT:{r:96,g:165,b:250},COLOR_GRID:{r:148,g:163,b:184},COLOR_NODE:{r:226,g:232,b:240},COLOR_CENTER:{r:96,g:165,b:250},CURVE_OFFSET_MIN:-30,CURVE_OFFSET_MAX:30,PULSE_INTERVAL:4e3,PULSE_SPEED:.15,PULSE_MAX_RADIUS:400};function $(m,t,e,s,n,o,i){let h=1-i;return{x:h*h*m+2*h*i*e+i*i*n,y:h*h*t+2*h*i*s+i*i*o}}var T=class{canvas;ctx;glowCanvas;glowCtx;width=0;height=0;nodes=[];connections=[];gridLines=[];ambientDots=[];elapsed=0;pulseWaves=[];lastPulseTime=0;constructor(){document.querySelector(".msp-architecture-wrapper")&&(this.canvas=document.getElementById("msp-architecture-canvas"),this.canvas&&(this.ctx=this.canvas.getContext("2d"),this.glowCanvas=document.createElement("canvas"),this.glowCtx=this.glowCanvas.getContext("2d"),w(this.canvas,{resize:e=>{this.width=e.w,this.height=e.h,this.glowCanvas.width=e.w*e.dpr,this.glowCanvas.height=e.h*e.dpr,this.glowCtx.setTransform(e.dpr,0,0,e.dpr,0,0),this.initNodes(),this.initConnections(),this.buildGrid(),this.initAmbientDots()},frame:(e,s)=>{this.update(s*1e3),this.draw()}},{threshold:.05})))}initNodes(){let t=this.canvas.parentElement,e=t.getBoundingClientRect(),s=t.querySelectorAll(".msp-architecture__node-icon"),n=[{label:"YOUR SYSTEMS",isCenter:!1,brightness:.6,pulseSpeed:r.NODE_PULSE_SPEED*.9},{label:"MSP BRIDGE",isCenter:!0,brightness:.8,pulseSpeed:r.NODE_PULSE_SPEED},{label:"MINDFRONT",isCenter:!1,brightness:.6,pulseSpeed:r.NODE_PULSE_SPEED*1.1}];this.nodes=n.map((o,i)=>{let h=this.width*(.2+i*.3),a=this.height*.35,l=s[i];if(l){let d=l.getBoundingClientRect();h=d.left+d.width/2-e.left,a=d.top+d.height/2-e.top}return{x:h,y:a,radius:o.isCenter?r.NODE_RADIUS*1.2:r.NODE_RADIUS,label:o.label,pulsePhase:i*(Math.PI/3),pulseSpeed:o.pulseSpeed,brightness:o.brightness,isCenter:o.isCenter}})}initConnections(){this.connections=[{from:0,to:1,particles:[],controlOffsetY:-25},{from:1,to:0,particles:[],controlOffsetY:25},{from:1,to:2,particles:[],controlOffsetY:-25},{from:2,to:1,particles:[],controlOffsetY:25}]}buildGrid(){this.gridLines=[];let t=r.GRID_SPACING;for(let e=t;e<this.width;e+=t)this.gridLines.push({x1:e,y1:0,x2:e,y2:this.height,brightness:r.GRID_BRIGHTNESS});for(let e=t;e<this.height;e+=t)this.gridLines.push({x1:0,y1:e,x2:this.width,y2:e,brightness:r.GRID_BRIGHTNESS})}initAmbientDots(){this.ambientDots=[];for(let t=0;t<r.AMBIENT_DOT_COUNT;t++)this.ambientDots.push({x:Math.random()*this.width,y:Math.random()*this.height,size:r.AMBIENT_DOT_SIZE_MIN+Math.random()*(r.AMBIENT_DOT_SIZE_MAX-r.AMBIENT_DOT_SIZE_MIN),brightness:0,maxBrightness:r.AMBIENT_BRIGHTNESS_MIN+Math.random()*(r.AMBIENT_BRIGHTNESS_MAX-r.AMBIENT_BRIGHTNESS_MIN),phase:Math.random()*Math.PI*2,speed:5e-4+Math.random()*.001})}

1spawnParticle(t){if(t.particles.length>=r.MAX_PARTICLES_PER_CONNECTION)return;let e=r.PARTICLE_SPEED_MIN+Math.random()*(r.PARTICLE_SPEED_MAX-r.PARTICLE_SPEED_MIN),s=.3+Math.random()*.5;t.particles.push({t:0,speed:e,size:r.PARTICLE_SIZE_MIN+Math.random()*(r.PARTICLE_SIZE_MAX-r.PARTICLE_SIZE_MIN),brightness:0,maxBrightness:s,trail:[],direction:1})}update(t){if(!(!t||t>100)){this.elapsed+=t;for(let e of this.nodes)e.pulsePhase+=e.pulseSpeed*t;for(let e of this.ambientDots)e.phase+=e.speed*t,e.brightness=e.maxBrightness*(.5+.5*Math.sin(e.phase));for(let e of this.connections){Math.random()<r.SPAWN_RATE&&this.spawnParticle(e);let s=this.nodes[e.from],n=this.nodes[e.to],o=(s.x+n.x)/2,i=(s.y+n.y)/2+e.controlOffsetY;for(let h=e.particles.length-1;h>=0;h--){let a=e.particles[h];a.t+=a.speed*t*a.direction;let l=Math.min(a.t/.15,1),d=Math.min((1-a.t)/.15,1);a.brightness=a.maxBrightness*l*d;let g=$(s.x,s.y,o,i,n.x,n.y,Math.max(0,Math.min(1,a.t)));a.trail.push({x:g.x,y:g.y,alpha:a.brightness}),a.trail.length>r.TRAIL_LENGTH&&a.trail.shift();for(let u of a.trail)u.alpha*=.88;(a.t>1||a.t<0)&&e.particles.splice(h,1)}}if(this.elapsed-this.lastPulseTime>r.PULSE_INTERVAL){this.lastPulseTime=this.elapsed;let e=this.nodes[1];this.pulseWaves.push({radius:0,brightness:.15,x:e.x,y:e.y})}for(let e=this.pulseWaves.length-1;e>=0;e--){let s=this.pulseWaves[e];s.radius+=r.PULSE_SPEED*t,s.brightness*=.997,(s.radius>r.PULSE_MAX_RADIUS||s.brightness<.001)&&this.pulseWaves.splice(e,1)}}}draw(){let t=this.ctx;t.clearRect(0,0,this.width,this.height),this.drawGrid(t),this.drawAmbientDots(t),this.drawPulseWaves(t),this.drawConnectionPaths(t),this.drawParticles(t),this.drawNodeGlows(),this.drawNodes(t)}drawGrid(t){let e=r.COLOR_GRID;for(let n of this.gridLines){let o=n.brightness;for(let i of this.nodes){let h=(n.x1+n.x2)/2,a=(n.y1+n.y2)/2,l=Math.hypot(h-i.x,a-i.y);l<150&&(o+=(1-l/150)*.04)}t.strokeStyle=`rgba(${e.r}, ${e.g}, ${e.b}, ${o})`,t.lineWidth=.5,t.beginPath(),t.moveTo(n.x1,n.y1),t.lineTo(n.x2,n.y2),t.stroke()}let s=r.GRID_SPACING;for(let n=s;n<this.width;n+=s)for(let o=s;o<this.height;o+=s){let i=.06;for(let h of this.nodes){let a=Math.hypot(n-h.x,o-h.y);a<120&&(i+=(1-a/120)*.1)}t.fillStyle=`rgba(${e.r}, ${e.g}, ${e.b}, ${i})`,t.beginPath(),t.arc(n,o,r.GRID_DOT_SIZE,0,Math.PI*2),t.fill()}}drawAmbientDots(t){let e=r.COLOR_GRID;for(let s of this.ambientDots)s.brightness<.005||(t.fillStyle=`rgba(${e.r}, ${e.g}, ${e.b}, ${s.brightness})`,t.beginPath(),t.arc(s.x,s.y,s.size,0,Math.PI*2),t.fill())}drawPulseWaves(t){let e=r.COLOR_CENTER;for(let s of this.pulseWaves)t.strokeStyle=`rgba(${e.r}, ${e.g}, ${e.b}, ${s.brightness})`,t.lineWidth=1.5,t.beginPath(),t.arc(s.x,s.y,s.radius,0,Math.PI*2),t.stroke()}drawConnectionPaths(t){let e=r.COLOR_ACCENT,s=new Set;for(let n of this.connections){let o=[Math.min(n.from,n.to),Math.max(n.from,n.to),Math.sign(n.controlOffsetY)].join(",");if(s.has(o))continue;s.add(o);let i=this.nodes[n.from],h=this.nodes[n.to],a=(i.x+h.x)/2,l=(i.y+h.y)/2+n.controlOffsetY;t.strokeStyle=`rgba(${e.r}, ${e.g}, ${e.b}, 0.06)`,t.lineWidth=1,t.beginPath(),t.moveTo(i.x,i.y),t.quadraticCurveTo(a,l,h.x,h.y),t.stroke()}}drawParticles(t){let e=r.COLOR_ACCENT;for(let s of this.connections)for(let n of s.particles){for(let g=0;g<n.trail.length;g++){let u=n.trail[g],f=(g+1)/n.trail.length,E=u.alpha*f*.4,p=n.size*f*.5;E<.005||p<.2||(t.fillStyle=`rgba(${e.r}, ${e.g}, ${e.b}, ${E})`,t.beginPath(),t.arc(u.x,u.y,p,0,Math.PI*2),t.fill())}if(n.brightness<.005)continue;let o=this.nodes[s.from],i=this.nodes[s.to],h=(o.x+i.x)/2,a=(o.y+i.y)/2+s.controlOffsetY,l=$(o.x,o.y,h,a,i.x,i.y,Math.max(0,Math.min(1,n.t)));t.fillStyle=`rgba(${e.r}, ${e.g}, ${e.b}, ${n.brightness})`,t.beginPath(),t.arc(l.x,l.y,n.size,0,Math.PI*2),t.fill();let d=t.createRadialGradient(l.x,l.y,0,l.x,l.y,n.size*4);d.addColorStop(0,`rgba(${e.r}, ${e.g}, ${e.b}, ${n.brightness*.3})`),d.addColorStop(1,`rgba(${e.r}, ${e.g}, ${e.b}, 0)`),t.fillStyle=d,t.beginPath(),t.arc(l.x,l.y,n.size*4,0,Math.PI*2),t.fill()}}drawNodeGlows(){let t=this.glowCtx;t.clearRect(0,0,this.width,this.height);for(let e of this.nodes){let s=.5+.5*Math.sin(e.pulsePhase),n=e.isCenter?r.COLOR_CENTER:r.COLOR_NODE,o=r.NODE_GLOW_RADIUS*(1+s*.15),i=t.createRadialGradient(e.x,e.y,0,e.x,e.y,o);i.addColorStop(0,`rgba(${n.r}, ${n.g}, ${n.b}, ${.08*e.brightness})`),i.addColorStop(.5,`rgba(${n.r}, ${n.g}, ${n.b}, ${.03*e.brightness})`),i.addColorStop(1,`rgba(${n.r}, ${n.g}, ${n.b}, 0)`),t.fillStyle=i,t.beginPath(),t.arc(e.x,e.y,o,0,Math.PI*2),t.fill()}this.ctx.drawImage(this.glowCanvas,0,0,this.width,this.height)}drawNodes(t){for(let e of this.nodes){let s=.5+.5*Math.sin(e.pulsePhase),n=e.isCenter?r.COLOR_CENTER:r.COLOR_NODE,o=e.radius*(1+s*.03);t.strokeStyle=`rgba(${n.r}, ${n.g}, ${n.b}, ${.15*e.brightness})`,t.lineWidth=1.5,t.beginPath(),t.arc(e.x,e.y,o,0,Math.PI*2),t.stroke(),t.strokeStyle=`rgba(${n.r}, ${n.g}, ${n.b}, ${.25*e.brightness})`,t.lineWidth=1,t.beginPath(),t.arc(e.x,e.y,o*.6,0,Math.PI*2),t.stroke(),t.fillStyle=`rgba(${n.r}, ${n.g}, ${n.b}, ${.5*e.brightness*(.8+s*.2)})`,t.beginPath(),t.arc(e.x,e.y,3,0,Math.PI*2),t.fill();let i=8,h=this.elapsed*2e-4*(e.isCenter?1:-1);for(let a=0;a<i;a++){let l=a/i*Math.PI*2+h,d=o*.75,g=o*.85;t.strokeStyle=`rgba(${n.r}, ${n.g}, ${n.b}, ${.1*e.brightness})`,t.lineWidth=1,t.beginPath(),t.moveTo(e.x+Math.cos(l)*d,e.y+Math.sin(l)*d),t.lineTo(e.x+Math.cos(l)*g,e.y+Math.sin(l)*g),t.stroke()}}}};document.addEventListener("DOMContentLoaded",()=>{new T});})();