{"version":3,"file":"ShaderFlow.BmAoMiPf.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/pSymB2lMjkngRU1c2bnZ/n0VU7Qgmb07PYcY3G5fX/ShaderFlow.js"],"sourcesContent":["// Animated WebGL Shader effect with chromatic aberration wave distortion\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * Shader Flow\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ShaderFlow(props){const{xScale=1,yScale=.5,distortion=.05,speed=.01}=props;const canvasRef=useRef(null);const propsRef=useRef({xScale,yScale,distortion,speed});// Update props ref whenever props change\nuseEffect(()=>{propsRef.current={xScale,yScale,distortion,speed};},[xScale,yScale,distortion,speed]);const sceneRef=useRef({gl:null,program:null,uniforms:{resolution:null,time:null,xScale:null,yScale:null,distortion:null},animationId:null,timeValue:0});useEffect(()=>{if(typeof window===\"undefined\")return;if(!canvasRef.current)return;if(RenderTarget.current()===RenderTarget.thumbnail)return;const canvas=canvasRef.current;const{current:refs}=sceneRef;const gl=canvas.getContext(\"webgl\",{alpha:true,antialias:false,preserveDrawingBuffer:false});if(!gl)return;refs.gl=gl;const vertexShaderSource=`\n            attribute vec2 position;\n            void main() {\n                gl_Position = vec4(position, 0.0, 1.0);\n            }\n        `;const fragmentShaderSource=`\n            precision highp float;\n            uniform vec2 resolution;\n            uniform float time;\n            uniform float xScale;\n            uniform float yScale;\n            uniform float distortion;\n\n            void main() {\n                vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);\n                \n                float d = length(p) * distortion;\n                \n                float rx = p.x * (1.0 + d);\n                float gx = p.x;\n                float bx = p.x * (1.0 - d);\n\n                float r = 0.05 / abs(p.y + sin((rx + time) * xScale) * yScale);\n                float g = 0.05 / abs(p.y + sin((gx + time) * xScale) * yScale);\n                float b = 0.05 / abs(p.y + sin((bx + time) * xScale) * yScale);\n                \n                gl_FragColor = vec4(r, g, b, 1.0);\n            }\n        `;const 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;}refs.program=program;gl.useProgram(program);const positions=new Float32Array([-1,-1,1,-1,-1,1,1,-1,-1,1,1,1]);const positionBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);gl.bufferData(gl.ARRAY_BUFFER,positions,gl.STATIC_DRAW);const positionLocation=gl.getAttribLocation(program,\"position\");gl.enableVertexAttribArray(positionLocation);gl.vertexAttribPointer(positionLocation,2,gl.FLOAT,false,0,0);refs.uniforms.resolution=gl.getUniformLocation(program,\"resolution\");refs.uniforms.time=gl.getUniformLocation(program,\"time\");refs.uniforms.xScale=gl.getUniformLocation(program,\"xScale\");refs.uniforms.yScale=gl.getUniformLocation(program,\"yScale\");refs.uniforms.distortion=gl.getUniformLocation(program,\"distortion\");const handleResize=()=>{if(!canvas||!gl||!refs.uniforms.resolution)return;const width=canvas.clientWidth;const height=canvas.clientHeight;canvas.width=width*window.devicePixelRatio;canvas.height=height*window.devicePixelRatio;gl.viewport(0,0,canvas.width,canvas.height);gl.uniform2f(refs.uniforms.resolution,canvas.width,canvas.height);};const animate=()=>{if(!gl||!refs.program||!refs.uniforms.time)return;refs.timeValue+=propsRef.current.speed;gl.uniform1f(refs.uniforms.time,refs.timeValue);gl.uniform1f(refs.uniforms.xScale,propsRef.current.xScale);gl.uniform1f(refs.uniforms.yScale,propsRef.current.yScale);gl.uniform1f(refs.uniforms.distortion,propsRef.current.distortion);gl.drawArrays(gl.TRIANGLES,0,6);refs.animationId=requestAnimationFrame(animate);};handleResize();window.addEventListener(\"resize\",handleResize);animate();return()=>{if(refs.animationId)cancelAnimationFrame(refs.animationId);window.removeEventListener(\"resize\",handleResize);if(gl&&refs.program){gl.deleteProgram(refs.program);}if(gl&&vertexShader)gl.deleteShader(vertexShader);if(gl&&fragmentShader)gl.deleteShader(fragmentShader);};},[]);if(RenderTarget.current()===RenderTarget.thumbnail){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",backgroundColor:\"#000000\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",color:\"#fff\",fontSize:14,fontFamily:\"sans-serif\"},children:\"Shader Flow\"});}return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{width:\"100%\",height:\"100%\",display:\"block\",backgroundColor:\"#000000\"}});}addPropertyControls(ShaderFlow,{xScale:{type:ControlType.Number,title:\"X Scale (Shader Flow)\",defaultValue:1,min:.1,max:5,step:.1},yScale:{type:ControlType.Number,title:\"Y Scale (Shader Flow)\",defaultValue:.5,min:.1,max:2,step:.1},distortion:{type:ControlType.Number,title:\"Distortion (Shader Flow)\",defaultValue:.05,min:0,max:.5,step:.01},speed:{type:ControlType.Number,title:\"Speed (Shader Flow)\",defaultValue:.01,min:.001,max:.1,step:.001}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ShaderFlow\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ShaderFlow.map"],"mappings":"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"}