{"version":3,"file":"PatternGrid.C5JACbaW.mjs","names":["useRef","useState","useMemo","__esmMin","init_ssg_sandbox_shims","pe","init_npm_react_18_3_1","_e","de","init_jsx_runtime","ce","window","addPropertyControls","init_framer_BL70qLPA","ControlType","PatternGrid","props","canvasRef","loadedImage","setLoadedImage","image","img","paths","canvas","ctx","render","dpr","rect","pathString","shape","customPath","path","isMasking","color","step","size","gap","drawShape","seed","seedA","seedB","opacity","x","y","layout","cx","cy","maxRadius","ring","r","circumference","count","angleStep","i","angle","isHex","isStaggered","vStep","cols","rows","row","col","imgRatio","canvasRatio","drawWidth","drawHeight","offsetX","offsetY","resizeObserver","backdropBlur","blendMode","init_PatternGrid"],"sources":["https:/framerusercontent.com/modules/CzWLJqhmfnxbKW5qgoeF/sWaK5O2grqC9Q4FY3yY1/PatternGrid.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function PatternGrid(props){const{shape,customPath,color,size,gap,backdropBlur,blendMode,image,layout=\"grid\"}=props;const canvasRef=useRef(null);const[loadedImage,setLoadedImage]=useState(null);useEffect(()=>{if(image?.src){const img=new Image;img.crossOrigin=\"Anonymous\";img.src=image.src;img.onload=()=>setLoadedImage(img);img.onerror=()=>setLoadedImage(null);}else{setLoadedImage(null);}},[image?.src]);// Predefined paths normalized to 0-1 coordinate space\nconst paths=useMemo(()=>({square:\"M 0 0 L 1 0 L 1 1 L 0 1 Z\",circle:\"M 0.5 0 A 0.5 0.5 0 1 1 0.5 1 A 0.5 0.5 0 1 1 0.5 0 Z\",triangle:\"M 0.5 0 L 1 1 L 0 1 Z\",hexagon:\"M 0.5 0 L 0.933 0.25 L 0.933 0.75 L 0.5 1 L 0.067 0.75 L 0.067 0.25 Z\",star:\"M 0.5 0 L 0.618 0.354 L 0.976 0.354 L 0.691 0.573 L 0.794 0.905 L 0.5 0.708 L 0.206 0.905 L 0.309 0.573 L 0.024 0.354 L 0.382 0.354 Z\",diamond:\"M 0.5 0 L 1 0.5 L 0.5 1 L 0 0.5 Z\",cross:\"M 0.35 0 L 0.65 0 L 0.65 0.35 L 1 0.35 L 1 0.65 L 0.65 0.65 L 0.65 1 L 0.35 1 L 0.35 0.65 L 0 0.65 L 0 0.35 L 0.35 0.35 Z\",heart:\"M 0.5 0.8 L 0.1 0.45 C -0.1 0.25 0.2 0 0.5 0.25 C 0.8 0 1.1 0.25 0.9 0.45 Z\"}),[]);useEffect(()=>{const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;let animationFrameId;const render=()=>{const dpr=window.devicePixelRatio||1;const rect=canvas.getBoundingClientRect();// Handle zero size\nif(rect.width===0||rect.height===0)return;// Update canvas resolution\ncanvas.width=rect.width*dpr;canvas.height=rect.height*dpr;// Scale context for DPI\nctx.scale(dpr,dpr);// Clear\nctx.clearRect(0,0,rect.width,rect.height);// Prepare shape\nconst pathString=shape===\"custom\"?customPath:paths[shape];let path;try{path=new Path2D(pathString);}catch(e){// Fallback to square if path is invalid\npath=new Path2D(paths.square);}const isMasking=loadedImage&&loadedImage.complete&&loadedImage.naturalWidth>0;if(isMasking){ctx.fillStyle=\"#000000\";}else{ctx.fillStyle=color;}const step=size+gap;const drawShape=(x,y,seedA,seedB)=>{// Pseudo-random opacity based on grid position for stability during resize\n// Using a simple hash function\nconst seed=seedA*1337+seedB*7331;const rand=Math.abs(Math.sin(seed)*1e4)%1;// Opacity between 0.01 (1%) and 0.90 (90%)\nconst opacity=.01+rand*.89;ctx.globalAlpha=opacity;// Draw shape\nctx.save();ctx.translate(x,y);ctx.scale(size,size);ctx.fill(path);ctx.restore();};if(layout===\"radial\"){const cx=rect.width/2;const cy=rect.height/2;const maxRadius=Math.sqrt(cx*cx+cy*cy)+size;// Center item\ndrawShape(cx-size/2,cy-size/2,0,0);let ring=1;for(let r=step;r<maxRadius;r+=step){const circumference=2*Math.PI*r;const count=Math.floor(circumference/step);if(count>0){const angleStep=2*Math.PI/count;for(let i=0;i<count;i++){const angle=i*angleStep;const x=cx+Math.cos(angle)*r-size/2;const y=cy+Math.sin(angle)*r-size/2;drawShape(x,y,ring,i);}}ring++;}}else{const isHex=layout===\"hexagonal\";const isStaggered=layout===\"staggered\";const vStep=isHex?step*.866:step;const cols=Math.ceil(rect.width/step)+(isHex||isStaggered?1:0);const rows=Math.ceil(rect.height/vStep);for(let row=0;row<rows;row++){for(let col=-1;col<cols;col++){let x=col*step;const y=row*vStep;if((isHex||isStaggered)&&row%2!==0){x+=step*.5;}drawShape(x,y,row,col);}}}if(isMasking){ctx.globalCompositeOperation=\"source-in\";ctx.globalAlpha=1;const imgRatio=loadedImage.width/loadedImage.height;const canvasRatio=rect.width/rect.height;let drawWidth=rect.width;let drawHeight=rect.height;let offsetX=0;let offsetY=0;if(imgRatio>canvasRatio){drawHeight=rect.height;drawWidth=drawHeight*imgRatio;offsetX=(rect.width-drawWidth)/2;}else{drawWidth=rect.width;drawHeight=drawWidth/imgRatio;offsetY=(rect.height-drawHeight)/2;}ctx.drawImage(loadedImage,offsetX,offsetY,drawWidth,drawHeight);ctx.globalCompositeOperation=\"source-over\";}};// Initial render\nrender();// Handle resize\nconst resizeObserver=new ResizeObserver(()=>{render();});resizeObserver.observe(canvas);return()=>{resizeObserver.disconnect();if(animationFrameId)cancelAnimationFrame(animationFrameId);};},[shape,customPath,color,size,gap,paths,loadedImage,layout]);return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\",backdropFilter:`blur(${backdropBlur}px)`,WebkitBackdropFilter:`blur(${backdropBlur}px)`,mixBlendMode:blendMode}});}addPropertyControls(PatternGrid,{layout:{type:ControlType.Enum,title:\"Layout\",defaultValue:\"grid\",options:[\"grid\",\"staggered\",\"hexagonal\",\"radial\"],optionTitles:[\"Grid\",\"Staggered\",\"Hexagonal\",\"Radial\"]},shape:{type:ControlType.Enum,title:\"Shape\",defaultValue:\"square\",options:[\"square\",\"circle\",\"triangle\",\"hexagon\",\"star\",\"diamond\",\"cross\",\"custom\"],optionTitles:[\"Square\",\"Circle\",\"Triangle\",\"Hexagon\",\"Star\",\"Diamond\",\"Cross\",\"Custom Path\"]},customPath:{type:ControlType.String,title:\"SVG Path\",defaultValue:\"M 0 0 L 1 0 L 1 1 L 0 1 Z\",placeholder:\"e.g. M 0 0 L 1 1 ...\",hidden:props=>props.shape!==\"custom\",description:\"Enter an SVG path data string. Coordinates should be normalized to 0-1 range for best results.\",displayTextArea:true},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#FFFFFF\"},image:{type:ControlType.ResponsiveImage,title:\"Image\"},size:{type:ControlType.Number,title:\"Size\",defaultValue:20,min:4,max:500,step:1},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:1,min:0,max:100,step:1},backdropBlur:{type:ControlType.Number,title:\"Bg Blur\",defaultValue:0,min:0,max:50,step:1,unit:\"px\"},blendMode:{type:ControlType.Enum,title:\"Blend Mode\",defaultValue:\"normal\",options:[\"normal\",\"multiply\",\"screen\",\"overlay\",\"darken\",\"lighten\",\"color-dodge\",\"color-burn\",\"hard-light\",\"soft-light\",\"difference\",\"exclusion\",\"hue\",\"saturation\",\"color\",\"luminosity\"]}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PatternGrid\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PatternGrid.map"],"mappings":"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"}