{"version":3,"file":"RetroGrid.CULCaUZS.mjs","names":["useRef","e"],"sources":["https:/framerusercontent.com/modules/bvkDhn6L4SRyK6ulWniB/ZIKUXo3Fwrsl7CpmtM6x/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\",display:\"block\"};const overlayStyle={position:\"absolute\",inset:0,background:`linear-gradient(to top, ${fadeColor}, transparent ${fadeHeight}%)`,pointerEvents:\"none\"};return /*#__PURE__*/_jsxs(\"div\",{style:containerStyle,children:[/*#__PURE__*/_jsx(\"div\",{style:gridWrapperStyle,children:/*#__PURE__*/_jsx(\"div\",{style:gridStyle,ref:gridRef})}),/*#__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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"}