{"version":3,"file":"BackgroundBoxes_prod.4i9_vrSA.mjs","names":["useRef","useState","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/ooqkSD3rGXzWpV96qhGd/AJuSjkhZyUKUoWGpMDxO/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=DEFAULT_COLORS,outDuration=2,style}){const containerRef=useRef(null);const zoomProbeRef=useRef(null);const[rows,setRows]=useState(35);const[cols,setCols]=useState(35);// Use colors array directly, filtering out empty values\nconst colors=useMemo(()=>{if(!colorsProp||colorsProp.length===0){return DEFAULT_COLORS;}// Filter out empty or invalid color values\nconst validColors=colorsProp.filter(color=>typeof color===\"string\"&&color.trim().length>0).map(color=>color.trim());// Fallback to default colors if no valid colors provided\nreturn validColors.length>0?validColors:DEFAULT_COLORS;},[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:0}},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\"},outDuration:{type:ControlType.Number,title:\"Fade Time\",min:0,max:10,step:.1,defaultValue:.5,unit:\"s\"},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.Array,title:\"Colors\",defaultValue:DEFAULT_COLORS,control:{type:ControlType.Color,title:\"Color\"},description:\"More components at [Framer University](https://frameruni.link/cc).\"}});BackgroundBoxes.displayName=\"Background Boxes\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BackgroundBoxes\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"\",\"framerIntrinsicHeight\":\"400\",\"framerIntrinsicWidth\":\"600\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BackgroundBoxes_prod.map"],"mappings":"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"}