{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/wc2yUVD68wk4nq4PEOBW/fWy3jjwtIvQYameXyede/LedMatrix_Prod.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerDisableUnlink\n *\n * @framerIntrinsicHeight 300\n * @framerIntrinsicWidth 300\n */export default function LedMatrix(props){const{shapeType,size,gap,primaryColor,secondaryColor,radius,probability,animSpeed}=props;const extractRGBColorFromString=str=>{const rgbRegex=/(rgba|rgb)\\(.*?\\)/g;const match=str.match(rgbRegex);return match?match[0]:\"#ffffff\";};const formattedPrimaryColor=extractRGBColorFromString(primaryColor);const formattedSecondaryColor=extractRGBColorFromString(secondaryColor);const canvasRef=useRef(null);const getColor=()=>Math.random()<probability/100?formattedPrimaryColor:formattedSecondaryColor;// Dynamically adjust canvas size and initialize\nconst adjustCanvasSize=()=>{const canvas=canvasRef.current;if(canvas){// Adjust canvas resolution based on its displayed size for sharp rendering\ncanvas.width=canvas.offsetWidth;canvas.height=canvas.offsetHeight;}};// Initialize with dynamic positioning, delay, and duration\nconst initialize=(ctx,width,height)=>{const shapes=[];for(let y=0;y<height;y+=size+gap){for(let x=0;x<width;x+=size+gap){shapes.push({x,y,delay:Math.random()*(-99.9*animSpeed+10099.9),duration:Math.random()*(-99.9*animSpeed+10099.9),startTime:performance.now()+Math.random()*5e3,color:getColor(),shapeType,radius:size/2});}}return shapes;};// Draw squares based on their state\nconst draw=(ctx,shapes,width,height)=>{const currentTime=performance.now();shapes.forEach(shape=>{let timeElapsed=currentTime-shape.startTime;if(timeElapsed>shape.delay+shape.duration){shape.startTime=currentTime+shape.delay;shape.color=getColor();}ctx.fillStyle=shape.color;if(shape.shapeType===\"Square\"){ctx.fillRect(shape.x,shape.y,size,size);}else{ctx.beginPath();ctx.arc(shape.x+shape.radius,shape.y+shape.radius,shape.radius,0,2*Math.PI);ctx.fill();}});};useEffect(()=>{const canvas=canvasRef.current;const ctx=canvas.getContext(\"2d\");let squares=[];const render=()=>{// Clear the canvas and redraw\nctx.clearRect(0,0,canvas.width,canvas.height);draw(ctx,squares,canvas.width,canvas.height);requestAnimationFrame(render);};const resizeObserver=new ResizeObserver(entries=>{adjustCanvasSize();for(let entry of entries){squares=initialize(ctx,entry.contentRect.width,entry.contentRect.height);}});resizeObserver.observe(canvas);requestAnimationFrame(render);return()=>{resizeObserver.unobserve(canvas);};},[props]);return /*#__PURE__*/_jsx(motion.div,{...props,style:{borderRadius:`${radius}px`,...props.style},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",borderRadius:\"inherit\"}})});}LedMatrix.displayName=\"LED Matrix\";addPropertyControls(LedMatrix,{shapeType:{title:\"Shape\",type:ControlType.Enum,options:[\"Square\",\"Circle\"],optionTitles:[\"Square\",\"Circle\"],defaultValue:\"Square\"},size:{title:\"Size\",type:ControlType.Number,description:\"Small sizes might impact performance in Framer, but they won't affect your live website. If you need a smaller size and Framer starts lagging, remember to hide the component by setting 'visible' to 'no', then reload the project. Set the component back to visible once you're done editing the website and ready to publish.\",defaultValue:10},gap:{title:\"Gap\",type:ControlType.Number,defaultValue:2},primaryColor:{title:\"Accent\",type:ControlType.Color,defaultValue:\"#059AFF\"},secondaryColor:{title:\"Secondary\",type:ControlType.Color,defaultValue:\"#1A1C1D\"},radius:{title:\"Radius\",type:ControlType.Number,defaultValue:0},probability:{title:\"Accent Amount\",type:ControlType.Number,description:\"The higher the number, the more accent color will be displayed.\",defaultValue:4,min:0,max:100},animSpeed:{title:\"Speed\",type:ControlType.Number,defaultValue:90,min:1,max:100,description:\"More components at [Framer University](https://frameruni.link/cc).\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LedMatrix\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"300\",\"framerDisableUnlink\":\"*\",\"framerIntrinsicWidth\":\"300\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LedMatrix_Prod.map"],
  "mappings": "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",
  "names": ["LedMatrix", "props", "shapeType", "size", "gap", "primaryColor", "secondaryColor", "radius", "probability", "animSpeed", "extractRGBColorFromString", "str", "rgbRegex", "match", "formattedPrimaryColor", "formattedSecondaryColor", "canvasRef", "pe", "getColor", "adjustCanvasSize", "canvas", "initialize", "ctx", "width", "height", "shapes", "y", "x", "draw", "currentTime", "shape", "ue", "squares", "render", "resizeObserver", "entries", "entry", "p", "motion", "addPropertyControls", "ControlType"]
}