@firecms/neat 0.5.0 → 0.6.0

package/dist/index.es.js

@@ -1,6 +1,16 @@
-import * as l from "three";
-const D = 50, E = 80, pe = !0, k = 6, xe = new l.Clock(), G = be();
-class ze {
+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;
@@ -30,7 +40,7 @@ class ze {
   _mouseDistortionRadius = 0.25;
   _mouseDecayRate = 0.96;
   _mouseDarken = 0;
-  _mouse = new l.Vector2(-1e3, -1e3);
+  _mouse = new n.Vector2(-1e3, -1e3);
   _mouseFBO = null;
   _sceneMouse = null;
   _cameraMouse = null;
@@ -60,105 +70,120 @@ class ze {
   _yOffsetWaveMultiplier = 4e-3;
   _yOffsetColorMultiplier = 4e-3;
   _yOffsetFlowMultiplier = 4e-3;
-  _tempClearColor = new l.Color();
+  _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: f = 3,
-      verticalPressure: u = 3,
+      horizontalPressure: d = 3,
+      verticalPressure: c = 3,
       waveFrequencyX: s = 5,
-      waveFrequencyY: d = 5,
-      waveAmplitude: x = 3,
-      colors: p,
-      highlights: y = 4,
-      shadows: c = 4,
-      colorSaturation: m = 0,
-      colorBrightness: P = 1,
+      waveFrequencyY: p = 5,
+      waveAmplitude: g = 3,
+      colors: f,
+      highlights: m = 4,
+      shadows: u = 4,
+      colorSaturation: v = 0,
+      colorBrightness: O = 1,
       colorBlending: M = 5,
-      grainScale: T = 2,
-      grainIntensity: C = 0.55,
-      grainSparsity: B = 0,
-      grainSpeed: z = 0.1,
+      grainScale: z = 2,
+      grainIntensity: y = 0.55,
+      grainSparsity: T = 0,
+      grainSpeed: C = 0.1,
       wireframe: a = !1,
-      backgroundColor: n = "#FFFFFF",
+      backgroundColor: l = "#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
+      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 = 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;
+    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) {
-        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)));
+      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);
         }
-        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();
+      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((g) => {
-      ve();
-    }), this.sizeObserver.observe(o), I();
+    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.sceneState && (this.sceneState.renderer.dispose(), this.sceneState.meshes.forEach((e) => {
+    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), Se(o, e);
+    console.log("data", o), Te(o, e);
   }
   set speed(e) {
     this._speed = e / 20;
@@ -179,7 +204,7 @@ class ze {
     this._waveAmplitude = e * 0.75;
   }
   set colors(e) {
-    this._colors = e;
+    this._colors = e, this._colorsChanged = !0;
   }
   set highlights(e) {
     this._highlights = e / 100;
@@ -275,25 +300,25 @@ class ze {
     this._mouseDarken = e;
   }
   set enableProceduralTexture(e) {
-    this._enableProceduralTexture = e, e && !this._proceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._enableProceduralTexture = e, e && !this._proceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureVoidLikelihood(e) {
-    this._textureVoidLikelihood = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureVoidLikelihood = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureVoidWidthMin(e) {
-    this._textureVoidWidthMin = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureVoidWidthMin = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureVoidWidthMax(e) {
-    this._textureVoidWidthMax = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureVoidWidthMax = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureBandDensity(e) {
-    this._textureBandDensity = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureBandDensity = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureColorBlending(e) {
-    this._textureColorBlending = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureColorBlending = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureSeed(e) {
-    this._textureSeed = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureSeed = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   get textureEase() {
     return this._textureEase;
@@ -302,58 +327,58 @@ class ze {
     this._textureEase = e;
   }
   set proceduralBackgroundColor(e) {
-    this._proceduralBackgroundColor = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._proceduralBackgroundColor = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeTriangles(e) {
-    this._textureShapeTriangles = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureShapeTriangles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeCircles(e) {
-    this._textureShapeCircles = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureShapeCircles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeBars(e) {
-    this._textureShapeBars = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    this._textureShapeBars = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   set textureShapeSquiggles(e) {
-    this._textureShapeSquiggles = e, this._enableProceduralTexture && (this._proceduralTexture = this._createProceduralTexture());
+    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((c) => {
-      c.geometry.dispose(), Array.isArray(c.material) ? c.material.forEach((m) => m.dispose()) : c.material.dispose();
+    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 f = new l.WebGLRenderer({
+    const d = new n.WebGLRenderer({
       alpha: !0,
       preserveDrawingBuffer: !0,
       canvas: this._ref
     });
-    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,
+    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: u,
+      meshes: c,
       resolution: e
     };
   }
   _buildMaterial(e, o) {
-    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 = {
+    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 l.Vector2(this._horizontalPressure, this._verticalPressure) },
+      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 l.Vector2(e, o) },
+      u_resolution: { value: new n.Vector2(e, o) },
       u_colors: { value: t },
       u_colors_count: { value: this._colors.length },
-      u_plane_width: { value: D },
-      u_plane_height: { value: E },
+      u_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 },
@@ -379,164 +404,180 @@ class ze {
       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()
+    }, c = new n.ShaderMaterial({
+      uniforms: d,
+      vertexShader: H() + Y() + J() + Ce(),
+      fragmentShader: H() + J() + Y() + Me()
     });
-    return this._cachedUniforms = f, u.wireframe = pe, u;
+    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 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,
+    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 u = document.createElement("canvas");
-    u.width = 128, u.height = 128;
-    const s = u.getContext("2d");
+    const c = document.createElement("canvas");
+    c.width = 128, c.height = 128;
+    const s = c.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 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 d = new l.CanvasTexture(u), x = new l.MeshBasicMaterial({
-      map: d,
+    const p = new n.CanvasTexture(c), g = new n.MeshBasicMaterial({
+      map: p,
       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 });
+      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, 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;
+    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");
+    const t = o.getContext("2d", { willReadFrequently: !0 });
     if (!t)
-      return new l.Texture();
-    let f = this._textureSeed;
-    const u = this._textureSeed;
+      return new n.Texture();
+    let d = this._textureSeed;
+    const c = this._textureSeed;
     function s() {
-      const a = Math.sin(f++) * 1e4;
+      const a = Math.sin(d++) * 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);
+    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: n >> 16 & 255,
-        g: n >> 8 & 255,
-        b: n & 255
+        r: l >> 16 & 255,
+        g: l >> 8 & 255,
+        b: l & 255
       };
     }
-    function y(a, n, h) {
-      return "#" + ((1 << 24) + (Math.round(a) << 16) + (Math.round(n) << 8) + Math.round(h)).toString(16).slice(1);
+    function m(a, l, h) {
+      return "#" + ((1 << 24) + (Math.round(a) << 16) + (Math.round(l) << 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);
+    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 = 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();
+      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 = 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();
+      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 = c(), t.save(), t.translate(s() * 1024, s() * 1024), t.rotate(s() * Math.PI), t.fillRect(-150, -25, 300, 50), t.restore();
+      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 = c(), t.beginPath();
-      let n = s() * 1024, h = s() * 1024;
-      t.moveTo(n, h);
+      t.strokeStyle = u(), t.beginPath();
+      let l = s() * 1024, h = s() * 1024;
+      t.moveTo(l, h);
       for (let _ = 0; _ < 4; _++)
         t.bezierCurveTo(
-          n + (s() - 0.5) * 300,
+          l + (s() - 0.5) * 300,
           h + (s() - 0.5) * 300,
-          n + (s() - 0.5) * 300,
+          l + (s() - 0.5) * 300,
           h + (s() - 0.5) * 300,
-          n + (s() - 0.5) * 300,
+          l + (s() - 0.5) * 300,
           h + (s() - 0.5) * 300
-        ), n += (s() - 0.5) * 300, h += (s() - 0.5) * 300;
+        ), l += (s() - 0.5) * 300, h += (s() - 0.5) * 300;
       t.stroke();
     }
-    d(5e4);
+    p(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; )
+    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 n = this._textureVoidWidthMin + s() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
-        B.push({ type: "void", x: C, width: n }), C += n;
+        const l = this._textureVoidWidthMin + s() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
+        T.push({ type: "void", x: y, width: l }), y += l;
       } else {
-        const n = 50 + s() * 200;
-        B.push({ type: "matter", x: C, width: n }), C += n;
+        const l = 50 + s() * 200;
+        T.push({ type: "matter", x: y, width: l }), y += l;
       }
-    for (const a of B)
+    for (const a of T)
       if (a.type === "matter") {
-        const n = a.x, h = Math.min(a.x + a.width, 1024);
-        let _ = n;
+        const l = a.x, h = Math.min(a.x + a.width, 1024);
+        let _ = l;
         for (; _ < h; ) {
-          const b = (2 + s() * 20) / this._textureBandDensity, F = Math.floor(s() * 1024);
-          T.drawImage(
+          const S = (2 + s() * 20) / this._textureBandDensity, B = Math.floor(s() * 1024);
+          z.drawImage(
             o,
-            F,
+            B,
             0,
-            b,
+            S,
             1024,
             _,
             0,
-            b,
+            S,
             1024
-          ), _ += b;
+          ), _ += S;
         }
       }
-    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;
+    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 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 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());
 }
-function ge() {
-  return `
+let k = null, A = null;
+function Ce() {
+  return k || (k = `
 void main() {
     vUv = uv;
 
@@ -613,10 +654,10 @@ void main() {
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
     v_new_position = gl_Position;
 }
-`;
+`, k);
 }
-function me() {
-  return `
+function Me() {
+  return A || (A = `
 float random(vec2 p) {
     return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
 }
@@ -698,9 +739,10 @@ void main() {
 
     gl_FragColor = vec4(color, 1.0);
 }
-    `;
+    `, A);
 }
-const V = () => `
+let R = null;
+const H = () => R || (R = `
 precision highp float;
 
 struct Color {
@@ -764,7 +806,9 @@ varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `, L = () => `
+    `, R);
+let I = null;
+const Y = () => I || (I = `
 
 // 1. REPLACEMENT PERMUTE: 
 // Uses a hash function (fract/sin) instead of a modular lookup table.
@@ -917,7 +961,9 @@ float cnoise(vec3 P)
   float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
   return 2.2 * n_xyz;
 }
-`, N = () => `
+`, I);
+let W = null;
+const J = () => W || (W = `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -960,36 +1006,63 @@ 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);
 }
-`, 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");
+`, 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 === G)
-        return j(e[t]), e[t];
+      if (e[t].id === Q)
+        return Z(e[t]), e[t];
   }
   const o = document.createElement("a");
-  return j(o), r.parentElement?.appendChild(o), o;
+  return Z(o), i.parentElement?.appendChild(o), o;
 };
-function we() {
-  const r = new Date(), e = r.getMinutes(), o = r.getSeconds();
+function Oe() {
+  const i = new Date(), e = i.getMinutes(), o = i.getSeconds();
   return e * 60 + o;
 }
-function be(r = 6) {
+function Fe(i = 6) {
   const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let o = "";
-  for (let t = 0; t < r; t++) {
-    const f = Math.floor(Math.random() * e.length);
-    o += e.charAt(f);
+  for (let t = 0; t < i; t++) {
+    const d = Math.floor(Math.random() * e.length);
+    o += e.charAt(d);
   }
   return o;
 }
-function Se(r, e) {
+function Te(i, e) {
   const o = document.createElement("a");
-  o.download = e, o.href = r, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+  o.download = e, o.href = i, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+}
+function Be() {
+  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({
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "NEAT Gradient",
+    url: "https://neat.firecms.co",
+    author: {
+      "@type": "Organization",
+      name: "FireCMS",
+      url: "https://firecms.co"
+    },
+    description: "Beautiful, fast, heavily customizable, WebGL based gradients."
+  }), document.head.appendChild(i);
+  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);
+  } catch {
+    const t = document.createElement("a");
+    t.href = "https://firecms.co", t.textContent = "FireCMS", e.appendChild(t);
+  }
+  document.body.appendChild(e);
 }
 export {
-  ze as NeatGradient
+  Ue as NeatGradient
 };
 //# sourceMappingURL=index.es.js.map