@firecms/neat 0.3.0 → 0.5.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import * as i from "three";
-const g = 50, _ = 80, H = !0, S = 5, W = new i.Clock(), N = Z();
-class $ {
+import * as l from "three";
+const D = 50, E = 80, pe = !0, k = 6, xe = new l.Clock(), G = be();
+class ze {
   _ref;
   _speed = -1;
   _horizontalPressure = -1;
@@ -14,70 +14,151 @@ class $ {
   _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 = 0.25;
+  _mouseDecayRate = 0.96;
+  _mouseDarken = 0;
+  _mouse = new l.Vector2(-1e3, -1e3);
+  _mouseFBO = null;
+  _sceneMouse = null;
+  _cameraMouse = null;
+  _mouseObjects = [];
+  _currentBrush = 0;
+  _mouseBrushBaseScale = 1;
+  _enableProceduralTexture = !1;
+  _textureVoidLikelihood = 0.45;
+  _textureVoidWidthMin = 200;
+  _textureVoidWidthMax = 486;
+  _textureBandDensity = 2.15;
+  _textureColorBlending = 0.01;
+  _textureSeed = 333;
+  _textureEase = 0.5;
+  _proceduralTexture = null;
+  _proceduralBackgroundColor = "#000000";
+  _textureShapeTriangles = 20;
+  _textureShapeCircles = 15;
+  _textureShapeBars = 15;
+  _textureShapeSquiggles = 10;
   requestRef = -1;
   sizeObserver;
   sceneState;
+  _cachedUniforms = null;
+  _linkElement = null;
+  _yOffset = 0;
+  _yOffsetWaveMultiplier = 4e-3;
+  _yOffsetColorMultiplier = 4e-3;
+  _yOffsetFlowMultiplier = 4e-3;
+  _tempClearColor = new l.Color();
   constructor(e) {
     const {
       ref: o,
-      speed: n = 4,
-      horizontalPressure: s = 3,
-      verticalPressure: a = 3,
-      waveFrequencyX: c = 5,
-      waveFrequencyY: v = 5,
-      waveAmplitude: m = 3,
-      colors: l,
-      highlights: u = 4,
-      shadows: x = 4,
-      colorSaturation: p = 0,
-      colorBrightness: w = 1,
-      colorBlending: b = 5,
-      grainScale: O = 2,
-      grainIntensity: R = 0.55,
-      grainSpeed: B = 0.1,
-      wireframe: K = !1,
-      backgroundColor: D = "#FFFFFF",
-      backgroundAlpha: L = 1,
-      resolution: T = 1,
-      seed: C
+      speed: t = 4,
+      horizontalPressure: f = 3,
+      verticalPressure: u = 3,
+      waveFrequencyX: s = 5,
+      waveFrequencyY: d = 5,
+      waveAmplitude: x = 3,
+      colors: p,
+      highlights: y = 4,
+      shadows: c = 4,
+      colorSaturation: m = 0,
+      colorBrightness: P = 1,
+      colorBlending: M = 5,
+      grainScale: T = 2,
+      grainIntensity: C = 0.55,
+      grainSparsity: B = 0,
+      grainSpeed: z = 0.1,
+      wireframe: a = !1,
+      backgroundColor: n = "#FFFFFF",
+      backgroundAlpha: h = 1,
+      resolution: _ = 1,
+      seed: b,
+      yOffset: F = 0,
+      yOffsetWaveMultiplier: A = 4,
+      yOffsetColorMultiplier: R = 4,
+      yOffsetFlowMultiplier: X = 4,
+      flowDistortionA: K = 0,
+      flowDistortionB: H = 0,
+      flowScale: Y = 1,
+      flowEase: J = 0,
+      flowEnabled: Q = !0,
+      mouseDistortionStrength: Z = 0,
+      mouseDistortionRadius: $ = 0.25,
+      mouseDecayRate: ee = 0.96,
+      mouseDarken: te = 0,
+      enableProceduralTexture: oe = !1,
+      textureVoidLikelihood: se = 0.45,
+      textureVoidWidthMin: ie = 200,
+      textureVoidWidthMax: re = 486,
+      textureBandDensity: ae = 2.15,
+      textureColorBlending: le = 0.01,
+      textureSeed: ne = 333,
+      textureEase: ue = 0.5,
+      proceduralBackgroundColor: ce = "#000000",
+      textureShapeTriangles: _e = 20,
+      textureShapeCircles: he = 15,
+      textureShapeBars: fe = 15,
+      textureShapeSquiggles: de = 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 = n, this.horizontalPressure = s, this.verticalPressure = a, this.waveFrequencyX = c, this.waveFrequencyY = v, this.waveAmplitude = m, this.colorBlending = b, this.grainScale = O, this.grainIntensity = R, this.grainSpeed = B, this.colors = l, this.shadows = x, this.highlights = u, this.colorSaturation = p, this.colorBrightness = w, this.wireframe = K, this.backgroundColor = D, this.backgroundAlpha = L, this.sceneState = this._initScene(T);
-    let z = C !== void 0 ? C : Q();
-    const q = () => {
-      const { renderer: h, camera: f, scene: d, meshes: y } = this.sceneState;
-      Math.floor(z * 10) % 5 === 0 && J(o), h.setClearColor(this._backgroundColor, this._backgroundAlpha), y.forEach((r) => {
-        const j = this._ref.width, Y = this._ref.height, G = [
-          ...this._colors.map((P) => {
-            let F = new i.Color();
-            return F.setStyle(P.color, ""), {
-              is_active: P.enabled,
-              color: F,
-              influence: P.influence
-            };
-          }),
-          ...Array.from({ length: S - this._colors.length }).map(() => ({
-            is_active: !1,
-            color: new i.Color(0)
-          }))
-        ];
-        z += W.getDelta() * this._speed, r.material.uniforms.u_time.value = z, r.material.uniforms.u_resolution = { value: new i.Vector2(j, Y) }, r.material.uniforms.u_color_pressure = { value: new i.Vector2(this._horizontalPressure, this._verticalPressure) }, r.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX }, r.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY }, r.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude }, r.material.uniforms.u_plane_width = { value: g }, r.material.uniforms.u_plane_height = { value: _ }, r.material.uniforms.u_color_blending = { value: this._colorBlending }, r.material.uniforms.u_colors = { value: G }, r.material.uniforms.u_colors_count = { value: S }, r.material.uniforms.u_shadows = { value: this._shadows }, r.material.uniforms.u_highlights = { value: this._highlights }, r.material.uniforms.u_saturation = { value: this._saturation }, r.material.uniforms.u_brightness = { value: this._brightness }, r.material.uniforms.u_grain_intensity = { value: this._grainIntensity }, r.material.uniforms.u_grain_speed = { value: this._grainSpeed }, r.material.uniforms.u_grain_scale = { value: this._grainScale }, r.material.wireframe = this._wireframe;
-      }), h.render(d, f), this.requestRef = requestAnimationFrame(q);
-    }, V = () => {
-      const { renderer: h } = this.sceneState, f = h.domElement, d = f.clientWidth, y = f.clientHeight;
-      this.sceneState.renderer.setSize(d, y, !1), A(this.sceneState.camera, d, y);
+    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 = s, this.waveFrequencyY = d, this.waveAmplitude = x, this.colorBlending = M, this.grainScale = T, this.grainIntensity = C, this.grainSparsity = B, this.grainSpeed = z, this.colors = p, this.shadows = c, this.highlights = y, this.colorSaturation = m, this.colorBrightness = P, this.wireframe = a, this.backgroundColor = n, this.backgroundAlpha = h, this.yOffset = F, this.yOffsetWaveMultiplier = A, this.yOffsetColorMultiplier = R, this.yOffsetFlowMultiplier = X, this.flowDistortionA = K, this.flowDistortionB = H, this.flowScale = Y, this.flowEase = J, this.flowEnabled = Q, this.mouseDistortionStrength = Z, this.mouseDistortionRadius = $, this.mouseDecayRate = ee, this.mouseDarken = te, this.enableProceduralTexture = oe, this.textureVoidLikelihood = se, this.textureVoidWidthMin = ie, this.textureVoidWidthMax = re, this.textureBandDensity = ae, this.textureColorBlending = le, this.textureSeed = ne, this.textureEase = ue, this._proceduralBackgroundColor = ce, this._textureShapeTriangles = _e, this._textureShapeCircles = he, this._textureShapeBars = fe, this._textureShapeSquiggles = de, this._setupMouseInteraction(), this.sceneState = this._initScene(_);
+    let U = b !== void 0 ? b : we();
+    const I = () => {
+      const { renderer: g, camera: q, scene: O } = this.sceneState;
+      if (Math.floor(U * 10) % 5 === 0 && (!this._linkElement || !document.contains(this._linkElement)) && (this._linkElement = ye(o)), this._cachedUniforms) {
+        const i = this._cachedUniforms;
+        U += xe.getDelta() * this._speed, i.u_time.value = U, i.u_resolution.value.set(this._ref.width, this._ref.height), i.u_color_pressure.value.set(this._horizontalPressure, this._verticalPressure), i.u_wave_frequency_x.value = this._waveFrequencyX, i.u_wave_frequency_y.value = this._waveFrequencyY, i.u_wave_amplitude.value = this._waveAmplitude, i.u_color_blending.value = this._colorBlending, i.u_shadows.value = this._shadows, i.u_highlights.value = this._highlights, i.u_saturation.value = this._saturation, i.u_brightness.value = this._brightness, i.u_grain_intensity.value = this._grainIntensity, i.u_grain_sparsity.value = this._grainSparsity, i.u_grain_speed.value = this._grainSpeed, i.u_grain_scale.value = this._grainScale, i.u_y_offset.value = this._yOffset, i.u_y_offset_wave_multiplier.value = this._yOffsetWaveMultiplier, i.u_y_offset_color_multiplier.value = this._yOffsetColorMultiplier, i.u_y_offset_flow_multiplier.value = this._yOffsetFlowMultiplier, i.u_flow_distortion_a.value = this._flowDistortionA, i.u_flow_distortion_b.value = this._flowDistortionB, i.u_flow_scale.value = this._flowScale, i.u_flow_ease.value = this._flowEase, i.u_flow_enabled.value = this._flowEnabled ? 1 : 0, i.u_mouse_distortion_strength.value = this._mouseDistortionStrength, i.u_mouse_distortion_radius.value = this._mouseDistortionRadius, i.u_mouse_darken.value = this._mouseDarken, i.u_enable_procedural_texture.value = this._enableProceduralTexture ? 1 : 0, i.u_procedural_texture.value = this._proceduralTexture, i.u_texture_ease.value = this._textureEase;
+        const w = i.u_colors.value;
+        for (let v = 0; v < k; 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;
+        i.u_colors_count.value = k, this.sceneState.meshes[0].material.wireframe = this._wireframe;
+      }
+      if (this._mouseFBO && this._sceneMouse && this._cameraMouse) {
+        let i = !1;
+        for (let v = 0; v < this._mouseObjects.length; v++) {
+          const S = this._mouseObjects[v];
+          S.mesh.visible && (i = !0, S.mesh.rotation.z += 0.01, S.mesh.material instanceof l.MeshBasicMaterial && (S.mesh.material.opacity *= this._mouseDecayRate, S.mesh.material.opacity < 0.01 && (S.mesh.visible = !1)));
+        }
+        g.getClearColor(this._tempClearColor);
+        const w = g.getClearAlpha();
+        g.setClearColor(0, 0), g.setRenderTarget(this._mouseFBO), g.clear(), i && 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(O, q), this.requestRef = requestAnimationFrame(I);
+    }, ve = () => {
+      const { renderer: g } = this.sceneState, q = g.domElement, O = q.clientWidth, i = q.clientHeight;
+      if (this.sceneState.renderer.setSize(O, i, !1), W(this.sceneState.camera, O, i), this._mouseFBO && this._cameraMouse) {
+        const w = i / 2, v = O / i;
+        this._mouseFBO.setSize(O / 2, i / 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((h) => {
-      V();
-    }), this.sizeObserver.observe(o), q();
+    this.sizeObserver = new ResizeObserver((g) => {
+      ve();
+    }), this.sizeObserver.observe(o), I();
   }
   destroy() {
-    this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect());
+    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;
@@ -121,6 +202,9 @@ class $ {
   set grainIntensity(e) {
     this._grainIntensity = e;
   }
+  set grainSparsity(e) {
+    this._grainSparsity = e;
+  }
   set grainSpeed(e) {
     this._grainSpeed = e;
   }
@@ -136,94 +220,379 @@ class $ {
   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(0.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(0.9, Math.min(e, 0.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, n = this._ref.height, s = new i.WebGLRenderer({
+    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
     });
-    s.setClearColor(16711680, 0.5), s.setSize(o, n, !1);
-    const a = [], c = new i.Scene(), v = this._buildMaterial(o, n), m = new i.PlaneGeometry(g, _, 240 * e, 240 * e), l = new i.Mesh(m, v);
-    l.rotation.x = -Math.PI / 3.5, l.position.z = -1, a.push(l), c.add(l);
-    const u = new i.OrthographicCamera(0, 0, 0, 0, 0, 0);
-    return u.position.z = 5, A(u, o, n), {
-      renderer: s,
-      camera: u,
-      scene: c,
-      meshes: a,
+    f.setClearColor(16711680, 0.5), f.setSize(o, t, !1);
+    const u = [], s = 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), s.add(p);
+    const y = new l.OrthographicCamera(0, 0, 0, 0, 0, 0);
+    return y.position.z = 5, W(y, o, t), {
+      renderer: f,
+      camera: y,
+      scene: s,
+      meshes: u,
       resolution: e
     };
   }
   _buildMaterial(e, o) {
-    const n = [
-      ...this._colors.map((c) => ({
-        is_active: c.enabled,
-        color: new i.Color(c.color),
-        influence: c.influence
-      })),
-      ...Array.from({ length: S - this._colors.length }).map(() => ({
-        is_active: !1,
-        color: new i.Color(0)
-      }))
-    ], s = {
+    const t = Array.from({ length: k }).map((s, 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 i.Vector2(this._horizontalPressure, this._verticalPressure) },
+      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 i.Vector2(e, o) },
-      u_colors: { value: n },
+      u_resolution: { value: new l.Vector2(e, o) },
+      u_colors: { value: t },
       u_colors_count: { value: this._colors.length },
-      u_plane_width: { value: g },
-      u_plane_height: { value: _ },
+      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 }
-    }, a = new i.ShaderMaterial({
-      uniforms: s,
-      vertexShader: I() + M() + k() + U(),
-      fragmentShader: I() + k() + M() + X()
+      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: V() + L() + N() + ge(),
+      fragmentShader: V() + N() + L() + me()
     });
-    return a.wireframe = H, a;
+    return this._cachedUniforms = f, u.wireframe = pe, 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 s = u.getContext("2d");
+    if (s) {
+      const c = s.createRadialGradient(64, 64, 0, 64, 64, 64);
+      c.addColorStop(0, "rgba(255,255,255,0.8)"), c.addColorStop(0.5, "rgba(255,255,255,0.4)"), c.addColorStop(1, "rgba(255,255,255,0)"), s.fillStyle = c, s.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 s() {
+      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(s() * x.length)], n = x[Math.floor(s() * x.length)], h = s() * this._textureColorBlending, _ = p(a), b = p(n), F = _.r + (b.r - _.r) * h, A = _.g + (b.g - _.g) * h, R = _.b + (b.b - _.b) * h;
+      return y(F, A, R);
+    }, m = this._proceduralBackgroundColor || "#000000";
+    t.fillStyle = m, t.fillRect(0, 0, 1024, 1024);
+    const P = t.createLinearGradient(0, 0, 0, 1024);
+    P.addColorStop(0, c()), P.addColorStop(1, c()), t.fillStyle = P, t.fillRect(0, 0, 1024, 1024);
+    for (let a = 0; a < this._textureShapeTriangles; a++) {
+      t.fillStyle = c(), t.beginPath();
+      const n = s() * 1024, h = s() * 1024, _ = 100 + s() * 300;
+      t.moveTo(n, h), t.lineTo(n + (s() - 0.5) * _, h + (s() - 0.5) * _), t.lineTo(n + (s() - 0.5) * _, h + (s() - 0.5) * _), t.fill();
+    }
+    for (let a = 0; a < this._textureShapeCircles; a++) {
+      t.strokeStyle = c(), t.lineWidth = 10 + s() * 50, t.beginPath();
+      const n = s() * 1024, h = s() * 1024, _ = 50 + s() * 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(s() * 1024, s() * 1024), t.rotate(s() * 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 = s() * 1024, h = s() * 1024;
+      t.moveTo(n, h);
+      for (let _ = 0; _ < 4; _++)
+        t.bezierCurveTo(
+          n + (s() - 0.5) * 300,
+          h + (s() - 0.5) * 300,
+          n + (s() - 0.5) * 300,
+          h + (s() - 0.5) * 300,
+          n + (s() - 0.5) * 300,
+          h + (s() - 0.5) * 300
+        ), n += (s() - 0.5) * 300, h += (s() - 0.5) * 300;
+      t.stroke();
+    }
+    d(5e4);
+    const M = document.createElement("canvas");
+    M.width = 1024, M.height = 1024;
+    const T = M.getContext("2d");
+    if (!T)
+      return new l.Texture();
+    T.fillStyle = m, T.fillRect(0, 0, 1024, 1024);
+    let C = 0;
+    const B = [];
+    for (; C < 1024; )
+      if (s() < this._textureVoidLikelihood) {
+        const n = this._textureVoidWidthMin + s() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
+        B.push({ type: "void", x: C, width: n }), C += n;
+      } else {
+        const n = 50 + s() * 200;
+        B.push({ type: "matter", x: C, width: n }), C += n;
+      }
+    for (const a of B)
+      if (a.type === "matter") {
+        const n = a.x, h = Math.min(a.x + a.width, 1024);
+        let _ = n;
+        for (; _ < h; ) {
+          const b = (2 + s() * 20) / this._textureBandDensity, F = Math.floor(s() * 1024);
+          T.drawImage(
+            o,
+            F,
+            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 A(t, e, o) {
-  const a = e * o / 1e6 * g * _ / 1.5, c = e / o, v = Math.sqrt(a * c), m = a / v, l = -g / 2, u = Math.min((l + v) / 1.5, g / 2), x = _ / 4, p = Math.max((x - m) / 2, -_ / 4), w = -100, b = 1e3;
-  t instanceof i.OrthographicCamera ? (t.left = l, t.right = u, t.top = x, t.bottom = p, t.near = w, t.far = b, t.updateProjectionMatrix()) : t instanceof i.PerspectiveCamera && (t.aspect = e / o, t.updateProjectionMatrix());
+function W(r, e, o) {
+  const u = e * o / 1e6 * D * E / 1.5, s = e / o, d = Math.sqrt(u * s), 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), P = -100, M = 1e3;
+  r instanceof l.OrthographicCamera ? (r.left = p, r.right = y, r.top = c, r.bottom = m, r.near = P, r.far = M, r.updateProjectionMatrix()) : r instanceof l.PerspectiveCamera && (r.aspect = e / o, r.updateProjectionMatrix());
 }
-function U() {
+function ge() {
   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.,
@@ -231,30 +600,22 @@ 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 X() {
+function me() {
   return `
 float random(vec2 p) {
     return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
@@ -264,7 +625,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;
@@ -272,37 +632,75 @@ 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 I = () => `
+const V = () => `
 precision highp float;
 
 struct Color {
@@ -312,6 +710,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;
@@ -333,79 +732,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;
 
-    `, M = () => `
-
-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;
-}
+    `, L = () => `
 
-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;
@@ -414,8 +823,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));
@@ -428,14 +835,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),
@@ -445,12 +852,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;
@@ -511,47 +917,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);
-}
-
-    `, k = () => `
+`, N = () => `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -594,34 +960,36 @@ 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);
 }
-`, E = (t) => {
-  t.id = N, 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";
-}, J = (t) => {
-  const e = t.parentElement?.getElementsByTagName("a");
+`, j = (r) => {
+  r.id = G, r.href = "https://neat.firecms.co", r.target = "_blank", r.style.position = "absolute", r.style.display = "block", r.style.bottom = "0", r.style.right = "0", r.style.padding = "10px", r.style.color = "#dcdcdc", r.style.opacity = "0.8", r.style.fontFamily = "sans-serif", r.style.fontSize = "16px", r.style.fontWeight = "bold", r.style.textDecoration = "none", r.style.zIndex = "10000", r.innerHTML = "NEAT";
+}, ye = (r) => {
+  const e = r.parentElement?.getElementsByTagName("a");
   if (e) {
-    for (let n = 0; n < e.length; n++)
-      if (e[n].id === N) {
-        E(e[n]);
-        return;
-      }
+    for (let t = 0; t < e.length; t++)
+      if (e[t].id === G)
+        return j(e[t]), e[t];
   }
   const o = document.createElement("a");
-  E(o), t.parentElement?.appendChild(o);
+  return j(o), r.parentElement?.appendChild(o), o;
 };
-function Q() {
-  const t = new Date(), e = t.getMinutes(), o = t.getSeconds();
+function we() {
+  const r = new Date(), e = r.getMinutes(), o = r.getSeconds();
   return e * 60 + o;
 }
-function Z(t = 6) {
+function be(r = 6) {
   const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let o = "";
-  for (let n = 0; n < t; n++) {
-    const s = Math.floor(Math.random() * e.length);
-    o += e.charAt(s);
+  for (let t = 0; t < r; t++) {
+    const f = Math.floor(Math.random() * e.length);
+    o += e.charAt(f);
   }
   return o;
 }
+function Se(r, e) {
+  const o = document.createElement("a");
+  o.download = e, o.href = r, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+}
 export {
-  $ as NeatGradient
+  ze as NeatGradient
 };
 //# sourceMappingURL=index.es.js.map