{"version":3,"file":"PatternGrid.CyYUNbML.mjs","names":["useRef","useMemo"],"sources":["https:/framerusercontent.com/modules/2CA5fziOAlu6B74KFZfa/8cc5KWK2E8P7NCkEC8ND/PatternGrid.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,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,animate,speed}=props;const canvasRef=useRef(null);// 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 startTime=Date.now();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);// Calculate time for animation\nconst elapsed=(Date.now()-startTime)/1e3;const time=animate?elapsed*speed:0;// 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);}ctx.fillStyle=color;const step=size+gap;const cols=Math.ceil(rect.width/step);const rows=Math.ceil(rect.height/step);for(let row=0;row<rows;row++){for(let col=0;col<cols;col++){const x=col*step;const y=row*step;// Pseudo-random opacity based on grid position for stability during resize\n// Using a simple hash function\nconst seed=row*1337+col*7331;let opacity;if(animate){// Generate a random phase for this cell based on seed\nconst phase=Math.abs(Math.sin(seed)*1e4)%1*Math.PI*2;// Oscillate between 0 and 1\nconst normalized=(Math.sin(time+phase)+1)/2;// Opacity between 0.01 (1%) and 0.90 (90%)\nopacity=.01+normalized*.89;}else{const rand=Math.abs(Math.sin(seed)*1e4)%1;// Opacity between 0.01 (1%) and 0.90 (90%)\nopacity=.01+rand*.89;}ctx.globalAlpha=opacity;// Draw shape\nctx.save();ctx.translate(x,y);ctx.scale(size,size);ctx.fill(path);ctx.restore();}}if(animate){animationFrameId=requestAnimationFrame(render);}};// Initial render\nrender();// Handle resize\nconst resizeObserver=new ResizeObserver(()=>{if(!animate)render();});resizeObserver.observe(canvas);return()=>{resizeObserver.disconnect();if(animationFrameId)cancelAnimationFrame(animationFrameId);};},[shape,customPath,color,size,gap,paths,backdropBlur,blendMode,animate,speed]);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,{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\"},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\"]},animate:{type:ControlType.Boolean,title:\"Animate\",defaultValue:false},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1,min:.1,max:10,step:.1,hidden:props=>!props.animate}});\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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"}