{"version":3,"file":"BackgroundBoxes_prod.CWLEHo2S.mjs","names":["useRef","useState","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/ooqkSD3rGXzWpV96qhGd/amKGdEWavhnXUhgDze49/BackgroundBoxes_prod.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{memo,useMemo,useRef,useState,useLayoutEffect,useCallback}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";const DEFAULT_COLORS=[\"rgb(125 211 252)\",\"rgb(249 168 212)\",\"rgb(134 239 172)\",\"rgb(253 224 71)\",\"rgb(252 165 165)\",\"rgb(216 180 254)\",\"rgb(147 197 253)\",\"rgb(165 180 252)\",\"rgb(196 181 253)\"];/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 400\n * @framerDisableUnlink\n */export default function BackgroundBoxes({backgroundColor,boxSize=16,borderWidth,borderColor,rotateX=0,rotateY=0,rotateZ=0,safetyMargin=1.2,colors:colorsProp={paletteCount:9,color1:\"rgb(125 211 252)\",color2:\"rgb(249 168 212)\",color3:\"rgb(134 239 172)\",color4:\"rgb(253 224 71)\",color5:\"rgb(252 165 165)\",color6:\"rgb(216 180 254)\",color7:\"rgb(147 197 253)\",color8:\"rgb(165 180 252)\",color9:\"rgb(196 181 253)\"},inDuration=0,outDuration=2,style}){const containerRef=useRef(null);const zoomProbeRef=useRef(null);const[rows,setRows]=useState(35);const[cols,setCols]=useState(35);// Build colors array from props\nconst colors=useMemo(()=>{const entries=[];if(colorsProp){const paletteCount=colorsProp.paletteCount||9;for(let i=1;i<=paletteCount;i++){const key=`color${i}`;const value=colorsProp[key];if(typeof value===\"string\"&&value.trim().length>0){entries.push(value.trim());}}}// Fallback to default colors if no colors provided\nif(entries.length===0){return DEFAULT_COLORS;}return entries;},[colorsProp]);const getRandomColor=()=>{if(colors.length===0)return DEFAULT_COLORS[0]||\"rgb(125 211 252)\";return colors[Math.floor(Math.random()*colors.length)];};// Calculate grid dimensions based on container size and rotation\nconst calculateGrid=useCallback(()=>{const container=containerRef.current;if(!container)return;const w=container.clientWidth||container.offsetWidth||1;const h=container.clientHeight||container.offsetHeight||1;// Convert rotation angles to radians\nconst radX=Math.abs(rotateX)*(Math.PI/180);const radY=Math.abs(rotateY)*(Math.PI/180);const radZ=Math.abs(rotateZ)*(Math.PI/180);// Calculate the diagonal of the viewport - this is the worst-case dimension\nconst diagonal=Math.sqrt(w*w+h*h);// For 3D rotations, we need to account for:\n// 1. RotateZ (2D rotation): expands bounding box\n// 2. RotateX/Y (3D tilt): foreshortens the plane\n// Calculate Z rotation expansion\nconst cosZ=Math.abs(Math.cos(radZ));const sinZ=Math.abs(Math.sin(radZ));const zRotatedWidth=w*cosZ+h*sinZ;const zRotatedHeight=w*sinZ+h*cosZ;// Calculate 3D tilt compensation factors\n// When tilted, the plane appears smaller, so we need more coverage\n// Use conservative minimums to ensure we always have enough\nconst cosX=Math.max(Math.abs(Math.cos(radX)),.2);const cosY=Math.max(Math.abs(Math.cos(radY)),.2);// Compensation factors: inverse of cosine (how much larger we need)\nconst compensateX=1/cosX;const compensateY=1/cosY;// Apply all compensations\n// X rotation affects vertical dimension (height)\n// Y rotation affects horizontal dimension (width)\nlet requiredWidth=zRotatedWidth*compensateY;let requiredHeight=zRotatedHeight*compensateX;// For extreme rotations, ensure we cover at least the diagonal\n// This handles cases where combined rotations create very large projections\nrequiredWidth=Math.max(requiredWidth,diagonal);requiredHeight=Math.max(requiredHeight,diagonal);// Additional safety margin for edge cases (40% margin)\n// This ensures corners and edges are always covered\nconst calculatedCols=Math.ceil(requiredWidth*safetyMargin/boxSize);const calculatedRows=Math.ceil(requiredHeight*safetyMargin/boxSize);setRows(Math.max(10,calculatedRows));setCols(Math.max(10,calculatedCols));},[boxSize,rotateX,rotateY,rotateZ,safetyMargin]);// Handle resize with zoom probe method for canvas mode\nuseLayoutEffect(()=>{const isCanvas=RenderTarget.current()===RenderTarget.canvas;if(isCanvas){// Canvas mode: use zoom probe polling method\nlet rafId=0;const TICK_MS=100;let lastCalc=0;const tick=now=>{const timeOk=!lastCalc||(now||performance.now())-lastCalc>=TICK_MS;if(timeOk){calculateGrid();lastCalc=now||performance.now();}rafId=requestAnimationFrame(tick);};rafId=requestAnimationFrame(tick);return()=>{if(rafId)cancelAnimationFrame(rafId);};}else{// Preview mode: use window resize events\ncalculateGrid()// Initial calculation\n;window.addEventListener(\"resize\",calculateGrid);return()=>{window.removeEventListener(\"resize\",calculateGrid);};}},[calculateGrid]);// Initial calculation and recalculation when rotation changes\nuseLayoutEffect(()=>{calculateGrid();},[calculateGrid,rotateX,rotateY,rotateZ]);// Calculate actual grid dimensions\nconst gridWidth=cols*boxSize;const gridHeight=rows*boxSize;// Boxes component\nconst BoxesCore=()=>{const rowsArray=new Array(rows).fill(1);const colsArray=new Array(cols).fill(1);return /*#__PURE__*/_jsx(\"div\",{style:{transform:`translate(-50%, -50%) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`,transformStyle:\"preserve-3d\",position:\"absolute\",left:\"50%\",top:\"50%\",display:\"flex\",flexDirection:\"column\",transformOrigin:\"center center\",width:`${gridWidth}px`,height:`${gridHeight}px`,zIndex:0},children:rowsArray.map((_,i)=>/*#__PURE__*/_jsx(motion.div,{style:{display:\"flex\",borderLeft:borderWidth?`${borderWidth}px solid ${borderColor}`:undefined,position:\"relative\",transformStyle:\"preserve-3d\"},children:colsArray.map((_,j)=>/*#__PURE__*/_jsx(motion.div,{whileHover:{backgroundColor:getRandomColor(),transition:{duration:inDuration}},transition:{duration:outDuration},style:{width:`${boxSize}px`,height:`${boxSize}px`,flexShrink:0,borderRight:borderWidth?`${borderWidth}px solid ${borderColor}`:undefined,borderTop:borderWidth?`${borderWidth}px solid ${borderColor}`:undefined,position:\"relative\",transformStyle:\"preserve-3d\"}},`col-${j}`))},`row-${i}`))});};const MemoizedBoxes=/*#__PURE__*/memo(BoxesCore);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",backgroundColor:backgroundColor,perspective:`10000px`,perspectiveOrigin:\"center center\",transformStyle:\"preserve-3d\"},children:[/*#__PURE__*/_jsx(\"div\",{ref:zoomProbeRef,style:{position:\"absolute\",width:20,height:20,opacity:0,pointerEvents:\"none\"}}),/*#__PURE__*/_jsx(MemoizedBoxes,{})]});}addPropertyControls(BackgroundBoxes,{backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(0,0,0,1)\",optional:true},boxSize:{type:ControlType.Number,title:\"Box Size\",min:4,max:64,step:2,defaultValue:36,unit:\"px\"},borderWidth:{type:ControlType.Number,title:\"Border\",min:0,max:10,step:1,defaultValue:1,unit:\"px\"},rotateX:{type:ControlType.Number,title:\"Rotate X\",min:-45,max:45,step:1,defaultValue:45,unit:\"\\xb0\"},rotateY:{type:ControlType.Number,title:\"Rotate Y\",min:-45,max:45,step:1,defaultValue:-10,unit:\"\\xb0\"},rotateZ:{type:ControlType.Number,title:\"Rotate Z\",min:-45,max:45,step:1,defaultValue:30,unit:\"\\xb0\"},inDuration:{type:ControlType.Number,title:\"Time In\",min:0,max:10,step:.1,defaultValue:0},outDuration:{type:ControlType.Number,title:\"Time Out\",min:0,max:10,step:.1,defaultValue:.5},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"rgba(255,255,255,0.2)\",optional:true},safetyMargin:{type:ControlType.Number,title:\"Fill Grid\",min:1,max:2,step:.1,defaultValue:1.2,description:\"Add rows and columns. Increase for high rotations.\"},colors:{type:ControlType.Object,title:\"Colors\",description:\"More components at [Framer University](https://frameruni.link/cc).\",controls:{paletteCount:{type:ControlType.Number,title:\"Palette Size\",min:1,max:10,step:1,defaultValue:9},color1:{type:ControlType.Color,title:\"Color 1\",defaultValue:\"rgb(125 211 252)\"},color2:{type:ControlType.Color,title:\"Color 2\",defaultValue:\"rgb(249 168 212)\",hidden:props=>(props?.paletteCount??9)<2},color3:{type:ControlType.Color,title:\"Color 3\",defaultValue:\"rgb(134 239 172)\",hidden:props=>(props?.paletteCount??9)<3},color4:{type:ControlType.Color,title:\"Color 4\",defaultValue:\"rgb(253 224 71)\",hidden:props=>(props?.paletteCount??9)<4},color5:{type:ControlType.Color,title:\"Color 5\",defaultValue:\"rgb(252 165 165)\",hidden:props=>(props?.paletteCount??9)<5},color6:{type:ControlType.Color,title:\"Color 6\",defaultValue:\"rgb(216 180 254)\",hidden:props=>(props?.paletteCount??9)<6},color7:{type:ControlType.Color,title:\"Color 7\",defaultValue:\"rgb(147 197 253)\",hidden:props=>(props?.paletteCount??9)<7},color8:{type:ControlType.Color,title:\"Color 8\",defaultValue:\"rgb(165 180 252)\",hidden:props=>(props?.paletteCount??9)<8},color9:{type:ControlType.Color,title:\"Color 9\",defaultValue:\"rgb(196 181 253)\",hidden:props=>(props?.paletteCount??9)<9},color10:{type:ControlType.Color,title:\"Color 10\",defaultValue:\"rgb(125 211 252)\",hidden:props=>(props?.paletteCount??9)<10}}}});BackgroundBoxes.displayName=\"Background Boxes\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BackgroundBoxes\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"400\",\"framerDisableUnlink\":\"\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BackgroundBoxes_prod.map"],"mappings":"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"}