{"version":3,"file":"Loader.DUS3vchw.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/H3ozKBDsQMjIYgLjSC52/hKZyZckdq3lgw3ioOFst/Loader.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * PixelPreloader\n *\n * A full-viewport preloader. Drop your image into the \"Image\" property\n * (upload it directly in the Framer right panel) and it will dissolve\n * into small pixel blocks over 2–3 seconds, revealing the page underneath.\n *\n * How to use in Framer:\n * 1. Add this component to the top layer of your page/frame.\n * 2. Set its size to \"Fill\" / cover the whole canvas (it also force-fixes\n *    itself to the viewport at runtime, so exact size on canvas doesn't matter).\n * 3. Upload an image in the \"Image\" control in the right sidebar.\n * 4. Adjust Duration (2–3s), Pixel Size and Stagger to taste.\n *\n * This renders as position:fixed and reads the real browser viewport size\n * (window.innerWidth/innerHeight) on every resize/orientation change, so it\n * always covers the full screen edge-to-edge and stays correct across every\n * Framer breakpoint (desktop, tablet, phone) and on window resize/rotation.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 300\n */export default function PixelPreloader(props){const{image,duration,pixelSize,fadeSpread,backgroundColor,responsivePixels,onComplete}=props;const canvasRef=React.useRef(null);const wrapperRef=React.useRef(null);const imgElRef=React.useRef(null);const rafRef=React.useRef(0);const startRef=React.useRef(0);const cellsRef=React.useRef([]);const effectivePixelRef=React.useRef(pixelSize);const[imgLoaded,setImgLoaded]=React.useState(false);const[active,setActive]=React.useState(true);const[fadingOut,setFadingOut]=React.useState(false);const isCanvasMode=RenderTarget.current()===RenderTarget.canvas;const src=resolveImageSrc(image);// Load the source image.\nReact.useEffect(()=>{if(!src){setImgLoaded(false);return;}const img=new Image;img.crossOrigin=\"anonymous\";img.onload=()=>{imgElRef.current=img;setImgLoaded(true);};img.src=src;return()=>{img.onload=null;};},[src]);// Build the pixel grid and run the dissolve animation.\nReact.useEffect(()=>{if(!active)return;const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;const dpr=typeof window!==\"undefined\"?window.devicePixelRatio||1:1;function getEffectivePixelSize(w){if(!responsivePixels)return pixelSize;// Reference: pixelSize as authored at a 1440px-wide desktop.\n// Scale down proportionally on narrower (phone/tablet) screens\n// so the pixel-dissolve grid density feels consistent everywhere,\n// clamped so it never gets illegibly small or oversized.\nconst scaled=pixelSize*(w/1440);return clamp(scaled,Math.max(4,pixelSize*.35),pixelSize);}function buildCells(w,h){const px=getEffectivePixelSize(w);effectivePixelRef.current=px;const cols=Math.ceil(w/px);const rows=Math.ceil(h/px);const cellFade=Math.max(150,duration*1e3*fadeSpread);const maxDelay=Math.max(0,duration*1e3-cellFade);const cells=[];for(let y=0;y<rows;y++){for(let x=0;x<cols;x++){cells.push({x:x*px,y:y*px,delay:Math.random()*maxDelay,fade:cellFade});}}cellsRef.current=cells;}function resize(){const w=window.innerWidth;const h=window.innerHeight;canvas.width=w*dpr;canvas.height=h*dpr;canvas.style.width=w+\"px\";canvas.style.height=h+\"px\";buildCells(w,h);}resize();window.addEventListener(\"resize\",resize);window.addEventListener(\"orientationchange\",resize);// On the Framer canvas (edit mode) just show a static frame,\n// don't burn CPU running the animation loop while editing.\nif(isCanvasMode){drawFrame(ctx,canvas,dpr,0,true);return()=>{window.removeEventListener(\"resize\",resize);window.removeEventListener(\"orientationchange\",resize);};}if(!imgLoaded){drawFrame(ctx,canvas,dpr,0,true);return()=>{window.removeEventListener(\"resize\",resize);window.removeEventListener(\"orientationchange\",resize);};}startRef.current=performance.now();function tick(now){const elapsed=now-startRef.current;const avgAlpha=drawFrame(ctx,canvas,dpr,elapsed,false);// Release clicks to whatever is behind the loader as soon as\n// the pixels have visually dissolved, rather than waiting for\n// the whole timer to finish.\nif(wrapperRef.current){wrapperRef.current.style.pointerEvents=avgAlpha<.06?\"none\":\"auto\";}if(elapsed<duration*1e3){rafRef.current=requestAnimationFrame(tick);}else{setFadingOut(true);window.setTimeout(()=>{setActive(false);if(typeof onComplete===\"function\")onComplete();},250);}}rafRef.current=requestAnimationFrame(tick);return()=>{window.removeEventListener(\"resize\",resize);window.removeEventListener(\"orientationchange\",resize);cancelAnimationFrame(rafRef.current);};},[imgLoaded,active,duration,pixelSize,fadeSpread,isCanvasMode,responsivePixels]);function drawFrame(ctx,canvas,dpr,elapsed,staticFrame){const w=canvas.width/dpr;const h=canvas.height/dpr;ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,w,h);const img=imgElRef.current;if(!img){ctx.fillStyle=backgroundColor;ctx.fillRect(0,0,w,h);return 1;}// \"cover\" style crop so the image fills the full viewport\nconst scale=Math.max(w/img.width,h/img.height);const sw=w/scale;const sh=h/scale;const sx=(img.width-sw)/2;const sy=(img.height-sh)/2;const px=effectivePixelRef.current||pixelSize;const cells=cellsRef.current;let alphaSum=0;for(let i=0;i<cells.length;i++){const c=cells[i];let alpha=1;if(!staticFrame){const p=clamp((elapsed-c.delay)/c.fade,0,1);alpha=1-easeInCubic(p);}alphaSum+=alpha;if(alpha<=.01)continue;ctx.globalAlpha=alpha;ctx.drawImage(img,sx+c.x/w*sw,sy+c.y/h*sh,px/w*sw,px/h*sh,c.x,c.y,px,px);}ctx.globalAlpha=1;return cells.length?alphaSum/cells.length:0;}if(!active)return null;return /*#__PURE__*/_jsx(\"div\",{style:{position:\"fixed\",top:0,left:0,width:\"100vw\",height:\"100vh\",zIndex:9999,backgroundColor,pointerEvents:fadingOut?\"none\":\"auto\",opacity:fadingOut?0:1,transition:\"opacity 0.25s ease-out\"},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{display:\"block\",width:\"100%\",height:\"100%\"}})});}function resolveImageSrc(image){if(!image)return undefined;if(typeof image===\"string\")return image;if(typeof image===\"object\"&&image.src)return image.src;return undefined;}function clamp(v,min,max){return Math.min(max,Math.max(min,v));}function easeInCubic(t){return t*t*t;}PixelPreloader.defaultProps={duration:2.5,pixelSize:22,fadeSpread:.35,backgroundColor:\"#000000\",responsivePixels:true};addPropertyControls(PixelPreloader,{image:{type:ControlType.Image,title:\"Image\"},duration:{type:ControlType.Number,title:\"Duration\",min:2,max:3,step:.1,unit:\"s\",defaultValue:2.5},pixelSize:{type:ControlType.Number,title:\"Pixel Size\",min:4,max:80,step:1,defaultValue:22,description:\"Block size at desktop width (1440px)\"},responsivePixels:{type:ControlType.Boolean,title:\"Responsive Grid\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\",description:\"Scale pixel block size down on smaller screens so the effect looks consistent on mobile\"},fadeSpread:{type:ControlType.Number,title:\"Stagger\",min:.05,max:.8,step:.05,defaultValue:.35,description:\"How spread out the pixel fade-out timing is\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},onComplete:{type:ControlType.EventHandler,title:\"On Complete\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PixelPreloader\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"300\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"300\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Loader.map"],"mappings":"6MAuBG,SAAwB,EAAe,EAAM,CAAC,GAAK,CAAC,QAAM,WAAS,YAAU,aAAW,kBAAgB,mBAAiB,cAAY,EAAY,EAAUA,EAAa,IAAI,EAAQ,EAAWA,EAAa,IAAI,EAAQ,EAASA,EAAa,IAAI,EAAQ,EAAOA,EAAa,CAAC,EAAQ,EAASA,EAAa,CAAC,EAAQ,EAASA,EAAa,CAAC,CAAC,EAAQ,EAAkBA,EAAa,CAAS,EAAO,CAAC,EAAU,GAAcC,EAAe,EAAK,EAAO,CAAC,EAAO,GAAWA,EAAe,EAAI,EAAO,CAAC,EAAU,GAAcA,EAAe,EAAK,EAAQ,EAAa,EAAa,QAAQ,IAAI,EAAa,OAAa,EAAI,EAAgB,CAAK,EACvnB,MAAoB,CAAC,GAAG,CAAC,EAAI,CAAC,EAAa,EAAK,EAAE,MAAO,CAAC,IAAM,EAAI,IAAI,MAAwG,MAAlG,GAAI,YAAY,YAAY,EAAI,WAAW,CAAC,EAAS,QAAQ,EAAI,EAAa,EAAI,CAAE,EAAE,EAAI,IAAI,MAAc,CAAC,EAAI,OAAO,IAAK,CAAE,EAAE,CAAC,CAAG,CAAC,EACpN,MAAoB,CAAC,GAAG,CAAC,EAAO,OAAO,IAAM,EAAO,EAAU,QAAQ,GAAG,CAAC,EAAO,OAAO,IAAM,EAAI,EAAO,WAAW,IAAI,EAAE,GAAG,CAAC,EAAI,OAAO,IAAM,EAAW,IAAS,OAAuC,EAA3B,EAAO,kBAAkB,EAAI,SAAS,EAAsB,EAAE,CAI7M,OAJkN,EAI3M,EAAf,EAAE,KAAb,EAAuC,KAAK,IAAI,EAAE,EAAU,GAAG,EAAE,CAAS,EAJmL,CAIjL,CAAC,SAAS,EAAW,EAAE,EAAE,CAAC,IAAM,EAAG,EAAsB,CAAC,EAAE,EAAkB,QAAQ,EAAG,IAAM,EAAK,KAAK,KAAK,EAAE,CAAE,EAAQ,EAAK,KAAK,KAAK,EAAE,CAAE,EAAQ,EAAS,KAAK,IAAI,IAAI,EAAS,IAAI,CAAU,EAAQ,EAAS,KAAK,IAAI,EAAE,EAAS,IAAI,CAAQ,EAAQ,EAAM,CAAC,EAAE,IAAI,IAAI,EAAE,EAAE,EAAE,EAAK,IAAK,IAAI,IAAI,EAAE,EAAE,EAAE,EAAK,IAAK,EAAM,KAAK,CAAC,EAAE,EAAE,EAAG,EAAE,EAAE,EAAG,MAAM,KAAK,OAAO,EAAE,EAAS,KAAK,CAAQ,CAAC,EAAI,EAAS,QAAQ,CAAM,CAAC,SAAS,GAAQ,CAAC,IAAM,EAAE,EAAO,WAAiB,EAAE,EAAO,YAAY,EAAO,MAAM,EAAE,EAAI,EAAO,OAAO,EAAE,EAAI,EAAO,MAAM,MAAM,EAAE,KAAK,EAAO,MAAM,OAAO,EAAE,KAAK,EAAW,EAAE,CAAC,CAAE,CAE9f,GAF+f,EAAO,EAAE,EAAO,iBAAiB,SAAS,CAAM,EAAE,EAAO,iBAAiB,oBAAoB,CAAM,EAEnwB,GAAmK,CAAC,EAA4C,OAAjC,EAAU,EAAI,EAAO,EAAI,EAAE,EAAI,MAAY,CAAC,EAAO,oBAAoB,SAAS,CAAM,EAAE,EAAO,oBAAoB,oBAAoB,CAAM,CAAE,EAAG,EAAS,QAAQ,YAAY,IAAI,EAAE,SAAS,EAAK,EAAI,CAAC,IAAM,EAAQ,EAAI,EAAS,QAAc,EAAS,EAAU,EAAI,EAAO,EAAI,EAAQ,EAAK,EAG/c,EAAW,UAAS,EAAW,QAAQ,MAAM,cAAc,EAAS,IAAI,OAAO,QAAW,EAAQ,EAAS,IAAK,EAAO,QAAQ,sBAAsB,CAAI,GAAQ,EAAa,EAAI,EAAE,EAAO,eAAe,CAAC,EAAU,EAAK,EAAK,OAAO,GAAa,YAAW,EAAW,CAAE,EAAE,GAAG,EAAG,CAA4C,MAA3C,GAAO,QAAQ,sBAAsB,CAAI,MAAY,CAAC,EAAO,oBAAoB,SAAS,CAAM,EAAE,EAAO,oBAAoB,oBAAoB,CAAM,EAAE,qBAAqB,EAAO,OAAO,CAAE,CAAE,EAAE,CAAC,EAAU,EAAO,EAAS,EAAU,EAAW,EAAa,CAAgB,CAAC,EAAE,SAAS,EAAU,EAAI,EAAO,EAAI,EAAQ,EAAY,CAAC,IAAM,EAAE,EAAO,MAAM,EAAU,EAAE,EAAO,OAAO,EAAI,EAAI,aAAa,EAAI,EAAE,EAAE,EAAI,EAAE,CAAC,EAAE,EAAI,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,IAAM,EAAI,EAAS,QAAQ,GAAG,CAAC,EAAyD,MAApD,GAAI,UAAU,EAAgB,EAAI,SAAS,EAAE,EAAE,EAAE,CAAC,EAAS,EAC3yB,IAAM,EAAM,KAAK,IAAI,EAAE,EAAI,MAAM,EAAE,EAAI,MAAM,EAAQ,EAAG,EAAE,EAAY,EAAG,EAAE,EAAY,GAAI,EAAI,MAAM,GAAI,EAAQ,GAAI,EAAI,OAAO,GAAI,EAAQ,EAAG,EAAkB,SAAS,EAAgB,EAAM,EAAS,QAAY,EAAS,EAAE,IAAI,IAAI,EAAE,EAAE,EAAE,EAAM,OAAO,IAAI,CAAC,IAAM,EAAE,EAAM,GAAO,EAAM,EAAM,IAAyD,EAAM,EAAE,EAA5C,GAAO,EAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAuB,CAAC,GAAG,GAAU,EAAS,KAAO,OAAa,EAAI,YAAY,EAAM,EAAI,UAAU,EAAI,EAAG,EAAE,EAAE,EAAE,EAAG,EAAG,EAAE,EAAE,EAAE,EAAG,EAAG,EAAE,EAAG,EAAG,EAAE,EAAG,EAAE,EAAE,EAAE,EAAE,EAAG,CAAE,EAAE,CAAmB,MAAlB,GAAI,YAAY,EAAS,EAAM,OAAO,EAAS,EAAM,OAAO,CAAE,CAAwB,OAAnB,EAAuC,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,QAAQ,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,OAAO,QAAQ,OAAO,KAAK,kBAAgB,cAAc,EAAU,OAAO,OAAO,QAAQ,IAAc,WAAW,wBAAwB,EAAE,SAAsB,EAAK,SAAS,CAAC,IAAI,EAAU,MAAM,CAAC,QAAQ,QAAQ,MAAM,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAA5U,IAA8U,CAAC,SAAS,EAAgB,EAAM,CAAK,KAAuB,IAAG,OAAO,GAAQ,SAAS,OAAO,EAAM,GAAG,OAAO,GAAQ,UAAU,EAAM,IAAI,OAAO,EAAM,GAAzD,CAA8E,CAAC,SAAS,EAAM,EAAE,EAAI,EAAI,CAAC,OAAO,KAAK,IAAI,EAAI,KAAK,IAAI,EAAI,CAAC,CAAC,CAAE,CAAC,SAAS,EAAY,EAAE,CAAC,OAAO,EAAE,EAAE,CAAE,qBAnChoC,IAA4B,IAAiE,EAmCoiC,EAAe,aAAa,CAAC,SAAS,IAAI,UAAU,GAAG,WAAW,IAAI,gBAAgB,UAAU,iBAAiB,EAAI,EAAE,EAAoB,EAAe,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,OAAO,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,IAAI,aAAa,GAAG,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,aAAa,GAAG,YAAY,sCAAsC,EAAE,iBAAiB,CAAC,KAAK,EAAY,QAAQ,MAAM,kBAAkB,aAAa,GAAK,aAAa,KAAK,cAAc,MAAM,YAAY,yFAAyF,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,IAAI,IAAI,IAAI,GAAG,KAAK,IAAI,aAAa,IAAI,YAAY,6CAA6C,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,WAAW,CAAC,KAAK,EAAY,aAAa,MAAM,aAAa,CAAC,CAAC"}