{"version":3,"file":"ShimmeringEffect.DXexPYAw.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/RafJNmRUG6ja9lms9wrw/86StP0eA0SarJOCYiBRl/ShimmeringEffect.js"],"sourcesContent":["/**\n * PixelCanvas by Ryan Mulligan\n * Copyright (c) 2024 by Ryan Mulligan (https://codepen.io/hexagoncircle/pen/KwPpdBZ)\n *\n * Ported to Framer by Fred Moon (https://x.com/fw3d)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useRef}from\"react\";class Pixel{getRandomValue(min,max){return Math.random()*(max-min)+min;}draw(){const centerOffset=this.maxSizeInteger*.5-this.size*.5;this.ctx.fillStyle=this.color;const centerX=this.x+centerOffset+this.size*.5;const centerY=this.y+centerOffset+this.size*.5;switch(this.shape){case\"circle\":this.ctx.beginPath();this.ctx.arc(centerX,centerY,this.size*.5,0,Math.PI*2);this.ctx.fill();break;case\"triangle\":this.ctx.beginPath();const halfSize=this.size*.5;this.ctx.moveTo(centerX,centerY-halfSize);this.ctx.lineTo(centerX-halfSize,centerY+halfSize);this.ctx.lineTo(centerX+halfSize,centerY+halfSize);this.ctx.closePath();this.ctx.fill();break;case\"diamond\":this.ctx.beginPath();const diamondHalf=this.size*.5;this.ctx.moveTo(centerX,centerY-diamondHalf);this.ctx.lineTo(centerX+diamondHalf,centerY);this.ctx.lineTo(centerX,centerY+diamondHalf);this.ctx.lineTo(centerX-diamondHalf,centerY);this.ctx.closePath();this.ctx.fill();break;case\"hexagon\":this.ctx.beginPath();const hexRadius=this.size*.5;for(let i=0;i<6;i++){const angle=Math.PI/3*i;const x=centerX+hexRadius*Math.cos(angle);const y=centerY+hexRadius*Math.sin(angle);if(i===0){this.ctx.moveTo(x,y);}else{this.ctx.lineTo(x,y);}}this.ctx.closePath();this.ctx.fill();break;case\"square\":default:this.ctx.fillRect(this.x+centerOffset,this.y+centerOffset,this.size,this.size);break;}}appear(){this.isIdle=false;if(this.counter<=this.delay){this.counter+=this.counterStep;return;}if(this.size>=this.maxSize){this.isShimmer=true;}if(this.isShimmer){this.shimmer();}else{this.size+=this.sizeStep;}this.draw();}disappear(){this.isShimmer=false;this.counter=0;if(this.size<=0){this.isIdle=true;return;}else{this.size-=.1;}this.draw();}shimmer(){if(this.size>=this.maxSize){this.isReverse=true;}else if(this.size<=this.minSize){this.isReverse=false;}if(this.isReverse){this.size-=this.speed;}else{this.size+=this.speed;}}constructor(canvas,context,x,y,color,shimmerSpeed,appearSpeed,delay,dotScale,shape){this.width=canvas.width;this.height=canvas.height;this.ctx=context;this.x=x;this.y=y;this.color=color;this.speed=this.getRandomValue(.1,.9)*shimmerSpeed*.001;this.size=0;this.sizeStep=Math.random()*.4;this.minSize=.5*dotScale;this.maxSizeInteger=2*dotScale;this.maxSize=this.getRandomValue(this.minSize,this.maxSizeInteger);this.delay=delay;this.counter=0;this.shape=shape;this.counterStep=(Math.random()*4+(this.width+this.height)*.01)*(appearSpeed*.02);this.isIdle=false;this.isReverse=false;this.isShimmer=false;}}/**\n * @framerDisableUnlink\n */export default function PixelCanvas(props){const containerRef=useRef(null);const canvasRef=useRef(null);const pixelsRef=useRef([]);const animationRef=useRef();const prevTimeRef=useRef(0);// Initialize canvas and pixels\nuseEffect(()=>{if(!containerRef.current||!canvasRef.current)return;const canvas=canvasRef.current;const ctx=canvas.getContext(\"2d\");if(!ctx)return;const updateCanvasSize=()=>{const rect=containerRef.current?.getBoundingClientRect();if(!rect)return;canvas.width=Math.floor(rect.width);canvas.height=Math.floor(rect.height);canvas.style.width=`${canvas.width}px`;canvas.style.height=`${canvas.height}px`;createPixels();};const createPixels=()=>{pixelsRef.current=[];for(let x=0;x<canvas.width;x+=props.gap){for(let y=0;y<canvas.height;y+=props.gap){const color=props.colors[Math.floor(Math.random()*props.colors.length)];const delay=getDistanceToCanvasCenter(x,y);pixelsRef.current.push(new Pixel(canvas,ctx,x,y,color,props.shimmerSpeed,props.appearSpeed,delay,props.dotScale,props.shape));}}};const getDistanceToCanvasCenter=(x,y)=>{const dx=x-canvas.width/2;const dy=y-canvas.height/2;return Math.sqrt(dx*dx+dy*dy);};const resizeObserver=new ResizeObserver(updateCanvasSize);resizeObserver.observe(containerRef.current);updateCanvasSize();return()=>{resizeObserver.disconnect();};},[props.gap,props.colors,props.shimmerSpeed,props.appearSpeed,props.dotScale,props.shape]);// Animation function\nconst animate=fnName=>{if(!canvasRef.current)return;const ctx=canvasRef.current.getContext(\"2d\");if(!ctx)return;const timeNow=performance.now();const timePassed=timeNow-prevTimeRef.current;if(timePassed<1e3/60){animationRef.current=requestAnimationFrame(()=>animate(fnName));return;}prevTimeRef.current=timeNow-timePassed%(1e3/60);ctx.clearRect(0,0,canvasRef.current.width,canvasRef.current.height);for(const pixel of pixelsRef.current){pixel[fnName]();}if(pixelsRef.current.every(pixel=>pixel.isIdle)){cancelAnimationFrame(animationRef.current);return;}animationRef.current=requestAnimationFrame(()=>animate(fnName));};// Always-on mode: start animation on mount\nuseEffect(()=>{if(props.mode===\"alwaysOn\"&&pixelsRef.current.length>0){cancelAnimationFrame(animationRef.current);animationRef.current=requestAnimationFrame(()=>animate(\"appear\"));}return()=>{if(props.mode===\"alwaysOn\"){cancelAnimationFrame(animationRef.current);}};},[props.mode,pixelsRef.current.length]);// Hover mode: set up event handlers\nuseEffect(()=>{if(props.mode!==\"hover\")return;const container=containerRef.current;if(!container)return;const handleMouseEnter=()=>{cancelAnimationFrame(animationRef.current);animationRef.current=requestAnimationFrame(()=>animate(\"appear\"));};const handleMouseLeave=()=>{cancelAnimationFrame(animationRef.current);animationRef.current=requestAnimationFrame(()=>animate(\"disappear\"));};container.addEventListener(\"mouseenter\",handleMouseEnter);container.addEventListener(\"mouseleave\",handleMouseLeave);return()=>{container.removeEventListener(\"mouseenter\",handleMouseEnter);container.removeEventListener(\"mouseleave\",handleMouseLeave);cancelAnimationFrame(animationRef.current);};},[props.mode]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"absolute\",top:0,left:0,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\"}})});}PixelCanvas.displayName=\"🚀 Shimmering Canvas\";PixelCanvas.defaultProps={mode:\"hover\",colors:[\"#f8fafc\",\"#f1f5f9\",\"#cbd5e1\"],gap:5,shimmerSpeed:35,appearSpeed:50,dotScale:1,shape:\"square\"};addPropertyControls(PixelCanvas,{mode:{type:ControlType.Enum,defaultValue:PixelCanvas.defaultProps.mode,options:[\"hover\",\"alwaysOn\"],optionTitles:[\"Hover\",\"Always On\"],title:\"Mode\"},colors:{type:ControlType.Array,control:{type:ControlType.Color},defaultValue:PixelCanvas.defaultProps.colors,title:\"Colors\"},gap:{type:ControlType.Number,defaultValue:PixelCanvas.defaultProps.gap,min:4,max:50,step:1,title:\"Gap\"},dotScale:{type:ControlType.Number,defaultValue:PixelCanvas.defaultProps.dotScale,min:.1,max:10,step:.1,title:\"Dot Scale\",description:\"Scale factor for all dots (1 = original size)\"},shape:{type:ControlType.Enum,defaultValue:PixelCanvas.defaultProps.shape,options:[\"square\",\"circle\",\"triangle\",\"diamond\",\"hexagon\"],optionTitles:[\"Square\",\"Circle\",\"Triangle\",\"Diamond\",\"Hexagon\"],title:\"Shape\"},shimmerSpeed:{type:ControlType.Number,defaultValue:PixelCanvas.defaultProps.shimmerSpeed,min:0,max:100,step:1,title:\"Shimmer Speed\"},appearSpeed:{type:ControlType.Number,defaultValue:PixelCanvas.defaultProps.appearSpeed,min:1,max:100,step:1,title:\"Appear Speed (Ripple)\",description:\"[Ported to Framer by Fred Moon](https://x.com/fw3d)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PixelCanvas\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ShimmeringEffect.map"],"mappings":"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"}