{"version":3,"file":"RetroGrid.pmnWb_y3.mjs","names":["useRef","React"],"sources":["https:/framerusercontent.com/modules/F8kH4lcDWgMN0BdS1sDl/mAwQYwG5SJsvoOGFSYcV/RetroGrid.js"],"sourcesContent":["// Animated grid component with customizable perspective and movement\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import React,{useRef,useEffect}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function RetroGrid(props){const{angle=65,cellSize=60,opacity=.5,lineColor=\"#6d6e71\",backgroundColor=\"#FFFFFF\",animationSpeed=5,perspective=200,fadeHeight=90,fadeColor=\"#FFFFFF\",animationDirection=\"both\",gridType=\"standard\"}=props;const gridRef=useRef(null);const isStatic=useIsStaticRenderer();// Standard grid animation effect\nuseEffect(()=>{if(isStatic)return;const animationName=`gridMove-${Date.now()}`;let keyframes=\"\";if(animationDirection===\"horizontal\"){keyframes=`\n                @keyframes ${animationName} {\n                    from { background-position: 0 0, 0 0; }\n                    to { background-position: ${cellSize+1}px 0, ${cellSize+1}px 0; }\n                }\n            `;}else if(animationDirection===\"vertical\"){keyframes=`\n                @keyframes ${animationName} {\n                    from { background-position: 0 0, 0 0; }\n                    to { background-position: 0 ${cellSize+1}px, 0 ${cellSize+1}px; }\n                }\n            `;}else{keyframes=`\n                @keyframes ${animationName} {\n                    from { background-position: 0 0, 0 0; }\n                    to { background-position: ${cellSize+1}px ${cellSize+1}px, ${cellSize+1}px ${cellSize+1}px; }\n                }\n            `;}const styleSheet=document.createElement(\"style\");styleSheet.innerHTML=keyframes;document.head.appendChild(styleSheet);if(gridRef.current){gridRef.current.style.animation=`${animationName} ${animationSpeed}s linear infinite`;}return()=>{try{document.head.removeChild(styleSheet);}catch(e){// Style sheet already removed\n}};},[cellSize,animationSpeed,animationDirection,isStatic]);// Responsive: update grid on resize\nReact.useEffect(()=>{const handleResize=()=>{if(gridRef.current){gridRef.current.style.width=\"100%\";gridRef.current.style.height=\"100%\";}};window.addEventListener(\"resize\",handleResize);handleResize();return()=>window.removeEventListener(\"resize\",handleResize);},[]);const containerStyle={position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",pointerEvents:\"none\",perspective:`${perspective}px`,opacity:opacity,backgroundColor:backgroundColor,minWidth:0,minHeight:0,boxSizing:\"border-box\",display:\"block\"};const gridWrapperStyle={position:\"absolute\",inset:0,transform:`rotateX(${angle}deg)`,width:\"100%\",height:\"100%\",minWidth:0,minHeight:0,boxSizing:\"border-box\",display:\"block\"};const getGridBackgroundImage=()=>{if(gridType===\"diamond\"){// Diamond tiling (rotated square)\nconst size=cellSize;const svg=encodeURIComponent(`\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${size}\" height=\"${size}\">\n          <polygon points=\"${size/2},0 ${size},${size/2} ${size/2},${size} 0,${size/2}\" \n            fill=\"none\" stroke=\"${lineColor}\" stroke-width=\"1\"/>\n        </svg>\n    `);return`url('data:image/svg+xml,${svg}')`;}else if(gridType===\"hexagonal\"){// Hexagon tiling (honeycomb grid)\nconst size=cellSize;const hexHeight=Math.sqrt(3)*size;const svg=encodeURIComponent(`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${size*1.5}\" height=\"${hexHeight}\">\n        <polygon \n          points=\"\n            ${size*.5},0\n            ${size*1.5},0\n            ${size*2},${hexHeight/2}\n            ${size*1.5},${hexHeight}\n            ${size*.5},${hexHeight}\n            0,${hexHeight/2}\n          \"\n          fill=\"none\"\n          stroke=\"${lineColor}\"\n          stroke-width=\"1\"\n        />\n      </svg>\n    `);return`url('data:image/svg+xml,${svg}')`;}else if(gridType===\"diagonal\"){// 45° diagonal lines\nreturn`\n        repeating-linear-gradient(45deg, ${lineColor}, ${lineColor} 1px, transparent 1px, transparent ${cellSize}px)\n    `;}else{// Standard square grid\nreturn`\n                linear-gradient(to right, ${lineColor} 1px, transparent 1px),\n                linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)\n            `;}};const gridStyle={position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",minWidth:0,minHeight:0,boxSizing:\"border-box\",backgroundImage:getGridBackgroundImage(),backgroundRepeat:\"repeat\",backgroundSize:gridType===\"diagonal\"?`${cellSize}px ${cellSize}px`:gridType===\"diamond\"?`${cellSize}px ${cellSize}px`:`${cellSize}px ${cellSize}px`,pointerEvents:\"auto\",cursor:\"pointer\",display:\"block\"};// Add interactive cell overlay\nconst handleCellHover=e=>{// Only allow hover for standard grid\nif(gridType!==\"standard\")return;const rect=e.currentTarget.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const col=Math.floor(x/cellSize);const row=Math.floor(y/cellSize);setHoveredCell({col,row});};const handleCellLeave=()=>setHoveredCell(null);const handleCellClick=e=>{// Only allow click for standard grid\nif(gridType!==\"standard\")return;const rect=e.currentTarget.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const col=Math.floor(x/cellSize);const row=Math.floor(y/cellSize);setClickedCell({col,row});setTimeout(()=>setClickedCell(null),300);};const[hoveredCell,setHoveredCell]=React.useState(null);const[clickedCell,setClickedCell]=React.useState(null);// Render cell overlays for hover/click\nconst renderCellOverlay=()=>{if(gridType!==\"standard\")return null;if(!hoveredCell&&!clickedCell)return null;const cell=clickedCell||hoveredCell;if(!cell)return null;const left=cell.col*cellSize;const top=cell.row*cellSize;return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left,top,width:cellSize,height:cellSize,background:clickedCell?\"rgba(0,0,0,0.15)\":\"rgba(0,0,0,0.08)\",borderRadius:6,pointerEvents:\"none\",transition:\"background 0.2s\",zIndex:2}});};const overlayStyle={position:\"absolute\",inset:0,background:`linear-gradient(to top, ${fadeColor}, transparent ${fadeHeight}%)`,pointerEvents:\"none\"};return /*#__PURE__*/_jsxs(\"div\",{style:containerStyle,children:[/*#__PURE__*/_jsxs(\"div\",{style:gridWrapperStyle,children:[/*#__PURE__*/_jsx(\"div\",{style:gridStyle,ref:gridRef,onMouseMove:handleCellHover,onMouseLeave:handleCellLeave,onClick:handleCellClick}),renderCellOverlay()]}),/*#__PURE__*/_jsx(\"div\",{style:overlayStyle})]});}addPropertyControls(RetroGrid,{angle:{type:ControlType.Number,title:\"Perspective Angle\",defaultValue:65,min:0,max:90,step:1,unit:\"deg\"},cellSize:{type:ControlType.Number,title:\"Grid Cell Size\",defaultValue:60,min:10,max:200,step:1,unit:\"px\"},opacity:{type:ControlType.Number,title:\"Grid Opacity\",defaultValue:.5,min:0,max:1,step:.05},lineColor:{type:ControlType.Color,title:\"Line Color\",defaultValue:\"#6d6e71\"},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#FFFFFF\"},animationSpeed:{type:ControlType.Number,title:\"Animation Speed\",defaultValue:2.5,min:.5,max:5,step:.1,unit:\"s\"},perspective:{type:ControlType.Number,title:\"3D Perspective\",defaultValue:200,min:50,max:1e3,step:10,unit:\"px\"},fadeHeight:{type:ControlType.Number,title:\"Fade Height\",defaultValue:90,min:0,max:100,step:5,unit:\"%\"},fadeColor:{type:ControlType.Color,title:\"Fade Color\",defaultValue:\"#FFFFFF\"},animationDirection:{type:ControlType.Enum,title:\"Animation Direction\",defaultValue:\"both\",options:[\"horizontal\",\"vertical\",\"both\"],optionTitles:[\"Horizontal\",\"Vertical\",\"Both\"],displaySegmentedControl:true},gridType:{type:ControlType.Enum,title:\"Grid Type\",defaultValue:\"standard\",options:[\"standard\",\"diamond\",\"diagonal\",\"hexagonal\"],optionTitles:[\"Standard\",\"Diamond\",\"Diagonal\",\"Hexagonal\"],displaySegmentedControl:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"RetroGrid\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./RetroGrid.map"],"mappings":"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"}