{"version":3,"file":"PixelGridObject.D_9fOJr4.mjs","names":["React.useRef","React.useState","__esmMin","le","init_npm_react_18_3_1","ce","init_jsx_runtime","c","p","_e","de","addPropertyControls","init_framer_BWFVvmND","ControlType","PixelGridImage","containerRef","grid","setGrid","dimensions","setDimensions","updateSize","w","h","observer","image","width","height","getAlphaGrid","pixelSpread","imageSize","pixelSize","visible","alphaGrid","padding","imageCenterX","imageOffset","imageCenterY","maxDistance","noise","dx","dy","fullGrid","mode","imgMaxPx","offsetX","offsetY","pixel","i","canvas","ctx","img","maxW","maxH","scale","imageScale","dw","dh","ox","oy","data","y","x","canvasX","canvasY","alpha","COLORS","callback","err","init_PixelGridObject"],"sources":["https:/framerusercontent.com/modules/1Ygr0QMEhwCz3lGxVt6q/T4Q7YaQkdkR8ivKrmdqe/PixelGridObject.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";const COLORS=[\"#FF4D4D\",\"#3626EF\",\"#170632\"];export function PixelGridImage({image,mode,pixelSpread,imageSize,offsetX,offsetY,pixelSize}){const containerRef=React.useRef(null);const[grid,setGrid]=React.useState([]);const[dimensions,setDimensions]=React.useState({width:0,height:0});// Track container size reliably\nReact.useLayoutEffect(()=>{if(!containerRef.current)return;const updateSize=()=>{const w=containerRef.current.offsetWidth;const h=containerRef.current.offsetHeight;if(w>0&&h>0)setDimensions({width:w,height:h});};requestAnimationFrame(updateSize)// ensures measurement after layout\n;const observer=new ResizeObserver(updateSize);observer.observe(containerRef.current);return()=>observer.disconnect();},[]);// Generate grid only when valid dimensions & dependencies are ready\nReact.useEffect(()=>{if(!image)return;const{width,height}=dimensions;if(width<=0||height<=0)return;// guard: skip invalid size\ngetAlphaGrid(image,pixelSpread,imageSize,width,height,pixelSize,(alphaGrid,imageOffset)=>{const visible=alphaGrid.filter(p=>p.visible);const padding=pixelSize*1.5;const imageCenterX=imageOffset.x+imageOffset.w/2;const imageCenterY=imageOffset.y+imageOffset.h/2;const maxDistance=Math.sqrt(imageOffset.w**2+imageOffset.h**2)*.3;const noise=alphaGrid.filter(p=>!p.visible).filter(p=>p.x>=imageOffset.x-padding&&p.x<=imageOffset.x+imageOffset.w+padding&&p.y>=imageOffset.y-padding&&p.y<=imageOffset.y+imageOffset.h+padding).filter(p=>{const dx=p.x-imageCenterX;const dy=p.y-imageCenterY;return Math.sqrt(dx*dx+dy*dy)<=maxDistance;}).filter(()=>Math.random()<.05);const fullGrid=[...visible,...noise].filter(()=>Math.random()>.1);setGrid(fullGrid);});},[image,mode,pixelSpread,imageSize,pixelSize,dimensions]);const imgMaxPx=Math.min(dimensions.width,dimensions.height)*.6*imageSize;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"visible\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"transparent\",transform:`translate(${offsetX}px, ${offsetY}px)`},children:[grid.map((pixel,i)=>/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:pixel.y,left:pixel.x,width:pixelSize,height:pixelSize,backgroundColor:pixel.color,transform:\"translate(-50%, -50%)\",zIndex:mode===\"behind\"?0:2}},`${pixel.x}-${pixel.y}-${i}`)),image&&/*#__PURE__*/_jsx(\"img\",{src:image,alt:\"grid object\",style:{position:\"absolute\",maxWidth:`${imgMaxPx}px`,maxHeight:`${imgMaxPx}px`,objectFit:\"contain\",zIndex:1}})]});}// Grid builder with stable color assignment\nfunction getAlphaGrid(img,pixelSpread,imageScale,width,height,pixelSize,callback){const canvas=document.createElement(\"canvas\");canvas.width=width;canvas.height=height;const ctx=canvas.getContext(\"2d\");const image=new Image;image.crossOrigin=\"Anonymous\";image.src=img;image.decode().then(()=>{const maxW=width*.6;const maxH=height*.6;const base=Math.min(maxW/image.width,maxH/image.height);const scale=base*imageScale*pixelSpread;const dw=image.width*scale;const dh=image.height*scale;const ox=(width-dw)/2;const oy=(height-dh)/2;ctx.clearRect(0,0,width,height);ctx.drawImage(image,ox,oy,dw,dh);const data=ctx.getImageData(0,0,width,height).data;const grid=[];for(let y=0;y<dh;y+=pixelSize){for(let x=0;x<dw;x+=pixelSize){const canvasX=Math.min(width-1,Math.max(0,Math.floor(ox+x)));const canvasY=Math.min(height-1,Math.max(0,Math.floor(oy+y)));const alpha=data[(canvasY*width+canvasX)*4+3];grid.push({x:canvasX,y:canvasY,visible:alpha>20,color:COLORS[Math.floor(Math.random()*COLORS.length)]});}}callback(grid,{x:ox,y:oy,w:dw,h:dh});}).catch(err=>{console.error(\"Image decode failed\",err);});}// Property controls\naddPropertyControls(PixelGridImage,{image:{type:ControlType.Image,title:\"Image\"},mode:{type:ControlType.Enum,title:\"Grid Mode\",options:[\"behind\"],optionTitles:[\"Behind Object\"]},pixelSpread:{type:ControlType.Number,title:\"Pixel Spread\",min:1,max:2,step:.05,defaultValue:1.3},imageSize:{type:ControlType.Number,title:\"Image Size\",min:.5,max:4,step:.05,defaultValue:1},pixelSize:{type:ControlType.Number,title:\"Pixel Size\",min:5,max:100,step:1,defaultValue:36},offsetX:{type:ControlType.Number,title:\"Offset X\",min:-1e3,max:1e3,defaultValue:0},offsetY:{type:ControlType.Number,title:\"Offset Y\",min:-1e3,max:1e3,defaultValue:0}});\nexport const __FramerMetadata__ = {\"exports\":{\"PixelGridImage\":{\"type\":\"reactComponent\",\"name\":\"PixelGridImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PixelGridObject.map"],"mappings":"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"}