@firecms/neat 0.6.0 → 0.7.1

package/dist/index.es.js

@@ -1,584 +1,4 @@
-import * as n from "three";
-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 U = 50, D = 80, be = !0, j = 6, ze = new n.Clock(), Q = Fe();
-class Ue {
-  _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 = 0.25;
-  _mouseDecayRate = 0.96;
-  _mouseDarken = 0;
-  _mouse = new n.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 n.Color();
-  _resizeTimeoutId = null;
-  _textureNeedsUpdate = !1;
-  _lastColorUpdate = 0;
-  _linkCheckCounter = 0;
-  _mouseUpdateScheduled = !1;
-  _pendingMousePosition = null;
-  _colorsChanged = !0;
-  constructor(e) {
-    const {
-      ref: o,
-      speed: t = 4,
-      horizontalPressure: d = 3,
-      verticalPressure: c = 3,
-      waveFrequencyX: s = 5,
-      waveFrequencyY: p = 5,
-      waveAmplitude: g = 3,
-      colors: f,
-      highlights: m = 4,
-      shadows: u = 4,
-      colorSaturation: v = 0,
-      colorBrightness: O = 1,
-      colorBlending: M = 5,
-      grainScale: z = 2,
-      grainIntensity: y = 0.55,
-      grainSparsity: T = 0,
-      grainSpeed: C = 0.1,
-      wireframe: a = !1,
-      backgroundColor: l = "#FFFFFF",
-      backgroundAlpha: h = 1,
-      resolution: _ = 1,
-      seed: S,
-      yOffset: B = 0,
-      yOffsetWaveMultiplier: N = 4,
-      yOffsetColorMultiplier: L = 4,
-      yOffsetFlowMultiplier: $ = 4,
-      flowDistortionA: ee = 0,
-      flowDistortionB: te = 0,
-      flowScale: oe = 1,
-      flowEase: se = 0,
-      flowEnabled: ie = !0,
-      mouseDistortionStrength: re = 0,
-      mouseDistortionRadius: ae = 0.25,
-      mouseDecayRate: ne = 0.96,
-      mouseDarken: le = 0,
-      enableProceduralTexture: ue = !1,
-      textureVoidLikelihood: ce = 0.45,
-      textureVoidWidthMin: _e = 200,
-      textureVoidWidthMax: he = 486,
-      textureBandDensity: de = 2.15,
-      textureColorBlending: fe = 0.01,
-      textureSeed: pe = 333,
-      textureEase: me = 0.5,
-      proceduralBackgroundColor: ve = "#000000",
-      textureShapeTriangles: ge = 20,
-      textureShapeCircles: xe = 15,
-      textureShapeBars: ye = 15,
-      textureShapeSquiggles: we = 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 = d, this.verticalPressure = c, this.waveFrequencyX = s, this.waveFrequencyY = p, this.waveAmplitude = g, this.colorBlending = M, this.grainScale = z, this.grainIntensity = y, this.grainSparsity = T, this.grainSpeed = C, this.colors = f, this.shadows = u, this.highlights = m, this.colorSaturation = v, this.colorBrightness = O, this.wireframe = a, this.backgroundColor = l, this.backgroundAlpha = h, this.yOffset = B, this.yOffsetWaveMultiplier = N, this.yOffsetColorMultiplier = L, this.yOffsetFlowMultiplier = $, this.flowDistortionA = ee, this.flowDistortionB = te, this.flowScale = oe, this.flowEase = se, this.flowEnabled = ie, this.mouseDistortionStrength = re, this.mouseDistortionRadius = ae, this.mouseDecayRate = ne, this.mouseDarken = le, this.enableProceduralTexture = ue, this.textureVoidLikelihood = ce, this.textureVoidWidthMin = _e, this.textureVoidWidthMax = he, this.textureBandDensity = de, this.textureColorBlending = fe, this.textureSeed = pe, this.textureEase = me, this._proceduralBackgroundColor = ve, this._textureShapeTriangles = ge, this._textureShapeCircles = xe, this._textureShapeBars = ye, this._textureShapeSquiggles = we, this._setupMouseInteraction(), this.sceneState = this._initScene(_), Be();
-    let G = S !== void 0 ? S : Oe();
-    const X = () => {
-      const { renderer: w, camera: E, scene: F } = this.sceneState;
-      if (this._linkCheckCounter++, this._linkCheckCounter >= 300 && (this._linkCheckCounter = 0, (!this._linkElement || !document.contains(this._linkElement)) && (this._linkElement = Pe(o))), this._cachedUniforms) {
-        const r = this._cachedUniforms;
-        G += ze.getDelta() * this._speed, r.u_time.value = G, 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 q = r.u_colors.value;
-          for (let P = 0; P < j; P++)
-            if (P < this._colors.length) {
-              const V = this._colors[P];
-              q[P].is_active = V.enabled ? 1 : 0, q[P].color.setStyle(V.color, ""), q[P].influence = V.influence || 0;
-            } else
-              q[P].is_active = 0;
-          r.u_colors_count.value = j;
-        }
-      }
-      if (this._mouseFBO && this._sceneMouse && this._cameraMouse && this._mouseDistortionStrength > 0) {
-        let r = !1;
-        for (let x = 0; x < this._mouseObjects.length; x++) {
-          const b = this._mouseObjects[x];
-          b.mesh.visible && (r = !0, b.mesh.rotation.z += 0.01, b.mesh.material instanceof n.MeshBasicMaterial && (b.mesh.material.opacity *= this._mouseDecayRate, b.mesh.material.opacity < 0.01 && (b.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, E), this.requestRef = requestAnimationFrame(X);
-    }, Se = () => {
-      const { renderer: w } = this.sceneState, E = w.domElement, F = E.clientWidth, r = E.clientHeight;
-      if (this.sceneState.renderer.setSize(F, r, !1), K(this.sceneState.camera, F, r), this._mouseFBO && this._cameraMouse) {
-        const x = r / 2, b = F / r;
-        this._mouseFBO.setSize(F / 2, r / 2), this._cameraMouse.left = -x * b, this._cameraMouse.right = x * b, 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(() => {
-        Se(), this._resizeTimeoutId = null;
-      }, 100);
-    }), this.sizeObserver.observe(o), X();
-  }
-  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((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), Te(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 * 0.04;
-  }
-  set waveFrequencyY(e) {
-    this._waveFrequencyY = e * 0.04;
-  }
-  set waveAmplitude(e) {
-    this._waveAmplitude = e * 0.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(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._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 o = 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, 0.5), d.setSize(o, t, !1);
-    const c = [], s = new n.Scene(), p = this._buildMaterial(o, t), g = new n.PlaneGeometry(U, D, 240 * e, 240 * e), f = new n.Mesh(g, p);
-    f.rotation.x = -Math.PI / 3.5, f.position.z = -1, c.push(f), s.add(f);
-    const m = new n.OrthographicCamera(0, 0, 0, 0, 0, 0);
-    return m.position.z = 5, K(m, o, t), {
-      renderer: d,
-      camera: m,
-      scene: s,
-      meshes: c,
-      resolution: e
-    };
-  }
-  _buildMaterial(e, o) {
-    const t = Array.from({ length: j }).map((s, 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, o) },
-      u_colors: { value: t },
-      u_colors_count: { value: this._colors.length },
-      u_plane_width: { value: U },
-      u_plane_height: { value: D },
-      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: H() + Y() + J() + Ce(),
-      fragmentShader: H() + J() + Y() + Me()
-    });
-    return this._cachedUniforms = d, c.wireframe = be, c;
-  }
-  _setupMouseInteraction() {
-    if (!this._ref)
-      return;
-    const e = this._ref.width, o = this._ref.height;
-    this._mouseFBO = new n.WebGLRenderTarget(e / 2, o / 2), this._sceneMouse = new n.Scene();
-    const t = o / 2, d = e / o;
-    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 s = c.getContext("2d");
-    if (s) {
-      const u = s.createRadialGradient(64, 64, 0, 64, 64, 64);
-      u.addColorStop(0, "rgba(255,255,255,0.8)"), u.addColorStop(0.5, "rgba(255,255,255,0.4)"), u.addColorStop(1, "rgba(255,255,255,0)"), s.fillStyle = u, s.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 o = this._ref.getBoundingClientRect(), t = this._ref.width, d = this._ref.height;
-    this._pendingMousePosition = {
-      x: e.clientX - o.left - t / 2,
-      y: -(e.clientY - o.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 o = document.createElement("canvas");
-    o.width = 1024, o.height = 1024;
-    const t = o.getContext("2d", { willReadFrequently: !0 });
-    if (!t)
-      return new n.Texture();
-    let d = this._textureSeed;
-    const c = this._textureSeed;
-    function s() {
-      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(s() * g.length)], l = g[Math.floor(s() * g.length)], h = s() * this._textureColorBlending, _ = f(a), S = f(l), B = _.r + (S.r - _.r) * h, N = _.g + (S.g - _.g) * h, L = _.b + (S.b - _.b) * h;
-      return m(B, N, L);
-    }, v = this._proceduralBackgroundColor || "#000000";
-    t.fillStyle = v, t.fillRect(0, 0, 1024, 1024);
-    const O = t.createLinearGradient(0, 0, 0, 1024);
-    O.addColorStop(0, u()), O.addColorStop(1, u()), t.fillStyle = O, t.fillRect(0, 0, 1024, 1024);
-    for (let a = 0; a < this._textureShapeTriangles; a++) {
-      t.fillStyle = u(), t.beginPath();
-      const l = s() * 1024, h = s() * 1024, _ = 100 + s() * 300;
-      t.moveTo(l, h), t.lineTo(l + (s() - 0.5) * _, h + (s() - 0.5) * _), t.lineTo(l + (s() - 0.5) * _, h + (s() - 0.5) * _), t.fill();
-    }
-    for (let a = 0; a < this._textureShapeCircles; a++) {
-      t.strokeStyle = u(), t.lineWidth = 10 + s() * 50, t.beginPath();
-      const l = s() * 1024, h = s() * 1024, _ = 50 + s() * 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(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 = u(), t.beginPath();
-      let l = s() * 1024, h = s() * 1024;
-      t.moveTo(l, h);
-      for (let _ = 0; _ < 4; _++)
-        t.bezierCurveTo(
-          l + (s() - 0.5) * 300,
-          h + (s() - 0.5) * 300,
-          l + (s() - 0.5) * 300,
-          h + (s() - 0.5) * 300,
-          l + (s() - 0.5) * 300,
-          h + (s() - 0.5) * 300
-        ), l += (s() - 0.5) * 300, h += (s() - 0.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 T = [];
-    for (; y < 1024; )
-      if (s() < this._textureVoidLikelihood) {
-        const l = this._textureVoidWidthMin + s() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
-        T.push({ type: "void", x: y, width: l }), y += l;
-      } else {
-        const l = 50 + s() * 200;
-        T.push({ type: "matter", x: y, width: l }), y += l;
-      }
-    for (const a of T)
-      if (a.type === "matter") {
-        const l = a.x, h = Math.min(a.x + a.width, 1024);
-        let _ = l;
-        for (; _ < h; ) {
-          const S = (2 + s() * 20) / this._textureBandDensity, B = Math.floor(s() * 1024);
-          z.drawImage(
-            o,
-            B,
-            0,
-            S,
-            1024,
-            _,
-            0,
-            S,
-            1024
-          ), _ += S;
-        }
-      }
-    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 K(i, e, o) {
-  const c = e * o / 1e6 * U * D / 1.5, s = e / o, p = Math.sqrt(c * s), g = c / p;
-  let f = -U / 2, m = Math.min((f + p) / 1.5, U / 2), u = D / 4, v = Math.max((u - g) / 2, -D / 4);
-  if (s < 1) {
-    const z = s;
-    f = f * z, m = m * z;
-    const y = 1.05;
-    f = f * y, m = m * y, u = u * y, v = v * y;
-  }
-  const O = -100, M = 1e3;
-  i instanceof n.OrthographicCamera ? (i.left = f, i.right = m, i.top = u, i.bottom = v, i.near = O, i.far = M, i.updateProjectionMatrix()) : i instanceof n.PerspectiveCamera && (i.aspect = e / o, i.updateProjectionMatrix());
-}
-let k = null, A = null;
-function Ce() {
-  return k || (k = `
-void main() {
+const he = `void main() {
     vUv = uv;
 
     // SCROLLING LOGIC
@@ -614,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
 
@@ -628,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));
+            }
         }
     }
 
@@ -654,11 +77,7 @@ void main() {
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
     v_new_position = gl_Position;
 }
-`, k);
-}
-function Me() {
-  return A || (A = `
-float random(vec2 p) {
+`, de = `float random(vec2 p) {
     return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
 }
 
@@ -675,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) {
@@ -721,61 +128,69 @@ 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);
 }
-    `, A);
-}
-let R = null;
-const H = () => R || (R = `
-precision highp float;
+`;
+function me() {
+  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;
@@ -788,28 +203,44 @@ 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 pe() {
+  return `precision highp float;
 
 varying vec2 vUv;
 varying vec2 vFlowUv;
-varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `, R);
-let I = null;
-const Y = () => 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 Y() {
+  return `
 // 1. REPLACEMENT PERMUTE: 
 // Uses a hash function (fract/sin) instead of a modular lookup table.
 vec4 permute(vec4 x) {
@@ -961,85 +392,680 @@ float cnoise(vec3 P)
   float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
   return 2.2 * n_xyz;
 }
-`, I);
-let W = null;
-const J = () => W || (W = `
-
+`;
+}
+function j() {
+  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);
 }
-
-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;
+class J {
+  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;
+  }
 }
-    
-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);
+class ge {
+  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 J(), 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 H(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 xe(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
 
-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);
+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 $ = 50, K = 80, O = 6, ye = Se();
+class Te {
+  _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 = 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;
+  _initialized = !1;
+  _linkElement = null;
+  _cachedColorRgb = [];
+  _yOffset = 0;
+  _yOffsetWaveMultiplier = 4e-3;
+  _yOffsetColorMultiplier = 4e-3;
+  _yOffsetFlowMultiplier = 4e-3;
+  _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 = 0.55,
+      grainSparsity: A = 0,
+      grainSpeed: c = 0.1,
+      wireframe: l = !1,
+      backgroundColor: m = "#FFFFFF",
+      backgroundAlpha: s = 1,
+      resolution: f = 1,
+      seed: _,
+      yOffset: d = 0,
+      yOffsetWaveMultiplier: z = 4,
+      yOffsetColorMultiplier: C = 4,
+      yOffsetFlowMultiplier: F = 4,
+      flowDistortionA: M = 0,
+      flowDistortionB: N = 0,
+      flowScale: W = 1,
+      flowEase: D = 0,
+      flowEnabled: S = !0,
+      enableProceduralTexture: U = !1,
+      textureVoidLikelihood: Q = 0.45,
+      textureVoidWidthMin: ee = 200,
+      textureVoidWidthMax: te = 486,
+      textureBandDensity: ie = 2.15,
+      textureColorBlending: re = 0.01,
+      textureSeed: oe = 333,
+      textureEase: se = 0.5,
+      proceduralBackgroundColor: ne = "#000000",
+      textureShapeTriangles: ae = 20,
+      textureShapeCircles: le = 15,
+      textureShapeBars: ue = 15,
+      textureShapeSquiggles: fe = 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 = z, this.yOffsetColorMultiplier = C, this.yOffsetFlowMultiplier = F, this.flowDistortionA = M, this.flowDistortionB = N, this.flowScale = W, this.flowEase = D, this.flowEnabled = S, this.enableProceduralTexture = U, this.textureVoidLikelihood = Q, this.textureVoidWidthMin = ee, this.textureVoidWidthMax = te, this.textureBandDensity = ie, this.textureColorBlending = re, this.textureSeed = oe, this.textureEase = se, this._proceduralBackgroundColor = ne, this._textureShapeTriangles = ae, this._textureShapeCircles = le, this._textureShapeBars = ue, this._textureShapeSquiggles = fe, this.glState = this._initScene(f), Ee();
+    let k = _ !== void 0 ? _ : we(), X = performance.now();
+    const q = () => {
+      const { gl: r, program: I, locations: u, indexCount: B, indexType: L } = this.glState;
+      if (this._linkCheckCounter++, this._linkCheckCounter >= 300 && (this._linkCheckCounter = 0, (!this._linkElement || !document.contains(this._linkElement)) && (this._linkElement = ve(i))), this._initialized) {
+        const V = performance.now();
+        if (k += (V - X) / 1e3 * this._speed, X = V, r.useProgram(I), 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 P = 0; P < O; P++)
+            if (P < this._colors.length) {
+              const G = this._colors[P], _e = this._cachedColorRgb[P] || [0, 0, 0];
+              r.uniform1f(u.uniforms[`u_colors[${P}].is_active`], G.enabled ? 1 : 0), r.uniform3fv(u.uniforms[`u_colors[${P}].color`], _e), r.uniform1f(u.uniforms[`u_colors[${P}].influence`], G.influence || 0);
+            } else
+              r.uniform1f(u.uniforms[`u_colors[${P}].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, L, 0), r.bindBuffer(r.ELEMENT_ARRAY_BUFFER, this.glState.buffers.index)) : r.drawElements(r.TRIANGLES, B, L, 0), this.requestRef = requestAnimationFrame(q);
+    }, ce = () => {
+      const { gl: r, camera: I } = this.glState, u = this._ref.clientWidth, B = this._ref.clientHeight;
+      this._ref.width = u, this._ref.height = B, r.viewport(0, 0, u, B), H(I, u, B);
+      const L = r.getUniformLocation(this.glState.program, "projectionMatrix");
+      r.useProgram(this.glState.program), r.uniformMatrix4fv(L, !1, I.projectionMatrix.elements);
+    };
+    this.sizeObserver = new ResizeObserver(() => {
+      this._resizeTimeoutId !== null && clearTimeout(this._resizeTimeoutId), this._resizeTimeoutId = window.setTimeout(() => {
+        ce(), this._resizeTimeoutId = null;
+      }, 100);
+    }), this.sizeObserver.observe(i), q();
+  }
+  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");
+    be(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 * 0.04;
+  }
+  set waveFrequencyY(e) {
+    this._uniformsDirty = !0, this._waveFrequencyY = e * 0.04;
+  }
+  set waveAmplitude(e) {
+    this._uniformsDirty = !0, this._waveAmplitude = e * 0.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 } = xe($, K, 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 = me() + `
+` + Y() + `
+` + j() + `
+` + he, 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, U) => `${U + 1}: ${S}`).join(`
+`)), console.log("VERTEX_SHADER_ERROR_END"));
+    const A = pe() + `
+` + j() + `
+` + Y() + `
+` + de, 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, U) => `${U + 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 ge(0, 0, 0, 0, 0, 1e3);
+    m.position = [0, 0, 5], H(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 J();
+    d.translate(-m.position[0], -m.position[1], -m.position[2]), d.translate(0, 0, -1), d.rotateX(-Math.PI / 3.5);
+    const z = t.getUniformLocation(l, "modelViewMatrix");
+    t.uniformMatrix4fv(z, !1, d.elements);
+    const C = t.getUniformLocation(l, "projectionMatrix");
+    t.uniformMatrix4fv(C, !1, m.projectionMatrix.elements);
+    const F = t.getUniformLocation(l, "u_plane_width");
+    t.uniform1f(F, $);
+    const M = t.getUniformLocation(l, "u_plane_height");
+    t.uniform1f(M, K);
+    const N = t.getUniformLocation(l, "u_colors_count");
+    t.uniform1i(N, O);
+    const W = [
+      "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: {}
+    };
+    W.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), z = T(f), C = d.r + (z.r - d.r) * _, F = d.g + (z.g - d.g) * _, M = d.b + (z.b - d.b) * _;
+      return x(C, F, M);
+    }, 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() - 0.5) * d, _ + (n() - 0.5) * d), t.lineTo(f + (n() - 0.5) * d, _ + (n() - 0.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() - 0.5) * 300,
+          _ + (n() - 0.5) * 300,
+          f + (n() - 0.5) * 300,
+          _ + (n() - 0.5) * 300,
+          f + (n() - 0.5) * 300,
+          _ + (n() - 0.5) * 300
+        ), f += (n() - 0.5) * 300, _ += (n() - 0.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 z = (2 + n() * 20) / this._textureBandDensity, C = Math.floor(n() * 1024);
+          g.drawImage(
+            o,
+            C,
+            0,
+            z,
+            1024,
+            d,
+            0,
+            z,
+            1024
+          ), d += z;
+        }
+      }
+    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;
+  }
 }
-`, W), Z = (i) => {
-  i.id = Q, i.href = "https://neat.firecms.co", i.target = "_blank", i.style.position = "absolute", i.style.display = "block", i.style.bottom = "0", i.style.right = "0", i.style.padding = "10px", i.style.color = "#dcdcdc", i.style.opacity = "0.8", i.style.fontFamily = "sans-serif", i.style.fontSize = "16px", i.style.fontWeight = "bold", i.style.textDecoration = "none", i.style.zIndex = "10000", i.innerHTML = "NEAT";
-}, Pe = (i) => {
-  const e = i.parentElement?.getElementsByTagName("a");
-  if (e) {
-    for (let t = 0; t < e.length; t++)
-      if (e[t].id === Q)
-        return Z(e[t]), e[t];
-  }
-  const o = document.createElement("a");
-  return Z(o), i.parentElement?.appendChild(o), o;
+const Z = (a) => {
+  a.id = ye, 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";
+}, ve = (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 Z(o), o;
+  }
+  const i = document.createElement("a");
+  return Z(i), e?.appendChild(i), i;
 };
-function Oe() {
-  const i = new Date(), e = i.getMinutes(), o = i.getSeconds();
-  return e * 60 + o;
+function we() {
+  const a = new Date(), e = a.getMinutes(), i = a.getSeconds();
+  return e * 60 + i;
 }
-function Fe(i = 6) {
+function Se(a = 6) {
   const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let o = "";
-  for (let t = 0; t < i; t++) {
-    const d = Math.floor(Math.random() * e.length);
-    o += e.charAt(d);
+  let i = "";
+  for (let o = 0; o < a; o++) {
+    const t = Math.floor(Math.random() * e.length);
+    i += e.charAt(t);
   }
-  return o;
+  return i;
 }
-function Te(i, e) {
-  const o = document.createElement("a");
-  o.download = e, o.href = i, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+function be(a, e) {
+  const i = document.createElement("a");
+  i.download = e, i.href = a, document.body.appendChild(i), i.click(), document.body.removeChild(i);
 }
-function Be() {
+function Ee() {
   if (document.getElementById("neat-seo-schema"))
     return;
-  const i = document.createElement("script");
-  i.id = "neat-seo-schema", i.type = "application/ld+json", i.text = JSON.stringify({
+  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",
@@ -1050,19 +1076,19 @@ function Be() {
       url: "https://firecms.co"
     },
     description: "Beautiful, fast, heavily customizable, WebGL based gradients."
-  }), document.head.appendChild(i);
+  }), 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 o = e.attachShadow({ mode: "closed" }), t = document.createElement("a");
-    t.href = "https://firecms.co", t.textContent = "FireCMS", o.appendChild(t);
+    const i = e.attachShadow({ mode: "closed" }), o = document.createElement("a");
+    o.href = "https://firecms.co", o.textContent = "FireCMS", i.appendChild(o);
   } catch {
-    const t = document.createElement("a");
-    t.href = "https://firecms.co", t.textContent = "FireCMS", e.appendChild(t);
+    const o = document.createElement("a");
+    o.href = "https://firecms.co", o.textContent = "FireCMS", e.appendChild(o);
   }
   document.body.appendChild(e);
 }
 export {
-  Ue as NeatGradient
+  Te as NeatGradient
 };
 //# sourceMappingURL=index.es.js.map