{"version":3,"file":"WavyGridBackground.udcdBoKp.mjs","names":["useRef","useState","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/YxDoOL5nIBZoIGWkDXGl/q826Lj5OQOlnd6FN70xW/WavyGridBackground.js"],"sourcesContent":["// Responsive background with a wavy distorted grid pattern\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useCallback,useRef,useEffect,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function WavyGridBackground(props){const{colorScheme=\"custom\",backgroundColor=\"#000000\",gridColor=\"#E5E5E5\",gridSize=30,gridOpacity=.8,waveAmplitude=20,waveFrequency=.02,animationSpeed=2,enableAnimation=false,gridThickness=1,enableSideMask=false,maskColor=\"#000000\",maskWidth=100,enableTopBottomMask=false,topBottomMaskColor=\"#000000\",topBottomMaskHeight=100,enableParallax=false,parallaxSpeed=.5,parallaxDirection=\"vertical\"}=props;// Define color schemes\nconst colorSchemes={light:{backgroundColor:\"#FFFFFF\",gridColor:\"#E5E5E5\"},dark:{backgroundColor:\"#000000\",gridColor:\"#666666\"},vibrant:{backgroundColor:\"#1a1a2e\",gridColor:\"#16213e\"},custom:{backgroundColor,gridColor}};// Get colors based on selected scheme\nconst currentScheme=colorSchemes[colorScheme];const effectiveBackgroundColor=currentScheme.backgroundColor;const effectiveGridColor=currentScheme.gridColor;const canvasRef=useRef(null);const containerRef=useRef(null);const resizeObserverRef=useRef(null);const[scrollOffset,setScrollOffset]=useState({x:0,y:0});const drawGrid=useCallback(canvas=>{const ctx=canvas.getContext(\"2d\");if(!ctx)return;const parent=canvas.parentElement;if(!parent)return;// Get dimensions from parent container\nconst width=parent.clientWidth;const height=parent.clientHeight;if(width<=0||height<=0)return;const dpr=window.devicePixelRatio||1;// Set actual size in memory (scaled to account for extra pixel density)\ncanvas.width=width*dpr;canvas.height=height*dpr;// Scale the drawing context so everything draws at the correct size\nctx.scale(dpr,dpr);// Set display size (css pixels)\ncanvas.style.width=width+\"px\";canvas.style.height=height+\"px\";ctx.clearRect(0,0,width,height);ctx.strokeStyle=effectiveGridColor;ctx.lineWidth=gridThickness;ctx.globalAlpha=gridOpacity;// Draw wavy grid with responsive sizing\nconst effectiveGridSize=Math.max(gridSize*Math.min(width/800,height/600),10);for(let x=0;x<=width;x+=effectiveGridSize){ctx.beginPath();for(let y=0;y<=height;y+=2){const waveX=x+Math.sin(y*waveFrequency)*waveAmplitude;if(y===0){ctx.moveTo(waveX,y);}else{ctx.lineTo(waveX,y);}}ctx.stroke();}for(let y=0;y<=height;y+=effectiveGridSize){ctx.beginPath();for(let x=0;x<=width;x+=2){const waveY=y+Math.sin(x*waveFrequency)*waveAmplitude;if(x===0){ctx.moveTo(x,waveY);}else{ctx.lineTo(x,waveY);}}ctx.stroke();}},[gridSize,effectiveGridColor,gridThickness,gridOpacity,waveAmplitude,waveFrequency]);// Redraw when any visual property changes\nuseEffect(()=>{if(canvasRef.current){drawGrid(canvasRef.current);}},[effectiveGridColor,gridSize,gridOpacity,waveAmplitude,waveFrequency,gridThickness,drawGrid,colorScheme]);const setupCanvas=useCallback(canvas=>{if(!canvas)return;// Clean up previous observer\nif(resizeObserverRef.current){resizeObserverRef.current.disconnect();}// Delay initial draw to ensure parent has proper dimensions\nsetTimeout(()=>{drawGrid(canvas);},0);// Handle resize\nresizeObserverRef.current=new ResizeObserver(()=>{drawGrid(canvas);});const parent=canvas.parentElement;if(parent){resizeObserverRef.current.observe(parent);}},[drawGrid]);useEffect(()=>{return()=>{if(resizeObserverRef.current){resizeObserverRef.current.disconnect();}};},[]);// Parallax scroll effect\nuseEffect(()=>{if(!enableParallax||typeof window===\"undefined\")return;const handleScroll=()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const scrollY=window.pageYOffset||document.documentElement.scrollTop;const scrollX=window.pageXOffset||document.documentElement.scrollLeft;// Calculate parallax offset based on element position and scroll\nconst parallaxY=(scrollY-rect.top)*parallaxSpeed;const parallaxX=(scrollX-rect.left)*parallaxSpeed;setScrollOffset({x:parallaxX,y:parallaxY});};handleScroll()// Initial call\n;window.addEventListener(\"scroll\",handleScroll,{passive:true});return()=>{window.removeEventListener(\"scroll\",handleScroll);};},[enableParallax,parallaxSpeed]);// Calculate transform based on parallax direction\nconst getParallaxTransform=()=>{if(!enableParallax)return\"translate3d(0, 0, 0)\";let translateX=0;let translateY=0;if(parallaxDirection===\"horizontal\"||parallaxDirection===\"both\"){translateX=scrollOffset.x;}if(parallaxDirection===\"vertical\"||parallaxDirection===\"both\"){translateY=scrollOffset.y;}return`translate3d(${translateX}px, ${translateY}px, 0)`;};if(typeof window===\"undefined\"){return /*#__PURE__*/_jsx(\"div\",{style:{...props.style,position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor:effectiveBackgroundColor,overflow:\"hidden\",minWidth:0,minHeight:0}});}return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor:effectiveBackgroundColor,overflow:\"hidden\",minWidth:0,minHeight:0},children:[/*#__PURE__*/_jsx(\"canvas\",{ref:canvas=>{canvasRef.current=canvas;setupCanvas(canvas);},style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",pointerEvents:\"none\",transform:getParallaxTransform(),willChange:enableParallax?\"transform\":\"auto\"}}),enableSideMask&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:`${maskWidth}px`,height:\"100%\",background:`linear-gradient(to right, ${maskColor}, transparent)`,pointerEvents:\"none\",zIndex:1}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,right:0,width:`${maskWidth}px`,height:\"100%\",background:`linear-gradient(to left, ${maskColor}, transparent)`,pointerEvents:\"none\",zIndex:1}})]}),enableTopBottomMask&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:`${topBottomMaskHeight}px`,background:`linear-gradient(to bottom, ${topBottomMaskColor}, transparent)`,pointerEvents:\"none\",zIndex:1}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:0,left:0,width:\"100%\",height:`${topBottomMaskHeight}px`,background:`linear-gradient(to top, ${topBottomMaskColor}, transparent)`,pointerEvents:\"none\",zIndex:1}})]})]});}addPropertyControls(WavyGridBackground,{colorScheme:{type:ControlType.Enum,title:\"Color Scheme\",options:[\"custom\",\"light\",\"dark\",\"vibrant\"],optionTitles:[\"Custom\",\"Light\",\"Dark\",\"Vibrant\"],defaultValue:\"custom\",displaySegmentedControl:true},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#000000\",description:\"Created by [Caio Calderari](https://www.calderari.com.br)\",hidden:({colorScheme})=>colorScheme!==\"custom\"},gridColor:{type:ControlType.Color,title:\"Grid Color\",defaultValue:\"#E5E5E5\",hidden:({colorScheme})=>colorScheme!==\"custom\"},gridSize:{type:ControlType.Number,title:\"Grid Size\",defaultValue:30,min:10,max:100,step:5,unit:\"px\"},gridThickness:{type:ControlType.Number,title:\"Grid Thickness\",defaultValue:1,min:.5,max:5,step:.5,unit:\"px\"},gridOpacity:{type:ControlType.Number,title:\"Grid Opacity\",defaultValue:.8,min:0,max:1,step:.1},waveAmplitude:{type:ControlType.Number,title:\"Wave Amplitude\",defaultValue:20,min:0,max:50,step:2,unit:\"px\"},waveFrequency:{type:ControlType.Number,title:\"Wave Frequency\",defaultValue:.02,min:.005,max:.1,step:.005},enableSideMask:{type:ControlType.Boolean,title:\"Side Mask\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},maskColor:{type:ControlType.Color,title:\"Mask Color\",defaultValue:\"#000000\",hidden:({enableSideMask})=>!enableSideMask},maskWidth:{type:ControlType.Number,title:\"Mask Width\",defaultValue:100,min:20,max:500,step:10,unit:\"px\",hidden:({enableSideMask})=>!enableSideMask},enableTopBottomMask:{type:ControlType.Boolean,title:\"Top/Bottom Mask\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},topBottomMaskColor:{type:ControlType.Color,title:\"Top/Bottom Mask Color\",defaultValue:\"#000000\",hidden:({enableTopBottomMask})=>!enableTopBottomMask},topBottomMaskHeight:{type:ControlType.Number,title:\"Top/Bottom Mask Height\",defaultValue:100,min:20,max:500,step:10,unit:\"px\",hidden:({enableTopBottomMask})=>!enableTopBottomMask},enableParallax:{type:ControlType.Boolean,title:\"Parallax Effect\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},parallaxSpeed:{type:ControlType.Number,title:\"Parallax Speed\",defaultValue:.5,min:-2,max:2,step:.1,hidden:({enableParallax})=>!enableParallax},parallaxDirection:{type:ControlType.Enum,title:\"Parallax Direction\",options:[\"vertical\",\"horizontal\",\"both\"],optionTitles:[\"Vertical\",\"Horizontal\",\"Both\"],defaultValue:\"vertical\",displaySegmentedControl:true,hidden:({enableParallax})=>!enableParallax}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"WavyGridBackground\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WavyGridBackground.map"],"mappings":"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"}