{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/i0lZCyUm9CgeOh6mt3b5/RahRcrbKbpxERdu7QMGy/Pixe_image.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useState,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";export default function PixelateTransition(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},duration,pixelSize,borderRadius,style}=props;const isStatic=useIsStaticRenderer();const[progress,setProgress]=useState(0);const[playing,setPlaying]=useState(false);const containerRef=useRef(null);const animationRef=useRef(null);useEffect(()=>{if(isStatic)return;function onScroll(){if(playing)return;if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();if(rect.top<window.innerHeight&&rect.bottom>0){startTransition(()=>setPlaying(true));}}window.addEventListener(\"scroll\",onScroll,{passive:true});return()=>window.removeEventListener(\"scroll\",onScroll);},[playing,isStatic]);useEffect(()=>{if(!playing||isStatic)return;let start=null;function animate(ts){if(!start)start=ts;const elapsed=(ts-start)/1e3;const p=Math.min(1,elapsed/duration);startTransition(()=>setProgress(p));if(p<1){animationRef.current=requestAnimationFrame(animate);}}animationRef.current=requestAnimationFrame(animate);return()=>{if(animationRef.current)cancelAnimationFrame(animationRef.current);};},[playing,duration,isStatic]);const pixel=Math.max(1,Math.round(pixelSize*(1-progress)));return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:\"100%\",borderRadius,overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(PixelateImage,{src:image.src,alt:image.alt,pixel:pixel,borderRadius:borderRadius,isFinal:progress===1})});}function PixelateImage({src,alt,pixel,borderRadius,isFinal}){const canvasRef=useRef(null);useEffect(()=>{const el=canvasRef.current;if(!el)return;const ctx=el.getContext(\"2d\");if(!ctx)return;const draw=()=>{const rect=el.getBoundingClientRect();const dpr=window.devicePixelRatio||1;const width=el.width=rect.width*dpr;const height=el.height=rect.height*dpr;ctx.setTransform(1,0,0,1,0,0);ctx.scale(dpr,dpr);const img=new window.Image;img.crossOrigin=\"anonymous\";img.src=src;img.onload=()=>{ctx.clearRect(0,0,rect.width,rect.height);if(isFinal){ctx.imageSmoothingEnabled=true;ctx.drawImage(img,0,0,rect.width,rect.height);}else{ctx.imageSmoothingEnabled=false;const pixelW=rect.width/pixel;const pixelH=rect.height/pixel;ctx.drawImage(img,0,0,pixelW,pixelH);ctx.drawImage(el,0,0,pixelW,pixelH,0,0,rect.width,rect.height);}};};draw();window.addEventListener(\"resize\",draw);return()=>window.removeEventListener(\"resize\",draw);},[src,pixel,isFinal]);return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\",borderRadius},\"aria-label\":alt});}addPropertyControls(PixelateTransition,{image:{type:ControlType.ResponsiveImage,title:\"\u56FE\u7247\"},duration:{type:ControlType.Number,title:\"\u52A8\u753B\u65F6\u957F(\u79D2)\",defaultValue:1.5,min:.2,max:10,step:.1,unit:\"s\"},pixelSize:{type:ControlType.Number,title:\"\u521D\u59CB\u50CF\u7D20\u5927\u5C0F\",defaultValue:24,min:2,max:64,step:1,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"\u5706\u89D2\",defaultValue:8,min:0,max:64,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PixelateTransition\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Pixe_image.map"],
  "mappings": "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",
  "names": ["PixelateTransition", "props", "image", "duration", "pixelSize", "borderRadius", "style", "isStatic", "useIsStaticRenderer", "progress", "setProgress", "ye", "playing", "setPlaying", "containerRef", "pe", "animationRef", "ue", "onScroll", "rect", "window", "Z", "start", "animate", "ts", "elapsed", "p", "pixel", "PixelateImage", "src", "alt", "isFinal", "canvasRef", "el", "ctx", "draw", "dpr", "width", "height", "img", "pixelW", "pixelH", "addPropertyControls", "ControlType"]
}