@firecms/neat 0.3.0 → 0.5.0

package/dist/index.umd.js

@@ -1,34 +1,60 @@
-(function(u,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],d):(u=typeof globalThis<"u"?globalThis:u||self,d(u.FireCMS={},u.THREE))})(this,function(u,d){"use strict";function R(t){if(t&&t.__esModule)return t;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,r.get?r:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const n=R(d),g=50,_=80,T=!0,b=5,B=new n.Clock,F=H();class K{_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;_grainSpeed=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundAlpha=1;requestRef=-1;sizeObserver;sceneState;constructor(e){const{ref:o,speed:r=4,horizontalPressure:s=3,verticalPressure:a=3,waveFrequencyX:c=5,waveFrequencyY:f=5,waveAmplitude:m=3,colors:l,highlights:v=4,shadows:x=4,colorSaturation:z=0,colorBrightness:P=1,colorBlending:S=5,grainScale:Y=2,grainIntensity:W=.55,grainSpeed:U=.1,wireframe:X=!1,backgroundColor:J="#FFFFFF",backgroundAlpha:Q=1,resolution:Z=1,seed:E}=e;this._ref=o,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this._buildMaterial=this._buildMaterial.bind(this),this.speed=r,this.horizontalPressure=s,this.verticalPressure=a,this.waveFrequencyX=c,this.waveFrequencyY=f,this.waveAmplitude=m,this.colorBlending=S,this.grainScale=Y,this.grainIntensity=W,this.grainSpeed=U,this.colors=l,this.shadows=x,this.highlights=v,this.colorSaturation=z,this.colorBrightness=P,this.wireframe=X,this.backgroundColor=J,this.backgroundAlpha=Q,this.sceneState=this._initScene(Z);let C=E!==void 0?E:G();const N=()=>{const{renderer:h,camera:y,scene:p,meshes:w}=this.sceneState;Math.floor(C*10)%5===0&&V(o),h.setClearColor(this._backgroundColor,this._backgroundAlpha),w.forEach(i=>{const ee=this._ref.width,te=this._ref.height,oe=[...this._colors.map(q=>{let j=new n.Color;return j.setStyle(q.color,""),{is_active:q.enabled,color:j,influence:q.influence}}),...Array.from({length:b-this._colors.length}).map(()=>({is_active:!1,color:new n.Color(0)}))];C+=B.getDelta()*this._speed,i.material.uniforms.u_time.value=C,i.material.uniforms.u_resolution={value:new n.Vector2(ee,te)},i.material.uniforms.u_color_pressure={value:new n.Vector2(this._horizontalPressure,this._verticalPressure)},i.material.uniforms.u_wave_frequency_x={value:this._waveFrequencyX},i.material.uniforms.u_wave_frequency_y={value:this._waveFrequencyY},i.material.uniforms.u_wave_amplitude={value:this._waveAmplitude},i.material.uniforms.u_plane_width={value:g},i.material.uniforms.u_plane_height={value:_},i.material.uniforms.u_color_blending={value:this._colorBlending},i.material.uniforms.u_colors={value:oe},i.material.uniforms.u_colors_count={value:b},i.material.uniforms.u_shadows={value:this._shadows},i.material.uniforms.u_highlights={value:this._highlights},i.material.uniforms.u_saturation={value:this._saturation},i.material.uniforms.u_brightness={value:this._brightness},i.material.uniforms.u_grain_intensity={value:this._grainIntensity},i.material.uniforms.u_grain_speed={value:this._grainSpeed},i.material.uniforms.u_grain_scale={value:this._grainScale},i.material.wireframe=this._wireframe}),h.render(p,y),this.requestRef=requestAnimationFrame(N)},$=()=>{const{renderer:h}=this.sceneState,y=h.domElement,p=y.clientWidth,w=y.clientHeight;this.sceneState.renderer.setSize(p,w,!1),A(this.sceneState.camera,p,w)};this.sizeObserver=new ResizeObserver(h=>{$()}),this.sizeObserver.observe(o),N()}destroy(){this&&(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect())}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}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 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}_initScene(e){const o=this._ref.width,r=this._ref.height,s=new n.WebGLRenderer({alpha:!0,canvas:this._ref});s.setClearColor(16711680,.5),s.setSize(o,r,!1);const a=[],c=new n.Scene,f=this._buildMaterial(o,r),m=new n.PlaneGeometry(g,_,240*e,240*e),l=new n.Mesh(m,f);l.rotation.x=-Math.PI/3.5,l.position.z=-1,a.push(l),c.add(l);const v=new n.OrthographicCamera(0,0,0,0,0,0);return v.position.z=5,A(v,o,r),{renderer:s,camera:v,scene:c,meshes:a,resolution:e}}_buildMaterial(e,o){const r=[...this._colors.map(c=>({is_active:c.enabled,color:new n.Color(c.color),influence:c.influence})),...Array.from({length:b-this._colors.length}).map(()=>({is_active:!1,color:new n.Color(0)}))],s={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,o)},u_colors:{value:r},u_colors_count:{value:this._colors.length},u_plane_width:{value:g},u_plane_height:{value:_},u_shadows:{value:this._shadows},u_highlights:{value:this._highlights},u_grain_intensity:{value:this._grainIntensity},u_grain_scale:{value:this._grainScale},u_grain_speed:{value:this._grainSpeed}},a=new n.ShaderMaterial({uniforms:s,vertexShader:M()+I()+O()+D(),fragmentShader:M()+O()+I()+L()});return a.wireframe=T,a}}function A(t,e,o){const a=e*o/1e6*g*_/1.5,c=e/o,f=Math.sqrt(a*c),m=a/f,l=-g/2,v=Math.min((l+f)/1.5,g/2),x=_/4,z=Math.max((x-m)/2,-_/4),P=-100,S=1e3;t instanceof n.OrthographicCamera?(t.left=l,t.right=v,t.top=x,t.bottom=z,t.near=P,t.far=S,t.updateProjectionMatrix()):t instanceof n.PerspectiveCamera&&(t.aspect=e/o,t.updateProjectionMatrix())}function D(){return`
-
+(function(P,F){typeof exports=="object"&&typeof module<"u"?F(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],F):(P=typeof globalThis<"u"?globalThis:P||self,F(P.FireCMS={},P.THREE))})(this,function(P,F){"use strict";function H(s){if(s&&s.__esModule)return s;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(e,o,t.get?t:{enumerable:!0,get:()=>s[o]})}}return e.default=s,Object.freeze(e)}const l=H(F),D=50,E=80,Y=!0,U=6,J=new l.Clock,V=oe();class Q{_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 l.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 l.Color;constructor(e){const{ref:o,speed:t=4,horizontalPressure:f=3,verticalPressure:u=3,waveFrequencyX:i=5,waveFrequencyY:d=5,waveAmplitude:x=3,colors:p,highlights:y=4,shadows:c=4,colorSaturation:m=0,colorBrightness:C=1,colorBlending:M=5,grainScale:O=2,grainIntensity:T=.55,grainSparsity:q=0,grainSpeed:z=.1,wireframe:a=!1,backgroundColor:n="#FFFFFF",backgroundAlpha:h=1,resolution:_=1,seed:b,yOffset:R=0,yOffsetWaveMultiplier:k=4,yOffsetColorMultiplier:I=4,yOffsetFlowMultiplier:ie=4,flowDistortionA:re=0,flowDistortionB:ae=0,flowScale:le=1,flowEase:ne=0,flowEnabled:ue=!0,mouseDistortionStrength:ce=0,mouseDistortionRadius:_e=.25,mouseDecayRate:he=.96,mouseDarken:fe=0,enableProceduralTexture:de=!1,textureVoidLikelihood:ve=.45,textureVoidWidthMin:pe=200,textureVoidWidthMax:xe=486,textureBandDensity:ge=2.15,textureColorBlending:me=.01,textureSeed:ye=333,textureEase:we=.5,proceduralBackgroundColor:be="#000000",textureShapeTriangles:Se=20,textureShapeCircles:ze=15,textureShapeBars:Me=15,textureShapeSquiggles:Pe=10}=e;this._ref=o,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this._buildMaterial=this._buildMaterial.bind(this),this.speed=t,this.horizontalPressure=f,this.verticalPressure=u,this.waveFrequencyX=i,this.waveFrequencyY=d,this.waveAmplitude=x,this.colorBlending=M,this.grainScale=O,this.grainIntensity=T,this.grainSparsity=q,this.grainSpeed=z,this.colors=p,this.shadows=c,this.highlights=y,this.colorSaturation=m,this.colorBrightness=C,this.wireframe=a,this.backgroundColor=n,this.backgroundAlpha=h,this.yOffset=R,this.yOffsetWaveMultiplier=k,this.yOffsetColorMultiplier=I,this.yOffsetFlowMultiplier=ie,this.flowDistortionA=re,this.flowDistortionB=ae,this.flowScale=le,this.flowEase=ne,this.flowEnabled=ue,this.mouseDistortionStrength=ce,this.mouseDistortionRadius=_e,this.mouseDecayRate=he,this.mouseDarken=fe,this.enableProceduralTexture=de,this.textureVoidLikelihood=ve,this.textureVoidWidthMin=pe,this.textureVoidWidthMax=xe,this.textureBandDensity=ge,this.textureColorBlending=me,this.textureSeed=ye,this.textureEase=we,this._proceduralBackgroundColor=be,this._textureShapeTriangles=Se,this._textureShapeCircles=ze,this._textureShapeBars=Me,this._textureShapeSquiggles=Pe,this._setupMouseInteraction(),this.sceneState=this._initScene(_);let W=b!==void 0?b:te();const K=()=>{const{renderer:g,camera:A,scene:B}=this.sceneState;if(Math.floor(W*10)%5===0&&(!this._linkElement||!document.contains(this._linkElement))&&(this._linkElement=ee(o)),this._cachedUniforms){const r=this._cachedUniforms;W+=J.getDelta()*this._speed,r.u_time.value=W,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,r.u_procedural_texture.value=this._proceduralTexture,r.u_texture_ease.value=this._textureEase;const w=r.u_colors.value;for(let v=0;v<U;v++)if(v<this._colors.length){const S=this._colors[v];w[v].is_active=S.enabled?1:0,w[v].color.setStyle(S.color,""),w[v].influence=S.influence||0}else w[v].is_active=0;r.u_colors_count.value=U,this.sceneState.meshes[0].material.wireframe=this._wireframe}if(this._mouseFBO&&this._sceneMouse&&this._cameraMouse){let r=!1;for(let v=0;v<this._mouseObjects.length;v++){const S=this._mouseObjects[v];S.mesh.visible&&(r=!0,S.mesh.rotation.z+=.01,S.mesh.material instanceof l.MeshBasicMaterial&&(S.mesh.material.opacity*=this._mouseDecayRate,S.mesh.material.opacity<.01&&(S.mesh.visible=!1)))}g.getClearColor(this._tempClearColor);const w=g.getClearAlpha();g.setClearColor(0,0),g.setRenderTarget(this._mouseFBO),g.clear(),r&&g.render(this._sceneMouse,this._cameraMouse),g.setRenderTarget(null),g.setClearColor(this._tempClearColor,w),this._cachedUniforms&&(this._cachedUniforms.u_mouse_texture.value=this._mouseFBO.texture)}g.setClearColor(this._backgroundColor,this._backgroundAlpha),g.render(B,A),this.requestRef=requestAnimationFrame(K)},Ce=()=>{const{renderer:g}=this.sceneState,A=g.domElement,B=A.clientWidth,r=A.clientHeight;if(this.sceneState.renderer.setSize(B,r,!1),L(this.sceneState.camera,B,r),this._mouseFBO&&this._cameraMouse){const w=r/2,v=B/r;this._mouseFBO.setSize(B/2,r/2),this._cameraMouse.left=-w*v,this._cameraMouse.right=w*v,this._cameraMouse.top=w,this._cameraMouse.bottom=-w,this._cameraMouse.updateProjectionMatrix()}};this.sizeObserver=new ResizeObserver(g=>{Ce()}),this.sizeObserver.observe(o),K()}destroy(){this&&(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect(),this.sceneState&&(this.sceneState.renderer.dispose(),this.sceneState.meshes.forEach(e=>{e.geometry.dispose(),Array.isArray(e.material)?e.material.forEach(o=>o.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 o=this._ref.toDataURL("image/png");console.log("data",o),se(o,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}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._proceduralTexture=this._createProceduralTexture())}set textureVoidLikelihood(e){this._textureVoidLikelihood=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureVoidWidthMin(e){this._textureVoidWidthMin=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureVoidWidthMax(e){this._textureVoidWidthMax=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureBandDensity(e){this._textureBandDensity=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureColorBlending(e){this._textureColorBlending=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureSeed(e){this._textureSeed=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}get textureEase(){return this._textureEase}set textureEase(e){this._textureEase=e}set proceduralBackgroundColor(e){this._proceduralBackgroundColor=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureShapeTriangles(e){this._textureShapeTriangles=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureShapeCircles(e){this._textureShapeCircles=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureShapeBars(e){this._textureShapeBars=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}set textureShapeSquiggles(e){this._textureShapeSquiggles=e,this._enableProceduralTexture&&(this._proceduralTexture=this._createProceduralTexture())}_initScene(e){const o=this._ref.width,t=this._ref.height;this.sceneState&&this.sceneState.renderer&&(this.sceneState.renderer.dispose(),this.sceneState.meshes.forEach(c=>{c.geometry.dispose(),Array.isArray(c.material)?c.material.forEach(m=>m.dispose()):c.material.dispose()}));const f=new l.WebGLRenderer({alpha:!0,preserveDrawingBuffer:!0,canvas:this._ref});f.setClearColor(16711680,.5),f.setSize(o,t,!1);const u=[],i=new l.Scene,d=this._buildMaterial(o,t),x=new l.PlaneGeometry(D,E,240*e,240*e),p=new l.Mesh(x,d);p.rotation.x=-Math.PI/3.5,p.position.z=-1,u.push(p),i.add(p);const y=new l.OrthographicCamera(0,0,0,0,0,0);return y.position.z=5,L(y,o,t),{renderer:f,camera:y,scene:i,meshes:u,resolution:e}}_buildMaterial(e,o){const t=Array.from({length:U}).map((i,d)=>({is_active:d<this._colors.length&&this._colors[d].enabled?1:0,color:new l.Color(d<this._colors.length?this._colors[d].color:0),influence:d<this._colors.length&&this._colors[d].influence||0})),f={u_time:{value:0},u_color_pressure:{value:new l.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 l.Vector2(e,o)},u_colors:{value:t},u_colors_count:{value:this._colors.length},u_plane_width:{value:D},u_plane_height:{value:E},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}},u=new l.ShaderMaterial({uniforms:f,vertexShader:j()+N()+G()+Z(),fragmentShader:j()+G()+N()+$()});return this._cachedUniforms=f,u.wireframe=Y,u}_setupMouseInteraction(){if(!this._ref)return;const e=this._ref.width,o=this._ref.height;this._mouseFBO=new l.WebGLRenderTarget(e/2,o/2),this._sceneMouse=new l.Scene;const t=o/2,f=e/o;this._cameraMouse=new l.OrthographicCamera(-t*f,t*f,t,-t,0,1e4),this._cameraMouse.position.set(0,0,100);const u=document.createElement("canvas");u.width=128,u.height=128;const i=u.getContext("2d");if(i){const c=i.createRadialGradient(64,64,0,64,64,64);c.addColorStop(0,"rgba(255,255,255,0.8)"),c.addColorStop(.5,"rgba(255,255,255,0.4)"),c.addColorStop(1,"rgba(255,255,255,0)"),i.fillStyle=c,i.fillRect(0,0,128,128)}const d=new l.CanvasTexture(u),x=new l.MeshBasicMaterial({map:d,transparent:!0,opacity:1,depthTest:!1,blending:l.AdditiveBlending}),p=new l.PlaneGeometry(200,200),y=50;for(let c=0;c<y;c++){const m=new l.Mesh(p,x.clone());m.visible=!1,this._sceneMouse.add(m),this._mouseObjects.push({mesh:m,active:!1})}this._updateBrushScale(),this._ref.addEventListener("mousemove",this._onMouseMove.bind(this))}_onMouseMove(e){if(!this._ref||!this._sceneMouse)return;const o=this._ref.getBoundingClientRect(),t=this._ref.width,f=this._ref.height;this._mouse.x=e.clientX-o.left-t/2,this._mouse.y=-(e.clientY-o.top-f/2);const u=this._mouseObjects[this._currentBrush];u.mesh.scale.set(this._mouseBrushBaseScale,this._mouseBrushBaseScale,1),u.active=!0,u.mesh.visible=!0,u.mesh.position.set(this._mouse.x,this._mouse.y,0),u.mesh.rotation.z=Math.random()*Math.PI*2,u.mesh.material instanceof l.MeshBasicMaterial&&(u.mesh.material.opacity=1),this._currentBrush=(this._currentBrush+1)%this._mouseObjects.length}_createProceduralTexture(){const o=document.createElement("canvas");o.width=1024,o.height=1024;const t=o.getContext("2d");if(!t)return new l.Texture;let f=this._textureSeed;const u=this._textureSeed;function i(){const a=Math.sin(f++)*1e4;return a-Math.floor(a)}const d=a=>{f=u+a},x=this._colors.filter(a=>a.enabled).map(a=>a.color);if(x.length===0)return new l.Texture;function p(a){const n=parseInt(a.replace("#",""),16);return{r:n>>16&255,g:n>>8&255,b:n&255}}function y(a,n,h){return"#"+((1<<24)+(Math.round(a)<<16)+(Math.round(n)<<8)+Math.round(h)).toString(16).slice(1)}const c=()=>{const a=x[Math.floor(i()*x.length)],n=x[Math.floor(i()*x.length)],h=i()*this._textureColorBlending,_=p(a),b=p(n),R=_.r+(b.r-_.r)*h,k=_.g+(b.g-_.g)*h,I=_.b+(b.b-_.b)*h;return y(R,k,I)},m=this._proceduralBackgroundColor||"#000000";t.fillStyle=m,t.fillRect(0,0,1024,1024);const C=t.createLinearGradient(0,0,0,1024);C.addColorStop(0,c()),C.addColorStop(1,c()),t.fillStyle=C,t.fillRect(0,0,1024,1024);for(let a=0;a<this._textureShapeTriangles;a++){t.fillStyle=c(),t.beginPath();const n=i()*1024,h=i()*1024,_=100+i()*300;t.moveTo(n,h),t.lineTo(n+(i()-.5)*_,h+(i()-.5)*_),t.lineTo(n+(i()-.5)*_,h+(i()-.5)*_),t.fill()}for(let a=0;a<this._textureShapeCircles;a++){t.strokeStyle=c(),t.lineWidth=10+i()*50,t.beginPath();const n=i()*1024,h=i()*1024,_=50+i()*150;t.arc(n,h,_,0,Math.PI*2),t.stroke()}for(let a=0;a<this._textureShapeBars;a++)t.fillStyle=c(),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=c(),t.beginPath();let n=i()*1024,h=i()*1024;t.moveTo(n,h);for(let _=0;_<4;_++)t.bezierCurveTo(n+(i()-.5)*300,h+(i()-.5)*300,n+(i()-.5)*300,h+(i()-.5)*300,n+(i()-.5)*300,h+(i()-.5)*300),n+=(i()-.5)*300,h+=(i()-.5)*300;t.stroke()}d(5e4);const M=document.createElement("canvas");M.width=1024,M.height=1024;const O=M.getContext("2d");if(!O)return new l.Texture;O.fillStyle=m,O.fillRect(0,0,1024,1024);let T=0;const q=[];for(;T<1024;)if(i()<this._textureVoidLikelihood){const n=this._textureVoidWidthMin+i()*(this._textureVoidWidthMax-this._textureVoidWidthMin);q.push({type:"void",x:T,width:n}),T+=n}else{const n=50+i()*200;q.push({type:"matter",x:T,width:n}),T+=n}for(const a of q)if(a.type==="matter"){const n=a.x,h=Math.min(a.x+a.width,1024);let _=n;for(;_<h;){const b=(2+i()*20)/this._textureBandDensity,R=Math.floor(i()*1024);O.drawImage(o,R,0,b,1024,_,0,b,1024),_+=b}}const z=new l.CanvasTexture(M);return z.minFilter=l.LinearMipmapLinearFilter,z.magFilter=l.LinearFilter,z.wrapS=l.RepeatWrapping,z.wrapT=l.RepeatWrapping,z.anisotropy=16,z.needsUpdate=!0,z}}function L(s,e,o){const u=e*o/1e6*D*E/1.5,i=e/o,d=Math.sqrt(u*i),x=u/d,p=-D/2,y=Math.min((p+d)/1.5,D/2),c=E/4,m=Math.max((c-x)/2,-E/4),C=-100,M=1e3;s instanceof l.OrthographicCamera?(s.left=p,s.right=y,s.top=c,s.bottom=m,s.near=C,s.far=M,s.updateProjectionMatrix()):s instanceof l.PerspectiveCamera&&(s.aspect=e/o,s.updateProjectionMatrix())}function Z(){return`
 void main() {
-
     vUv = uv;
 
+    // SCROLLING LOGIC
+    // Separate multipliers for wave, color, and flow offsets
+    float waveOffset = -u_y_offset * u_y_offset_wave_multiplier;
+    float colorOffset = -u_y_offset * u_y_offset_color_multiplier;
+    float flowOffset = -u_y_offset * u_y_offset_flow_multiplier;
+
+    // 1. DISPLACEMENT (WAVES)
+    // We add waveOffset to Y to scroll the wave pattern
     v_displacement_amount = cnoise( vec3(
         u_wave_frequency_x * position.x + u_time,
-        u_wave_frequency_y * position.y + u_time,
+        u_wave_frequency_y * (position.y + waveOffset) + u_time,
         u_time
     ));
-    
-    vec3 color;
 
-    // float t = mod(u_base_color, 100.0);
-    color = u_colors[0].color;
-    
-    vec2 noise_cord = vUv * u_color_pressure;
-    
+    // 2. FLOW FIELD
+    // Apply flow offset to scroll the flow field mask
+    vec2 baseUv = vUv;
+    baseUv.y += flowOffset / u_plane_height; // Scale to match wave speed
+    vec2 flowUv = baseUv;
+
+    if (u_flow_enabled > 0.5) {
+        if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
+            vec2 ppp = -1.0 + 2.0 * baseUv;
+            ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
+            ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
+            ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
+            ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
+
+            float r = length(ppp);
+            flowUv = mix(baseUv, vec2(baseUv.x * (1.0 - u_flow_ease) + r * u_flow_ease, baseUv.y), u_flow_ease);
+        }
+    }
+
+    // Pass the standard flow UV to fragment shader (for mouse/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
+
+    vec2 noise_cord = adjustedUv * u_color_pressure;
     const float minNoise = .0;
     const float maxNoise = .9;
-    
+
     for (int i = 1; i < u_colors_count; i++) {
-    
-        if(u_colors[i].is_active == 1.0){
+        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.;
-            
-            int reverseIndex = u_colors_count - i;
-            
+
             float noise = snoise(
                 vec3(
                     noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
@@ -36,28 +62,20 @@ void main() {
                     u_time * noiseSpeed
                 ) + noiseSeed
             ) - (.1 * float(i)) + (.5 * u_color_blending);
-            
+
             noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
-            vec3 nextColor = u_colors[i].color;
-            color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
-            
-            // vec3 colorOklab = oklab2rgb(color);
-            // vec3 nextColorOklab = oklab2rgb(nextColor);
-            // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
-            // color = rgb2oklab(mixColor);
-            
+            color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
         }
-        
     }
-    
+
     v_color = color;
-    
+
+    // 4. VERTEX POSITION
     vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
-    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
     v_new_position = gl_Position;
 }
-`}function L(){return`
+`}function $(){return`
 float random(vec2 p) {
     return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
 }
@@ -66,7 +84,6 @@ float fbm(vec3 x) {
     float value = 0.0;
     float amplitude = 0.5;
     float frequency = 1.0;
-
     for (int i = 0; i < 4; i++) {
         value += amplitude * snoise(x * frequency);
         frequency *= 2.0;
@@ -74,35 +91,73 @@ float fbm(vec3 x) {
     }
     return value;
 }
+
+void main() {
+    // MOUSE DISTORTION
+    vec2 finalUv = vFlowUv;
     
-void main(){
-    vec3 color = v_color;
+    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) {
+        // Calculate flow field distance for ease effect
+        vec2 ppp = -1.0 + 2.0 * finalUv;
+        ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
+        ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
+        ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
+        ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
+        float r = length(ppp); // Flow distance
+        
+        // Ease blending: 0 = topographic (flow), 1 = image (UV)
+        float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
+        float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
+        vec2 texUv = vec2(vx, vy);
+
+        // PARALLAX SCROLLING
+        // We manually apply a smaller offset here to make the texture lag behind
+        float parallaxFactor = 0.25; // 25% speed of the color mixing
+        texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
+
+        texUv *= 1.5; // Tiling scale
+
+        vec4 texSample = texture2D(u_procedural_texture, texUv);
+        baseColor = texSample.rgb;
+    } else {
+        baseColor = v_color;
+    }
+
+    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 = saturation(color, 1.0 + u_saturation);
     color = color * u_brightness;
-    
-    // Generate grain using fbm
-    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));
+    // 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));
 
-    // Center the grain around zero
     grain = grain * 0.5 + 0.5;
     grain -= 0.5;
-
-    // Apply grain intensity
+    grain = (grain > u_grain_sparsity) ? grain : 0.0;
     grain *= u_grain_intensity;
 
-    // Add grain to color
     color += vec3(grain);
-            
-    gl_FragColor = vec4(color,1.0);
+
+    gl_FragColor = vec4(color, 1.0);
 }
-`}const M=()=>`
+    `}const j=()=>`
 precision highp float;
 
 struct Color {
@@ -112,6 +167,7 @@ struct Color {
 };
 
 uniform float u_grain_intensity; 
+uniform float u_grain_sparsity; 
 uniform float u_grain_scale; 
 uniform float u_grain_speed; 
 uniform float u_time;
@@ -133,79 +189,89 @@ uniform float u_brightness;
 uniform float u_color_blending;
 
 uniform int u_colors_count;
-uniform Color u_colors[5];
+uniform Color u_colors[6];
 uniform vec2 u_resolution;
 
+uniform float u_y_offset;
+uniform float u_y_offset_wave_multiplier;
+uniform float u_y_offset_color_multiplier;
+uniform float u_y_offset_flow_multiplier;
+
+// Flow field uniforms
+uniform float u_flow_distortion_a;
+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;
+
 varying vec2 vUv;
+varying vec2 vFlowUv;
 varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `,I=()=>`
-
-vec3 mod289(vec3 x)
-{
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
-
-vec4 mod289(vec4 x)
-{
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
+    `,N=()=>`
 
-vec4 permute(vec4 x)
-{
-  return mod289(((x*34.0)+1.0)*x);
+// 1. REPLACEMENT PERMUTE: 
+// Uses a hash function (fract/sin) instead of a modular lookup table.
+vec4 permute(vec4 x) {
+    return floor(fract(sin(x) * 43758.5453123) * 289.0);
 }
 
-vec4 taylorInvSqrt(vec4 r)
-{
+// Taylor Inverse Sqrt
+vec4 taylorInvSqrt(vec4 r) {
   return 1.79284291400159 - 0.85373472095314 * r;
 }
 
+// Fade function
 vec3 fade(vec3 t) {
   return t*t*t*(t*(t*6.0-15.0)+10.0);
 }
 
-float snoise(vec3 v)
-{
+// 3D Simplex Noise
+float snoise(vec3 v) {
   const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
   const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
 
-// First corner
+  // First corner
   vec3 i  = floor(v + dot(v, C.yyy) );
   vec3 x0 =   v - i + dot(i, C.xxx) ;
 
-// Other corners
+  // Other corners
   vec3 g = step(x0.yzx, x0.xyz);
   vec3 l = 1.0 - g;
   vec3 i1 = min( g.xyz, l.zxy );
   vec3 i2 = max( g.xyz, l.zxy );
 
-  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
-  //   x1 = x0 - i1  + 1.0 * C.xxx;
-  //   x2 = x0 - i2  + 2.0 * C.xxx;
-  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
   vec3 x1 = x0 - i1 + C.xxx;
-  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
-  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
 
-// Permutations
-  i = mod289(i);
+  // Permutations
   vec4 p = permute( permute( permute(
             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
 
-// Gradients: 7x7 points over a square, mapped onto an octahedron.
-// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  // Gradients
   float n_ = 0.142857142857; // 1.0/7.0
   vec3  ns = n_ * D.wyz - D.xzx;
 
-  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
 
   vec4 x_ = floor(j * ns.z);
-  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+  vec4 y_ = floor(j - 7.0 * x_ );
 
   vec4 x = x_ *ns.x + ns.yyyy;
   vec4 y = y_ *ns.x + ns.yyyy;
@@ -214,8 +280,6 @@ float snoise(vec3 v)
   vec4 b0 = vec4( x.xy, y.xy );
   vec4 b1 = vec4( x.zw, y.zw );
 
-  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
-  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
   vec4 s0 = floor(b0)*2.0 + 1.0;
   vec4 s1 = floor(b1)*2.0 + 1.0;
   vec4 sh = -step(h, vec4(0.0));
@@ -228,14 +292,14 @@ float snoise(vec3 v)
   vec3 p2 = vec3(a1.xy,h.z);
   vec3 p3 = vec3(a1.zw,h.w);
 
-//Normalise gradients
+  // Normalise gradients
   vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
   p0 *= norm.x;
   p1 *= norm.y;
   p2 *= norm.z;
   p3 *= norm.w;
 
-// Mix final noise value
+  // Mix final noise value
   vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
   m = m * m;
   return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
@@ -245,12 +309,11 @@ float snoise(vec3 v)
 // Classic Perlin noise
 float cnoise(vec3 P)
 {
-  vec3 Pi0 = floor(P); // Integer part for indexing
-  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
-  Pi0 = mod289(Pi0);
-  Pi1 = mod289(Pi1);
-  vec3 Pf0 = fract(P); // Fractional part for interpolation
-  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+  vec3 Pi0 = floor(P); 
+  vec3 Pi1 = Pi0 + vec3(1.0); 
+  
+  vec3 Pf0 = fract(P); 
+  vec3 Pf1 = Pf0 - vec3(1.0); 
   vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
   vec4 iy = vec4(Pi0.yy, Pi1.yy);
   vec4 iz0 = Pi0.zzzz;
@@ -311,47 +374,7 @@ float cnoise(vec3 P)
   float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
   return 2.2 * n_xyz;
 }
-
-// YUV to RGB matrix
-mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
-                    1.0, -0.39465, -0.58060,
-                    1.0, 2.03211, 0.0);
-
-// RGB to YUV matrix
-mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
-                    -0.09991, -0.33609, 0.43600,
-                    0.615, -0.5586, -0.05639);
-                    
-vec3 oklab2rgb(vec3 linear)
-{
-    const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,
-                          0.5362752080, 0.6807189584, 0.2818474174,
-                          0.0514575653, 0.1074065790, 0.6302613616);
-                       
-    const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,
-                          +0.7936177850, -2.4285922050, +0.7827717662,
-                          -0.0040720468, +0.4505937099, -0.8086757660);
-                       
-    vec3 lms = im1 * linear;
-            
-    return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));
-}
-
-vec3 rgb2oklab(vec3 oklab)
-{
-    const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,
-                         +0.396337777, -0.105561346, -0.089484178,
-                         +0.215803757, -0.063854173, -1.291485548);
-                       
-    const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,
-                         -3.307216883, +2.609332323, -0.703476310,
-                         +0.230759054, -0.341134429, +1.706862569);
-    vec3 lms = m1 * oklab;
-    
-    return m2 * (lms * lms * lms);
-}
-
-    `,O=()=>`
+`,G=()=>`
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -394,5 +417,5 @@ vec3 hsv2rgb(vec3 c)
     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);
 }
-`,k=t=>{t.id=F,t.href="https://neat.firecms.co",t.target="_blank",t.style.position="absolute",t.style.display="block",t.style.bottom="0",t.style.right="0",t.style.padding="10px",t.style.color="#dcdcdc",t.style.opacity="0.8",t.style.fontFamily="sans-serif",t.style.fontSize="16px",t.style.fontWeight="bold",t.style.textDecoration="none",t.style.zIndex="10000",t.innerHTML="NEAT"},V=t=>{const e=t.parentElement?.getElementsByTagName("a");if(e){for(let r=0;r<e.length;r++)if(e[r].id===F){k(e[r]);return}}const o=document.createElement("a");k(o),t.parentElement?.appendChild(o)};function G(){const t=new Date,e=t.getMinutes(),o=t.getSeconds();return e*60+o}function H(t=6){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let o="";for(let r=0;r<t;r++){const s=Math.floor(Math.random()*e.length);o+=e.charAt(s)}return o}u.NeatGradient=K,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+`,X=s=>{s.id=V,s.href="https://neat.firecms.co",s.target="_blank",s.style.position="absolute",s.style.display="block",s.style.bottom="0",s.style.right="0",s.style.padding="10px",s.style.color="#dcdcdc",s.style.opacity="0.8",s.style.fontFamily="sans-serif",s.style.fontSize="16px",s.style.fontWeight="bold",s.style.textDecoration="none",s.style.zIndex="10000",s.innerHTML="NEAT"},ee=s=>{const e=s.parentElement?.getElementsByTagName("a");if(e){for(let t=0;t<e.length;t++)if(e[t].id===V)return X(e[t]),e[t]}const o=document.createElement("a");return X(o),s.parentElement?.appendChild(o),o};function te(){const s=new Date,e=s.getMinutes(),o=s.getSeconds();return e*60+o}function oe(s=6){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let o="";for(let t=0;t<s;t++){const f=Math.floor(Math.random()*e.length);o+=e.charAt(f)}return o}function se(s,e){const o=document.createElement("a");o.download=e,o.href=s,document.body.appendChild(o),o.click(),document.body.removeChild(o)}P.NeatGradient=Q,Object.defineProperties(P,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=index.umd.js.map