{"version":3,"file":"MatrixPattern.CwaSP7lL.mjs","names":["React.useRef"],"sources":["https:/framerusercontent.com/modules/dIuZJB6gDuYx3v2rtQly/7RwkAzhpRsrmKJBNjRvT/MatrixPattern.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function MatrixPattern(props){const{patternColor,cellSize,gap,variance,opacity}=props;const containerRef=React.useRef(null);const canvasRef=React.useRef(null);const draw=(width,height)=>{const canvas=canvasRef.current;const ctx=canvas.getContext(\"2d\");// Handle High DPI (Retina)\nconst dpr=window.devicePixelRatio||1;canvas.width=width*dpr;canvas.height=height*dpr;ctx.scale(dpr,dpr);ctx.clearRect(0,0,width,height);// Helper to get RGB\nconst hexToRgb=hex=>{const result=/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);return result?{r:parseInt(result[1],16),g:parseInt(result[2],16),b:parseInt(result[3],16)}:{r:255,g:255,b:255};};const rgb=hexToRgb(patternColor);const cols=Math.ceil(width/(cellSize+gap));const rows=Math.ceil(height/(cellSize+gap));for(let i=0;i<cols;i++){for(let j=0;j<rows;j++){const x=i*(cellSize+gap);const y=j*(cellSize+gap);// Variance logic\nconst randomFade=Math.random()*variance;const cellAlpha=Math.max(0,opacity-randomFade);ctx.fillStyle=`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${cellAlpha})`;ctx.fillRect(x,y,cellSize,cellSize);}}};React.useEffect(()=>{const container=containerRef.current;// This observer watches for ANY size change (Fill, fixed, resizing window)\nconst observer=new ResizeObserver(entries=>{for(const entry of entries){const{width,height}=entry.contentRect;// Set the canvas style width explicitly to match container\nif(canvasRef.current){canvasRef.current.style.width=width+\"px\";canvasRef.current.style.height=height+\"px\";draw(width,height);}}});if(container){observer.observe(container);}return()=>{if(container)observer.unobserve(container);};},[patternColor,cellSize,gap,variance,opacity]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{display:\"block\"}})});}MatrixPattern.defaultProps={height:200,width:200,patternColor:\"#FFFFFF\",cellSize:12,gap:1,variance:.15,opacity:.2};addPropertyControls(MatrixPattern,{patternColor:{type:ControlType.Color,title:\"Color\",defaultValue:\"#FFFFFF\"},cellSize:{type:ControlType.Number,title:\"Size\",min:2,max:100,defaultValue:12},gap:{type:ControlType.Number,title:\"Gap\",min:0,max:50,defaultValue:1},opacity:{type:ControlType.Number,title:\"Opacity\",min:0,max:1,step:.01,defaultValue:.1},variance:{type:ControlType.Number,title:\"Noise\",min:0,max:.5,step:.01,defaultValue:.05}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MatrixPattern\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MatrixPattern.map"],"mappings":"+LAA2H,SAAwB,EAAc,EAAM,CAAC,GAAK,CAAC,eAAa,WAAS,MAAI,WAAS,WAAS,EAAY,EAAaA,EAAa,IAAI,EAAQ,EAAUA,EAAa,IAAI,EAAQ,GAAM,EAAM,IAAS,CAAC,IAAM,EAAO,EAAU,QAAc,EAAI,EAAO,WAAW,IAAI,EAC9X,EAAI,EAAO,kBAAkB,EAAE,EAAO,MAAM,EAAM,EAAI,EAAO,OAAO,EAAO,EAAI,EAAI,MAAM,EAAI,CAAG,EAAE,EAAI,UAAU,EAAE,EAAE,EAAM,CAAM,EACmE,IAAM,GAAhM,GAAK,CAAC,IAAM,EAAO,4CAA4C,KAAK,CAAG,EAAE,OAAO,EAAO,CAAC,EAAE,SAAS,EAAO,GAAG,EAAE,EAAE,EAAE,SAAS,EAAO,GAAG,EAAE,EAAE,EAAE,SAAS,EAAO,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAE,EAAY,CAAS,CAAY,EAAQ,EAAK,KAAK,KAAK,GAAO,EAAS,EAAI,EAAQ,EAAK,KAAK,KAAK,GAAQ,EAAS,EAAI,EAAE,IAAI,IAAI,EAAE,EAAE,EAAE,EAAK,IAAK,IAAI,IAAI,EAAE,EAAE,EAAE,EAAK,IAAI,CAAC,IAAM,EAAE,GAAG,EAAS,GAAW,EAAE,GAAG,EAAS,GACxZ,EAAW,KAAK,OAAO,EAAE,EAAe,EAAU,KAAK,IAAI,EAAE,EAAQ,CAAU,EAAE,EAAI,UAAU,QAAQ,EAAI,EAAE,IAAI,EAAI,EAAE,IAAI,EAAI,EAAE,IAAI,EAAU,GAAG,EAAI,SAAS,EAAE,EAAE,EAAS,CAAQ,CAAE,CAAE,EAEuF,OAFrF,MAAoB,CAAC,IAAM,EAAU,EAAa,QAC5O,EAAS,IAAI,eAAe,GAAS,CAAC,IAAI,IAAM,KAAS,EAAQ,CAAC,GAAK,CAAC,QAAM,UAAQ,EAAM,YAC/F,EAAU,UAAS,EAAU,QAAQ,MAAM,MAAM,EAAM,KAAK,EAAU,QAAQ,MAAM,OAAO,EAAO,KAAK,EAAK,EAAM,CAAM,EAAG,CAAC,CAAC,EAA6C,OAAxC,GAAW,EAAS,QAAQ,CAAS,MAAa,CAAI,GAAU,EAAS,UAAU,CAAS,CAAE,CAAE,EAAE,CAAC,EAAa,EAAS,EAAI,EAAS,CAAO,CAAC,EAAsB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,QAAQ,EAAE,SAAsB,EAAK,SAAS,CAAC,IAAI,EAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,CAAC,CAAC,CAAC,CAAE,qBALha,IAA4B,IAAoD,EAKiV,EAAc,aAAa,CAAC,OAAO,IAAI,MAAM,IAAI,aAAa,UAAU,SAAS,GAAG,IAAI,EAAE,SAAS,IAAI,QAAQ,EAAE,EAAE,EAAoB,EAAc,CAAC,aAAa,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,aAAa,SAAS,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,IAAI,EAAE,IAAI,IAAI,aAAa,EAAE,EAAE,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,MAAM,IAAI,EAAE,IAAI,GAAG,aAAa,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,EAAE,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,IAAI,EAAE,IAAI,GAAG,KAAK,IAAI,aAAa,GAAG,CAAC,CAAC"}