@firecms/neat 0.6.0 → 0.7.1

package/dist/index.umd.js

@@ -1,10 +1,4 @@
-(function(O,B){typeof exports=="object"&&typeof module<"u"?B(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],B):(O=typeof globalThis<"u"?globalThis:O||self,B(O.FireCMS={},O.THREE))})(this,function(O,B){"use strict";function te(o){if(o&&o.__esModule)return o;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(e,s,t.get?t:{enumerable:!0,get:()=>o[s]})}}return e.default=o,Object.freeze(e)}const n=te(B);console.info(`%c\u{1F308} Neat Gradients%c
-
-Licensed under MIT + The Commons Clause.
-Free for personal and commercial use.
-Selling this software or its derivatives is strictly prohibited.
-https://neat.firecms.co`,"font-weight: bold; font-size: 14px; color: #FF5772;","color: inherit;");const E=50,U=80,oe=!0,V=6,se=new n.Clock,K=ue();class ie{_ref;_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_grainScale=-1;_grainIntensity=-1;_grainSparsity=-1;_grainSpeed=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundAlpha=1;_flowDistortionA=0;_flowDistortionB=0;_flowScale=1;_flowEase=0;_flowEnabled=!0;_mouseDistortionStrength=0;_mouseDistortionRadius=.25;_mouseDecayRate=.96;_mouseDarken=0;_mouse=new n.Vector2(-1e3,-1e3);_mouseFBO=null;_sceneMouse=null;_cameraMouse=null;_mouseObjects=[];_currentBrush=0;_mouseBrushBaseScale=1;_enableProceduralTexture=!1;_textureVoidLikelihood=.45;_textureVoidWidthMin=200;_textureVoidWidthMax=486;_textureBandDensity=2.15;_textureColorBlending=.01;_textureSeed=333;_textureEase=.5;_proceduralTexture=null;_proceduralBackgroundColor="#000000";_textureShapeTriangles=20;_textureShapeCircles=15;_textureShapeBars=15;_textureShapeSquiggles=10;requestRef=-1;sizeObserver;sceneState;_cachedUniforms=null;_linkElement=null;_yOffset=0;_yOffsetWaveMultiplier=.004;_yOffsetColorMultiplier=.004;_yOffsetFlowMultiplier=.004;_tempClearColor=new n.Color;_resizeTimeoutId=null;_textureNeedsUpdate=!1;_lastColorUpdate=0;_linkCheckCounter=0;_mouseUpdateScheduled=!1;_pendingMousePosition=null;_colorsChanged=!0;constructor(e){const{ref:s,speed:t=4,horizontalPressure:d=3,verticalPressure:c=3,waveFrequencyX:i=5,waveFrequencyY:p=5,waveAmplitude:g=3,colors:f,highlights:m=4,shadows:u=4,colorSaturation:v=0,colorBrightness:T=1,colorBlending:M=5,grainScale:z=2,grainIntensity:y=.55,grainSparsity:D=0,grainSpeed:C=.1,wireframe:a=!1,backgroundColor:l="#FFFFFF",backgroundAlpha:h=1,resolution:_=1,seed:b,yOffset:q=0,yOffsetWaveMultiplier:j=4,yOffsetColorMultiplier:G=4,yOffsetFlowMultiplier:he=4,flowDistortionA:de=0,flowDistortionB:fe=0,flowScale:pe=1,flowEase:me=0,flowEnabled:ve=!0,mouseDistortionStrength:ge=0,mouseDistortionRadius:xe=.25,mouseDecayRate:ye=.96,mouseDarken:we=0,enableProceduralTexture:be=!1,textureVoidLikelihood:Se=.45,textureVoidWidthMin:ze=200,textureVoidWidthMax:Ce=486,textureBandDensity:Me=2.15,textureColorBlending:Pe=.01,textureSeed:Oe=333,textureEase:Te=.5,proceduralBackgroundColor:Fe="#000000",textureShapeTriangles:Be=20,textureShapeCircles:Ee=15,textureShapeBars:Ue=15,textureShapeSquiggles:De=10}=e;this._ref=s,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this._buildMaterial=this._buildMaterial.bind(this),this.speed=t,this.horizontalPressure=d,this.verticalPressure=c,this.waveFrequencyX=i,this.waveFrequencyY=p,this.waveAmplitude=g,this.colorBlending=M,this.grainScale=z,this.grainIntensity=y,this.grainSparsity=D,this.grainSpeed=C,this.colors=f,this.shadows=u,this.highlights=m,this.colorSaturation=v,this.colorBrightness=T,this.wireframe=a,this.backgroundColor=l,this.backgroundAlpha=h,this.yOffset=q,this.yOffsetWaveMultiplier=j,this.yOffsetColorMultiplier=G,this.yOffsetFlowMultiplier=he,this.flowDistortionA=de,this.flowDistortionB=fe,this.flowScale=pe,this.flowEase=me,this.flowEnabled=ve,this.mouseDistortionStrength=ge,this.mouseDistortionRadius=xe,this.mouseDecayRate=ye,this.mouseDarken=we,this.enableProceduralTexture=be,this.textureVoidLikelihood=Se,this.textureVoidWidthMin=ze,this.textureVoidWidthMax=Ce,this.textureBandDensity=Me,this.textureColorBlending=Pe,this.textureSeed=Oe,this.textureEase=Te,this._proceduralBackgroundColor=Fe,this._textureShapeTriangles=Be,this._textureShapeCircles=Ee,this._textureShapeBars=Ue,this._textureShapeSquiggles=De,this._setupMouseInteraction(),this.sceneState=this._initScene(_),_e();let $=b!==void 0?b:le();const ee=()=>{const{renderer:w,camera:W,scene:F}=this.sceneState;if(this._linkCheckCounter++,this._linkCheckCounter>=300&&(this._linkCheckCounter=0,(!this._linkElement||!document.contains(this._linkElement))&&(this._linkElement=ne(s))),this._cachedUniforms){const r=this._cachedUniforms;$+=se.getDelta()*this._speed,r.u_time.value=$,r.u_resolution.value.set(this._ref.width,this._ref.height),r.u_color_pressure.value.set(this._horizontalPressure,this._verticalPressure),r.u_wave_frequency_x.value=this._waveFrequencyX,r.u_wave_frequency_y.value=this._waveFrequencyY,r.u_wave_amplitude.value=this._waveAmplitude,r.u_color_blending.value=this._colorBlending,r.u_shadows.value=this._shadows,r.u_highlights.value=this._highlights,r.u_saturation.value=this._saturation,r.u_brightness.value=this._brightness,r.u_grain_intensity.value=this._grainIntensity,r.u_grain_sparsity.value=this._grainSparsity,r.u_grain_speed.value=this._grainSpeed,r.u_grain_scale.value=this._grainScale,r.u_y_offset.value=this._yOffset,r.u_y_offset_wave_multiplier.value=this._yOffsetWaveMultiplier,r.u_y_offset_color_multiplier.value=this._yOffsetColorMultiplier,r.u_y_offset_flow_multiplier.value=this._yOffsetFlowMultiplier,r.u_flow_distortion_a.value=this._flowDistortionA,r.u_flow_distortion_b.value=this._flowDistortionB,r.u_flow_scale.value=this._flowScale,r.u_flow_ease.value=this._flowEase,r.u_flow_enabled.value=this._flowEnabled?1:0,r.u_mouse_distortion_strength.value=this._mouseDistortionStrength,r.u_mouse_distortion_radius.value=this._mouseDistortionRadius,r.u_mouse_darken.value=this._mouseDarken,r.u_enable_procedural_texture.value=this._enableProceduralTexture?1:0,this._textureNeedsUpdate&&this._enableProceduralTexture&&(this._proceduralTexture&&this._proceduralTexture.dispose(),this._proceduralTexture=this._createProceduralTexture(),this._textureNeedsUpdate=!1),r.u_procedural_texture.value=this._proceduralTexture,r.u_texture_ease.value=this._textureEase,this.sceneState.meshes[0].material.wireframe=this._wireframe;const x=Date.now();if(this._colorsChanged||x-this._lastColorUpdate>100){this._lastColorUpdate=x,this._colorsChanged=!1;const L=r.u_colors.value;for(let P=0;P<V;P++)if(P<this._colors.length){const X=this._colors[P];L[P].is_active=X.enabled?1:0,L[P].color.setStyle(X.color,""),L[P].influence=X.influence||0}else L[P].is_active=0;r.u_colors_count.value=V}}if(this._mouseFBO&&this._sceneMouse&&this._cameraMouse&&this._mouseDistortionStrength>0){let r=!1;for(let x=0;x<this._mouseObjects.length;x++){const S=this._mouseObjects[x];S.mesh.visible&&(r=!0,S.mesh.rotation.z+=.01,S.mesh.material instanceof n.MeshBasicMaterial&&(S.mesh.material.opacity*=this._mouseDecayRate,S.mesh.material.opacity<.01&&(S.mesh.visible=!1)))}if(r){w.getClearColor(this._tempClearColor);const x=w.getClearAlpha();w.setClearColor(0,0),w.setRenderTarget(this._mouseFBO),w.clear(),w.render(this._sceneMouse,this._cameraMouse),w.setRenderTarget(null),w.setClearColor(this._tempClearColor,x),this._cachedUniforms&&(this._cachedUniforms.u_mouse_texture.value=this._mouseFBO.texture)}}w.setClearColor(this._backgroundColor,this._backgroundAlpha),w.render(F,W),this.requestRef=requestAnimationFrame(ee)},qe=()=>{const{renderer:w}=this.sceneState,W=w.domElement,F=W.clientWidth,r=W.clientHeight;if(this.sceneState.renderer.setSize(F,r,!1),H(this.sceneState.camera,F,r),this._mouseFBO&&this._cameraMouse){const x=r/2,S=F/r;this._mouseFBO.setSize(F/2,r/2),this._cameraMouse.left=-x*S,this._cameraMouse.right=x*S,this._cameraMouse.top=x,this._cameraMouse.bottom=-x,this._cameraMouse.updateProjectionMatrix()}};this.sizeObserver=new ResizeObserver(()=>{this._resizeTimeoutId!==null&&clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=window.setTimeout(()=>{qe(),this._resizeTimeoutId=null},100)}),this.sizeObserver.observe(s),ee()}destroy(){this&&(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect(),this._resizeTimeoutId!==null&&(clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=null),this.sceneState&&(this.sceneState.renderer.dispose(),this.sceneState.meshes.forEach(e=>{e.geometry.dispose(),Array.isArray(e.material)?e.material.forEach(s=>s.dispose()):e.material.dispose()})),this._mouseFBO&&this._mouseFBO.dispose(),this._proceduralTexture&&this._proceduralTexture.dispose())}downloadAsPNG(e="neat.png"){console.log("Downloading as PNG",this._ref);const s=this._ref.toDataURL("image/png");console.log("data",s),ce(s,e)}set speed(e){this._speed=e/20}set horizontalPressure(e){this._horizontalPressure=e/4}set verticalPressure(e){this._verticalPressure=e/4}set waveFrequencyX(e){this._waveFrequencyX=e*.04}set waveFrequencyY(e){this._waveFrequencyY=e*.04}set waveAmplitude(e){this._waveAmplitude=e*.75}set colors(e){this._colors=e,this._colorsChanged=!0}set highlights(e){this._highlights=e/100}set shadows(e){this._shadows=e/100}set colorSaturation(e){this._saturation=e/10}set colorBrightness(e){this._brightness=e}set colorBlending(e){this._colorBlending=e/10}set grainScale(e){this._grainScale=e==0?1:e}set grainIntensity(e){this._grainIntensity=e}set grainSparsity(e){this._grainSparsity=e}set grainSpeed(e){this._grainSpeed=e}set wireframe(e){this._wireframe=e}set resolution(e){this.sceneState=this._initScene(e)}set backgroundColor(e){this._backgroundColor=e}set backgroundAlpha(e){this._backgroundAlpha=e}set yOffset(e){this._yOffset=e}get yOffsetWaveMultiplier(){return this._yOffsetWaveMultiplier*1e3}set yOffsetWaveMultiplier(e){this._yOffsetWaveMultiplier=e/1e3}get yOffsetColorMultiplier(){return this._yOffsetColorMultiplier*1e3}set yOffsetColorMultiplier(e){this._yOffsetColorMultiplier=e/1e3}get yOffsetFlowMultiplier(){return this._yOffsetFlowMultiplier*1e3}set yOffsetFlowMultiplier(e){this._yOffsetFlowMultiplier=e/1e3}set flowDistortionA(e){this._flowDistortionA=e}set flowDistortionB(e){this._flowDistortionB=e}set flowScale(e){this._flowScale=e}set flowEase(e){this._flowEase=e}set flowEnabled(e){this._flowEnabled=e}get flowEnabled(){return this._flowEnabled}set mouseDistortionStrength(e){this._mouseDistortionStrength=Math.max(0,e)}set mouseDistortionRadius(e){this._mouseDistortionRadius=Math.max(.01,Math.min(e,1)),this._updateBrushScale()}_updateBrushScale(){!this._mouseObjects||this._mouseObjects.length===0||(this._mouseBrushBaseScale=this._mouseDistortionRadius)}set mouseDecayRate(e){this._mouseDecayRate=Math.max(.9,Math.min(e,.99))}set mouseDarken(e){this._mouseDarken=e}set enableProceduralTexture(e){this._enableProceduralTexture=e,e&&!this._proceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidLikelihood(e){this._textureVoidLikelihood=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMin(e){this._textureVoidWidthMin=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMax(e){this._textureVoidWidthMax=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureBandDensity(e){this._textureBandDensity=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureColorBlending(e){this._textureColorBlending=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureSeed(e){this._textureSeed=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureEase(){return this._textureEase}set textureEase(e){this._textureEase=e}set proceduralBackgroundColor(e){this._proceduralBackgroundColor=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeTriangles(e){this._textureShapeTriangles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeCircles(e){this._textureShapeCircles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeBars(e){this._textureShapeBars=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeSquiggles(e){this._textureShapeSquiggles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}_initScene(e){const s=this._ref.width,t=this._ref.height;this.sceneState&&this.sceneState.renderer&&(this.sceneState.renderer.dispose(),this.sceneState.meshes.forEach(u=>{u.geometry.dispose(),Array.isArray(u.material)?u.material.forEach(v=>v.dispose()):u.material.dispose()}));const d=new n.WebGLRenderer({alpha:!0,preserveDrawingBuffer:!0,canvas:this._ref});d.setClearColor(16711680,.5),d.setSize(s,t,!1);const c=[],i=new n.Scene,p=this._buildMaterial(s,t),g=new n.PlaneGeometry(E,U,240*e,240*e),f=new n.Mesh(g,p);f.rotation.x=-Math.PI/3.5,f.position.z=-1,c.push(f),i.add(f);const m=new n.OrthographicCamera(0,0,0,0,0,0);return m.position.z=5,H(m,s,t),{renderer:d,camera:m,scene:i,meshes:c,resolution:e}}_buildMaterial(e,s){const t=Array.from({length:V}).map((i,p)=>({is_active:p<this._colors.length&&this._colors[p].enabled?1:0,color:new n.Color(p<this._colors.length?this._colors[p].color:0),influence:p<this._colors.length&&this._colors[p].influence||0})),d={u_time:{value:0},u_color_pressure:{value:new n.Vector2(this._horizontalPressure,this._verticalPressure)},u_wave_frequency_x:{value:this._waveFrequencyX},u_wave_frequency_y:{value:this._waveFrequencyY},u_wave_amplitude:{value:this._waveAmplitude},u_resolution:{value:new n.Vector2(e,s)},u_colors:{value:t},u_colors_count:{value:this._colors.length},u_plane_width:{value:E},u_plane_height:{value:U},u_shadows:{value:this._shadows},u_highlights:{value:this._highlights},u_grain_intensity:{value:this._grainIntensity},u_grain_sparsity:{value:this._grainSparsity},u_grain_scale:{value:this._grainScale},u_grain_speed:{value:this._grainSpeed},u_flow_distortion_a:{value:this._flowDistortionA},u_flow_distortion_b:{value:this._flowDistortionB},u_flow_scale:{value:this._flowScale},u_flow_ease:{value:this._flowEase},u_flow_enabled:{value:this._flowEnabled?1:0},u_y_offset:{value:this._yOffset},u_y_offset_wave_multiplier:{value:this._yOffsetWaveMultiplier},u_y_offset_color_multiplier:{value:this._yOffsetColorMultiplier},u_y_offset_flow_multiplier:{value:this._yOffsetFlowMultiplier},u_mouse_distortion_strength:{value:this._mouseDistortionStrength},u_mouse_distortion_radius:{value:this._mouseDistortionRadius},u_mouse_darken:{value:this._mouseDarken},u_mouse_texture:{value:this._mouseFBO?this._mouseFBO.texture:null},u_procedural_texture:{value:this._proceduralTexture},u_enable_procedural_texture:{value:this._enableProceduralTexture?1:0},u_texture_ease:{value:this._textureEase},u_saturation:{value:this._saturation},u_brightness:{value:this._brightness},u_color_blending:{value:this._colorBlending}},c=new n.ShaderMaterial({uniforms:d,vertexShader:Y()+J()+Z()+re(),fragmentShader:Y()+Z()+J()+ae()});return this._cachedUniforms=d,c.wireframe=oe,c}_setupMouseInteraction(){if(!this._ref)return;const e=this._ref.width,s=this._ref.height;this._mouseFBO=new n.WebGLRenderTarget(e/2,s/2),this._sceneMouse=new n.Scene;const t=s/2,d=e/s;this._cameraMouse=new n.OrthographicCamera(-t*d,t*d,t,-t,0,1e4),this._cameraMouse.position.set(0,0,100);const c=document.createElement("canvas");c.width=128,c.height=128;const i=c.getContext("2d");if(i){const u=i.createRadialGradient(64,64,0,64,64,64);u.addColorStop(0,"rgba(255,255,255,0.8)"),u.addColorStop(.5,"rgba(255,255,255,0.4)"),u.addColorStop(1,"rgba(255,255,255,0)"),i.fillStyle=u,i.fillRect(0,0,128,128)}const p=new n.CanvasTexture(c),g=new n.MeshBasicMaterial({map:p,transparent:!0,opacity:1,depthTest:!1,blending:n.AdditiveBlending}),f=new n.PlaneGeometry(200,200),m=50;for(let u=0;u<m;u++){const v=new n.Mesh(f,g.clone());v.visible=!1,this._sceneMouse.add(v),this._mouseObjects.push({mesh:v,active:!1})}this._updateBrushScale(),this._ref.addEventListener("mousemove",this._onMouseMove.bind(this))}_onMouseMove(e){if(!this._ref||!this._sceneMouse)return;const s=this._ref.getBoundingClientRect(),t=this._ref.width,d=this._ref.height;this._pendingMousePosition={x:e.clientX-s.left-t/2,y:-(e.clientY-s.top-d/2)},this._mouseUpdateScheduled||(this._mouseUpdateScheduled=!0,requestAnimationFrame(()=>{if(this._mouseUpdateScheduled=!1,!this._pendingMousePosition)return;this._mouse.x=this._pendingMousePosition.x,this._mouse.y=this._pendingMousePosition.y;const c=this._mouseObjects[this._currentBrush];c.mesh.scale.set(this._mouseBrushBaseScale,this._mouseBrushBaseScale,1),c.active=!0,c.mesh.visible=!0,c.mesh.position.set(this._mouse.x,this._mouse.y,0),c.mesh.rotation.z=Math.random()*Math.PI*2,c.mesh.material instanceof n.MeshBasicMaterial&&(c.mesh.material.opacity=1),this._currentBrush=(this._currentBrush+1)%this._mouseObjects.length,this._pendingMousePosition=null}))}_createProceduralTexture(){const s=document.createElement("canvas");s.width=1024,s.height=1024;const t=s.getContext("2d",{willReadFrequently:!0});if(!t)return new n.Texture;let d=this._textureSeed;const c=this._textureSeed;function i(){const a=Math.sin(d++)*1e4;return a-Math.floor(a)}const p=a=>{d=c+a},g=this._colors.filter(a=>a.enabled).map(a=>a.color);if(g.length===0)return new n.Texture;function f(a){const l=parseInt(a.replace("#",""),16);return{r:l>>16&255,g:l>>8&255,b:l&255}}function m(a,l,h){return"#"+((1<<24)+(Math.round(a)<<16)+(Math.round(l)<<8)+Math.round(h)).toString(16).slice(1)}const u=()=>{const a=g[Math.floor(i()*g.length)],l=g[Math.floor(i()*g.length)],h=i()*this._textureColorBlending,_=f(a),b=f(l),q=_.r+(b.r-_.r)*h,j=_.g+(b.g-_.g)*h,G=_.b+(b.b-_.b)*h;return m(q,j,G)},v=this._proceduralBackgroundColor||"#000000";t.fillStyle=v,t.fillRect(0,0,1024,1024);const T=t.createLinearGradient(0,0,0,1024);T.addColorStop(0,u()),T.addColorStop(1,u()),t.fillStyle=T,t.fillRect(0,0,1024,1024);for(let a=0;a<this._textureShapeTriangles;a++){t.fillStyle=u(),t.beginPath();const l=i()*1024,h=i()*1024,_=100+i()*300;t.moveTo(l,h),t.lineTo(l+(i()-.5)*_,h+(i()-.5)*_),t.lineTo(l+(i()-.5)*_,h+(i()-.5)*_),t.fill()}for(let a=0;a<this._textureShapeCircles;a++){t.strokeStyle=u(),t.lineWidth=10+i()*50,t.beginPath();const l=i()*1024,h=i()*1024,_=50+i()*150;t.arc(l,h,_,0,Math.PI*2),t.stroke()}for(let a=0;a<this._textureShapeBars;a++)t.fillStyle=u(),t.save(),t.translate(i()*1024,i()*1024),t.rotate(i()*Math.PI),t.fillRect(-150,-25,300,50),t.restore();t.lineWidth=15,t.lineCap="round";for(let a=0;a<this._textureShapeSquiggles;a++){t.strokeStyle=u(),t.beginPath();let l=i()*1024,h=i()*1024;t.moveTo(l,h);for(let _=0;_<4;_++)t.bezierCurveTo(l+(i()-.5)*300,h+(i()-.5)*300,l+(i()-.5)*300,h+(i()-.5)*300,l+(i()-.5)*300,h+(i()-.5)*300),l+=(i()-.5)*300,h+=(i()-.5)*300;t.stroke()}p(5e4);const M=document.createElement("canvas");M.width=1024,M.height=1024;const z=M.getContext("2d",{willReadFrequently:!0});if(!z)return new n.Texture;z.fillStyle=v,z.fillRect(0,0,1024,1024);let y=0;const D=[];for(;y<1024;)if(i()<this._textureVoidLikelihood){const l=this._textureVoidWidthMin+i()*(this._textureVoidWidthMax-this._textureVoidWidthMin);D.push({type:"void",x:y,width:l}),y+=l}else{const l=50+i()*200;D.push({type:"matter",x:y,width:l}),y+=l}for(const a of D)if(a.type==="matter"){const l=a.x,h=Math.min(a.x+a.width,1024);let _=l;for(;_<h;){const b=(2+i()*20)/this._textureBandDensity,q=Math.floor(i()*1024);z.drawImage(s,q,0,b,1024,_,0,b,1024),_+=b}}const C=new n.CanvasTexture(M);return C.minFilter=n.LinearMipmapLinearFilter,C.magFilter=n.LinearFilter,C.wrapS=n.RepeatWrapping,C.wrapT=n.RepeatWrapping,C.anisotropy=16,C.needsUpdate=!0,C}}function H(o,e,s){const c=e*s/1e6*E*U/1.5,i=e/s,p=Math.sqrt(c*i),g=c/p;let f=-E/2,m=Math.min((f+p)/1.5,E/2),u=U/4,v=Math.max((u-g)/2,-U/4);if(i<1){const z=i;f=f*z,m=m*z;const y=1.05;f=f*y,m=m*y,u=u*y,v=v*y}const T=-100,M=1e3;o instanceof n.OrthographicCamera?(o.left=f,o.right=m,o.top=u,o.bottom=v,o.near=T,o.far=M,o.updateProjectionMatrix()):o instanceof n.PerspectiveCamera&&(o.aspect=e/s,o.updateProjectionMatrix())}let k=null,R=null;function re(){return k||(k=`
-void main() {
+(function(F,M){typeof exports=="object"&&typeof module<"u"?M(exports):typeof define=="function"&&define.amd?define(["exports"],M):(F=typeof globalThis<"u"?globalThis:F||self,M(F.neat={}))})(this,function(F){"use strict";const M=`void main() {
     vUv = uv;
 
     // SCROLLING LOGIC
@@ -40,13 +34,14 @@ void main() {
         }
     }
 
-    // Pass the standard flow UV to fragment shader (for mouse/texture)
+    // Pass the standard flow UV to fragment shader (for texture)
     vFlowUv = flowUv;
 
     // 3. COLOR MIXING
     // We take the computed flow UVs and apply the color offset
     // Scale by plane height to match wave offset speed (world space vs UV space)
     vec3 color = u_colors[0].color;
+    // ...
     vec2 adjustedUv = flowUv;
     adjustedUv.y += colorOffset / u_plane_height; // Scroll the color mixing pattern
 
@@ -54,22 +49,24 @@ void main() {
     const float minNoise = .0;
     const float maxNoise = .9;
 
-    for (int i = 1; i < u_colors_count; i++) {
-        if(u_colors[i].is_active > 0.5){
-            float noiseFlow = (1. + float(i)) / 30.;
-            float noiseSpeed = (1. + float(i)) * 0.11;
-            float noiseSeed = 13. + float(i) * 7.;
-
-            float noise = snoise(
-                vec3(
-                    noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
-                    noise_cord.y * u_color_pressure.y,
-                    u_time * noiseSpeed
-                ) + noiseSeed
-            ) - (.1 * float(i)) + (.5 * u_color_blending);
-
-            noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
-            color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
+    for (int i = 1; i < 6; i++) {
+        if (i < u_colors_count) {
+            if (u_colors[i].is_active > 0.5) {
+                float noiseFlow = (1. + float(i)) / 30.;
+                float noiseSpeed = (1. + float(i)) * 0.11;
+                float noiseSeed = 13. + float(i) * 7.;
+
+                float noise = snoise(
+                    vec3(
+                        noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
+                        noise_cord.y * u_color_pressure.y,
+                        u_time * noiseSpeed
+                    ) + noiseSeed
+                ) - (.1 * float(i)) + (.5 * u_color_blending);
+
+                noise = clamp(noise, minNoise, maxNoise + float(i) * 0.02);
+                color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
+            }
         }
     }
 
@@ -80,8 +77,7 @@ void main() {
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
     v_new_position = gl_Position;
 }
-`,k)}function ae(){return R||(R=`
-float random(vec2 p) {
+`,te=`float random(vec2 p) {
     return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
 }
 
@@ -98,20 +94,8 @@ float fbm(vec3 x) {
 }
 
 void main() {
-    // MOUSE DISTORTION
     vec2 finalUv = vFlowUv;
     
-    if (u_mouse_distortion_strength > 0.0) {
-        vec4 mouseColor = texture2D(u_mouse_texture, vUv);
-        float mouseValue = mouseColor.r;
-        
-        if (mouseValue > 0.001) {
-            float distortionAmount = mouseValue * u_mouse_distortion_strength;
-            vec2 mouseDisp = vec2(distortionAmount, distortionAmount);
-            finalUv -= mouseDisp;
-        }
-    }
-    
     vec3 baseColor;
 
     if (u_enable_procedural_texture > 0.5) {
@@ -144,58 +128,67 @@ void main() {
     vec3 color = baseColor;
 
     // Post-processing
-    color += pow(v_displacement_amount, 1.0) * u_highlights;
-    color -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
+    color += v_displacement_amount * u_highlights;
+    // Replace pow() with direct multiplication to avoid negative base undefined behavior in GLSL
+    float shadowFactor = 1.0 - v_displacement_amount;
+    color -= shadowFactor * shadowFactor * u_shadows;
     color = saturation(color, 1.0 + u_saturation);
     color = color * u_brightness;
 
     // Grain
     vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
-    float grain = (u_grain_speed != 0.0) ? fbm(vec3(noiseCoords, u_time * u_grain_speed)) : fbm(vec3(noiseCoords, 0.0));
+    float grain = 0.0;
+    
+    // Completely bypass expensive noise generation if grain is disabled
+    if (u_grain_intensity > 0.0) {
+        if (u_grain_speed != 0.0) {
+            grain = fbm(vec3(noiseCoords, u_time * u_grain_speed));
+        } else {
+            grain = fbm(vec3(noiseCoords, 0.0));
+        }
 
-    grain = grain * 0.5 + 0.5;
-    grain -= 0.5;
-    grain = (grain > u_grain_sparsity) ? grain : 0.0;
-    grain *= u_grain_intensity;
+        grain = grain * 0.5 + 0.5;
+        grain -= 0.5;
+        grain = (grain > u_grain_sparsity) ? grain : 0.0;
+        grain *= u_grain_intensity;
+    }
 
     color += vec3(grain);
 
     gl_FragColor = vec4(color, 1.0);
 }
-    `,R)}let A=null;const Y=()=>A||(A=`
-precision highp float;
+`;function ie(){return`precision highp float;
 
-struct Color {
-    float is_active;
-    vec3 color;
-    float value;
-};
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
 
-uniform float u_grain_intensity; 
-uniform float u_grain_sparsity; 
-uniform float u_grain_scale; 
-uniform float u_grain_speed; 
-uniform float u_time;
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
 
-uniform float u_wave_amplitude;
-uniform float u_wave_frequency_x;
-uniform float u_wave_frequency_y;
+varying vec2 vUv;
+varying vec2 vFlowUv;
+varying vec4 v_new_position;
+varying vec3 v_color;
+varying float v_displacement_amount;
 
+uniform float u_time;
+uniform vec2 u_resolution;
 uniform vec2 u_color_pressure;
-
+uniform float u_wave_frequency_x;
+uniform float u_wave_frequency_y;
+uniform float u_wave_amplitude;
 uniform float u_plane_width;
 uniform float u_plane_height;
-
-uniform float u_shadows;
-uniform float u_highlights;
-uniform float u_saturation;
-uniform float u_brightness;
-
 uniform float u_color_blending;
 
 uniform int u_colors_count;
-uniform Color u_colors[6];
-uniform vec2 u_resolution;
+struct ColorStop {
+    float is_active;
+    vec3 color;
+    float influence;
+};
+uniform ColorStop u_colors[6];
 
 uniform float u_y_offset;
 uniform float u_y_offset_wave_multiplier;
@@ -208,26 +201,38 @@ uniform float u_flow_distortion_b;
 uniform float u_flow_scale;
 uniform float u_flow_ease;
 uniform float u_flow_enabled;
-
-// Mouse interaction uniforms
-uniform float u_mouse_distortion_strength;
-uniform float u_mouse_distortion_radius;
-uniform float u_mouse_darken;
-uniform sampler2D u_mouse_texture;
-
-// Procedural texture uniforms
-uniform sampler2D u_procedural_texture;
-uniform float u_enable_procedural_texture;
-uniform float u_texture_ease;
+`}function re(){return`precision highp float;
 
 varying vec2 vUv;
 varying vec2 vFlowUv;
-varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `,A);let I=null;const J=()=>I||(I=`
+uniform float u_time;
+uniform float u_plane_height;
 
+uniform float u_shadows;
+uniform float u_highlights;
+uniform float u_saturation;
+uniform float u_brightness;
+uniform float u_grain_intensity; 
+uniform float u_grain_sparsity; 
+uniform float u_grain_scale; 
+uniform float u_grain_speed; 
+
+uniform float u_y_offset;
+uniform float u_y_offset_color_multiplier;
+
+// Flow field uniforms
+uniform float u_flow_distortion_a;
+uniform float u_flow_distortion_b;
+uniform float u_flow_scale;
+
+// Procedural texture uniforms
+uniform sampler2D u_procedural_texture;
+uniform float u_enable_procedural_texture;
+uniform float u_texture_ease;
+`}function q(){return`
 // 1. REPLACEMENT PERMUTE: 
 // Uses a hash function (fract/sin) instead of a modular lookup table.
 vec4 permute(vec4 x) {
@@ -379,48 +384,26 @@ float cnoise(vec3 P)
   float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
   return 2.2 * n_xyz;
 }
-`,I);let N=null;const Z=()=>N||(N=`
-
+`}function V(){return`
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
     vec3 intensity = vec3(dot(rgb, W));
     return mix(intensity, rgb, adjustment);
 }
+`}class G{elements;constructor(){this.elements=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])}translate(e,i,o){return this.elements[12]+=this.elements[0]*e+this.elements[4]*i+this.elements[8]*o,this.elements[13]+=this.elements[1]*e+this.elements[5]*i+this.elements[9]*o,this.elements[14]+=this.elements[2]*e+this.elements[6]*i+this.elements[10]*o,this.elements[15]+=this.elements[3]*e+this.elements[7]*i+this.elements[11]*o,this}rotateX(e){const i=Math.cos(e),o=Math.sin(e),t=this.elements[4],b=this.elements[5],y=this.elements[6],n=this.elements[7],p=this.elements[8],v=this.elements[9],T=this.elements[10],x=this.elements[11];return this.elements[4]=i*t+o*p,this.elements[5]=i*b+o*v,this.elements[6]=i*y+o*T,this.elements[7]=i*n+o*x,this.elements[8]=i*p-o*t,this.elements[9]=i*v-o*b,this.elements[10]=i*T-o*y,this.elements[11]=i*x-o*n,this}}class oe{left;right;top;bottom;near;far;position;projectionMatrix;constructor(e,i,o,t,b,y){this.left=e,this.right=i,this.top=o,this.bottom=t,this.near=b,this.far=y,this.position=[0,0,0],this.projectionMatrix=new G,this.updateProjectionMatrix()}updateProjectionMatrix(){const e=1/(this.right-this.left),i=1/(this.top-this.bottom),o=1/(this.far-this.near),t=(this.right+this.left)*e,b=(this.top+this.bottom)*i,y=(this.far+this.near)*o;this.projectionMatrix.elements=new Float32Array([2*e,0,0,0,0,2*i,0,0,0,0,-2*o,0,-t,-b,-y,1])}}function j(a,e,i,o=50,t=50){const n=e*i/1e6*o*t/1.5,p=e/i,v=Math.sqrt(n*p),T=n/v;let x=-o/2,h=Math.min((x+v)/1.5,o/2),w=t/4,R=Math.max((w-T)/2,-t/4);if(p<1){const E=p;x=x*E,h=h*E;const g=1.05;x=x*g,h=h*g,w=w*g,R=R*g}a.left=x,a.right=h,a.top=w,a.bottom=R,a.near=-100,a.far=1e3,a.updateProjectionMatrix()}function se(a,e,i,o){const t=a/2,b=e/2,y=Math.floor(i),n=Math.floor(o),p=y+1,v=n+1,T=a/y,x=e/n,h=[],w=[],R=[],E=[];for(let c=0;c<v;c++){const l=c*x-b;for(let m=0;m<p;m++){const s=m*T-t;w.push(s,-l,0),R.push(0,0,1),E.push(m/y),E.push(1-c/n)}}for(let c=0;c<n;c++)for(let l=0;l<y;l++){const m=l+p*c,s=l+p*(c+1),f=l+1+p*(c+1),_=l+1+p*c;h.push(m,s,_),h.push(s,f,_)}const g=w.length/3>65535,A=[];for(let c=0;c<h.length;c+=3){const l=h[c],m=h[c+1],s=h[c+2];A.push(l,m,m,s,s,l)}return{position:new Float32Array(w),normal:new Float32Array(R),uv:new Float32Array(E),index:g?new Uint32Array(h):new Uint16Array(h),wireframeIndex:g?new Uint32Array(A):new Uint16Array(A)}}console.info(`%c\u{1F308} Neat Gradients%c
 
-float saturation(vec3 rgb)
-{
-    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
-    vec4 p = mix(vec4(rgb.bg, K.wz), vec4(rgb.gb, K.xy), step(rgb.b, rgb.g));
-    vec4 q = mix(vec4(p.xyw, rgb.r), vec4(rgb.r, p.yzx), step(p.x, rgb.r));
-
-    float d = q.x - min(q.w, q.y);
-    float e = 1.0e-10;
-    return abs(6.0 * d + e);
-}
-
-// get saturation of a color in values between 0 and 1
-float getSaturation(vec3 color) {
-    float max = max(color.r, max(color.g, color.b));
-    float min = min(color.r, min(color.g, color.b));
-    return (max - min) / max;
-}
-    
-vec3 rgb2hsv(vec3 c)
-{
-    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
-    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
-    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
-
-    float d = q.x - min(q.w, q.y);
-    float e = 1.0e-10;
-    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
-}
-
-vec3 hsv2rgb(vec3 c)
-{
-    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
-    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
-    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
-}
-`,N),Q=o=>{o.id=K,o.href="https://neat.firecms.co",o.target="_blank",o.style.position="absolute",o.style.display="block",o.style.bottom="0",o.style.right="0",o.style.padding="10px",o.style.color="#dcdcdc",o.style.opacity="0.8",o.style.fontFamily="sans-serif",o.style.fontSize="16px",o.style.fontWeight="bold",o.style.textDecoration="none",o.style.zIndex="10000",o.innerHTML="NEAT"},ne=o=>{const e=o.parentElement?.getElementsByTagName("a");if(e){for(let t=0;t<e.length;t++)if(e[t].id===K)return Q(e[t]),e[t]}const s=document.createElement("a");return Q(s),o.parentElement?.appendChild(s),s};function le(){const o=new Date,e=o.getMinutes(),s=o.getSeconds();return e*60+s}function ue(o=6){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let s="";for(let t=0;t<o;t++){const d=Math.floor(Math.random()*e.length);s+=e.charAt(d)}return s}function ce(o,e){const s=document.createElement("a");s.download=e,s.href=o,document.body.appendChild(s),s.click(),document.body.removeChild(s)}function _e(){if(document.getElementById("neat-seo-schema"))return;const o=document.createElement("script");o.id="neat-seo-schema",o.type="application/ld+json",o.text=JSON.stringify({"@context":"https://schema.org","@type":"WebSite",name:"NEAT Gradient",url:"https://neat.firecms.co",author:{"@type":"Organization",name:"FireCMS",url:"https://firecms.co"},description:"Beautiful, fast, heavily customizable, WebGL based gradients."}),document.head.appendChild(o);const e=document.createElement("div");e.style.position="absolute",e.style.width="1px",e.style.height="1px",e.style.padding="0",e.style.margin="-1px",e.style.overflow="hidden",e.style.clip="rect(0, 0, 0, 0)",e.style.whiteSpace="nowrap",e.style.borderWidth="0";try{const s=e.attachShadow({mode:"closed"}),t=document.createElement("a");t.href="https://firecms.co",t.textContent="FireCMS",s.appendChild(t)}catch{const t=document.createElement("a");t.href="https://firecms.co",t.textContent="FireCMS",e.appendChild(t)}document.body.appendChild(e)}O.NeatGradient=ie,Object.defineProperties(O,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+Licensed under MIT + The Commons Clause.
+Free for personal and commercial use.
+Selling this software or its derivatives is strictly prohibited.
+https://neat.firecms.co`,"font-weight: bold; font-size: 14px; color: #FF5772;","color: inherit;");const Y=50,H=80,O=6,ne=fe();class ae{_ref;_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_grainScale=-1;_grainIntensity=-1;_grainSparsity=-1;_grainSpeed=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundColorRgb=[1,1,1];_backgroundAlpha=1;_flowDistortionA=0;_flowDistortionB=0;_flowScale=1;_flowEase=0;_flowEnabled=!0;glState;_enableProceduralTexture=!1;_textureVoidLikelihood=.45;_textureVoidWidthMin=200;_textureVoidWidthMax=486;_textureBandDensity=2.15;_textureColorBlending=.01;_textureSeed=333;_textureEase=.5;_proceduralTexture=null;_proceduralBackgroundColor="#000000";_textureShapeTriangles=20;_textureShapeCircles=15;_textureShapeBars=15;_textureShapeSquiggles=10;requestRef=-1;sizeObserver;_initialized=!1;_linkElement=null;_cachedColorRgb=[];_yOffset=0;_yOffsetWaveMultiplier=.004;_yOffsetColorMultiplier=.004;_yOffsetFlowMultiplier=.004;_resizeTimeoutId=null;_textureNeedsUpdate=!1;_linkCheckCounter=0;_colorsChanged=!0;_uniformsDirty=!0;_textureDirty=!0;constructor(e){const{ref:i,speed:o=4,horizontalPressure:t=3,verticalPressure:b=3,waveFrequencyX:y=5,waveFrequencyY:n=5,waveAmplitude:p=3,colors:v,highlights:T=4,shadows:x=4,colorSaturation:h=0,colorBrightness:w=1,colorBlending:R=5,grainScale:E=2,grainIntensity:g=.55,grainSparsity:A=0,grainSpeed:c=.1,wireframe:l=!1,backgroundColor:m="#FFFFFF",backgroundAlpha:s=1,resolution:f=1,seed:_,yOffset:d=0,yOffsetWaveMultiplier:P=4,yOffsetColorMultiplier:C=4,yOffsetFlowMultiplier:U=4,flowDistortionA:B=0,flowDistortionB:k=0,flowScale:X=1,flowEase:D=0,flowEnabled:S=!0,enableProceduralTexture:I=!1,textureVoidLikelihood:he=.45,textureVoidWidthMin:de=200,textureVoidWidthMax:me=486,textureBandDensity:pe=2.15,textureColorBlending:ge=.01,textureSeed:xe=333,textureEase:ye=.5,proceduralBackgroundColor:ve="#000000",textureShapeTriangles:we=20,textureShapeCircles:Se=15,textureShapeBars:be=15,textureShapeSquiggles:Ee=10}=e;this._ref=i,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this.speed=o,this.horizontalPressure=t,this.verticalPressure=b,this.waveFrequencyX=y,this.waveFrequencyY=n,this.waveAmplitude=p,this.colorBlending=R,this.grainScale=E,this.grainIntensity=g,this.grainSparsity=A,this.grainSpeed=c,this.colors=v,this.shadows=x,this.highlights=T,this.colorSaturation=h,this.colorBrightness=w,this.wireframe=l,this.backgroundColor=m,this.backgroundAlpha=s,this.yOffset=d,this.yOffsetWaveMultiplier=P,this.yOffsetColorMultiplier=C,this.yOffsetFlowMultiplier=U,this.flowDistortionA=B,this.flowDistortionB=k,this.flowScale=X,this.flowEase=D,this.flowEnabled=S,this.enableProceduralTexture=I,this.textureVoidLikelihood=he,this.textureVoidWidthMin=de,this.textureVoidWidthMax=me,this.textureBandDensity=pe,this.textureColorBlending=ge,this.textureSeed=xe,this.textureEase=ye,this._proceduralBackgroundColor=ve,this._textureShapeTriangles=we,this._textureShapeCircles=Se,this._textureShapeBars=be,this._textureShapeSquiggles=Ee,this.glState=this._initScene(f),_e();let K=_!==void 0?_:ue(),Z=performance.now();const J=()=>{const{gl:r,program:N,locations:u,indexCount:L,indexType:W}=this.glState;if(this._linkCheckCounter++,this._linkCheckCounter>=300&&(this._linkCheckCounter=0,(!this._linkElement||!document.contains(this._linkElement))&&(this._linkElement=le(i))),this._initialized){const Q=performance.now();if(K+=(Q-Z)/1e3*this._speed,Z=Q,r.useProgram(N),r.uniform1f(u.uniforms.u_time,K),this._uniformsDirty&&(r.uniform2f(u.uniforms.u_resolution,this._ref.clientWidth,this._ref.clientHeight),r.uniform2f(u.uniforms.u_color_pressure,this._horizontalPressure,this._verticalPressure),r.uniform1f(u.uniforms.u_wave_frequency_x,this._waveFrequencyX),r.uniform1f(u.uniforms.u_wave_frequency_y,this._waveFrequencyY),r.uniform1f(u.uniforms.u_wave_amplitude,this._waveAmplitude),r.uniform1f(u.uniforms.u_color_blending,this._colorBlending),r.uniform1f(u.uniforms.u_shadows,this._shadows),r.uniform1f(u.uniforms.u_highlights,this._highlights),r.uniform1f(u.uniforms.u_saturation,this._saturation),r.uniform1f(u.uniforms.u_brightness,this._brightness),r.uniform1f(u.uniforms.u_grain_intensity,this._grainIntensity),r.uniform1f(u.uniforms.u_grain_sparsity,this._grainSparsity),r.uniform1f(u.uniforms.u_grain_speed,this._grainSpeed),r.uniform1f(u.uniforms.u_grain_scale,this._grainScale),r.uniform1f(u.uniforms.u_y_offset,this._yOffset),r.uniform1f(u.uniforms.u_y_offset_wave_multiplier,this._yOffsetWaveMultiplier),r.uniform1f(u.uniforms.u_y_offset_color_multiplier,this._yOffsetColorMultiplier),r.uniform1f(u.uniforms.u_y_offset_flow_multiplier,this._yOffsetFlowMultiplier),r.uniform1f(u.uniforms.u_flow_distortion_a,this._flowDistortionA),r.uniform1f(u.uniforms.u_flow_distortion_b,this._flowDistortionB),r.uniform1f(u.uniforms.u_flow_scale,this._flowScale),r.uniform1f(u.uniforms.u_flow_ease,this._flowEase),r.uniform1f(u.uniforms.u_flow_enabled,this._flowEnabled?1:0),r.uniform1f(u.uniforms.u_enable_procedural_texture,this._enableProceduralTexture?1:0),r.uniform1f(u.uniforms.u_texture_ease,this._textureEase),this._uniformsDirty=!1),this._textureNeedsUpdate&&this._enableProceduralTexture&&(this._proceduralTexture&&r.deleteTexture(this._proceduralTexture),this._proceduralTexture=this._createProceduralTexture(r),this._textureNeedsUpdate=!1,this._textureDirty=!0),this._textureDirty&&this._proceduralTexture&&(r.activeTexture(r.TEXTURE1),r.bindTexture(r.TEXTURE_2D,this._proceduralTexture),r.uniform1i(u.uniforms.u_procedural_texture,1),this._textureDirty=!1),this._colorsChanged){this._colorsChanged=!1;for(let z=0;z<O;z++)if(z<this._colors.length){const ee=this._colors[z],Re=this._cachedColorRgb[z]||[0,0,0];r.uniform1f(u.uniforms[`u_colors[${z}].is_active`],ee.enabled?1:0),r.uniform3fv(u.uniforms[`u_colors[${z}].color`],Re),r.uniform1f(u.uniforms[`u_colors[${z}].influence`],ee.influence||0)}else r.uniform1f(u.uniforms[`u_colors[${z}].is_active`],0);r.uniform1i(u.uniforms.u_colors_count,O)}}r.clearColor(this._backgroundColorRgb[0],this._backgroundColorRgb[1],this._backgroundColorRgb[2],this._backgroundAlpha),r.clear(r.COLOR_BUFFER_BIT|r.DEPTH_BUFFER_BIT),this._wireframe?(r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,this.glState.buffers.wireframeIndex),r.drawElements(r.LINES,this.glState.wireframeIndexCount,W,0),r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,this.glState.buffers.index)):r.drawElements(r.TRIANGLES,L,W,0),this.requestRef=requestAnimationFrame(J)},Te=()=>{const{gl:r,camera:N}=this.glState,u=this._ref.clientWidth,L=this._ref.clientHeight;this._ref.width=u,this._ref.height=L,r.viewport(0,0,u,L),j(N,u,L);const W=r.getUniformLocation(this.glState.program,"projectionMatrix");r.useProgram(this.glState.program),r.uniformMatrix4fv(W,!1,N.projectionMatrix.elements)};this.sizeObserver=new ResizeObserver(()=>{this._resizeTimeoutId!==null&&clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=window.setTimeout(()=>{Te(),this._resizeTimeoutId=null},100)}),this.sizeObserver.observe(i),J()}destroy(){if(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect(),this._resizeTimeoutId!==null&&(clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=null),this._linkElement&&this._linkElement.parentElement&&(this._linkElement.parentElement.removeChild(this._linkElement),this._linkElement=null),this.glState){const e=this.glState.gl;e.deleteProgram(this.glState.program),e.deleteBuffer(this.glState.buffers.position),e.deleteBuffer(this.glState.buffers.normal),e.deleteBuffer(this.glState.buffers.uv),e.deleteBuffer(this.glState.buffers.index),e.deleteBuffer(this.glState.buffers.wireframeIndex)}this._proceduralTexture&&this.glState&&this.glState.gl.deleteTexture(this._proceduralTexture)}downloadAsPNG(e="neat.png"){const i=this._ref.toDataURL("image/png");ce(i,e)}set speed(e){this._uniformsDirty=!0,this._speed=e/20}set horizontalPressure(e){this._uniformsDirty=!0,this._horizontalPressure=e/4}set verticalPressure(e){this._uniformsDirty=!0,this._verticalPressure=e/4}set waveFrequencyX(e){this._uniformsDirty=!0,this._waveFrequencyX=e*.04}set waveFrequencyY(e){this._uniformsDirty=!0,this._waveFrequencyY=e*.04}set waveAmplitude(e){this._uniformsDirty=!0,this._waveAmplitude=e*.75}set colors(e){this._uniformsDirty=!0,this._colors=e,this._cachedColorRgb=e.map(i=>this._hexToRgb(i.color)),this._colorsChanged=!0}set highlights(e){this._uniformsDirty=!0,this._highlights=e/100}set shadows(e){this._uniformsDirty=!0,this._shadows=e/100}set colorSaturation(e){this._uniformsDirty=!0,this._saturation=e/10}set colorBrightness(e){this._uniformsDirty=!0,this._brightness=e}set colorBlending(e){this._uniformsDirty=!0,this._colorBlending=e/10}set grainScale(e){this._uniformsDirty=!0,this._grainScale=e==0?1:e}set grainIntensity(e){this._uniformsDirty=!0,this._grainIntensity=e}set grainSparsity(e){this._uniformsDirty=!0,this._grainSparsity=e}set grainSpeed(e){this._uniformsDirty=!0,this._grainSpeed=e}set wireframe(e){this._uniformsDirty=!0,this._wireframe=e}set resolution(e){if(this._uniformsDirty=!0,this.glState){const i=this.glState.gl;i.deleteProgram(this.glState.program),i.deleteBuffer(this.glState.buffers.position),i.deleteBuffer(this.glState.buffers.normal),i.deleteBuffer(this.glState.buffers.uv),i.deleteBuffer(this.glState.buffers.index),i.deleteBuffer(this.glState.buffers.wireframeIndex)}this.glState=this._initScene(e)}set backgroundColor(e){this._uniformsDirty=!0,this._backgroundColor=e,this._backgroundColorRgb=this._hexToRgb(e)}set backgroundAlpha(e){this._uniformsDirty=!0,this._backgroundAlpha=e}set yOffset(e){this._uniformsDirty=!0,this._yOffset=e}get yOffsetWaveMultiplier(){return this._yOffsetWaveMultiplier*1e3}set yOffsetWaveMultiplier(e){this._uniformsDirty=!0,this._yOffsetWaveMultiplier=e/1e3}get yOffsetColorMultiplier(){return this._yOffsetColorMultiplier*1e3}set yOffsetColorMultiplier(e){this._uniformsDirty=!0,this._yOffsetColorMultiplier=e/1e3}get yOffsetFlowMultiplier(){return this._yOffsetFlowMultiplier*1e3}set yOffsetFlowMultiplier(e){this._uniformsDirty=!0,this._yOffsetFlowMultiplier=e/1e3}set flowDistortionA(e){this._uniformsDirty=!0,this._flowDistortionA=e}set flowDistortionB(e){this._uniformsDirty=!0,this._flowDistortionB=e}set flowScale(e){this._uniformsDirty=!0,this._flowScale=e}set flowEase(e){this._uniformsDirty=!0,this._flowEase=e}set flowEnabled(e){this._uniformsDirty=!0,this._flowEnabled=e}get flowEnabled(){return this._flowEnabled}set enableProceduralTexture(e){this._uniformsDirty=!0,this._enableProceduralTexture=e,e&&!this._proceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidLikelihood(e){this._uniformsDirty=!0,this._textureVoidLikelihood=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMin(e){this._uniformsDirty=!0,this._textureVoidWidthMin=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMax(e){this._uniformsDirty=!0,this._textureVoidWidthMax=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureBandDensity(e){this._uniformsDirty=!0,this._textureBandDensity=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureColorBlending(e){this._uniformsDirty=!0,this._textureColorBlending=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureSeed(e){this._uniformsDirty=!0,this._textureSeed=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureEase(){return this._textureEase}set textureEase(e){this._uniformsDirty=!0,this._textureEase=e}set proceduralBackgroundColor(e){this._uniformsDirty=!0,this._proceduralBackgroundColor=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeTriangles(e){this._uniformsDirty=!0,this._textureShapeTriangles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeCircles(e){this._uniformsDirty=!0,this._textureShapeCircles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeBars(e){this._uniformsDirty=!0,this._textureShapeBars=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeSquiggles(e){this._uniformsDirty=!0,this._textureShapeSquiggles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}_hexToRgb(e){const i=parseInt(e.replace("#",""),16);return[(i>>16&255)/255,(i>>8&255)/255,(i&255)/255]}_initScene(e){const i=this._ref.clientWidth,o=this._ref.clientHeight,t=this._ref.getContext("webgl2",{alpha:!0,preserveDrawingBuffer:!0,antialias:!0})||this._ref.getContext("webgl",{alpha:!0,preserveDrawingBuffer:!0,antialias:!0});if(!t)throw new Error("WebGL not supported");t.getExtension("OES_standard_derivatives"),t.getExtension("OES_element_index_uint"),t.viewport(0,0,i,o);const{position:b,normal:y,uv:n,index:p,wireframeIndex:v}=se(Y,H,240*e,240*e),T=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,T),t.bufferData(t.ARRAY_BUFFER,b,t.STATIC_DRAW);const x=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,x),t.bufferData(t.ARRAY_BUFFER,y,t.STATIC_DRAW);const h=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,h),t.bufferData(t.ARRAY_BUFFER,n,t.STATIC_DRAW);const w=t.createBuffer();t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,w),t.bufferData(t.ELEMENT_ARRAY_BUFFER,p,t.STATIC_DRAW);const R=t.createBuffer();t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,R),t.bufferData(t.ELEMENT_ARRAY_BUFFER,v,t.STATIC_DRAW),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,w);const E=ie()+`
+`+q()+`
+`+V()+`
+`+M,g=t.createShader(t.VERTEX_SHADER);t.shaderSource(g,E),t.compileShader(g),t.getShaderParameter(g,t.COMPILE_STATUS)||(console.log("VERTEX_SHADER_ERROR_START"),console.log("Vertex shader error: ",t.getShaderInfoLog(g)),console.log("GL Error Code:",t.getError()),console.log("Vertex Shader Source Dump:"),console.log(E.split(`
+`).map((S,I)=>`${I+1}: ${S}`).join(`
+`)),console.log("VERTEX_SHADER_ERROR_END"));const A=re()+`
+`+V()+`
+`+q()+`
+`+te,c=t.createShader(t.FRAGMENT_SHADER);t.shaderSource(c,A),t.compileShader(c),t.getShaderParameter(c,t.COMPILE_STATUS)||(console.log("FRAGMENT_SHADER_ERROR_START"),console.log("Fragment shader error: ",t.getShaderInfoLog(c)),console.log("GL Error Code:",t.getError()),console.log("Fragment Shader Source Dump:"),console.log(A.split(`
+`).map((S,I)=>`${I+1}: ${S}`).join(`
+`)),console.log("FRAGMENT_SHADER_ERROR_END"));const l=t.createProgram();t.attachShader(l,g),t.attachShader(l,c),t.linkProgram(l),t.getProgramParameter(l,t.LINK_STATUS)||(console.log("PROGRAM_LINK_ERROR_START"),console.log("Program linking error: ",t.getProgramInfoLog(l)),console.log("GL Error Code:",t.getError()),console.log("PROGRAM_LINK_ERROR_END")),t.useProgram(l);const m=new oe(0,0,0,0,0,1e3);m.position=[0,0,5],j(m,i,o);const s=t.getAttribLocation(l,"position"),f=t.getAttribLocation(l,"normal"),_=t.getAttribLocation(l,"uv");t.enableVertexAttribArray(s),t.bindBuffer(t.ARRAY_BUFFER,T),t.vertexAttribPointer(s,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(f),t.bindBuffer(t.ARRAY_BUFFER,x),t.vertexAttribPointer(f,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(_),t.bindBuffer(t.ARRAY_BUFFER,h),t.vertexAttribPointer(_,2,t.FLOAT,!1,0,0),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,w);const d=new G;d.translate(-m.position[0],-m.position[1],-m.position[2]),d.translate(0,0,-1),d.rotateX(-Math.PI/3.5);const P=t.getUniformLocation(l,"modelViewMatrix");t.uniformMatrix4fv(P,!1,d.elements);const C=t.getUniformLocation(l,"projectionMatrix");t.uniformMatrix4fv(C,!1,m.projectionMatrix.elements);const U=t.getUniformLocation(l,"u_plane_width");t.uniform1f(U,Y);const B=t.getUniformLocation(l,"u_plane_height");t.uniform1f(B,H);const k=t.getUniformLocation(l,"u_colors_count");t.uniform1i(k,O);const X=["u_time","u_resolution","u_color_pressure","u_wave_frequency_x","u_wave_frequency_y","u_wave_amplitude","u_colors_count","u_plane_width","u_plane_height","u_shadows","u_highlights","u_grain_intensity","u_grain_sparsity","u_grain_scale","u_grain_speed","u_flow_distortion_a","u_flow_distortion_b","u_flow_scale","u_flow_ease","u_flow_enabled","u_y_offset","u_y_offset_wave_multiplier","u_y_offset_color_multiplier","u_y_offset_flow_multiplier","u_procedural_texture","u_enable_procedural_texture","u_texture_ease","u_saturation","u_brightness","u_color_blending"],D={attributes:{position:s,normal:f,uv:_},uniforms:{}};X.forEach(S=>{D.uniforms[S]=t.getUniformLocation(l,S)});for(let S=0;S<O;S++)D.uniforms[`u_colors[${S}].is_active`]=t.getUniformLocation(l,`u_colors[${S}].is_active`),D.uniforms[`u_colors[${S}].color`]=t.getUniformLocation(l,`u_colors[${S}].color`),D.uniforms[`u_colors[${S}].influence`]=t.getUniformLocation(l,`u_colors[${S}].influence`);return this._initialized=!0,this._uniformsDirty=!0,this._colorsChanged=!0,this._textureDirty=!0,t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),t.enable(t.DEPTH_TEST),{gl:t,program:l,buffers:{position:T,normal:x,uv:h,index:w,wireframeIndex:R},locations:D,camera:m,indexCount:p.length,wireframeIndexCount:v.length,indexType:p instanceof Uint32Array?t.UNSIGNED_INT:t.UNSIGNED_SHORT}}_createProceduralTexture(e){const o=document.createElement("canvas");o.width=1024,o.height=1024;const t=o.getContext("2d",{willReadFrequently:!0});if(!t)return null;let b=this._textureSeed;const y=this._textureSeed;function n(){const s=Math.sin(b++)*1e4;return s-Math.floor(s)}const p=s=>{b=y+s},v=this._colors.filter(s=>s.enabled).map(s=>s.color);if(v.length===0)return null;function T(s){const f=parseInt(s.replace("#",""),16);return{r:f>>16&255,g:f>>8&255,b:f&255}}function x(s,f,_){return"#"+((1<<24)+(Math.round(s)<<16)+(Math.round(f)<<8)+Math.round(_)).toString(16).slice(1).padStart(6,"0")}const h=()=>{const s=v[Math.floor(n()*v.length)],f=v[Math.floor(n()*v.length)],_=n()*this._textureColorBlending,d=T(s),P=T(f),C=d.r+(P.r-d.r)*_,U=d.g+(P.g-d.g)*_,B=d.b+(P.b-d.b)*_;return x(C,U,B)},w=this._proceduralBackgroundColor||"#000000";t.fillStyle=w,t.fillRect(0,0,1024,1024);const R=t.createLinearGradient(0,0,0,1024);R.addColorStop(0,h()),R.addColorStop(1,h()),t.fillStyle=R,t.fillRect(0,0,1024,1024);for(let s=0;s<this._textureShapeTriangles;s++){t.fillStyle=h(),t.beginPath();const f=n()*1024,_=n()*1024,d=100+n()*300;t.moveTo(f,_),t.lineTo(f+(n()-.5)*d,_+(n()-.5)*d),t.lineTo(f+(n()-.5)*d,_+(n()-.5)*d),t.fill()}for(let s=0;s<this._textureShapeCircles;s++){t.strokeStyle=h(),t.lineWidth=10+n()*50,t.beginPath();const f=n()*1024,_=n()*1024,d=50+n()*150;t.arc(f,_,d,0,Math.PI*2),t.stroke()}for(let s=0;s<this._textureShapeBars;s++)t.fillStyle=h(),t.save(),t.translate(n()*1024,n()*1024),t.rotate(n()*Math.PI),t.fillRect(-150,-25,300,50),t.restore();t.lineWidth=15,t.lineCap="round";for(let s=0;s<this._textureShapeSquiggles;s++){t.strokeStyle=h(),t.beginPath();let f=n()*1024,_=n()*1024;t.moveTo(f,_);for(let d=0;d<4;d++)t.bezierCurveTo(f+(n()-.5)*300,_+(n()-.5)*300,f+(n()-.5)*300,_+(n()-.5)*300,f+(n()-.5)*300,_+(n()-.5)*300),f+=(n()-.5)*300,_+=(n()-.5)*300;t.stroke()}p(5e4);const E=document.createElement("canvas");E.width=1024,E.height=1024;const g=E.getContext("2d",{willReadFrequently:!0});if(!g)return null;g.fillStyle=w,g.fillRect(0,0,1024,1024);let A=0;const c=[];for(;A<1024;)if(n()<this._textureVoidLikelihood){const f=this._textureVoidWidthMin+n()*(this._textureVoidWidthMax-this._textureVoidWidthMin);c.push({type:"void",x:A,width:f}),A+=f}else{const f=50+n()*200;c.push({type:"matter",x:A,width:f}),A+=f}for(const s of c)if(s.type==="matter"){const f=s.x,_=Math.min(s.x+s.width,1024);let d=f;for(;d<_;){const P=(2+n()*20)/this._textureBandDensity,C=Math.floor(n()*1024);g.drawImage(o,C,0,P,1024,d,0,P,1024),d+=P}}const l=e.createTexture();e.bindTexture(e.TEXTURE_2D,l),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,E),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR_MIPMAP_LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.generateMipmap(e.TEXTURE_2D);const m=e.getExtension("EXT_texture_filter_anisotropic")||e.getExtension("MOZ_EXT_texture_filter_anisotropic")||e.getExtension("WEBKIT_EXT_texture_filter_anisotropic");if(m){const s=e.getParameter(m.MAX_TEXTURE_MAX_ANISOTROPY_EXT);e.texParameterf(e.TEXTURE_2D,m.TEXTURE_MAX_ANISOTROPY_EXT,Math.min(16,s))}return l}}const $=a=>{a.id=ne,a.href="https://neat.firecms.co",a.target="_blank",a.style.position="absolute",a.style.display="block",a.style.bottom="0",a.style.right="0",a.style.padding="10px",a.style.color="#dcdcdc",a.style.opacity="0.8",a.style.fontFamily="sans-serif",a.style.fontSize="16px",a.style.fontWeight="bold",a.style.textDecoration="none",a.style.zIndex="10000",a.style.pointerEvents="auto",a.setAttribute("data-n","1"),a.innerHTML="NEAT"},le=a=>{const e=a.parentElement;if(e&&getComputedStyle(e).position==="static"&&(e.style.position="relative"),e){const o=e.querySelector("a[data-n]");if(o)return $(o),o}const i=document.createElement("a");return $(i),e?.appendChild(i),i};function ue(){const a=new Date,e=a.getMinutes(),i=a.getSeconds();return e*60+i}function fe(a=6){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let o=0;o<a;o++){const t=Math.floor(Math.random()*e.length);i+=e.charAt(t)}return i}function ce(a,e){const i=document.createElement("a");i.download=e,i.href=a,document.body.appendChild(i),i.click(),document.body.removeChild(i)}function _e(){if(document.getElementById("neat-seo-schema"))return;const a=document.createElement("script");a.id="neat-seo-schema",a.type="application/ld+json",a.text=JSON.stringify({"@context":"https://schema.org","@type":"WebSite",name:"NEAT Gradient",url:"https://neat.firecms.co",author:{"@type":"Organization",name:"FireCMS",url:"https://firecms.co"},description:"Beautiful, fast, heavily customizable, WebGL based gradients."}),document.head.appendChild(a);const e=document.createElement("div");e.style.position="absolute",e.style.width="1px",e.style.height="1px",e.style.padding="0",e.style.margin="-1px",e.style.overflow="hidden",e.style.clip="rect(0, 0, 0, 0)",e.style.whiteSpace="nowrap",e.style.borderWidth="0";try{const i=e.attachShadow({mode:"closed"}),o=document.createElement("a");o.href="https://firecms.co",o.textContent="FireCMS",i.appendChild(o)}catch{const o=document.createElement("a");o.href="https://firecms.co",o.textContent="FireCMS",e.appendChild(o)}document.body.appendChild(e)}F.NeatGradient=ae,Object.defineProperties(F,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=index.umd.js.map