{"version":3,"file":"RetroGrid.L6kU3YTS.mjs","names":["useRef","React","__esmMin","init_npm_react_18_3_1","window","de","init_jsx_runtime","c","p","e","ce","init_ssg_sandbox_shims","addPropertyControls","ControlType","init_framer_DS5RHCUB","useIsStaticRenderer","RetroGrid","props","gridRef","isStatic","animationName","keyframes","animationDirection","cellSize","styleSheet","animationSpeed","handleResize","containerStyle","perspective","gridWrapperStyle","angle","gridStyle","gridType","size","lineColor","hexHeight","handleCellHover","rect","x","y","col","row","setHoveredCell","handleCellLeave","handleCellClick","setClickedCell","hoveredCell","clickedCell","renderCellOverlay","cell","left","top","overlayStyle","fadeColor","fadeHeight","init_RetroGrid"],"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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"}