{"version":3,"file":"Floating_Animation.GiD4MPHg.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/A3bu6ZFgbc7Mg8VXV5kQ/zLE1kDPQbzTeVcbx4RIx/Floating_Animation.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{Renderer,Program,Mesh,Triangle}from\"ogl\";import{addPropertyControls,ControlType}from\"framer\";const VERT=`#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;const FRAG=`#version 300 es\nprecision highp float;\n\nuniform float uTime;\nuniform float uAmplitude;\nuniform vec3 uColorStops[3];\nuniform vec2 uResolution;\nuniform float uBlend;\n\nout vec4 fragColor;\n\nvec3 permute(vec3 x) {\n  return mod(((x * 34.0) + 1.0) * x, 289.0);\n}\n\nfloat snoise(vec2 v){\n  const vec4 C = vec4(\n      0.211324865405187, 0.366025403784439,\n      -0.577350269189626, 0.024390243902439\n  );\n  vec2 i  = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n\n  vec3 p = permute(\n      permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0)\n  );\n\n  vec3 m = max(\n      0.5 - vec3(\n          dot(x0, x0),\n          dot(x12.xy, x12.xy),\n          dot(x12.zw, x12.zw)\n      ), \n      0.0\n  );\n  m = m * m;\n  m = m * m;\n\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n\n  vec3 g;\n  g.x  = a0.x  * x0.x  + h.x  * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n\nstruct ColorStop {\n  vec3 color;\n  float position;\n};\n\n#define COLOR_RAMP(colors, factor, finalColor) {              \\\n  int index = 0;                                            \\\n  for (int i = 0; i < 2; i++) {                               \\\n     ColorStop currentColor = colors[i];                    \\\n     bool isInBetween = currentColor.position <= factor;    \\\n     index = int(mix(float(index), float(i), float(isInBetween))); \\\n  }                                                         \\\n  ColorStop currentColor = colors[index];                   \\\n  ColorStop nextColor = colors[index + 1];                  \\\n  float range = nextColor.position - currentColor.position; \\\n  float lerpFactor = (factor - currentColor.position) / range; \\\n  finalColor = mix(currentColor.color, nextColor.color, lerpFactor); \\\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / uResolution;\n  \n  ColorStop colors[3];\n  colors[0] = ColorStop(uColorStops[0], 0.0);\n  colors[1] = ColorStop(uColorStops[1], 0.5);\n  colors[2] = ColorStop(uColorStops[2], 1.0);\n  \n  vec3 rampColor;\n  COLOR_RAMP(colors, uv.x, rampColor);\n  \n  float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;\n  height = exp(height);\n  height = (uv.y * 2.0 - height + 0.2);\n  float intensity = 0.6 * height;\n  \n  float midPoint = 0.20;\n  float animationAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);\n  \n  vec3 finalColor = rampColor;\n  \n  fragColor = vec4(finalColor * animationAlpha, animationAlpha);\n}\n`;function parseColor(color,defaultColor=[1,0,0]){if(color===undefined||color===null||color===\"\"){return defaultColor;}if(typeof color===\"object\"){if(\"r\"in color&&\"g\"in color&&\"b\"in color){return[(color.r||0)/255,(color.g||0)/255,(color.b||0)/255];}if(\"r\"in color&&color.r<=1&&color.g<=1&&color.b<=1){return[color.r||0,color.g||0,color.b||0];}const values=Object.values(color).filter(v=>typeof v===\"number\");if(values.length>=3){const maxVal=Math.max(...values);if(maxVal>1){return[values[0]/255,values[1]/255,values[2]/255];}return[values[0],values[1],values[2]];}return defaultColor;}if(typeof color===\"string\"){const cleanColor=color.trim();if(cleanColor.startsWith(\"#\")){const hex=cleanColor.length===4?\"#\"+cleanColor[1]+cleanColor[1]+cleanColor[2]+cleanColor[2]+cleanColor[3]+cleanColor[3]:cleanColor;const result=/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);if(result){return[parseInt(result[1],16)/255,parseInt(result[2],16)/255,parseInt(result[3],16)/255];}}const rgbMatch=cleanColor.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/i);if(rgbMatch){return[parseInt(rgbMatch[1])/255,parseInt(rgbMatch[2])/255,parseInt(rgbMatch[3])/255];}}return defaultColor;}export default function FloatingAnimation(props){const{colorStops=[\"#FF2638\",\"#7cff67\",\"#5227FF\"],amplitude=1,blend=.5,speed=1,height=\"100%\"}=props;const propsRef=useRef(props);propsRef.current=props;const ctnDom=useRef(null);useEffect(()=>{const ctn=ctnDom.current;if(!ctn)return;const renderer=new Renderer({alpha:true,premultipliedAlpha:true,antialias:true});const gl=renderer.gl;gl.clearColor(0,0,0,0);gl.enable(gl.BLEND);gl.blendFunc(gl.ONE,gl.ONE_MINUS_SRC_ALPHA);gl.canvas.style.width=\"100%\";gl.canvas.style.height=\"100%\";gl.canvas.style.display=\"block\";gl.canvas.style.backgroundColor=\"transparent\";// Declare variables here so they can be used in resize()\nlet program;let mesh;const geometry=new Triangle(gl);if(geometry.attributes.uv){delete geometry.attributes.uv;}const defaultColors=[[1,.15,.22],[.49,1,.4],[.32,.15,1]];const colorStopsArray=(colorStops||[]).map((color,index)=>{return parseColor(color,defaultColors[index]||[1,0,0]);});program=new Program(gl,{vertex:VERT,fragment:FRAG,uniforms:{uTime:{value:0},uAmplitude:{value:amplitude},uColorStops:{value:colorStopsArray},uResolution:{value:[ctn.offsetWidth,ctn.offsetHeight]},uBlend:{value:blend}}});mesh=new Mesh(gl,{geometry,program});ctn.appendChild(gl.canvas);// 🔴 FIX: Define resize function AFTER mesh is created\nfunction resize(){if(!ctn)return;const width=ctn.offsetWidth;const height=ctn.offsetHeight;// 1. Resize the canvas buffer (this clears the canvas!)\nrenderer.setSize(width,height);// 2. Update uniforms\nif(program){program.uniforms.uResolution.value=[width,height];// Recalculate amplitude scaling instantly\nconst baseHeight=800;const currentHeight=height||1;const scaleFactor=baseHeight/currentHeight;const baseAmp=propsRef.current.amplitude??amplitude;program.uniforms.uAmplitude.value=baseAmp*scaleFactor;}// 3. 🔴 FORCE RENDER IMMEDIATELY\n// This fills the canvas with pixels before the browser can show the black frame\nrenderer.render({scene:mesh});}const resizeObserver=new ResizeObserver(()=>{resize();});resizeObserver.observe(ctn);// Initial resize\nresize();let animateId=0;const update=t=>{animateId=requestAnimationFrame(update);const currentProps=propsRef.current;const time=t*.001*(currentProps.speed??speed);if(program&&ctn){program.uniforms.uTime.value=time;// Keep amplitude logic in the loop too for smooth property updates\nconst baseHeight=800;const currentHeight=ctn.offsetHeight||1;const scaleFactor=baseHeight/currentHeight;const baseAmp=currentProps.amplitude??amplitude;program.uniforms.uAmplitude.value=baseAmp*scaleFactor;program.uniforms.uBlend.value=currentProps.blend??blend;const stops=currentProps.colorStops||colorStops;if(stops&&Array.isArray(stops)&&stops.length>=3){const newColorStops=stops.map((color,index)=>{return parseColor(color,defaultColors[index]||[1,0,0]);});program.uniforms.uColorStops.value=newColorStops;}renderer.render({scene:mesh});}};animateId=requestAnimationFrame(update);return()=>{cancelAnimationFrame(animateId);resizeObserver.disconnect();if(ctn&&gl.canvas.parentNode===ctn){ctn.removeChild(gl.canvas);}gl.getExtension(\"WEBGL_lose_context\")?.loseContext();};},[]);return /*#__PURE__*/_jsx(\"div\",{ref:ctnDom,style:{width:\"100%\",height,position:\"relative\",overflow:\"hidden\",background:\"transparent\"}});}addPropertyControls(FloatingAnimation,{colorStops:{type:ControlType.Array,title:\"Color Stops\",control:{type:ControlType.Color},defaultValue:[\"#FF2638\",\"#7cff67\",\"#5227FF\"],maxCount:3},amplitude:{type:ControlType.Number,title:\"Wave Height\",defaultValue:1,min:0,max:5,step:.1,displayStepper:true},blend:{type:ControlType.Number,title:\"Softness\",defaultValue:.5,min:0,max:1,step:.05,displayStepper:true},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:1,min:0,max:5,step:.1,displayStepper:true},height:{type:ControlType.String,title:\"Animation height\",defaultValue:\"100%\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FloatingAnimation\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Floating_Animation.map"],"mappings":"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"}