@firecms/neat 0.5.1 → 0.6.0

package/dist/index.es.js

@@ -1,6 +1,16 @@
-import * as l from "three";
-const U = 50, D = 80, be = !0, j = 6, ze = new l.Clock(), Q = Te();
-class Be {
+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 Be {
   _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,7 +70,7 @@ class Be {
   _yOffsetWaveMultiplier = 4e-3;
   _yOffsetColorMultiplier = 4e-3;
   _yOffsetFlowMultiplier = 4e-3;
-  _tempClearColor = new l.Color();
+  _tempClearColor = new n.Color();
   _resizeTimeoutId = null;
   _textureNeedsUpdate = !1;
   _lastColorUpdate = 0;
@@ -70,31 +80,31 @@ class Be {
   _colorsChanged = !0;
   constructor(e) {
     const {
-      ref: s,
+      ref: o,
       speed: t = 4,
-      horizontalPressure: f = 3,
+      horizontalPressure: d = 3,
       verticalPressure: c = 3,
-      waveFrequencyX: o = 5,
+      waveFrequencyX: s = 5,
       waveFrequencyY: p = 5,
       waveAmplitude: g = 3,
-      colors: d,
-      highlights: v = 4,
+      colors: f,
+      highlights: m = 4,
       shadows: u = 4,
-      colorSaturation: x = 0,
+      colorSaturation: v = 0,
       colorBrightness: O = 1,
       colorBlending: M = 5,
       grainScale: z = 2,
       grainIntensity: y = 0.55,
-      grainSparsity: F = 0,
+      grainSparsity: T = 0,
       grainSpeed: C = 0.1,
       wireframe: a = !1,
-      backgroundColor: n = "#FFFFFF",
+      backgroundColor: l = "#FFFFFF",
       backgroundAlpha: h = 1,
       resolution: _ = 1,
       seed: S,
       yOffset: B = 0,
       yOffsetWaveMultiplier: N = 4,
-      yOffsetColorMultiplier: V = 4,
+      yOffsetColorMultiplier: L = 4,
       yOffsetFlowMultiplier: $ = 4,
       flowDistortionA: ee = 0,
       flowDistortionB: te = 0,
@@ -103,77 +113,77 @@ class Be {
       flowEnabled: ie = !0,
       mouseDistortionStrength: re = 0,
       mouseDistortionRadius: ae = 0.25,
-      mouseDecayRate: le = 0.96,
-      mouseDarken: ne = 0,
+      mouseDecayRate: ne = 0.96,
+      mouseDarken: le = 0,
       enableProceduralTexture: ue = !1,
       textureVoidLikelihood: ce = 0.45,
       textureVoidWidthMin: _e = 200,
       textureVoidWidthMax: he = 486,
-      textureBandDensity: fe = 2.15,
-      textureColorBlending: de = 0.01,
+      textureBandDensity: de = 2.15,
+      textureColorBlending: fe = 0.01,
       textureSeed: pe = 333,
-      textureEase: ve = 0.5,
-      proceduralBackgroundColor: xe = "#000000",
+      textureEase: me = 0.5,
+      proceduralBackgroundColor: ve = "#000000",
       textureShapeTriangles: ge = 20,
-      textureShapeCircles: me = 15,
+      textureShapeCircles: xe = 15,
       textureShapeBars: ye = 15,
       textureShapeSquiggles: we = 10
     } = e;
-    this._ref = s, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = t, this.horizontalPressure = f, this.verticalPressure = c, this.waveFrequencyX = o, this.waveFrequencyY = p, this.waveAmplitude = g, this.colorBlending = M, this.grainScale = z, this.grainIntensity = y, this.grainSparsity = F, this.grainSpeed = C, this.colors = d, this.shadows = u, this.highlights = v, this.colorSaturation = x, this.colorBrightness = O, this.wireframe = a, this.backgroundColor = n, this.backgroundAlpha = h, this.yOffset = B, this.yOffsetWaveMultiplier = N, this.yOffsetColorMultiplier = V, 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 = le, this.mouseDarken = ne, this.enableProceduralTexture = ue, this.textureVoidLikelihood = ce, this.textureVoidWidthMin = _e, this.textureVoidWidthMax = he, this.textureBandDensity = fe, this.textureColorBlending = de, this.textureSeed = pe, this.textureEase = ve, this._proceduralBackgroundColor = xe, this._textureShapeTriangles = ge, this._textureShapeCircles = me, this._textureShapeBars = ye, this._textureShapeSquiggles = we, this._setupMouseInteraction(), this.sceneState = this._initScene(_);
+    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: T } = this.sceneState;
-      if (this._linkCheckCounter++, this._linkCheckCounter >= 300 && (this._linkCheckCounter = 0, (!this._linkElement || !document.contains(this._linkElement)) && (this._linkElement = Pe(s))), this._cachedUniforms) {
-        const i = this._cachedUniforms;
-        G += ze.getDelta() * this._speed, i.u_time.value = G, 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, this._textureNeedsUpdate && this._enableProceduralTexture && (this._proceduralTexture && this._proceduralTexture.dispose(), this._proceduralTexture = this._createProceduralTexture(), this._textureNeedsUpdate = !1), i.u_procedural_texture.value = this._proceduralTexture, i.u_texture_ease.value = this._textureEase, this.sceneState.meshes[0].material.wireframe = this._wireframe;
-        const m = Date.now();
-        if (this._colorsChanged || m - this._lastColorUpdate > 100) {
-          this._lastColorUpdate = m, this._colorsChanged = !1;
-          const q = i.u_colors.value;
+      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 L = this._colors[P];
-              q[P].is_active = L.enabled ? 1 : 0, q[P].color.setStyle(L.color, ""), q[P].influence = L.influence || 0;
+              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;
-          i.u_colors_count.value = j;
+          r.u_colors_count.value = j;
         }
       }
       if (this._mouseFBO && this._sceneMouse && this._cameraMouse && this._mouseDistortionStrength > 0) {
-        let i = !1;
-        for (let m = 0; m < this._mouseObjects.length; m++) {
-          const b = this._mouseObjects[m];
-          b.mesh.visible && (i = !0, b.mesh.rotation.z += 0.01, b.mesh.material instanceof l.MeshBasicMaterial && (b.mesh.material.opacity *= this._mouseDecayRate, b.mesh.material.opacity < 0.01 && (b.mesh.visible = !1)));
+        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 (i) {
+        if (r) {
           w.getClearColor(this._tempClearColor);
-          const m = 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, m), this._cachedUniforms && (this._cachedUniforms.u_mouse_texture.value = this._mouseFBO.texture);
+          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(T, E), this.requestRef = requestAnimationFrame(X);
+      w.setClearColor(this._backgroundColor, this._backgroundAlpha), w.render(F, E), this.requestRef = requestAnimationFrame(X);
     }, Se = () => {
-      const { renderer: w } = this.sceneState, E = w.domElement, T = E.clientWidth, i = E.clientHeight;
-      if (this.sceneState.renderer.setSize(T, i, !1), K(this.sceneState.camera, T, i), this._mouseFBO && this._cameraMouse) {
-        const m = i / 2, b = T / i;
-        this._mouseFBO.setSize(T / 2, i / 2), this._cameraMouse.left = -m * b, this._cameraMouse.right = m * b, this._cameraMouse.top = m, this._cameraMouse.bottom = -m, this._cameraMouse.updateProjectionMatrix();
+      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(s), X();
+    }), 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((s) => s.dispose()) : e.material.dispose();
+      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 s = this._ref.toDataURL("image/png");
-    console.log("data", s), Fe(s, e);
+    const o = this._ref.toDataURL("image/png");
+    console.log("data", o), Te(o, e);
   }
   set speed(e) {
     this._speed = e / 20;
@@ -332,39 +342,39 @@ class Be {
     this._textureShapeSquiggles = e, this._enableProceduralTexture && (this._textureNeedsUpdate = !0);
   }
   _initScene(e) {
-    const s = this._ref.width, t = this._ref.height;
+    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((x) => x.dispose()) : u.material.dispose();
+      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(s, t, !1);
-    const c = [], o = new l.Scene(), p = this._buildMaterial(s, t), g = new l.PlaneGeometry(U, D, 240 * e, 240 * e), d = new l.Mesh(g, p);
-    d.rotation.x = -Math.PI / 3.5, d.position.z = -1, c.push(d), o.add(d);
-    const v = new l.OrthographicCamera(0, 0, 0, 0, 0, 0);
-    return v.position.z = 5, K(v, s, t), {
-      renderer: f,
-      camera: v,
-      scene: o,
+    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, s) {
-    const t = Array.from({ length: j }).map((o, p) => ({
+  _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 l.Color(p < this._colors.length ? this._colors[p].color : 0),
+      color: new n.Color(p < this._colors.length ? this._colors[p].color : 0),
       influence: p < this._colors.length && this._colors[p].influence || 0
-    })), f = {
+    })), 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, s) },
+      u_resolution: { value: new n.Vector2(e, o) },
       u_colors: { value: t },
       u_colors_count: { value: this._colors.length },
       u_plane_width: { value: U },
@@ -394,22 +404,22 @@ class Be {
       u_saturation: { value: this._saturation },
       u_brightness: { value: this._brightness },
       u_color_blending: { value: this._colorBlending }
-    }, c = new l.ShaderMaterial({
-      uniforms: f,
-      vertexShader: H() + Y() + Z() + Ce(),
-      fragmentShader: H() + Z() + Y() + Me()
+    }, c = new n.ShaderMaterial({
+      uniforms: d,
+      vertexShader: H() + Y() + J() + Ce(),
+      fragmentShader: H() + J() + Y() + Me()
     });
-    return this._cachedUniforms = f, c.wireframe = be, c;
+    return this._cachedUniforms = d, c.wireframe = be, c;
   }
   _setupMouseInteraction() {
     if (!this._ref)
       return;
-    const e = this._ref.width, s = this._ref.height;
-    this._mouseFBO = new l.WebGLRenderTarget(e / 2, s / 2), this._sceneMouse = new l.Scene();
-    const t = s / 2, f = e / s;
-    this._cameraMouse = new l.OrthographicCamera(
-      -t * f,
-      t * f,
+    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,
@@ -417,100 +427,100 @@ class Be {
     ), this._cameraMouse.position.set(0, 0, 100);
     const c = document.createElement("canvas");
     c.width = 128, c.height = 128;
-    const o = c.getContext("2d");
-    if (o) {
-      const u = o.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)"), o.fillStyle = u, o.fillRect(0, 0, 128, 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 l.CanvasTexture(c), g = new l.MeshBasicMaterial({
+    const p = new n.CanvasTexture(c), g = new n.MeshBasicMaterial({
       map: p,
       transparent: !0,
       opacity: 1,
       depthTest: !1,
-      blending: l.AdditiveBlending
-    }), d = new l.PlaneGeometry(200, 200), v = 50;
-    for (let u = 0; u < v; u++) {
-      const x = new l.Mesh(d, g.clone());
-      x.visible = !1, this._sceneMouse.add(x), this._mouseObjects.push({ mesh: x, 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 s = this._ref.getBoundingClientRect(), t = this._ref.width, f = this._ref.height;
+    const o = this._ref.getBoundingClientRect(), t = this._ref.width, d = this._ref.height;
     this._pendingMousePosition = {
-      x: e.clientX - s.left - t / 2,
-      y: -(e.clientY - s.top - f / 2)
+      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 l.MeshBasicMaterial && (c.mesh.material.opacity = 1), this._currentBrush = (this._currentBrush + 1) % this._mouseObjects.length, this._pendingMousePosition = null;
+      c.mesh.scale.set(this._mouseBrushBaseScale, this._mouseBrushBaseScale, 1), c.active = !0, c.mesh.visible = !0, c.mesh.position.set(this._mouse.x, this._mouse.y, 0), c.mesh.rotation.z = Math.random() * Math.PI * 2, c.mesh.material instanceof n.MeshBasicMaterial && (c.mesh.material.opacity = 1), this._currentBrush = (this._currentBrush + 1) % this._mouseObjects.length, this._pendingMousePosition = null;
     }));
   }
   _createProceduralTexture() {
-    const s = document.createElement("canvas");
-    s.width = 1024, s.height = 1024;
-    const t = s.getContext("2d", { willReadFrequently: !0 });
+    const o = document.createElement("canvas");
+    o.width = 1024, o.height = 1024;
+    const t = o.getContext("2d", { willReadFrequently: !0 });
     if (!t)
-      return new l.Texture();
-    let f = this._textureSeed;
+      return new n.Texture();
+    let d = this._textureSeed;
     const c = this._textureSeed;
-    function o() {
-      const a = Math.sin(f++) * 1e4;
+    function s() {
+      const a = Math.sin(d++) * 1e4;
       return a - Math.floor(a);
     }
     const p = (a) => {
-      f = c + a;
+      d = c + a;
     }, g = this._colors.filter((a) => a.enabled).map((a) => a.color);
     if (g.length === 0)
-      return new l.Texture();
-    function d(a) {
-      const n = parseInt(a.replace("#", ""), 16);
+      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 v(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 u = () => {
-      const a = g[Math.floor(o() * g.length)], n = g[Math.floor(o() * g.length)], h = o() * this._textureColorBlending, _ = d(a), S = d(n), B = _.r + (S.r - _.r) * h, N = _.g + (S.g - _.g) * h, V = _.b + (S.b - _.b) * h;
-      return v(B, N, V);
-    }, x = this._proceduralBackgroundColor || "#000000";
-    t.fillStyle = x, t.fillRect(0, 0, 1024, 1024);
+      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 n = o() * 1024, h = o() * 1024, _ = 100 + o() * 300;
-      t.moveTo(n, h), t.lineTo(n + (o() - 0.5) * _, h + (o() - 0.5) * _), t.lineTo(n + (o() - 0.5) * _, h + (o() - 0.5) * _), t.fill();
+      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 + o() * 50, t.beginPath();
-      const n = o() * 1024, h = o() * 1024, _ = 50 + o() * 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 = u(), t.save(), t.translate(o() * 1024, o() * 1024), t.rotate(o() * 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 = u(), t.beginPath();
-      let n = o() * 1024, h = o() * 1024;
-      t.moveTo(n, h);
+      let l = s() * 1024, h = s() * 1024;
+      t.moveTo(l, h);
       for (let _ = 0; _ < 4; _++)
         t.bezierCurveTo(
-          n + (o() - 0.5) * 300,
-          h + (o() - 0.5) * 300,
-          n + (o() - 0.5) * 300,
-          h + (o() - 0.5) * 300,
-          n + (o() - 0.5) * 300,
-          h + (o() - 0.5) * 300
-        ), n += (o() - 0.5) * 300, h += (o() - 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
+        ), l += (s() - 0.5) * 300, h += (s() - 0.5) * 300;
       t.stroke();
     }
     p(5e4);
@@ -518,26 +528,26 @@ class Be {
     M.width = 1024, M.height = 1024;
     const z = M.getContext("2d", { willReadFrequently: !0 });
     if (!z)
-      return new l.Texture();
-    z.fillStyle = x, z.fillRect(0, 0, 1024, 1024);
+      return new n.Texture();
+    z.fillStyle = v, z.fillRect(0, 0, 1024, 1024);
     let y = 0;
-    const F = [];
+    const T = [];
     for (; y < 1024; )
-      if (o() < this._textureVoidLikelihood) {
-        const n = this._textureVoidWidthMin + o() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
-        F.push({ type: "void", x: y, width: n }), y += n;
+      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 n = 50 + o() * 200;
-        F.push({ type: "matter", x: y, width: n }), y += n;
+        const l = 50 + s() * 200;
+        T.push({ type: "matter", x: y, width: l }), y += l;
       }
-    for (const a of F)
+    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 S = (2 + o() * 20) / this._textureBandDensity, B = Math.floor(o() * 1024);
+          const S = (2 + s() * 20) / this._textureBandDensity, B = Math.floor(s() * 1024);
           z.drawImage(
-            s,
+            o,
             B,
             0,
             S,
@@ -549,25 +559,25 @@ class Be {
           ), _ += S;
         }
       }
-    const C = new l.CanvasTexture(M);
-    return C.minFilter = l.LinearMipmapLinearFilter, C.magFilter = l.LinearFilter, C.wrapS = l.RepeatWrapping, C.wrapT = l.RepeatWrapping, C.anisotropy = 16, C.needsUpdate = !0, C;
+    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(r, e, s) {
-  const c = e * s / 1e6 * U * D / 1.5, o = e / s, p = Math.sqrt(c * o), g = c / p;
-  let d = -U / 2, v = Math.min((d + p) / 1.5, U / 2), u = D / 4, x = Math.max((u - g) / 2, -D / 4);
-  if (o < 1) {
-    const z = o;
-    d = d * z, v = v * z;
+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;
-    d = d * y, v = v * y, u = u * y, x = x * y;
+    f = f * y, m = m * y, u = u * y, v = v * y;
   }
   const O = -100, M = 1e3;
-  r instanceof l.OrthographicCamera ? (r.left = d, r.right = v, r.top = u, r.bottom = x, r.near = O, r.far = M, r.updateProjectionMatrix()) : r instanceof l.PerspectiveCamera && (r.aspect = e / s, r.updateProjectionMatrix());
+  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 R = null, A = null;
+let k = null, A = null;
 function Ce() {
-  return R || (R = `
+  return k || (k = `
 void main() {
     vUv = uv;
 
@@ -644,7 +654,7 @@ void main() {
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
     v_new_position = gl_Position;
 }
-`, R);
+`, k);
 }
 function Me() {
   return A || (A = `
@@ -731,8 +741,8 @@ void main() {
 }
     `, A);
 }
-let k = null;
-const H = () => k || (k = `
+let R = null;
+const H = () => R || (R = `
 precision highp float;
 
 struct Color {
@@ -796,7 +806,7 @@ varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `, k);
+    `, R);
 let I = null;
 const Y = () => I || (I = `
 
@@ -953,7 +963,7 @@ float cnoise(vec3 P)
 }
 `, I);
 let W = null;
-const Z = () => W || (W = `
+const J = () => W || (W = `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -996,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);
 }
-`, W), J = (r) => {
-  r.id = Q, 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";
-}, Pe = (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 === Q)
-        return J(e[t]), e[t];
+        return Z(e[t]), e[t];
   }
-  const s = document.createElement("a");
-  return J(s), r.parentElement?.appendChild(s), s;
+  const o = document.createElement("a");
+  return Z(o), i.parentElement?.appendChild(o), o;
 };
 function Oe() {
-  const r = new Date(), e = r.getMinutes(), s = r.getSeconds();
-  return e * 60 + s;
+  const i = new Date(), e = i.getMinutes(), o = i.getSeconds();
+  return e * 60 + o;
 }
-function Te(r = 6) {
+function Fe(i = 6) {
   const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let s = "";
-  for (let t = 0; t < r; t++) {
-    const f = Math.floor(Math.random() * e.length);
-    s += e.charAt(f);
+  let o = "";
+  for (let t = 0; t < i; t++) {
+    const d = Math.floor(Math.random() * e.length);
+    o += e.charAt(d);
   }
-  return s;
+  return o;
 }
-function Fe(r, e) {
-  const s = document.createElement("a");
-  s.download = e, s.href = r, document.body.appendChild(s), s.click(), document.body.removeChild(s);
+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() {
+  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 {
-  Be as NeatGradient
+  Ue as NeatGradient
 };
 //# sourceMappingURL=index.es.js.map