@firecms/neat 0.2.1 → 0.3.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import * as r from "three";
-const g = 50, _ = 80, V = !0, C = 5, j = new r.Clock();
-class G {
+import * as i from "three";
+const g = 50, _ = 80, H = !0, S = 5, W = new i.Clock(), N = Z();
+class $ {
   _ref;
   _speed = -1;
   _horizontalPressure = -1;
@@ -12,6 +12,9 @@ class G {
   _highlights = -1;
   _saturation = -1;
   _brightness = -1;
+  _grainScale = -1;
+  _grainIntensity = -1;
+  _grainSpeed = -1;
   _colorBlending = -1;
   _colors = [];
   _wireframe = !1;
@@ -23,49 +26,55 @@ class G {
   constructor(e) {
     const {
       ref: o,
-      speed: s = 4,
-      horizontalPressure: l = 3,
-      verticalPressure: n = 3,
-      waveFrequencyX: a = 5,
-      waveFrequencyY: u = 5,
-      waveAmplitude: x = 3,
-      colors: c,
-      highlights: v = 4,
-      shadows: h = 4,
+      speed: n = 4,
+      horizontalPressure: s = 3,
+      verticalPressure: a = 3,
+      waveFrequencyX: c = 5,
+      waveFrequencyY: v = 5,
+      waveAmplitude: m = 3,
+      colors: l,
+      highlights: u = 4,
+      shadows: x = 4,
       colorSaturation: p = 0,
       colorBrightness: w = 1,
       colorBlending: b = 5,
-      wireframe: E = !1,
-      backgroundColor: O = "#FFFFFF",
-      backgroundAlpha: N = 1,
-      resolution: R = 1,
-      seed: q
+      grainScale: O = 2,
+      grainIntensity: R = 0.55,
+      grainSpeed: B = 0.1,
+      wireframe: K = !1,
+      backgroundColor: D = "#FFFFFF",
+      backgroundAlpha: L = 1,
+      resolution: T = 1,
+      seed: C
     } = e;
-    this._ref = o, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = s, this.horizontalPressure = l, this.verticalPressure = n, this.waveFrequencyX = a, this.waveFrequencyY = u, this.waveAmplitude = x, this.colorBlending = b, this.colors = c, this.shadows = h, this.highlights = v, this.colorSaturation = p, this.colorBrightness = w, this.wireframe = E, this.backgroundColor = O, this.backgroundAlpha = N, this.sceneState = this._initScene(R);
-    let z = q !== void 0 ? q : W();
-    const F = () => {
-      const { renderer: m, camera: f, scene: d, meshes: y } = this.sceneState;
-      Math.floor(z * 10) % 5 === 0 && H(o), m.setClearColor(this._backgroundColor, this._backgroundAlpha), y.forEach((i) => {
-        const I = this._ref.width, K = this._ref.height, T = [
-          ...this._colors.map((P) => ({
-            is_active: P.enabled,
-            color: new r.Color(P.color),
-            influence: P.influence
-          })),
-          ...Array.from({ length: C - this._colors.length }).map(() => ({
+    this._ref = o, this.destroy = this.destroy.bind(this), this._initScene = this._initScene.bind(this), this._buildMaterial = this._buildMaterial.bind(this), this.speed = n, this.horizontalPressure = s, this.verticalPressure = a, this.waveFrequencyX = c, this.waveFrequencyY = v, this.waveAmplitude = m, this.colorBlending = b, this.grainScale = O, this.grainIntensity = R, this.grainSpeed = B, this.colors = l, this.shadows = x, this.highlights = u, this.colorSaturation = p, this.colorBrightness = w, this.wireframe = K, this.backgroundColor = D, this.backgroundAlpha = L, this.sceneState = this._initScene(T);
+    let z = C !== void 0 ? C : Q();
+    const q = () => {
+      const { renderer: h, camera: f, scene: d, meshes: y } = this.sceneState;
+      Math.floor(z * 10) % 5 === 0 && J(o), h.setClearColor(this._backgroundColor, this._backgroundAlpha), y.forEach((r) => {
+        const j = this._ref.width, Y = this._ref.height, G = [
+          ...this._colors.map((P) => {
+            let F = new i.Color();
+            return F.setStyle(P.color, ""), {
+              is_active: P.enabled,
+              color: F,
+              influence: P.influence
+            };
+          }),
+          ...Array.from({ length: S - this._colors.length }).map(() => ({
             is_active: !1,
-            color: new r.Color(0)
+            color: new i.Color(0)
           }))
         ];
-        z += j.getDelta() * this._speed, i.material.uniforms.u_time.value = z, i.material.uniforms.u_resolution = { value: new r.Vector2(I, K) }, i.material.uniforms.u_color_pressure = { value: new r.Vector2(this._horizontalPressure, this._verticalPressure) }, i.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX }, i.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY }, i.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude }, i.material.uniforms.u_plane_width = { value: g }, i.material.uniforms.u_plane_height = { value: _ }, i.material.uniforms.u_color_blending = { value: this._colorBlending }, i.material.uniforms.u_colors = { value: T }, i.material.uniforms.u_colors_count = { value: C }, i.material.uniforms.u_shadows = { value: this._shadows }, i.material.uniforms.u_highlights = { value: this._highlights }, i.material.uniforms.u_saturation = { value: this._saturation }, i.material.uniforms.u_brightness = { value: this._brightness }, i.material.wireframe = this._wireframe;
-      }), m.render(d, f), this.requestRef = requestAnimationFrame(F);
-    }, B = () => {
-      const { renderer: m } = this.sceneState, f = m.domElement, d = f.clientWidth, y = f.clientHeight;
-      this.sceneState.renderer.setSize(d, y, !1), S(this.sceneState.camera, d, y);
+        z += W.getDelta() * this._speed, r.material.uniforms.u_time.value = z, r.material.uniforms.u_resolution = { value: new i.Vector2(j, Y) }, r.material.uniforms.u_color_pressure = { value: new i.Vector2(this._horizontalPressure, this._verticalPressure) }, r.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX }, r.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY }, r.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude }, r.material.uniforms.u_plane_width = { value: g }, r.material.uniforms.u_plane_height = { value: _ }, r.material.uniforms.u_color_blending = { value: this._colorBlending }, r.material.uniforms.u_colors = { value: G }, r.material.uniforms.u_colors_count = { value: S }, r.material.uniforms.u_shadows = { value: this._shadows }, r.material.uniforms.u_highlights = { value: this._highlights }, r.material.uniforms.u_saturation = { value: this._saturation }, r.material.uniforms.u_brightness = { value: this._brightness }, r.material.uniforms.u_grain_intensity = { value: this._grainIntensity }, r.material.uniforms.u_grain_speed = { value: this._grainSpeed }, r.material.uniforms.u_grain_scale = { value: this._grainScale }, r.material.wireframe = this._wireframe;
+      }), h.render(d, f), this.requestRef = requestAnimationFrame(q);
+    }, V = () => {
+      const { renderer: h } = this.sceneState, f = h.domElement, d = f.clientWidth, y = f.clientHeight;
+      this.sceneState.renderer.setSize(d, y, !1), A(this.sceneState.camera, d, y);
     };
-    this.sizeObserver = new ResizeObserver((m) => {
-      B();
-    }), this.sizeObserver.observe(o), F();
+    this.sizeObserver = new ResizeObserver((h) => {
+      V();
+    }), this.sizeObserver.observe(o), q();
   }
   destroy() {
     this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect());
@@ -106,6 +115,15 @@ class G {
   set colorBlending(e) {
     this._colorBlending = e / 10;
   }
+  set grainScale(e) {
+    this._grainScale = e == 0 ? 1 : e;
+  }
+  set grainIntensity(e) {
+    this._grainIntensity = e;
+  }
+  set grainSpeed(e) {
+    this._grainSpeed = e;
+  }
   set wireframe(e) {
     this._wireframe = e;
   }
@@ -119,59 +137,62 @@ class G {
     this._backgroundAlpha = e;
   }
   _initScene(e) {
-    const o = this._ref.width, s = this._ref.height, l = new r.WebGLRenderer({
+    const o = this._ref.width, n = this._ref.height, s = new i.WebGLRenderer({
       alpha: !0,
       canvas: this._ref
     });
-    l.setClearColor(16711680, 0.5), l.setSize(o, s, !1);
-    const n = [], a = new r.Scene(), u = this._buildMaterial(o, s), x = new r.PlaneGeometry(g, _, 240 * e, 240 * e), c = new r.Mesh(x, u);
-    c.rotation.x = -Math.PI / 3.5, c.position.z = -1, n.push(c), a.add(c);
-    const v = new r.OrthographicCamera(0, 0, 0, 0, 0, 0);
-    return v.position.z = 5, S(v, o, s), {
-      renderer: l,
-      camera: v,
-      scene: a,
-      meshes: n,
+    s.setClearColor(16711680, 0.5), s.setSize(o, n, !1);
+    const a = [], c = new i.Scene(), v = this._buildMaterial(o, n), m = new i.PlaneGeometry(g, _, 240 * e, 240 * e), l = new i.Mesh(m, v);
+    l.rotation.x = -Math.PI / 3.5, l.position.z = -1, a.push(l), c.add(l);
+    const u = new i.OrthographicCamera(0, 0, 0, 0, 0, 0);
+    return u.position.z = 5, A(u, o, n), {
+      renderer: s,
+      camera: u,
+      scene: c,
+      meshes: a,
       resolution: e
     };
   }
   _buildMaterial(e, o) {
-    const s = [
-      ...this._colors.map((a) => ({
-        is_active: a.enabled,
-        color: new r.Color(a.color),
-        influence: a.influence
+    const n = [
+      ...this._colors.map((c) => ({
+        is_active: c.enabled,
+        color: new i.Color(c.color),
+        influence: c.influence
       })),
-      ...Array.from({ length: C - this._colors.length }).map(() => ({
+      ...Array.from({ length: S - this._colors.length }).map(() => ({
         is_active: !1,
-        color: new r.Color(0)
+        color: new i.Color(0)
       }))
-    ], l = {
+    ], s = {
       u_time: { value: 0 },
-      u_color_pressure: { value: new r.Vector2(this._horizontalPressure, this._verticalPressure) },
+      u_color_pressure: { value: new i.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 r.Vector2(e, o) },
-      u_colors: { value: s },
+      u_resolution: { value: new i.Vector2(e, o) },
+      u_colors: { value: n },
       u_colors_count: { value: this._colors.length },
       u_plane_width: { value: g },
       u_plane_height: { value: _ },
       u_shadows: { value: this._shadows },
-      u_highlights: { value: this._highlights }
-    }, n = new r.ShaderMaterial({
-      uniforms: l,
-      vertexShader: A() + Y() + M() + D(),
-      fragmentShader: A() + M() + L()
+      u_highlights: { value: this._highlights },
+      u_grain_intensity: { value: this._grainIntensity },
+      u_grain_scale: { value: this._grainScale },
+      u_grain_speed: { value: this._grainSpeed }
+    }, a = new i.ShaderMaterial({
+      uniforms: s,
+      vertexShader: I() + M() + k() + U(),
+      fragmentShader: I() + k() + M() + X()
     });
-    return n.wireframe = V, n;
+    return a.wireframe = H, a;
   }
 }
-function S(t, e, o) {
-  const n = e * o / 1e6 * g * _ / 1.5, a = e / o, u = Math.sqrt(n * a), x = n / u, c = -g / 2, v = Math.min((c + u) / 1.5, g / 2), h = _ / 4, p = Math.max((h - x) / 2, -_ / 4), w = -100, b = 1e3;
-  t instanceof r.OrthographicCamera ? (t.left = c, t.right = v, t.top = h, t.bottom = p, t.near = w, t.far = b, t.updateProjectionMatrix()) : t instanceof r.PerspectiveCamera && (t.aspect = e / o, t.updateProjectionMatrix());
+function A(t, e, o) {
+  const a = e * o / 1e6 * g * _ / 1.5, c = e / o, v = Math.sqrt(a * c), m = a / v, l = -g / 2, u = Math.min((l + v) / 1.5, g / 2), x = _ / 4, p = Math.max((x - m) / 2, -_ / 4), w = -100, b = 1e3;
+  t instanceof i.OrthographicCamera ? (t.left = l, t.right = u, t.top = x, t.bottom = p, t.near = w, t.far = b, t.updateProjectionMatrix()) : t instanceof i.PerspectiveCamera && (t.aspect = e / o, t.updateProjectionMatrix());
 }
-function D() {
+function U() {
   return `
 
 void main() {
@@ -201,24 +222,25 @@ void main() {
             float noiseSpeed = (1. + float(i)) * 0.11;
             float noiseSeed = 13. + float(i) * 7.;
             
+            int reverseIndex = u_colors_count - i;
+            
             float noise = snoise(
                 vec3(
                     noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
                     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);
             vec3 nextColor = u_colors[i].color;
+            color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
             
             // vec3 colorOklab = oklab2rgb(color);
             // vec3 nextColorOklab = oklab2rgb(nextColor);
             // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
-            //
             // color = rgb2oklab(mixColor);
             
-            color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
         }
         
     }
@@ -232,22 +254,55 @@ void main() {
 }
 `;
 }
-function L() {
+function X() {
   return `
+float random(vec2 p) {
+    return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
+}
+
+float fbm(vec3 x) {
+    float value = 0.0;
+    float amplitude = 0.5;
+    float frequency = 1.0;
 
+    for (int i = 0; i < 4; i++) {
+        value += amplitude * snoise(x * frequency);
+        frequency *= 2.0;
+        amplitude *= 0.5;
+    }
+    return value;
+}
+    
 void main(){
     vec3 color = v_color;
     
-    color.rgb += pow(v_displacement_amount, 1.0) * u_highlights;
-    color.rgb -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
+    color += pow(v_displacement_amount, 1.0) * u_highlights;
+    color -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
     color = saturation(color, 1.0 + u_saturation);
     color = color * u_brightness;
     
+    // Generate grain using fbm
+    vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
+
+    float grain = (u_grain_speed != 0.0) 
+        ? fbm(vec3(noiseCoords, u_time * u_grain_speed)) 
+        : fbm(vec3(noiseCoords, 0.0));
+
+    // Center the grain around zero
+    grain = grain * 0.5 + 0.5;
+    grain -= 0.5;
+
+    // Apply grain intensity
+    grain *= u_grain_intensity;
+
+    // Add grain to color
+    color += vec3(grain);
+            
     gl_FragColor = vec4(color,1.0);
 }
 `;
 }
-const A = () => `
+const I = () => `
 precision highp float;
 
 struct Color {
@@ -256,6 +311,9 @@ struct Color {
     float value;
 };
 
+uniform float u_grain_intensity; 
+uniform float u_grain_scale; 
+uniform float u_grain_speed; 
 uniform float u_time;
 
 uniform float u_wave_amplitude;
@@ -283,7 +341,7 @@ varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
-    `, Y = () => `
+    `, M = () => `
 
 vec3 mod289(vec3 x)
 {
@@ -493,7 +551,7 @@ vec3 rgb2oklab(vec3 oklab)
     return m2 * (lms * lms * lms);
 }
 
-    `, M = () => `
+    `, k = () => `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -536,25 +594,34 @@ vec3 hsv2rgb(vec3 c)
     vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
     return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
 }
-`, k = (t) => {
-  t.id = "neat-link", t.href = "https://neat.firecms.co", t.target = "_blank", t.style.position = "absolute", t.style.display = "block", t.style.opacity = "1", t.style.bottom = "0", t.style.right = "0", t.style.padding = "10px", t.style.color = "#dcdcdc", t.style.opacity = "0.8", t.style.fontFamily = "sans-serif", t.style.fontSize = "16px", t.style.fontWeight = "bold", t.style.textDecoration = "none", t.style.zIndex = "100", t.innerHTML = "NEAT";
-}, H = (t) => {
+`, E = (t) => {
+  t.id = N, t.href = "https://neat.firecms.co", t.target = "_blank", t.style.position = "absolute", t.style.display = "block", t.style.bottom = "0", t.style.right = "0", t.style.padding = "10px", t.style.color = "#dcdcdc", t.style.opacity = "0.8", t.style.fontFamily = "sans-serif", t.style.fontSize = "16px", t.style.fontWeight = "bold", t.style.textDecoration = "none", t.style.zIndex = "10000", t.innerHTML = "NEAT";
+}, J = (t) => {
   const e = t.parentElement?.getElementsByTagName("a");
   if (e) {
-    for (let s = 0; s < e.length; s++)
-      if (e[s].id === "neat-link") {
-        k(e[s]);
+    for (let n = 0; n < e.length; n++)
+      if (e[n].id === N) {
+        E(e[n]);
         return;
       }
   }
   const o = document.createElement("a");
-  k(o), t.parentElement?.appendChild(o);
+  E(o), t.parentElement?.appendChild(o);
 };
-function W() {
+function Q() {
   const t = new Date(), e = t.getMinutes(), o = t.getSeconds();
   return e * 60 + o;
 }
+function Z(t = 6) {
+  const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let o = "";
+  for (let n = 0; n < t; n++) {
+    const s = Math.floor(Math.random() * e.length);
+    o += e.charAt(s);
+  }
+  return o;
+}
 export {
-  G as NeatGradient
+  $ as NeatGradient
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/NeatGradient.ts"],"sourcesContent":["import * as THREE from \"three\";\n\nconst PLANE_WIDTH = 50;\nconst PLANE_HEIGHT = 80;\n\nconst WIREFRAME = true;\nconst COLORS_COUNT = 5;\n\nconst clock = new THREE.Clock();\n\ntype SceneState = {\n    renderer: THREE.WebGLRenderer,\n    camera: THREE.Camera,\n    scene: THREE.Scene,\n    meshes: THREE.Mesh[],\n    resolution: number\n}\n\nexport type NeatConfig = {\n    resolution?: number;\n    speed?: number;\n    horizontalPressure?: number;\n    verticalPressure?: number;\n    waveFrequencyX?: number;\n    waveFrequencyY?: number;\n    waveAmplitude?: number;\n    highlights?: number;\n    shadows?: number;\n    colorSaturation?: number;\n    colorBrightness?: number;\n    colors: NeatColor[];\n    colorBlending?: number;\n    wireframe?: boolean;\n    backgroundColor?: string;\n    backgroundAlpha?: number;\n};\n\nexport type NeatColor = {\n    color: string;\n    enabled: boolean;\n    /**\n     * Value from 0 to 1\n     */\n    influence?: number;\n}\n\nexport type NeatController = {\n    destroy: () => void;\n}\n\nexport class NeatGradient implements NeatController {\n\n    private _ref: HTMLCanvasElement;\n\n    private _speed: number = -1;\n\n    private _horizontalPressure: number = -1;\n    private _verticalPressure: number = -1;\n\n    private _waveFrequencyX: number = -1;\n    private _waveFrequencyY: number = -1;\n    private _waveAmplitude: number = -1;\n\n    private _shadows: number = -1;\n    private _highlights: number = -1;\n    private _saturation: number = -1;\n    private _brightness: number = -1;\n\n    private _colorBlending: number = -1;\n\n    private _colors: NeatColor[] = [];\n    private _wireframe: boolean = false;\n\n    private _backgroundColor: string = \"#FFFFFF\";\n    private _backgroundAlpha: number = 1.0;\n\n    private requestRef: number = -1;\n    private sizeObserver: ResizeObserver;\n    private sceneState: SceneState;\n\n    constructor(config: NeatConfig & { ref: HTMLCanvasElement, resolution?: number, seed?: number }) {\n\n        const {\n            ref,\n            speed = 4,\n            horizontalPressure = 3,\n            verticalPressure = 3,\n            waveFrequencyX = 5,\n            waveFrequencyY = 5,\n            waveAmplitude = 3,\n            colors,\n            highlights = 4,\n            shadows = 4,\n            colorSaturation = 0,\n            colorBrightness = 1,\n            colorBlending = 5,\n            wireframe = false,\n            backgroundColor = \"#FFFFFF\",\n            backgroundAlpha = 1.0,\n            resolution = 1,\n            seed\n        } = config;\n\n\n        this._ref = ref;\n\n        this.destroy = this.destroy.bind(this);\n        this._initScene = this._initScene.bind(this);\n        this._buildMaterial = this._buildMaterial.bind(this);\n\n        this.speed = speed;\n        this.horizontalPressure = horizontalPressure;\n        this.verticalPressure = verticalPressure;\n        this.waveFrequencyX = waveFrequencyX;\n        this.waveFrequencyY = waveFrequencyY;\n        this.waveAmplitude = waveAmplitude;\n        this.colorBlending = colorBlending;\n        this.colors = colors;\n        this.shadows = shadows;\n        this.highlights = highlights;\n        this.colorSaturation = colorSaturation;\n        this.colorBrightness = colorBrightness;\n        this.wireframe = wireframe;\n        this.backgroundColor = backgroundColor;\n        this.backgroundAlpha = backgroundAlpha;\n\n        this.sceneState = this._initScene(resolution);\n\n        let tick = seed !== undefined ? seed : getElapsedSecondsInLastHour();\n        const render = () => {\n\n            const { renderer, camera, scene, meshes } = this.sceneState;\n            if (Math.floor(tick * 10) % 5 === 0) {\n                addNeatLink(ref);\n            }\n\n            renderer.setClearColor(this._backgroundColor, this._backgroundAlpha);\n            meshes.forEach((mesh) => {\n\n                const width = this._ref.width,\n                    height = this._ref.height;\n\n                const colors = [\n                    ...this._colors.map(color => ({\n                        is_active: color.enabled,\n                        color: new THREE.Color(color.color),\n                        influence: color.influence\n                    })),\n                    ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({\n                        is_active: false,\n                        color: new THREE.Color(0x000000)\n                    }))\n                ];\n\n                tick += clock.getDelta() * this._speed;\n                // @ts-ignore\n                mesh.material.uniforms.u_time.value = tick;\n                // @ts-ignore\n                mesh.material.uniforms.u_resolution = { value: new THREE.Vector2(width, height) };\n                // @ts-ignore\n                mesh.material.uniforms.u_color_pressure = { value: new THREE.Vector2(this._horizontalPressure, this._verticalPressure) };\n                // @ts-ignore\n                mesh.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX };\n                // @ts-ignore\n                mesh.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY };\n                // @ts-ignore\n                mesh.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude };\n                // @ts-ignore\n                mesh.material.uniforms.u_plane_width = { value: PLANE_WIDTH };\n                // @ts-ignore\n                mesh.material.uniforms.u_plane_height = { value: PLANE_HEIGHT };\n                // @ts-ignore\n                mesh.material.uniforms.u_color_blending = { value: this._colorBlending };\n                // @ts-ignore\n                mesh.material.uniforms.u_colors = { value: colors };\n                // @ts-ignore\n                mesh.material.uniforms.u_colors_count = { value: COLORS_COUNT };\n                // @ts-ignore\n                mesh.material.uniforms.u_shadows = { value: this._shadows };\n                // @ts-ignore\n                mesh.material.uniforms.u_highlights = { value: this._highlights };\n                // @ts-ignore\n                mesh.material.uniforms.u_saturation = { value: this._saturation };\n                // @ts-ignore\n                mesh.material.uniforms.u_brightness = { value: this._brightness };\n                // @ts-ignore\n                mesh.material.wireframe = this._wireframe;\n            });\n\n            renderer.render(scene, camera);\n            this.requestRef = requestAnimationFrame(render);\n        };\n\n        const setSize = () => {\n\n            const { renderer } = this.sceneState;\n            const canvas = renderer.domElement;\n            const width = canvas.clientWidth;\n            const height = canvas.clientHeight;\n\n            this.sceneState.renderer.setSize(width, height, false);\n            updateCamera(this.sceneState.camera, width, height);\n        };\n\n        this.sizeObserver = new ResizeObserver(entries => {\n            setSize();\n        });\n\n        this.sizeObserver.observe(ref);\n\n\n        render();\n    }\n\n    destroy() {\n        if (this) {\n            cancelAnimationFrame(this.requestRef);\n            this.sizeObserver.disconnect();\n        }\n    }\n\n    set speed(speed: number) {\n        this._speed = speed / 20;\n    }\n\n    set horizontalPressure(horizontalPressure: number) {\n        this._horizontalPressure = horizontalPressure / 4;\n    }\n\n    set verticalPressure(verticalPressure: number) {\n        this._verticalPressure = verticalPressure / 4;\n    }\n\n    set waveFrequencyX(waveFrequencyX: number) {\n        this._waveFrequencyX = waveFrequencyX * 0.04;\n    }\n\n    set waveFrequencyY(waveFrequencyY: number) {\n        this._waveFrequencyY = waveFrequencyY * 0.04;\n    }\n\n    set waveAmplitude(waveAmplitude: number) {\n        this._waveAmplitude = waveAmplitude * .75;\n    }\n\n    set colors(colors: NeatColor[]) {\n        this._colors = colors;\n    }\n\n    set highlights(highlights: number) {\n        this._highlights = highlights / 100;\n    }\n\n    set shadows(shadows: number) {\n        this._shadows = shadows / 100;\n    }\n\n    set colorSaturation(colorSaturation: number) {\n        this._saturation = colorSaturation / 10;\n    }\n\n    set colorBrightness(colorBrightness: number) {\n        this._brightness = colorBrightness;\n    }\n\n    set colorBlending(colorBlending: number) {\n        this._colorBlending = colorBlending / 10;\n    }\n\n    set wireframe(wireframe: boolean) {\n        this._wireframe = wireframe;\n    }\n\n    set resolution(resolution: number) {\n        this.sceneState = this._initScene(resolution);\n    }\n\n    set backgroundColor(backgroundColor: string) {\n        this._backgroundColor = backgroundColor;\n    }\n\n    set backgroundAlpha(backgroundAlpha: number) {\n        this._backgroundAlpha = backgroundAlpha;\n    }\n\n    _initScene(resolution: number): SceneState {\n\n        const width = this._ref.width,\n            height = this._ref.height;\n\n        const renderer = new THREE.WebGLRenderer({\n            // antialias: true,\n            alpha: true,\n            canvas: this._ref\n        });\n\n        renderer.setClearColor(0xFF0000, .5);\n        renderer.setSize(width, height, false);\n\n        const meshes: THREE.Mesh[] = [];\n\n        const scene = new THREE.Scene();\n\n        const material = this._buildMaterial(width, height);\n\n        const geo = new THREE.PlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);\n        const plane = new THREE.Mesh(geo, material);\n        plane.rotation.x = -Math.PI / 3.5;\n        plane.position.z = -1;\n        meshes.push(plane);\n        scene.add(plane);\n\n        const camera = new THREE.OrthographicCamera(0.0, 0.0, 0.0, 0.0, 0.0, 0.0);\n        // const camera = new THREE.PerspectiveCamera( 1000, window.innerWidth / window.innerHeight, 1, 1000000 );\n        camera.position.z = 5;\n        updateCamera(camera, width, height);\n\n        return {\n            renderer,\n            camera,\n            scene,\n            meshes,\n            resolution\n        };\n    }\n\n    _buildMaterial(width: number, height: number) {\n\n        const colors = [\n            ...this._colors.map(color => ({\n                is_active: color.enabled,\n                color: new THREE.Color(color.color),\n                influence: color.influence\n            })),\n            ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({\n                is_active: false,\n                color: new THREE.Color(0x000000)\n            }))\n        ];\n\n        const uniforms = {\n            u_time: { value: 0 },\n            u_color_pressure: { value: new THREE.Vector2(this._horizontalPressure, this._verticalPressure) },\n            u_wave_frequency_x: { value: this._waveFrequencyX },\n            u_wave_frequency_y: { value: this._waveFrequencyY },\n            u_wave_amplitude: { value: this._waveAmplitude },\n            u_resolution: { value: new THREE.Vector2(width, height) },\n            u_colors: { value: colors },\n            u_colors_count: { value: this._colors.length },\n            u_plane_width: { value: PLANE_WIDTH },\n            u_plane_height: { value: PLANE_HEIGHT },\n            u_shadows: { value: this._shadows },\n            u_highlights: { value: this._highlights },\n        };\n\n        const material = new THREE.ShaderMaterial({\n            uniforms: uniforms,\n            vertexShader: buildUniforms() + buildNoise() + buildColorFunctions() + buildVertexShader(),\n            fragmentShader: buildUniforms() + buildColorFunctions() + buildFragmentShader()\n        });\n\n        material.wireframe = WIREFRAME;\n        return material;\n    }\n\n\n}\n\nfunction updateCamera(camera: THREE.Camera, width: number, height: number) {\n\n    const viewPortAreaRatio = 1000000;\n    const areaViewPort = width * height;\n    const targetPlaneArea =\n        areaViewPort / viewPortAreaRatio *\n        PLANE_WIDTH * PLANE_HEIGHT / 1.5;\n\n    const ratio = width / height;\n\n    const targetWidth = Math.sqrt(targetPlaneArea * ratio);\n    const targetHeight = targetPlaneArea / targetWidth;\n\n    const left = -PLANE_WIDTH / 2;\n    const right = Math.min((left + targetWidth) / 1.5, PLANE_WIDTH / 2);\n\n    const top = PLANE_HEIGHT / 4;\n    const bottom = Math.max((top - targetHeight) / 2, -PLANE_HEIGHT / 4);\n\n    const near = -100;\n    const far = 1000;\n    if (camera instanceof THREE.OrthographicCamera) {\n        camera.left = left;\n        camera.right = right;\n        camera.top = top;\n        camera.bottom = bottom;\n        camera.near = near;\n        camera.far = far;\n        camera.updateProjectionMatrix();\n    } else if (camera instanceof THREE.PerspectiveCamera) {\n        camera.aspect = width / height;\n        camera.updateProjectionMatrix();\n    }\n\n}\n\n\nfunction buildVertexShader() {\n    return `\n\nvoid main() {\n\n    vUv = uv;\n\n    v_displacement_amount = cnoise( vec3(\n        u_wave_frequency_x * position.x + u_time,\n        u_wave_frequency_y * position.y + u_time,\n        u_time\n    ));\n    \n    vec3 color;\n\n    // float t = mod(u_base_color, 100.0);\n    color = u_colors[0].color;\n    \n    vec2 noise_cord = vUv * u_color_pressure;\n    \n    const float minNoise = .0;\n    const float maxNoise = .9;\n    \n    for (int i = 1; i < u_colors_count; i++) {\n    \n        if(u_colors[i].is_active == 1.0){\n            float noiseFlow = (1. + float(i)) / 30.;\n            float noiseSpeed = (1. + float(i)) * 0.11;\n            float noiseSeed = 13. + float(i) * 7.;\n            \n            float noise = snoise(\n                vec3(\n                    noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,\n                    noise_cord.y * u_color_pressure.y,\n                    u_time * noiseSpeed\n                ) + noiseSeed\n            );\n            \n            noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);\n            vec3 nextColor = u_colors[i].color;\n            \n            // vec3 colorOklab = oklab2rgb(color);\n            // vec3 nextColorOklab = oklab2rgb(nextColor);\n            // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));\n            //\n            // color = rgb2oklab(mixColor);\n            \n            color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));\n        }\n        \n    }\n    \n    v_color = color;\n    \n    vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );\n    \n    v_new_position = gl_Position;\n}\n`;\n}\n\nfunction buildFragmentShader() {\n    return `\n\nvoid main(){\n    vec3 color = v_color;\n    \n    color.rgb += pow(v_displacement_amount, 1.0) * u_highlights;\n    color.rgb -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;\n    color = saturation(color, 1.0 + u_saturation);\n    color = color * u_brightness;\n    \n    gl_FragColor = vec4(color,1.0);\n}\n`;\n}\n\nconst buildUniforms = () => `\nprecision highp float;\n\nstruct Color {\n    float is_active;\n    vec3 color;\n    float value;\n};\n\nuniform float u_time;\n\nuniform float u_wave_amplitude;\nuniform float u_wave_frequency_x;\nuniform float u_wave_frequency_y;\n\nuniform vec2 u_color_pressure;\n\nuniform float u_plane_width;\nuniform float u_plane_height;\n\nuniform float u_shadows;\nuniform float u_highlights;\nuniform float u_saturation;\nuniform float u_brightness;\n\nuniform float u_color_blending;\n\nuniform int u_colors_count;\nuniform Color u_colors[5];\nuniform vec2 u_resolution;\n\nvarying vec2 vUv;\nvarying vec4 v_new_position;\nvarying vec3 v_color;\nvarying float v_displacement_amount;\n\n    `;\n\nconst buildNoise = () => `\n\nvec3 mod289(vec3 x)\n{\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x)\n{\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x)\n{\n  return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec3 fade(vec3 t) {\n  return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n\nfloat snoise(vec3 v)\n{\n  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;\n  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n  vec3 i  = floor(v + dot(v, C.yyy) );\n  vec3 x0 =   v - i + dot(i, C.xxx) ;\n\n// Other corners\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min( g.xyz, l.zxy );\n  vec3 i2 = max( g.xyz, l.zxy );\n\n  //   x0 = x0 - 0.0 + 0.0 * C.xxx;\n  //   x1 = x0 - i1  + 1.0 * C.xxx;\n  //   x2 = x0 - i2  + 2.0 * C.xxx;\n  //   x3 = x0 - 1.0 + 3.0 * C.xxx;\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n  i = mod289(i);\n  vec4 p = permute( permute( permute(\n            i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n          + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n          + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n// Gradients: 7x7 points over a square, mapped onto an octahedron.\n// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n  float n_ = 0.142857142857; // 1.0/7.0\n  vec3  ns = n_ * D.wyz - D.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)\n\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)\n\n  vec4 x = x_ *ns.x + ns.yyyy;\n  vec4 y = y_ *ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4( x.xy, y.xy );\n  vec4 b1 = vec4( x.zw, y.zw );\n\n  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n  vec4 s0 = floor(b0)*2.0 + 1.0;\n  vec4 s1 = floor(b1)*2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n  vec3 p0 = vec3(a0.xy,h.x);\n  vec3 p1 = vec3(a0.zw,h.y);\n  vec3 p2 = vec3(a1.xy,h.z);\n  vec3 p3 = vec3(a1.zw,h.w);\n\n//Normalise gradients\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n// Mix final noise value\n  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n  m = m * m;\n  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n                                dot(p2,x2), dot(p3,x3) ) );\n}\n\n// Classic Perlin noise\nfloat cnoise(vec3 P)\n{\n  vec3 Pi0 = floor(P); // Integer part for indexing\n  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\n  Pi0 = mod289(Pi0);\n  Pi1 = mod289(Pi1);\n  vec3 Pf0 = fract(P); // Fractional part for interpolation\n  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n  vec4 iy = vec4(Pi0.yy, Pi1.yy);\n  vec4 iz0 = Pi0.zzzz;\n  vec4 iz1 = Pi1.zzzz;\n\n  vec4 ixy = permute(permute(ix) + iy);\n  vec4 ixy0 = permute(ixy + iz0);\n  vec4 ixy1 = permute(ixy + iz1);\n\n  vec4 gx0 = ixy0 * (1.0 / 7.0);\n  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n  gx0 = fract(gx0);\n  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n  vec4 sz0 = step(gz0, vec4(0.0));\n  gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n  gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n  vec4 gx1 = ixy1 * (1.0 / 7.0);\n  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n  gx1 = fract(gx1);\n  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n  vec4 sz1 = step(gz1, vec4(0.0));\n  gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n  gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n  g000 *= norm0.x;\n  g010 *= norm0.y;\n  g100 *= norm0.z;\n  g110 *= norm0.w;\n  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n  g001 *= norm1.x;\n  g011 *= norm1.y;\n  g101 *= norm1.z;\n  g111 *= norm1.w;\n\n  float n000 = dot(g000, Pf0);\n  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n  float n111 = dot(g111, Pf1);\n\n  vec3 fade_xyz = fade(Pf0);\n  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n  return 2.2 * n_xyz;\n}\n\n// YUV to RGB matrix\nmat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,\n                    1.0, -0.39465, -0.58060,\n                    1.0, 2.03211, 0.0);\n\n// RGB to YUV matrix\nmat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,\n                    -0.09991, -0.33609, 0.43600,\n                    0.615, -0.5586, -0.05639);\n                    \nvec3 oklab2rgb(vec3 linear)\n{\n    const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,\n                          0.5362752080, 0.6807189584, 0.2818474174,\n                          0.0514575653, 0.1074065790, 0.6302613616);\n                       \n    const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,\n                          +0.7936177850, -2.4285922050, +0.7827717662,\n                          -0.0040720468, +0.4505937099, -0.8086757660);\n                       \n    vec3 lms = im1 * linear;\n            \n    return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));\n}\n\nvec3 rgb2oklab(vec3 oklab)\n{\n    const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,\n                         +0.396337777, -0.105561346, -0.089484178,\n                         +0.215803757, -0.063854173, -1.291485548);\n                       \n    const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,\n                         -3.307216883, +2.609332323, -0.703476310,\n                         +0.230759054, -0.341134429, +1.706862569);\n    vec3 lms = m1 * oklab;\n    \n    return m2 * (lms * lms * lms);\n}\n\n    `;\n\nconst buildColorFunctions = () => `\n\nvec3 saturation(vec3 rgb, float adjustment) {\n    const vec3 W = vec3(0.2125, 0.7154, 0.0721);\n    vec3 intensity = vec3(dot(rgb, W));\n    return mix(intensity, rgb, adjustment);\n}\n\nfloat saturation(vec3 rgb)\n{\n    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n    vec4 p = mix(vec4(rgb.bg, K.wz), vec4(rgb.gb, K.xy), step(rgb.b, rgb.g));\n    vec4 q = mix(vec4(p.xyw, rgb.r), vec4(rgb.r, p.yzx), step(p.x, rgb.r));\n\n    float d = q.x - min(q.w, q.y);\n    float e = 1.0e-10;\n    return abs(6.0 * d + e);\n}\n\n// get saturation of a color in values between 0 and 1\nfloat getSaturation(vec3 color) {\n    float max = max(color.r, max(color.g, color.b));\n    float min = min(color.r, min(color.g, color.b));\n    return (max - min) / max;\n}\n    \nvec3 rgb2hsv(vec3 c)\n{\n    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n\n    float d = q.x - min(q.w, q.y);\n    float e = 1.0e-10;\n    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n}\n\nvec3 hsv2rgb(vec3 c)\n{\n    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n`;\n\n\nconst setLinkStyles = (link: HTMLAnchorElement) => {\n    link.id = \"neat-link\";\n    link.href = \"https://neat.firecms.co\";\n    link.target = \"_blank\";\n    link.style.position = \"absolute\";\n    link.style.display = \"block\";\n    link.style.opacity = \"1\";\n    link.style.bottom = \"0\";\n    link.style.right = \"0\";\n    link.style.padding = \"10px\";\n    link.style.color = \"#dcdcdc\";\n    link.style.opacity = \"0.8\";\n    link.style.fontFamily = \"sans-serif\";\n    link.style.fontSize = \"16px\";\n    link.style.fontWeight = \"bold\";\n    link.style.textDecoration = \"none\";\n    link.style.zIndex = \"100\";\n    link.innerHTML = \"NEAT\";\n}\n\nconst addNeatLink = (ref: HTMLCanvasElement) => {\n    const existingLinks = ref.parentElement?.getElementsByTagName(\"a\");\n    if (existingLinks) {\n        for (let i = 0; i < existingLinks.length; i++) {\n            if (existingLinks[i].id === \"neat-link\") {\n                setLinkStyles(existingLinks[i]);\n                return;\n            }\n        }\n    }\n    const link = document.createElement(\"a\");\n    setLinkStyles(link);\n    ref.parentElement?.appendChild(link);\n}\n\nfunction getElapsedSecondsInLastHour() {\n    const now = new Date();\n    const minutes = now.getMinutes();\n    const seconds = now.getSeconds();\n    return (minutes * 60) + seconds;\n}\n"],"names":["PLANE_WIDTH","PLANE_HEIGHT","WIREFRAME","COLORS_COUNT","clock","THREE","NeatGradient","config","ref","speed","horizontalPressure","verticalPressure","waveFrequencyX","waveFrequencyY","waveAmplitude","colors","highlights","shadows","colorSaturation","colorBrightness","colorBlending","wireframe","backgroundColor","backgroundAlpha","resolution","seed","tick","getElapsedSecondsInLastHour","render","renderer","camera","scene","meshes","addNeatLink","mesh","width","height","color","setSize","canvas","updateCamera","entries","material","geo","plane","uniforms","buildUniforms","buildNoise","buildColorFunctions","buildVertexShader","buildFragmentShader","targetPlaneArea","ratio","targetWidth","targetHeight","left","right","top","bottom","near","far","setLinkStyles","link","existingLinks","i","now","minutes","seconds"],"mappings":"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AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAoNnBC,IAAsB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA8C5Ba,IAAgB,CAACC,MAA4B;AAC/C,EAAAA,EAAK,KAAK,aACVA,EAAK,OAAO,2BACZA,EAAK,SAAS,UACdA,EAAK,MAAM,WAAW,YACtBA,EAAK,MAAM,UAAU,SACrBA,EAAK,MAAM,UAAU,KACrBA,EAAK,MAAM,SAAS,KACpBA,EAAK,MAAM,QAAQ,KACnBA,EAAK,MAAM,UAAU,QACrBA,EAAK,MAAM,QAAQ,WACnBA,EAAK,MAAM,UAAU,OACrBA,EAAK,MAAM,aAAa,cACxBA,EAAK,MAAM,WAAW,QACtBA,EAAK,MAAM,aAAa,QACxBA,EAAK,MAAM,iBAAiB,QAC5BA,EAAK,MAAM,SAAS,OACpBA,EAAK,YAAY;AACrB,GAEM7B,IAAc,CAACzB,MAA2B;AAC5C,QAAMuD,IAAgBvD,EAAI,eAAe,qBAAqB,GAAG;AACjE,MAAIuD;AACA,aAASC,IAAI,GAAGA,IAAID,EAAc,QAAQC;AAClC,UAAAD,EAAcC,GAAG,OAAO,aAAa;AACrC,QAAAH,EAAcE,EAAcC,EAAE;AAC9B;AAAA,MACJ;AAAA;AAGF,QAAAF,IAAO,SAAS,cAAc,GAAG;AACvC,EAAAD,EAAcC,CAAI,GACdtD,EAAA,eAAe,YAAYsD,CAAI;AACvC;AAEA,SAASnC,IAA8B;AAC7B,QAAAsC,IAAM,IAAI,QACVC,IAAUD,EAAI,cACdE,IAAUF,EAAI;AACpB,SAAQC,IAAU,KAAMC;AAC5B;"}
+{"version":3,"file":"index.es.js","sources":["../src/NeatGradient.ts"],"sourcesContent":["import * as THREE from \"three\";\n\nconst PLANE_WIDTH = 50;\nconst PLANE_HEIGHT = 80;\n\nconst WIREFRAME = true;\nconst COLORS_COUNT = 5;\n\nconst clock = new THREE.Clock();\n\nconst LINK_ID = generateRandomString();\n\ntype SceneState = {\n    renderer: THREE.WebGLRenderer,\n    camera: THREE.Camera,\n    scene: THREE.Scene,\n    meshes: THREE.Mesh[],\n    resolution: number\n}\n\nexport type NeatConfig = {\n    resolution?: number;\n    speed?: number;\n    horizontalPressure?: number;\n    verticalPressure?: number;\n    waveFrequencyX?: number;\n    waveFrequencyY?: number;\n    waveAmplitude?: number;\n    highlights?: number;\n    shadows?: number;\n    colorSaturation?: number;\n    colorBrightness?: number;\n    colors: NeatColor[];\n    colorBlending?: number;\n    grainScale?: number;\n    grainIntensity?: number;\n    grainSpeed?: number;\n    wireframe?: boolean;\n    backgroundColor?: string;\n    backgroundAlpha?: number;\n};\n\nexport type NeatColor = {\n    color: string;\n    enabled: boolean;\n    /**\n     * Value from 0 to 1\n     */\n    influence?: number;\n}\n\nexport type NeatController = {\n    destroy: () => void;\n}\n\nexport class NeatGradient implements NeatController {\n\n    private _ref: HTMLCanvasElement;\n\n    private _speed: number = -1;\n\n    private _horizontalPressure: number = -1;\n    private _verticalPressure: number = -1;\n\n    private _waveFrequencyX: number = -1;\n    private _waveFrequencyY: number = -1;\n    private _waveAmplitude: number = -1;\n\n    private _shadows: number = -1;\n    private _highlights: number = -1;\n    private _saturation: number = -1;\n    private _brightness: number = -1;\n\n    private _grainScale: number = -1;\n    private _grainIntensity: number = -1;\n    private _grainSpeed: number = -1;\n\n    private _colorBlending: number = -1;\n\n    private _colors: NeatColor[] = [];\n    private _wireframe: boolean = false;\n\n    private _backgroundColor: string = \"#FFFFFF\";\n    private _backgroundAlpha: number = 1.0;\n\n    private requestRef: number = -1;\n    private sizeObserver: ResizeObserver;\n    private sceneState: SceneState;\n\n    constructor(config: NeatConfig & { ref: HTMLCanvasElement, resolution?: number, seed?: number }) {\n\n        const {\n            ref,\n            speed = 4,\n            horizontalPressure = 3,\n            verticalPressure = 3,\n            waveFrequencyX = 5,\n            waveFrequencyY = 5,\n            waveAmplitude = 3,\n            colors,\n            highlights = 4,\n            shadows = 4,\n            colorSaturation = 0,\n            colorBrightness = 1,\n            colorBlending = 5,\n            grainScale = 2,\n            grainIntensity = 0.55,\n            grainSpeed = 0.1,\n            wireframe = false,\n            backgroundColor = \"#FFFFFF\",\n            backgroundAlpha = 1.0,\n            resolution = 1,\n            seed\n        } = config;\n\n\n        this._ref = ref;\n\n        this.destroy = this.destroy.bind(this);\n        this._initScene = this._initScene.bind(this);\n        this._buildMaterial = this._buildMaterial.bind(this);\n\n        this.speed = speed;\n        this.horizontalPressure = horizontalPressure;\n        this.verticalPressure = verticalPressure;\n        this.waveFrequencyX = waveFrequencyX;\n        this.waveFrequencyY = waveFrequencyY;\n        this.waveAmplitude = waveAmplitude;\n        this.colorBlending = colorBlending;\n        this.grainScale = grainScale;\n        this.grainIntensity = grainIntensity;\n        this.grainSpeed = grainSpeed;\n        this.colors = colors;\n        this.shadows = shadows;\n        this.highlights = highlights;\n        this.colorSaturation = colorSaturation;\n        this.colorBrightness = colorBrightness;\n        this.wireframe = wireframe;\n        this.backgroundColor = backgroundColor;\n        this.backgroundAlpha = backgroundAlpha;\n\n        this.sceneState = this._initScene(resolution);\n\n        let tick = seed !== undefined ? seed : getElapsedSecondsInLastHour();\n        const render = () => {\n\n            const { renderer, camera, scene, meshes } = this.sceneState;\n            if (Math.floor(tick * 10) % 5 === 0) {\n                addNeatLink(ref);\n            }\n\n            renderer.setClearColor(this._backgroundColor, this._backgroundAlpha);\n            meshes.forEach((mesh) => {\n\n                const width = this._ref.width,\n                    height = this._ref.height;\n\n                const colors = [\n                    ...this._colors.map(color => {\n                        let threeColor = new THREE.Color();\n                        threeColor.setStyle(color.color, \"\");\n                        return ({\n                            is_active: color.enabled,\n                            color: threeColor,\n                            influence: color.influence\n                        });\n                    }),\n                    ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({\n                        is_active: false,\n                        color: new THREE.Color(0x000000)\n                    }))\n                ];\n\n                tick += clock.getDelta() * this._speed;\n                // @ts-ignore\n                mesh.material.uniforms.u_time.value = tick;\n                // @ts-ignore\n                mesh.material.uniforms.u_resolution = { value: new THREE.Vector2(width, height) };\n                // @ts-ignore\n                mesh.material.uniforms.u_color_pressure = { value: new THREE.Vector2(this._horizontalPressure, this._verticalPressure) };\n                // @ts-ignore\n                mesh.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX };\n                // @ts-ignore\n                mesh.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY };\n                // @ts-ignore\n                mesh.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude };\n                // @ts-ignore\n                mesh.material.uniforms.u_plane_width = { value: PLANE_WIDTH };\n                // @ts-ignore\n                mesh.material.uniforms.u_plane_height = { value: PLANE_HEIGHT };\n                // @ts-ignore\n                mesh.material.uniforms.u_color_blending = { value: this._colorBlending };\n                // @ts-ignore\n                mesh.material.uniforms.u_colors = { value: colors };\n                // @ts-ignore\n                mesh.material.uniforms.u_colors_count = { value: COLORS_COUNT };\n                // @ts-ignore\n                mesh.material.uniforms.u_shadows = { value: this._shadows };\n                // @ts-ignore\n                mesh.material.uniforms.u_highlights = { value: this._highlights };\n                // @ts-ignore\n                mesh.material.uniforms.u_saturation = { value: this._saturation };\n                // @ts-ignore\n                mesh.material.uniforms.u_brightness = { value: this._brightness };\n                // @ts-ignore\n                mesh.material.uniforms.u_grain_intensity = { value: this._grainIntensity };\n                // @ts-ignore\n                mesh.material.uniforms.u_grain_speed = { value: this._grainSpeed };\n                // @ts-ignore\n                mesh.material.uniforms.u_grain_scale = { value: this._grainScale };\n                // @ts-ignore\n                mesh.material.wireframe = this._wireframe;\n            });\n\n            renderer.render(scene, camera);\n            this.requestRef = requestAnimationFrame(render);\n        };\n\n        const setSize = () => {\n\n            const { renderer } = this.sceneState;\n            const canvas = renderer.domElement;\n            const width = canvas.clientWidth;\n            const height = canvas.clientHeight;\n\n            this.sceneState.renderer.setSize(width, height, false);\n            updateCamera(this.sceneState.camera, width, height);\n        };\n\n        this.sizeObserver = new ResizeObserver(entries => {\n            setSize();\n        });\n\n        this.sizeObserver.observe(ref);\n\n\n        render();\n    }\n\n    destroy() {\n        if (this) {\n            cancelAnimationFrame(this.requestRef);\n            this.sizeObserver.disconnect();\n        }\n    }\n\n    set speed(speed: number) {\n        this._speed = speed / 20;\n    }\n\n    set horizontalPressure(horizontalPressure: number) {\n        this._horizontalPressure = horizontalPressure / 4;\n    }\n\n    set verticalPressure(verticalPressure: number) {\n        this._verticalPressure = verticalPressure / 4;\n    }\n\n    set waveFrequencyX(waveFrequencyX: number) {\n        this._waveFrequencyX = waveFrequencyX * 0.04;\n    }\n\n    set waveFrequencyY(waveFrequencyY: number) {\n        this._waveFrequencyY = waveFrequencyY * 0.04;\n    }\n\n    set waveAmplitude(waveAmplitude: number) {\n        this._waveAmplitude = waveAmplitude * .75;\n    }\n\n    set colors(colors: NeatColor[]) {\n        this._colors = colors;\n    }\n\n    set highlights(highlights: number) {\n        this._highlights = highlights / 100;\n    }\n\n    set shadows(shadows: number) {\n        this._shadows = shadows / 100;\n    }\n\n    set colorSaturation(colorSaturation: number) {\n        this._saturation = colorSaturation / 10;\n    }\n\n    set colorBrightness(colorBrightness: number) {\n        this._brightness = colorBrightness;\n    }\n\n    set colorBlending(colorBlending: number) {\n        this._colorBlending = colorBlending / 10;\n    }\n\n    set grainScale(grainScale: number) {\n        this._grainScale = grainScale == 0 ? 1 : grainScale;\n    }\n\n    set grainIntensity(grainIntensity: number) {\n        this._grainIntensity = grainIntensity;\n    }\n\n    set grainSpeed(grainSpeed: number) {\n        this._grainSpeed = grainSpeed;\n    }\n\n    set wireframe(wireframe: boolean) {\n        this._wireframe = wireframe;\n    }\n\n    set resolution(resolution: number) {\n        this.sceneState = this._initScene(resolution);\n    }\n\n    set backgroundColor(backgroundColor: string) {\n        this._backgroundColor = backgroundColor;\n    }\n\n    set backgroundAlpha(backgroundAlpha: number) {\n        this._backgroundAlpha = backgroundAlpha;\n    }\n\n    _initScene(resolution: number): SceneState {\n\n        const width = this._ref.width,\n            height = this._ref.height;\n\n        const renderer = new THREE.WebGLRenderer({\n            // antialias: true,\n            alpha: true,\n            canvas: this._ref\n        });\n\n        renderer.setClearColor(0xFF0000, .5);\n        renderer.setSize(width, height, false);\n\n        const meshes: THREE.Mesh[] = [];\n\n        const scene = new THREE.Scene();\n\n        const material = this._buildMaterial(width, height);\n\n        const geo = new THREE.PlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);\n        const plane = new THREE.Mesh(geo, material);\n        plane.rotation.x = -Math.PI / 3.5;\n        plane.position.z = -1;\n        meshes.push(plane);\n        scene.add(plane);\n\n        const camera = new THREE.OrthographicCamera(0.0, 0.0, 0.0, 0.0, 0.0, 0.0);\n        // const camera = new THREE.PerspectiveCamera( 1000, window.innerWidth / window.innerHeight, 1, 1000000 );\n        camera.position.z = 5;\n        updateCamera(camera, width, height);\n\n        return {\n            renderer,\n            camera,\n            scene,\n            meshes,\n            resolution\n        };\n    }\n\n    _buildMaterial(width: number, height: number) {\n\n        const colors = [\n            ...this._colors.map(color => ({\n                is_active: color.enabled,\n                color: new THREE.Color(color.color),\n                influence: color.influence\n            })),\n            ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({\n                is_active: false,\n                color: new THREE.Color(0x000000)\n            }))\n        ];\n\n        const uniforms = {\n            u_time: { value: 0 },\n            u_color_pressure: { value: new THREE.Vector2(this._horizontalPressure, this._verticalPressure) },\n            u_wave_frequency_x: { value: this._waveFrequencyX },\n            u_wave_frequency_y: { value: this._waveFrequencyY },\n            u_wave_amplitude: { value: this._waveAmplitude },\n            u_resolution: { value: new THREE.Vector2(width, height) },\n            u_colors: { value: colors },\n            u_colors_count: { value: this._colors.length },\n            u_plane_width: { value: PLANE_WIDTH },\n            u_plane_height: { value: PLANE_HEIGHT },\n            u_shadows: { value: this._shadows },\n            u_highlights: { value: this._highlights },\n            u_grain_intensity: { value: this._grainIntensity },\n            u_grain_scale: { value: this._grainScale },\n            u_grain_speed: { value: this._grainSpeed },\n        };\n\n        const material = new THREE.ShaderMaterial({\n            uniforms: uniforms,\n            vertexShader: buildUniforms() + buildNoise() + buildColorFunctions() + buildVertexShader(),\n            fragmentShader: buildUniforms() + buildColorFunctions() + buildNoise() + buildFragmentShader()\n        });\n\n        material.wireframe = WIREFRAME;\n        return material;\n    }\n\n\n}\n\nfunction updateCamera(camera: THREE.Camera, width: number, height: number) {\n\n    const viewPortAreaRatio = 1000000;\n    const areaViewPort = width * height;\n    const targetPlaneArea =\n        areaViewPort / viewPortAreaRatio *\n        PLANE_WIDTH * PLANE_HEIGHT / 1.5;\n\n    const ratio = width / height;\n\n    const targetWidth = Math.sqrt(targetPlaneArea * ratio);\n    const targetHeight = targetPlaneArea / targetWidth;\n\n    const left = -PLANE_WIDTH / 2;\n    const right = Math.min((left + targetWidth) / 1.5, PLANE_WIDTH / 2);\n\n    const top = PLANE_HEIGHT / 4;\n    const bottom = Math.max((top - targetHeight) / 2, -PLANE_HEIGHT / 4);\n\n    const near = -100;\n    const far = 1000;\n    if (camera instanceof THREE.OrthographicCamera) {\n        camera.left = left;\n        camera.right = right;\n        camera.top = top;\n        camera.bottom = bottom;\n        camera.near = near;\n        camera.far = far;\n        camera.updateProjectionMatrix();\n    } else if (camera instanceof THREE.PerspectiveCamera) {\n        camera.aspect = width / height;\n        camera.updateProjectionMatrix();\n    }\n\n}\n\n\nfunction buildVertexShader() {\n    return `\n\nvoid main() {\n\n    vUv = uv;\n\n    v_displacement_amount = cnoise( vec3(\n        u_wave_frequency_x * position.x + u_time,\n        u_wave_frequency_y * position.y + u_time,\n        u_time\n    ));\n    \n    vec3 color;\n\n    // float t = mod(u_base_color, 100.0);\n    color = u_colors[0].color;\n    \n    vec2 noise_cord = vUv * u_color_pressure;\n    \n    const float minNoise = .0;\n    const float maxNoise = .9;\n    \n    for (int i = 1; i < u_colors_count; i++) {\n    \n        if(u_colors[i].is_active == 1.0){\n            float noiseFlow = (1. + float(i)) / 30.;\n            float noiseSpeed = (1. + float(i)) * 0.11;\n            float noiseSeed = 13. + float(i) * 7.;\n            \n            int reverseIndex = u_colors_count - i;\n            \n            float noise = snoise(\n                vec3(\n                    noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,\n                    noise_cord.y * u_color_pressure.y,\n                    u_time * noiseSpeed\n                ) + noiseSeed\n            ) - (.1 * float(i)) + (.5 * u_color_blending);\n            \n            noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);\n            vec3 nextColor = u_colors[i].color;\n            color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));\n            \n            // vec3 colorOklab = oklab2rgb(color);\n            // vec3 nextColorOklab = oklab2rgb(nextColor);\n            // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));\n            // color = rgb2oklab(mixColor);\n            \n        }\n        \n    }\n    \n    v_color = color;\n    \n    vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );\n    \n    v_new_position = gl_Position;\n}\n`;\n}\n\nfunction buildFragmentShader() {\n    return `\nfloat random(vec2 p) {\n    return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);\n}\n\nfloat fbm(vec3 x) {\n    float value = 0.0;\n    float amplitude = 0.5;\n    float frequency = 1.0;\n\n    for (int i = 0; i < 4; i++) {\n        value += amplitude * snoise(x * frequency);\n        frequency *= 2.0;\n        amplitude *= 0.5;\n    }\n    return value;\n}\n    \nvoid main(){\n    vec3 color = v_color;\n    \n    color += pow(v_displacement_amount, 1.0) * u_highlights;\n    color -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;\n    color = saturation(color, 1.0 + u_saturation);\n    color = color * u_brightness;\n    \n    // Generate grain using fbm\n    vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;\n\n    float grain = (u_grain_speed != 0.0) \n        ? fbm(vec3(noiseCoords, u_time * u_grain_speed)) \n        : fbm(vec3(noiseCoords, 0.0));\n\n    // Center the grain around zero\n    grain = grain * 0.5 + 0.5;\n    grain -= 0.5;\n\n    // Apply grain intensity\n    grain *= u_grain_intensity;\n\n    // Add grain to color\n    color += vec3(grain);\n            \n    gl_FragColor = vec4(color,1.0);\n}\n`;\n}\n\nconst buildUniforms = () => `\nprecision highp float;\n\nstruct Color {\n    float is_active;\n    vec3 color;\n    float value;\n};\n\nuniform float u_grain_intensity; \nuniform float u_grain_scale; \nuniform float u_grain_speed; \nuniform float u_time;\n\nuniform float u_wave_amplitude;\nuniform float u_wave_frequency_x;\nuniform float u_wave_frequency_y;\n\nuniform vec2 u_color_pressure;\n\nuniform float u_plane_width;\nuniform float u_plane_height;\n\nuniform float u_shadows;\nuniform float u_highlights;\nuniform float u_saturation;\nuniform float u_brightness;\n\nuniform float u_color_blending;\n\nuniform int u_colors_count;\nuniform Color u_colors[5];\nuniform vec2 u_resolution;\n\nvarying vec2 vUv;\nvarying vec4 v_new_position;\nvarying vec3 v_color;\nvarying float v_displacement_amount;\n\n    `;\n\nconst buildNoise = () => `\n\nvec3 mod289(vec3 x)\n{\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x)\n{\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x)\n{\n  return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec3 fade(vec3 t) {\n  return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n\nfloat snoise(vec3 v)\n{\n  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;\n  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n  vec3 i  = floor(v + dot(v, C.yyy) );\n  vec3 x0 =   v - i + dot(i, C.xxx) ;\n\n// Other corners\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min( g.xyz, l.zxy );\n  vec3 i2 = max( g.xyz, l.zxy );\n\n  //   x0 = x0 - 0.0 + 0.0 * C.xxx;\n  //   x1 = x0 - i1  + 1.0 * C.xxx;\n  //   x2 = x0 - i2  + 2.0 * C.xxx;\n  //   x3 = x0 - 1.0 + 3.0 * C.xxx;\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n  i = mod289(i);\n  vec4 p = permute( permute( permute(\n            i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n          + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n          + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n// Gradients: 7x7 points over a square, mapped onto an octahedron.\n// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n  float n_ = 0.142857142857; // 1.0/7.0\n  vec3  ns = n_ * D.wyz - D.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)\n\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)\n\n  vec4 x = x_ *ns.x + ns.yyyy;\n  vec4 y = y_ *ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4( x.xy, y.xy );\n  vec4 b1 = vec4( x.zw, y.zw );\n\n  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n  vec4 s0 = floor(b0)*2.0 + 1.0;\n  vec4 s1 = floor(b1)*2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n  vec3 p0 = vec3(a0.xy,h.x);\n  vec3 p1 = vec3(a0.zw,h.y);\n  vec3 p2 = vec3(a1.xy,h.z);\n  vec3 p3 = vec3(a1.zw,h.w);\n\n//Normalise gradients\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n// Mix final noise value\n  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n  m = m * m;\n  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n                                dot(p2,x2), dot(p3,x3) ) );\n}\n\n// Classic Perlin noise\nfloat cnoise(vec3 P)\n{\n  vec3 Pi0 = floor(P); // Integer part for indexing\n  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\n  Pi0 = mod289(Pi0);\n  Pi1 = mod289(Pi1);\n  vec3 Pf0 = fract(P); // Fractional part for interpolation\n  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n  vec4 iy = vec4(Pi0.yy, Pi1.yy);\n  vec4 iz0 = Pi0.zzzz;\n  vec4 iz1 = Pi1.zzzz;\n\n  vec4 ixy = permute(permute(ix) + iy);\n  vec4 ixy0 = permute(ixy + iz0);\n  vec4 ixy1 = permute(ixy + iz1);\n\n  vec4 gx0 = ixy0 * (1.0 / 7.0);\n  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n  gx0 = fract(gx0);\n  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n  vec4 sz0 = step(gz0, vec4(0.0));\n  gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n  gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n  vec4 gx1 = ixy1 * (1.0 / 7.0);\n  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n  gx1 = fract(gx1);\n  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n  vec4 sz1 = step(gz1, vec4(0.0));\n  gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n  gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n  g000 *= norm0.x;\n  g010 *= norm0.y;\n  g100 *= norm0.z;\n  g110 *= norm0.w;\n  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n  g001 *= norm1.x;\n  g011 *= norm1.y;\n  g101 *= norm1.z;\n  g111 *= norm1.w;\n\n  float n000 = dot(g000, Pf0);\n  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n  float n111 = dot(g111, Pf1);\n\n  vec3 fade_xyz = fade(Pf0);\n  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n  return 2.2 * n_xyz;\n}\n\n// YUV to RGB matrix\nmat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,\n                    1.0, -0.39465, -0.58060,\n                    1.0, 2.03211, 0.0);\n\n// RGB to YUV matrix\nmat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,\n                    -0.09991, -0.33609, 0.43600,\n                    0.615, -0.5586, -0.05639);\n                    \nvec3 oklab2rgb(vec3 linear)\n{\n    const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,\n                          0.5362752080, 0.6807189584, 0.2818474174,\n                          0.0514575653, 0.1074065790, 0.6302613616);\n                       \n    const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,\n                          +0.7936177850, -2.4285922050, +0.7827717662,\n                          -0.0040720468, +0.4505937099, -0.8086757660);\n                       \n    vec3 lms = im1 * linear;\n            \n    return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));\n}\n\nvec3 rgb2oklab(vec3 oklab)\n{\n    const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,\n                         +0.396337777, -0.105561346, -0.089484178,\n                         +0.215803757, -0.063854173, -1.291485548);\n                       \n    const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,\n                         -3.307216883, +2.609332323, -0.703476310,\n                         +0.230759054, -0.341134429, +1.706862569);\n    vec3 lms = m1 * oklab;\n    \n    return m2 * (lms * lms * lms);\n}\n\n    `;\n\nconst buildColorFunctions = () => `\n\nvec3 saturation(vec3 rgb, float adjustment) {\n    const vec3 W = vec3(0.2125, 0.7154, 0.0721);\n    vec3 intensity = vec3(dot(rgb, W));\n    return mix(intensity, rgb, adjustment);\n}\n\nfloat saturation(vec3 rgb)\n{\n    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n    vec4 p = mix(vec4(rgb.bg, K.wz), vec4(rgb.gb, K.xy), step(rgb.b, rgb.g));\n    vec4 q = mix(vec4(p.xyw, rgb.r), vec4(rgb.r, p.yzx), step(p.x, rgb.r));\n\n    float d = q.x - min(q.w, q.y);\n    float e = 1.0e-10;\n    return abs(6.0 * d + e);\n}\n\n// get saturation of a color in values between 0 and 1\nfloat getSaturation(vec3 color) {\n    float max = max(color.r, max(color.g, color.b));\n    float min = min(color.r, min(color.g, color.b));\n    return (max - min) / max;\n}\n    \nvec3 rgb2hsv(vec3 c)\n{\n    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n\n    float d = q.x - min(q.w, q.y);\n    float e = 1.0e-10;\n    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n}\n\nvec3 hsv2rgb(vec3 c)\n{\n    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n`;\n\n\nconst setLinkStyles = (link: HTMLAnchorElement) => {\n    link.id = LINK_ID;\n    link.href = \"https://neat.firecms.co\";\n    link.target = \"_blank\";\n    link.style.position = \"absolute\";\n    link.style.display = \"block\";\n    link.style.bottom = \"0\";\n    link.style.right = \"0\";\n    link.style.padding = \"10px\";\n    link.style.color = \"#dcdcdc\";\n    link.style.opacity = \"0.8\";\n    link.style.fontFamily = \"sans-serif\";\n    link.style.fontSize = \"16px\";\n    link.style.fontWeight = \"bold\";\n    link.style.textDecoration = \"none\";\n    link.style.zIndex = \"10000\";\n    link.innerHTML = \"NEAT\";\n}\n\nconst addNeatLink = (ref: HTMLCanvasElement) => {\n    const existingLinks = ref.parentElement?.getElementsByTagName(\"a\");\n    if (existingLinks) {\n        for (let i = 0; i < existingLinks.length; i++) {\n            if (existingLinks[i].id === LINK_ID) {\n                setLinkStyles(existingLinks[i]);\n                return;\n            }\n        }\n    }\n    const link = document.createElement(\"a\");\n    setLinkStyles(link);\n    ref.parentElement?.appendChild(link);\n}\n\nfunction getElapsedSecondsInLastHour() {\n    const now = new Date();\n    const minutes = now.getMinutes();\n    const seconds = now.getSeconds();\n    return (minutes * 60) + seconds;\n}\n\nfunction generateRandomString(length: number = 6): string {\n    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n    let result = '';\n    for (let i = 0; i < length; i++) {\n        const randomIndex = Math.floor(Math.random() * characters.length);\n        result += characters.charAt(randomIndex);\n    }\n    return result;\n}\n"],"names":["PLANE_WIDTH","PLANE_HEIGHT","WIREFRAME","COLORS_COUNT","clock","THREE","LINK_ID","generateRandomString","NeatGradient","config","ref","speed","horizontalPressure","verticalPressure","waveFrequencyX","waveFrequencyY","waveAmplitude","colors","highlights","shadows","colorSaturation","colorBrightness","colorBlending","grainScale","grainIntensity","grainSpeed","wireframe","backgroundColor","backgroundAlpha","resolution","seed","tick","getElapsedSecondsInLastHour","render","renderer","camera","scene","meshes","addNeatLink","mesh","width","height","color","threeColor","setSize","canvas","updateCamera","entries","material","geo","plane","uniforms","buildUniforms","buildNoise","buildColorFunctions","buildVertexShader","buildFragmentShader","targetPlaneArea","ratio","targetWidth","targetHeight","left","right","top","bottom","near","far","setLinkStyles","link","existingLinks","i","now","minutes","seconds","length","characters","result","randomIndex"],"mappings":"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"}