{"version":3,"file":"ShaderAnimation_1.C46IRFtm.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/32fzOoqPb9hPg4LoHPrH/z7DQXRwsszfvsPcPfGXR/ShaderAnimation_1.js"],"sourcesContent":["// Convert Next.js shader animation component to Framer component with WebGL shader effects\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * WebGL Shader Animation\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ShaderAnimation(props){const{speed=1,mosaicScaleX=4,mosaicScaleY=2,lineWidth=8e-4,colorIntensity=1,backgroundColor=\"#000000\",color1=\"#FF0000\",color2=\"#00FF00\",color3=\"#0000FF\",movementSpeedX=1,movementSpeedY=1,movementDirection=0,patternVariation=.4,pulseFrequency=1,pulseAmplitude=.5}=props;const containerRef=useRef(null);const sceneRef=useRef({camera:null,scene:null,renderer:null,uniforms:null,animationId:null,resizeHandler:null,resizeObserver:null});const isStatic=RenderTarget.current()===RenderTarget.thumbnail;useEffect(()=>{if(isStatic||typeof window===\"undefined\")return;// Load Three.js dynamically\nconst script=document.createElement(\"script\");script.src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js\";script.async=true;script.onload=()=>{if(containerRef.current&&window.THREE){initThreeJS();}};document.head.appendChild(script);return()=>{// Cleanup\nif(sceneRef.current.animationId){cancelAnimationFrame(sceneRef.current.animationId);}if(sceneRef.current.resizeHandler){window.removeEventListener(\"resize\",sceneRef.current.resizeHandler);}if(sceneRef.current.resizeObserver){sceneRef.current.resizeObserver.disconnect();}if(sceneRef.current.renderer){sceneRef.current.renderer.dispose();}if(document.head.contains(script)){document.head.removeChild(script);}};},[isStatic]);// Update uniforms when props change\nuseEffect(()=>{if(sceneRef.current.uniforms){sceneRef.current.uniforms.mosaicScaleX.value=mosaicScaleX;sceneRef.current.uniforms.mosaicScaleY.value=mosaicScaleY;sceneRef.current.uniforms.lineWidth.value=lineWidth;sceneRef.current.uniforms.colorIntensity.value=colorIntensity;sceneRef.current.uniforms.movementSpeedX.value=movementSpeedX;sceneRef.current.uniforms.movementSpeedY.value=movementSpeedY;sceneRef.current.uniforms.movementDirection.value=movementDirection;sceneRef.current.uniforms.patternVariation.value=patternVariation;sceneRef.current.uniforms.pulseFrequency.value=pulseFrequency;sceneRef.current.uniforms.pulseAmplitude.value=pulseAmplitude;// Update colors\nconst THREE=window.THREE;if(THREE){sceneRef.current.uniforms.color1.value=new THREE.Color(color1);sceneRef.current.uniforms.color2.value=new THREE.Color(color2);sceneRef.current.uniforms.color3.value=new THREE.Color(color3);sceneRef.current.uniforms.backgroundColor.value=new THREE.Color(backgroundColor);}}},[mosaicScaleX,mosaicScaleY,lineWidth,colorIntensity,color1,color2,color3,backgroundColor,movementSpeedX,movementSpeedY,movementDirection,patternVariation,pulseFrequency,pulseAmplitude]);const initThreeJS=()=>{if(!containerRef.current||!window.THREE)return;const THREE=window.THREE;const container=containerRef.current;// Clear any existing content\ncontainer.innerHTML=\"\";// Initialize camera\nconst camera=new THREE.Camera;camera.position.z=1;// Initialize scene\nconst scene=new THREE.Scene;// Create geometry\nconst geometry=new THREE.PlaneBufferGeometry(2,2);// Define uniforms\nconst uniforms={time:{type:\"f\",value:1},resolution:{type:\"v2\",value:new THREE.Vector2},mosaicScaleX:{type:\"f\",value:mosaicScaleX},mosaicScaleY:{type:\"f\",value:mosaicScaleY},lineWidth:{type:\"f\",value:lineWidth},colorIntensity:{type:\"f\",value:colorIntensity},color1:{type:\"c\",value:new THREE.Color(color1)},color2:{type:\"c\",value:new THREE.Color(color2)},color3:{type:\"c\",value:new THREE.Color(color3)},backgroundColor:{type:\"c\",value:new THREE.Color(backgroundColor)},movementSpeedX:{type:\"f\",value:movementSpeedX},movementSpeedY:{type:\"f\",value:movementSpeedY},movementDirection:{type:\"f\",value:movementDirection},patternVariation:{type:\"f\",value:patternVariation},pulseFrequency:{type:\"f\",value:pulseFrequency},pulseAmplitude:{type:\"f\",value:pulseAmplitude}};// Vertex shader\nconst vertexShader=`\n      void main() {\n        gl_Position = vec4( position, 1.0 );\n      }\n    `;// Fragment shader\nconst fragmentShader=`\n      #define TWO_PI 6.2831853072\n      #define PI 3.14159265359\n\n      precision highp float;\n      uniform vec2 resolution;\n      uniform float time;\n      uniform float mosaicScaleX;\n      uniform float mosaicScaleY;\n      uniform float lineWidth;\n      uniform float colorIntensity;\n      uniform vec3 color1;\n      uniform vec3 color2;\n      uniform vec3 color3;\n      uniform vec3 backgroundColor;\n      uniform float movementSpeedX;\n      uniform float movementSpeedY;\n      uniform float movementDirection;\n      uniform float patternVariation;\n      uniform float pulseFrequency;\n      uniform float pulseAmplitude;\n        \n      float random (in float x) {\n          return fract(sin(x)*1e4);\n      }\n      float random (vec2 st) {\n          return fract(sin(dot(st.xy,\n                               vec2(12.9898,78.233)))*\n              43758.5453123);\n      }\n      \n      varying vec2 vUv;\n\n      void main(void) {\n        vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);\n        \n        // Apply directional movement\n        float angle = movementDirection * PI / 180.0;\n        vec2 movement = vec2(cos(angle), sin(angle)) * time * 0.01;\n        uv.x += movement.x * movementSpeedX;\n        uv.y += movement.y * movementSpeedY;\n        \n        vec2 fMosaicScal = vec2(mosaicScaleX, mosaicScaleY);\n        vec2 vScreenSize = vec2(256,256);\n        uv.x = floor(uv.x * vScreenSize.x / fMosaicScal.x) / (vScreenSize.x / fMosaicScal.x);\n        uv.y = floor(uv.y * vScreenSize.y / fMosaicScal.y) / (vScreenSize.y / fMosaicScal.y);       \n          \n        float t = time*0.06+random(uv.x)*patternVariation;\n        \n        // Calculate pulse effect using sine wave\n        float pulse = 1.0 + sin(time * pulseFrequency * 0.1) * pulseAmplitude;\n\n        // Calculate intensity for each color separately with much lower accumulation\n        float intensity1 = 0.0;\n        float intensity2 = 0.0;\n        float intensity3 = 0.0;\n        \n        for(int i=0; i < 5; i++){\n          intensity1 += lineWidth*float(i*i) / abs(fract(t - 0.00 + float(i)*0.01)*1.0 - length(uv));\n          intensity2 += lineWidth*float(i*i) / abs(fract(t - 0.01 + float(i)*0.01)*1.0 - length(uv));\n          intensity3 += lineWidth*float(i*i) / abs(fract(t - 0.02 + float(i)*0.01)*1.0 - length(uv));\n        }\n\n        // Apply pulse to intensities and normalize\n        intensity1 = clamp(intensity1 * 0.02 * colorIntensity * pulse, 0.0, 1.0);\n        intensity2 = clamp(intensity2 * 0.02 * colorIntensity * pulse, 0.0, 1.0);\n        intensity3 = clamp(intensity3 * 0.02 * colorIntensity * pulse, 0.0, 1.0);\n        \n        // Blend colors with background based on intensity\n        vec3 finalColor = backgroundColor;\n        finalColor = mix(finalColor, color1, intensity1);\n        finalColor = mix(finalColor, color2, intensity2);\n        finalColor = mix(finalColor, color3, intensity3);\n\n        gl_FragColor = vec4(finalColor, 1.0);\n      }\n    `;// Create material\nconst material=new THREE.ShaderMaterial({uniforms:uniforms,vertexShader:vertexShader,fragmentShader:fragmentShader});// Create mesh and add to scene\nconst mesh=new THREE.Mesh(geometry,material);scene.add(mesh);// Initialize renderer\nconst renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(window.devicePixelRatio);container.appendChild(renderer.domElement);// Ensure canvas fills container\nrenderer.domElement.style.width=\"100%\";renderer.domElement.style.height=\"100%\";renderer.domElement.style.display=\"block\";// Handle resize\nconst onWindowResize=()=>{const rect=container.getBoundingClientRect();renderer.setSize(rect.width,rect.height);uniforms.resolution.value.x=renderer.domElement.width;uniforms.resolution.value.y=renderer.domElement.height;};onWindowResize();window.addEventListener(\"resize\",onWindowResize,false);// Add ResizeObserver to watch container size changes\nconst resizeObserver=new ResizeObserver(()=>{onWindowResize();});resizeObserver.observe(container);// Store references\nsceneRef.current={camera,scene,renderer,uniforms,animationId:null,resizeHandler:onWindowResize,resizeObserver};// Animation loop\nconst animate=()=>{sceneRef.current.animationId=requestAnimationFrame(animate);uniforms.time.value+=.05*speed;renderer.render(scene,camera);};animate();};if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",backgroundColor,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",color:\"#FFFFFF\",fontSize:\"14px\",fontFamily:\"sans-serif\"},children:\"WebGL Shader Preview\"});}return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",backgroundColor,borderRadius:props.radius}});}addPropertyControls(ShaderAnimation,{speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1,min:.1,max:5,step:.1},pulseFrequency:{type:ControlType.Number,title:\"Pulse Speed\",defaultValue:1,min:.1,max:10,step:.1},pulseAmplitude:{type:ControlType.Number,title:\"Pulse Amount\",defaultValue:.5,min:0,max:2,step:.1},movementSpeedX:{type:ControlType.Number,title:\"Move Speed X\",defaultValue:1,min:-5,max:5,step:.1},movementSpeedY:{type:ControlType.Number,title:\"Move Speed Y\",defaultValue:1,min:-5,max:5,step:.1},movementDirection:{type:ControlType.Number,title:\"Direction\",defaultValue:0,min:0,max:360,step:1,unit:\"deg\"},patternVariation:{type:ControlType.Number,title:\"Variation\",defaultValue:.4,min:0,max:2,step:.1},mosaicScaleX:{type:ControlType.Number,title:\"Mosaic X\",defaultValue:4,min:1,max:20,step:.5},mosaicScaleY:{type:ControlType.Number,title:\"Mosaic Y\",defaultValue:2,min:1,max:20,step:.5},lineWidth:{type:ControlType.Number,title:\"Line Width\",defaultValue:8e-4,min:1e-4,max:.01,step:1e-4},colorIntensity:{type:ControlType.Number,title:\"Intensity\",defaultValue:1,min:.1,max:3,step:.1},color1:{type:ControlType.Color,title:\"Color 1\",defaultValue:\"#FF0000\"},color2:{type:ControlType.Color,title:\"Color 2\",defaultValue:\"#00FF00\"},color3:{type:ControlType.Color,title:\"Color 3\",defaultValue:\"#0000FF\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},radius:{type:ControlType.Number,title:\"Radius\",defaultValue:0,min:0,max:100}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ShaderAnimation\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ShaderAnimation_1.map"],"mappings":"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"}