{"version":3,"file":"WaveGridBackground.I7bCFokJ.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/D6LoZLkIQct0oAd4BHZW/1oXgzeOIJXlfpGZISA2h/WaveGridBackground.js"],"sourcesContent":["// Interactive 3D wave grid background\n// Made by Upper Left Studio -> https://upperleft.design\n//\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useRef}from\"react\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function WaveGridBackground(props){const{gridSize=50,gridSpread=20,backgroundColor=\"#000000\",waveSpeed=1,waveAmplitude=3,mouseInfluence=2,perspectiveStrength=1.5,rotationX=60,rotationY=0,rotationZ=0,cameraDistance=80}=props;const canvasRef=useRef(null);const animationFrameRef=useRef(0);const mouseRef=useRef({x:.5,y:.5});const timeRef=useRef(0);useEffect(()=>{const canvas=canvasRef.current;if(!canvas)return;const gl=canvas.getContext(\"webgl\",{antialias:true,alpha:true,premultipliedAlpha:false});if(!gl)return;const vertexShaderSource=`\n            attribute vec2 a_position;\n            uniform float u_time;\n            uniform vec2 u_mouse;\n            uniform float u_gridSize;\n            uniform float u_gridSpread;\n            uniform float u_waveAmplitude;\n            uniform float u_mouseInfluence;\n            uniform float u_perspectiveStrength;\n            uniform float u_rotationX;\n            uniform float u_rotationY;\n            uniform float u_rotationZ;\n            uniform float u_cameraDistance;\n            \n            mat4 rotationMatrix(vec3 axis, float angle) {\n                axis = normalize(axis);\n                float s = sin(angle);\n                float c = cos(angle);\n                float oc = 1.0 - c;\n                \n                return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,\n                            oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,\n                            oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,\n                            0.0,                                0.0,                                0.0,                                1.0);\n            }\n            \n            void main() {\n                vec2 gridPos = a_position;\n                \n                float x = gridPos.x - u_gridSize * 0.5;\n                float y = gridPos.y - u_gridSize * 0.5;\n                \n                float dist = distance(gridPos, u_mouse * u_gridSize);\n                float mouseEffect = exp(-dist * 0.05) * u_mouseInfluence;\n                \n                float wave1 = sin((gridPos.x) * 0.3 + u_time) * cos((gridPos.y) * 0.2 + u_time * 0.7);\n                float wave2 = sin((gridPos.x) * 0.2 - u_time * 0.8) * cos((gridPos.y) * 0.3 - u_time * 0.5);\n                float z = (wave1 + wave2) * u_waveAmplitude + mouseEffect;\n                \n                vec3 pos = vec3(x * u_gridSpread / u_gridSize, z, y * u_gridSpread / u_gridSize);\n                \n                mat4 rotX = rotationMatrix(vec3(1.0, 0.0, 0.0), radians(u_rotationX));\n                mat4 rotY = rotationMatrix(vec3(0.0, 1.0, 0.0), radians(u_rotationY));\n                mat4 rotZ = rotationMatrix(vec3(0.0, 0.0, 1.0), radians(u_rotationZ));\n                \n                vec4 rotatedPos = rotZ * rotY * rotX * vec4(pos, 1.0);\n                \n                float perspective = u_cameraDistance / (u_cameraDistance + rotatedPos.z);\n                vec2 projected = rotatedPos.xy * perspective * u_perspectiveStrength;\n                \n                gl_Position = vec4(projected, 0.0, 1.0);\n            }\n        `;const fragmentShaderSource=`\n            precision mediump float;\n            uniform vec3 u_color;\n            \n            void main() {\n                gl_FragColor = vec4(u_color, 1.0);\n            }\n        `;function createShader(type,source){const shader=gl.createShader(type);if(!shader)return null;gl.shaderSource(shader,source);gl.compileShader(shader);if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){console.error(gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;}const vertexShader=createShader(gl.VERTEX_SHADER,vertexShaderSource);const fragmentShader=createShader(gl.FRAGMENT_SHADER,fragmentShaderSource);if(!vertexShader||!fragmentShader)return;const program=gl.createProgram();if(!program)return;gl.attachShader(program,vertexShader);gl.attachShader(program,fragmentShader);gl.linkProgram(program);if(!gl.getProgramParameter(program,gl.LINK_STATUS)){console.error(gl.getProgramInfoLog(program));return;}const positionAttributeLocation=gl.getAttribLocation(program,\"a_position\");const timeUniformLocation=gl.getUniformLocation(program,\"u_time\");const mouseUniformLocation=gl.getUniformLocation(program,\"u_mouse\");const gridSizeUniformLocation=gl.getUniformLocation(program,\"u_gridSize\");const gridSpreadUniformLocation=gl.getUniformLocation(program,\"u_gridSpread\");const waveAmplitudeUniformLocation=gl.getUniformLocation(program,\"u_waveAmplitude\");const mouseInfluenceUniformLocation=gl.getUniformLocation(program,\"u_mouseInfluence\");const perspectiveStrengthUniformLocation=gl.getUniformLocation(program,\"u_perspectiveStrength\");const rotationXUniformLocation=gl.getUniformLocation(program,\"u_rotationX\");const rotationYUniformLocation=gl.getUniformLocation(program,\"u_rotationY\");const rotationZUniformLocation=gl.getUniformLocation(program,\"u_rotationZ\");const cameraDistanceUniformLocation=gl.getUniformLocation(program,\"u_cameraDistance\");const colorUniformLocation=gl.getUniformLocation(program,\"u_color\");const vertices=[];const indices=[];for(let i=0;i<gridSize;i++){for(let j=0;j<gridSize;j++){vertices.push(i,j);}}for(let i=0;i<gridSize-1;i++){for(let j=0;j<gridSize-1;j++){const topLeft=i*gridSize+j;const topRight=topLeft+1;const bottomLeft=(i+1)*gridSize+j;const bottomRight=bottomLeft+1;indices.push(topLeft,topRight);indices.push(topLeft,bottomLeft);if(j===gridSize-2){indices.push(topRight,bottomRight);}if(i===gridSize-2){indices.push(bottomLeft,bottomRight);}}}const positionBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);const indexBuffer=gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(indices),gl.STATIC_DRAW);function render(){if(!canvas)return;const width=canvas.width;const height=canvas.height;gl.viewport(0,0,width,height);gl.clearColor(0,0,0,0);gl.clear(gl.COLOR_BUFFER_BIT);gl.useProgram(program);gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);gl.enableVertexAttribArray(positionAttributeLocation);gl.vertexAttribPointer(positionAttributeLocation,2,gl.FLOAT,false,0,0);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);gl.uniform1f(timeUniformLocation,timeRef.current*waveSpeed);gl.uniform2f(mouseUniformLocation,mouseRef.current.x,mouseRef.current.y);gl.uniform1f(gridSizeUniformLocation,gridSize);gl.uniform1f(gridSpreadUniformLocation,gridSpread);gl.uniform1f(waveAmplitudeUniformLocation,waveAmplitude);gl.uniform1f(mouseInfluenceUniformLocation,mouseInfluence);gl.uniform1f(perspectiveStrengthUniformLocation,perspectiveStrength);gl.uniform1f(rotationXUniformLocation,rotationX);gl.uniform1f(rotationYUniformLocation,rotationY);gl.uniform1f(rotationZUniformLocation,rotationZ);gl.uniform1f(cameraDistanceUniformLocation,cameraDistance);gl.uniform3f(colorUniformLocation,1,1,1);gl.lineWidth(1);gl.drawElements(gl.LINES,indices.length,gl.UNSIGNED_SHORT,0);timeRef.current+=.016;animationFrameRef.current=requestAnimationFrame(render);}function handleResize(){if(!canvas)return;const dpr=window.devicePixelRatio||1;const rect=canvas.getBoundingClientRect();canvas.width=rect.width*dpr;canvas.height=rect.height*dpr;}function handleMouseMove(e){if(!canvas)return;const rect=canvas.getBoundingClientRect();mouseRef.current={x:(e.clientX-rect.left)/rect.width,y:(e.clientY-rect.top)/rect.height};}handleResize();window.addEventListener(\"resize\",handleResize);canvas.addEventListener(\"mousemove\",handleMouseMove);render();return()=>{cancelAnimationFrame(animationFrameRef.current);window.removeEventListener(\"resize\",handleResize);canvas.removeEventListener(\"mousemove\",handleMouseMove);if(program){gl.deleteProgram(program);}};},[gridSize,gridSpread,waveSpeed,waveAmplitude,mouseInfluence,perspectiveStrength,rotationX,rotationY,rotationZ,cameraDistance]);return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",position:\"relative\",backgroundColor,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\"}})});}addPropertyControls(WaveGridBackground,{gridSize:{type:ControlType.Number,title:\"Grid Size\",defaultValue:50,min:10,max:100,step:1},gridSpread:{type:ControlType.Number,title:\"Grid Spread\",defaultValue:20,min:5,max:50,step:1},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},waveSpeed:{type:ControlType.Number,title:\"Wave Speed\",defaultValue:1,min:.1,max:5,step:.1},waveAmplitude:{type:ControlType.Number,title:\"Wave Amplitude\",defaultValue:3,min:.5,max:10,step:.5},mouseInfluence:{type:ControlType.Number,title:\"Mouse Influence\",defaultValue:2,min:0,max:10,step:.5},perspectiveStrength:{type:ControlType.Number,title:\"Perspective\",defaultValue:1.5,min:0,max:5,step:.1},rotationX:{type:ControlType.Number,title:\"Rotation X\",defaultValue:60,min:-180,max:180,step:1,unit:\"\\xb0\"},rotationY:{type:ControlType.Number,title:\"Rotation Y\",defaultValue:0,min:-180,max:180,step:1,unit:\"\\xb0\"},rotationZ:{type:ControlType.Number,title:\"Rotation Z\",defaultValue:0,min:-180,max:180,step:1,unit:\"\\xb0\"},cameraDistance:{type:ControlType.Number,title:\"Camera Distance\",defaultValue:80,min:20,max:200,step:5,description:\"Made by [Upper Left Studio](https://upperleft.design/?utm_source=component&utm_medium=resource).\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"WaveGridBackground\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WaveGridBackground.map"],"mappings":"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"}