react-node-background/dist/index.js

Animated node network background component for React

"use strict";var t=require("react");function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t);module.exports=({nodeCount:e=156,connectionDistance:o=250,nodeSpeed:a=.7,backgroundColor:r="rgba(251, 243, 216, 0.9)",backgroundColorDark:i="rgba(42, 56, 111, 0.9)"})=>{const l=t.useRef(null),[s,c]=t.useState(document.documentElement.classList.contains("dark"));return t.useEffect((()=>{const t=new MutationObserver((t=>{t.forEach((t=>{"class"===t.attributeName&&c(document.documentElement.classList.contains("dark"))}))}));t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]});const n=l.current,d=n.getContext("2d");let h;const u=()=>{n.width=window.innerWidth,n.height=window.innerHeight};u(),window.addEventListener("resize",u);const m=[];for(let t=0;t<e;t++)m.push({x:Math.random()*n.width+50,y:Math.random()*n.height+50,radius:5*Math.random()+2,vx:(Math.random()-.5)*a,vy:(Math.random()-.5)*a,color:`hsla(${360*Math.random()}, 70%, 80%, ${.5*Math.random()+.25})`});const f=()=>{d.clearRect(0,0,n.width,n.height),d.fillStyle=s?i:r,d.fillRect(0,0,n.width,n.height),d.lineWidth=.5;for(let t=0;t<m.length;t++)for(let e=t+1;e<m.length;e++){const n=m[t].x-m[e].x,a=m[t].y-m[e].y,r=Math.sqrt(n*n+a*a);if(r<o){const n=1-r/o;d.strokeStyle=`hsla(${360*Math.random()}, 90%, 80%, ${.5*n})`,d.beginPath(),d.moveTo(m[t].x,m[t].y),d.lineTo(m[e].x,m[e].y),d.stroke()}}m.forEach((t=>{t.x+=t.vx,t.y+=t.vy,(t.x<-50||t.x>n.width+50)&&(t.vx*=-1),(t.y<-50||t.y>n.height+50)&&(t.vy*=-1),d.beginPath(),d.arc(t.x,t.y,t.radius,0,2*Math.PI),d.fillStyle=t.color,d.fill()})),h=window.requestAnimationFrame(f)};return f(),()=>{window.cancelAnimationFrame(h),window.removeEventListener("resize",u),t.disconnect()}}),[s,e,o]),n.default.createElement("canvas",{ref:l,className:"w-full h-full"})};
//# sourceMappingURL=index.js.map