{
  "version": 3,
  "sources": ["ssg: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": "4HAAyI,IAAMA,EAAO,CAAC,UAAU,UAAU,SAAS,EAAS,SAASC,EAAe,CAAC,MAAAC,EAAM,KAAAC,EAAK,YAAAC,EAAY,UAAAC,EAAU,QAAAC,EAAQ,QAAAC,EAAQ,UAAAC,CAAS,EAAE,CAAC,IAAMC,EAAmBC,EAAO,IAAI,EAAO,CAACC,EAAKC,CAAO,EAAQC,EAAS,CAAC,CAAC,EAAO,CAACC,EAAWC,CAAa,EAAQF,EAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAC3ZG,EAAgB,IAAI,CAAC,GAAG,CAACP,EAAa,QAAQ,OAAO,IAAMQ,EAAW,IAAI,CAAC,IAAMC,EAAET,EAAa,QAAQ,YAAkBU,EAAEV,EAAa,QAAQ,aAAgBS,EAAE,GAAGC,EAAE,GAAEJ,EAAc,CAAC,MAAMG,EAAE,OAAOC,CAAC,CAAC,CAAE,EAAE,sBAAsBF,CAAU,EACnP,IAAMG,EAAS,IAAI,eAAeH,CAAU,EAAE,OAAAG,EAAS,QAAQX,EAAa,OAAO,EAAQ,IAAIW,EAAS,WAAW,CAAE,EAAE,CAAC,CAAC,EACpHC,EAAU,IAAI,CAAC,GAAG,CAACnB,EAAM,OAAO,GAAK,CAAC,MAAAoB,EAAM,OAAAC,CAAM,EAAET,EAAcQ,GAAO,GAAGC,GAAQ,GAC1FC,EAAatB,EAAME,EAAYC,EAAUiB,EAAMC,EAAOf,EAAU,CAACiB,EAAUC,IAAc,CAAC,IAAMC,EAAQF,EAAU,OAAOG,GAAGA,EAAE,OAAO,EAAQC,EAAQrB,EAAU,IAAUsB,EAAaJ,EAAY,EAAEA,EAAY,EAAE,EAAQK,EAAaL,EAAY,EAAEA,EAAY,EAAE,EAAQM,EAAY,KAAK,KAAKN,EAAY,GAAG,EAAEA,EAAY,GAAG,CAAC,EAAE,GAASO,EAAMR,EAAU,OAAOG,GAAG,CAACA,EAAE,OAAO,EAAE,OAAOA,GAAGA,EAAE,GAAGF,EAAY,EAAEG,GAASD,EAAE,GAAGF,EAAY,EAAEA,EAAY,EAAEG,GAASD,EAAE,GAAGF,EAAY,EAAEG,GAASD,EAAE,GAAGF,EAAY,EAAEA,EAAY,EAAEG,CAAO,EAAE,OAAOD,GAAG,CAAC,IAAMM,EAAGN,EAAE,EAAEE,EAAmBK,EAAGP,EAAE,EAAEG,EAAa,OAAO,KAAK,KAAKG,EAAGA,EAAGC,EAAGA,CAAE,GAAGH,CAAY,CAAC,EAAE,OAAO,IAAI,KAAK,OAAO,EAAE,GAAG,EAAQI,EAAS,CAAC,GAAGT,EAAQ,GAAGM,CAAK,EAAE,OAAO,IAAI,KAAK,OAAO,EAAE,EAAE,EAAErB,EAAQwB,CAAQ,CAAE,CAAC,CAAE,EAAE,CAAClC,EAAMC,EAAKC,EAAYC,EAAUG,EAAUM,CAAU,CAAC,EAAE,IAAMuB,EAAS,KAAK,IAAIvB,EAAW,MAAMA,EAAW,MAAM,EAAE,GAAGT,EAAU,OAAoBiC,EAAM,MAAM,CAAC,IAAI7B,EAAa,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,UAAU,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,gBAAgB,cAAc,UAAU,aAAaH,CAAO,OAAOC,CAAO,KAAK,EAAE,SAAS,CAACI,EAAK,IAAI,CAAC4B,EAAMC,IAAiBZ,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAIW,EAAM,EAAE,KAAKA,EAAM,EAAE,MAAM/B,EAAU,OAAOA,EAAU,gBAAgB+B,EAAM,MAAM,UAAU,wBAAwB,OAAOpC,IAAO,SAAS,EAAE,CAAC,CAAC,EAAE,GAAGoC,EAAM,CAAC,IAAIA,EAAM,CAAC,IAAIC,CAAC,EAAE,CAAC,EAAEtC,GAAoB0B,EAAK,MAAM,CAAC,IAAI1B,EAAM,IAAI,cAAc,MAAM,CAAC,SAAS,WAAW,SAAS,GAAGmC,CAAQ,KAAK,UAAU,GAAGA,CAAQ,KAAK,UAAU,UAAU,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CACziD,SAASb,EAAaiB,EAAIrC,EAAYsC,EAAWpB,EAAMC,EAAOf,EAAUmC,EAAS,CAAC,IAAMC,EAAO,SAAS,cAAc,QAAQ,EAAEA,EAAO,MAAMtB,EAAMsB,EAAO,OAAOrB,EAAO,IAAMsB,EAAID,EAAO,WAAW,IAAI,EAAQ1C,EAAM,IAAI,MAAMA,EAAM,YAAY,YAAYA,EAAM,IAAIuC,EAAIvC,EAAM,OAAO,EAAE,KAAK,IAAI,CAAC,IAAM4C,EAAKxB,EAAM,GAASyB,EAAKxB,EAAO,GAAiEyB,EAAnD,KAAK,IAAIF,EAAK5C,EAAM,MAAM6C,EAAK7C,EAAM,MAAM,EAAmBwC,EAAWtC,EAAkB6C,EAAG/C,EAAM,MAAM8C,EAAYE,EAAGhD,EAAM,OAAO8C,EAAYG,GAAI7B,EAAM2B,GAAI,EAAQG,GAAI7B,EAAO2B,GAAI,EAAEL,EAAI,UAAU,EAAE,EAAEvB,EAAMC,CAAM,EAAEsB,EAAI,UAAU3C,EAAMiD,EAAGC,EAAGH,EAAGC,CAAE,EAAE,IAAMG,EAAKR,EAAI,aAAa,EAAE,EAAEvB,EAAMC,CAAM,EAAE,KAAWZ,EAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAEuC,EAAG,GAAG1C,EAAW,QAAQ8C,EAAE,EAAEA,EAAEL,EAAGK,GAAG9C,EAAU,CAAC,IAAM+C,EAAQ,KAAK,IAAIjC,EAAM,EAAE,KAAK,IAAI,EAAE,KAAK,MAAM6B,EAAGG,CAAC,CAAC,CAAC,EAAQE,EAAQ,KAAK,IAAIjC,EAAO,EAAE,KAAK,IAAI,EAAE,KAAK,MAAM6B,EAAG,CAAC,CAAC,CAAC,EAAQK,EAAMJ,GAAMG,EAAQlC,EAAMiC,GAAS,EAAE,CAAC,EAAE5C,EAAK,KAAK,CAAC,EAAE4C,EAAQ,EAAEC,EAAQ,QAAQC,EAAM,GAAG,MAAMzD,EAAO,KAAK,MAAM,KAAK,OAAO,EAAEA,EAAO,MAAM,CAAC,CAAC,CAAC,CAAE,CAAE2C,EAAShC,EAAK,CAAC,EAAEwC,EAAG,EAAEC,EAAG,EAAEH,EAAG,EAAEC,CAAE,CAAC,CAAE,CAAC,EAAE,MAAMQ,GAAK,CAAC,QAAQ,MAAM,sBAAsBA,CAAG,CAAE,CAAC,CAAE,CACrkCC,EAAoB1D,EAAe,CAAC,MAAM,CAAC,KAAK2D,EAAY,MAAM,MAAM,OAAO,EAAE,KAAK,CAAC,KAAKA,EAAY,KAAK,MAAM,YAAY,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,KAAKA,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,GAAG,EAAE,UAAU,CAAC,KAAKA,EAAY,OAAO,MAAM,aAAa,IAAI,GAAG,IAAI,EAAE,KAAK,IAAI,aAAa,CAAC,EAAE,UAAU,CAAC,KAAKA,EAAY,OAAO,MAAM,aAAa,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,aAAa,EAAE,EAAE,QAAQ,CAAC,KAAKA,EAAY,OAAO,MAAM,WAAW,IAAI,KAAK,IAAI,IAAI,aAAa,CAAC,EAAE,QAAQ,CAAC,KAAKA,EAAY,OAAO,MAAM,WAAW,IAAI,KAAK,IAAI,IAAI,aAAa,CAAC,CAAC,CAAC",
  "names": ["COLORS", "PixelGridImage", "image", "mode", "pixelSpread", "imageSize", "offsetX", "offsetY", "pixelSize", "containerRef", "pe", "grid", "setGrid", "ye", "dimensions", "setDimensions", "fe", "updateSize", "w", "h", "observer", "ue", "width", "height", "getAlphaGrid", "alphaGrid", "imageOffset", "visible", "p", "padding", "imageCenterX", "imageCenterY", "maxDistance", "noise", "dx", "dy", "fullGrid", "imgMaxPx", "u", "pixel", "i", "img", "imageScale", "callback", "canvas", "ctx", "maxW", "maxH", "scale", "dw", "dh", "ox", "oy", "data", "x", "canvasX", "canvasY", "alpha", "err", "addPropertyControls", "ControlType"]
}