@firecms/neat 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +98 -14
  2. package/dist/NeatGradient.d.ts +7 -3
  3. package/dist/NeatGradient.js +66 -15
  4. package/dist/NeatGradient.js.map +1 -1
  5. package/dist/index.es.js +105 -64
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/index.umd.js +42 -6
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +3 -3
  10. package/src/NeatGradient.ts +79 -19
package/dist/index.es.js CHANGED
@@ -1,6 +1,7 @@
1
- import * as i from "three";
2
- const x = 50, h = 80, V = !0, b = 5, Y = new i.Clock();
1
+ import * as o from "three";
2
+ const _ = 50, g = 80, T = !0, C = 5, V = new o.Clock();
3
3
  class W {
4
+ _ref;
4
5
  _speed = -1;
5
6
  _horizontalPressure = -1;
6
7
  _verticalPressure = -1;
@@ -26,44 +27,44 @@ class W {
26
27
  horizontalPressure: l = 3,
27
28
  verticalPressure: n = 3,
28
29
  waveFrequencyX: a = 5,
29
- waveFrequencyY: v = 5,
30
- waveAmplitude: m = 3,
31
- colors: _,
32
- highlights: c = 4,
33
- shadows: u = 4,
34
- colorSaturation: d = 0,
35
- colorBrightness: y = 1,
36
- colorBlending: p = 5,
37
- wireframe: E = !1,
38
- backgroundColor: N = "#FFFFFF",
39
- backgroundAlpha: R = 1,
40
- resolution: B = 1
41
- } = e, P = r.width, q = r.height;
42
- 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 = v, this.waveAmplitude = m, this.colorBlending = p, this.colors = _, this.shadows = u, this.highlights = c, this.colorSaturation = d, this.colorBrightness = y, this.wireframe = E, this.backgroundColor = N, this.backgroundAlpha = R, this.sceneState = this._initScene(r, P, q, B);
43
- const { renderer: w, camera: I, scene: K, meshes: O } = this.sceneState;
30
+ waveFrequencyY: u = 5,
31
+ waveAmplitude: x = 3,
32
+ colors: c,
33
+ highlights: v = 4,
34
+ shadows: h = 4,
35
+ colorSaturation: p = 0,
36
+ colorBrightness: w = 1,
37
+ colorBlending: b = 5,
38
+ wireframe: M = !1,
39
+ backgroundColor: O = "#FFFFFF",
40
+ backgroundAlpha: E = 1,
41
+ resolution: N = 1
42
+ } = e;
43
+ this._ref = r, 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 = M, this.backgroundColor = O, this.backgroundAlpha = E, this.sceneState = this._initScene(N);
44
44
  let z = 0;
45
- const C = () => {
46
- Math.floor(z * 10) % 5 === 0 && L(r), w.setClearColor(this._backgroundColor, this._backgroundAlpha), O.forEach((o) => {
47
- const f = [
48
- ...this._colors.map((g) => ({
49
- is_active: g.enabled,
50
- color: new i.Color(g.color),
51
- influence: g.influence
45
+ const q = () => {
46
+ const { renderer: m, camera: f, scene: d, meshes: y } = this.sceneState;
47
+ Math.floor(z * 10) % 5 === 0 && L(r), m.setClearColor(this._backgroundColor, this._backgroundAlpha), y.forEach((i) => {
48
+ const B = this._ref.width, I = this._ref.height, K = [
49
+ ...this._colors.map((P) => ({
50
+ is_active: P.enabled,
51
+ color: new o.Color(P.color),
52
+ influence: P.influence
52
53
  })),
53
- ...Array.from({ length: b - this._colors.length }).map(() => ({
54
+ ...Array.from({ length: C - this._colors.length }).map(() => ({
54
55
  is_active: !1,
55
- color: new i.Color(0)
56
+ color: new o.Color(0)
56
57
  }))
57
58
  ];
58
- z += Y.getDelta() * this._speed, o.material.uniforms.u_time.value = z, o.material.uniforms.u_resolution = { value: new i.Vector2(P, q) }, o.material.uniforms.u_color_pressure = { value: new i.Vector2(this._horizontalPressure, this._verticalPressure) }, o.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX }, o.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY }, o.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude }, o.material.uniforms.u_plane_width = { value: x }, o.material.uniforms.u_plane_height = { value: h }, o.material.uniforms.u_color_blending = { value: this._colorBlending }, o.material.uniforms.u_colors = { value: f }, o.material.uniforms.u_colors_count = { value: b }, o.material.uniforms.u_shadows = { value: this._shadows }, o.material.uniforms.u_highlights = { value: this._highlights }, o.material.uniforms.u_saturation = { value: this._saturation }, o.material.uniforms.u_brightness = { value: this._brightness }, o.material.wireframe = this._wireframe;
59
- }), w.render(K, I), this.requestRef = requestAnimationFrame(C);
60
- }, T = () => {
61
- const o = w.domElement, f = o.clientWidth, g = o.clientHeight;
62
- this.sceneState.renderer.setSize(f, g, !1), F(this.sceneState.camera, f, g);
59
+ z += V.getDelta() * this._speed, i.material.uniforms.u_time.value = z, i.material.uniforms.u_resolution = { value: new o.Vector2(B, I) }, i.material.uniforms.u_color_pressure = { value: new o.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: _ }, i.material.uniforms.u_plane_height = { value: g }, i.material.uniforms.u_color_blending = { value: this._colorBlending }, i.material.uniforms.u_colors = { value: K }, 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;
60
+ }), m.render(d, f), this.requestRef = requestAnimationFrame(q);
61
+ }, R = () => {
62
+ const { renderer: m } = this.sceneState, f = m.domElement, d = f.clientWidth, y = f.clientHeight;
63
+ this.sceneState.renderer.setSize(d, y, !1), F(this.sceneState.camera, d, y);
63
64
  };
64
- this.sizeObserver = new ResizeObserver((o) => {
65
- T();
66
- }), this.sizeObserver.observe(r), C();
65
+ this.sizeObserver = new ResizeObserver((m) => {
66
+ R();
67
+ }), this.sizeObserver.observe(r), q();
67
68
  }
68
69
  destroy() {
69
70
  this && (cancelAnimationFrame(this.requestRef), this.sizeObserver.disconnect());
@@ -99,7 +100,7 @@ class W {
99
100
  this._saturation = e / 10;
100
101
  }
101
102
  set colorBrightness(e) {
102
- console.log("colorBrightness", e), this._brightness = e;
103
+ this._brightness = e;
103
104
  }
104
105
  set colorBlending(e) {
105
106
  this._colorBlending = e / 10;
@@ -107,63 +108,67 @@ class W {
107
108
  set wireframe(e) {
108
109
  this._wireframe = e;
109
110
  }
111
+ set resolution(e) {
112
+ this.sceneState = this._initScene(e);
113
+ }
110
114
  set backgroundColor(e) {
111
115
  this._backgroundColor = e;
112
116
  }
113
117
  set backgroundAlpha(e) {
114
118
  this._backgroundAlpha = e;
115
119
  }
116
- _initScene(e, r, s, l) {
117
- const n = new i.WebGLRenderer({
120
+ _initScene(e) {
121
+ const r = this._ref.width, s = this._ref.height, l = new o.WebGLRenderer({
118
122
  alpha: !0,
119
- canvas: e
123
+ canvas: this._ref
120
124
  });
121
- n.setClearColor(16711680, 0.5), n.setSize(r, s, !1);
122
- const a = [], v = new i.Scene(), m = this._buildMaterial(r, s), _ = new i.PlaneGeometry(x, h, 240 * l, 240 * l), c = new i.Mesh(_, m);
123
- c.rotation.x = -Math.PI / 3.5, c.position.z = -1, a.push(c), v.add(c);
124
- const u = new i.OrthographicCamera(0, 0, 0, 0, 0, 0);
125
- return F(u, r, s), {
126
- renderer: n,
127
- camera: u,
128
- scene: v,
129
- meshes: a
125
+ l.setClearColor(16711680, 0.5), l.setSize(r, s, !1);
126
+ const n = [], a = new o.Scene(), u = this._buildMaterial(r, s), x = new o.PlaneGeometry(_, g, 240 * e, 240 * e), c = new o.Mesh(x, u);
127
+ c.rotation.x = -Math.PI / 3.5, c.position.z = -1, n.push(c), a.add(c);
128
+ const v = new o.OrthographicCamera(0, 0, 0, 0, 0, 0);
129
+ return v.position.z = 5, F(v, r, s), {
130
+ renderer: l,
131
+ camera: v,
132
+ scene: a,
133
+ meshes: n,
134
+ resolution: e
130
135
  };
131
136
  }
132
137
  _buildMaterial(e, r) {
133
138
  const s = [
134
139
  ...this._colors.map((a) => ({
135
140
  is_active: a.enabled,
136
- color: new i.Color(a.color),
141
+ color: new o.Color(a.color),
137
142
  influence: a.influence
138
143
  })),
139
- ...Array.from({ length: b - this._colors.length }).map(() => ({
144
+ ...Array.from({ length: C - this._colors.length }).map(() => ({
140
145
  is_active: !1,
141
- color: new i.Color(0)
146
+ color: new o.Color(0)
142
147
  }))
143
148
  ], l = {
144
149
  u_time: { value: 0 },
145
- u_color_pressure: { value: new i.Vector2(this._horizontalPressure, this._verticalPressure) },
150
+ u_color_pressure: { value: new o.Vector2(this._horizontalPressure, this._verticalPressure) },
146
151
  u_wave_frequency_x: { value: this._waveFrequencyX },
147
152
  u_wave_frequency_y: { value: this._waveFrequencyY },
148
153
  u_wave_amplitude: { value: this._waveAmplitude },
149
- u_resolution: { value: new i.Vector2(e, r) },
154
+ u_resolution: { value: new o.Vector2(e, r) },
150
155
  u_colors: { value: s },
151
156
  u_colors_count: { value: this._colors.length },
152
- u_plane_width: { value: x },
153
- u_plane_height: { value: h },
157
+ u_plane_width: { value: _ },
158
+ u_plane_height: { value: g },
154
159
  u_shadows: { value: this._shadows },
155
160
  u_highlights: { value: this._highlights }
156
- }, n = new i.ShaderMaterial({
161
+ }, n = new o.ShaderMaterial({
157
162
  uniforms: l,
158
163
  vertexShader: S() + D() + A() + j(),
159
- fragmentShader: S() + A() + k()
164
+ fragmentShader: S() + A() + Y()
160
165
  });
161
- return n.wireframe = V, n;
166
+ return n.wireframe = T, n;
162
167
  }
163
168
  }
164
169
  function F(t, e, r) {
165
- const n = e * r / 1e6 * x * h / 1.5, a = e / r, v = Math.sqrt(n * a), m = n / v, _ = -x / 2, c = Math.min((_ + v) / 1.5, x / 2), u = h / 4, d = Math.max((u - m) / 2, -h / 4), y = -100, p = 1e3;
166
- t.left = _, t.right = c, t.top = u, t.bottom = d, t.near = y, t.far = p, t.updateProjectionMatrix();
170
+ const n = e * r / 1e6 * _ * g / 1.5, a = e / r, u = Math.sqrt(n * a), x = n / u, c = -_ / 2, v = Math.min((c + u) / 1.5, _ / 2), h = g / 4, p = Math.max((h - x) / 2, -g / 4), w = -100, b = 1e3;
171
+ t instanceof o.OrthographicCamera ? (t.left = c, t.right = v, t.top = h, t.bottom = p, t.near = w, t.far = b, t.updateProjectionMatrix()) : t instanceof o.PerspectiveCamera && (t.aspect = e / r, t.updateProjectionMatrix());
167
172
  }
168
173
  function j() {
169
174
  return `
@@ -205,6 +210,13 @@ void main() {
205
210
 
206
211
  noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
207
212
  vec3 nextColor = u_colors[i].color;
213
+
214
+ // vec3 colorOklab = oklab2rgb(color);
215
+ // vec3 nextColorOklab = oklab2rgb(nextColor);
216
+ // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
217
+ //
218
+ // color = rgb2oklab(mixColor);
219
+
208
220
  color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
209
221
  }
210
222
 
@@ -219,7 +231,7 @@ void main() {
219
231
  }
220
232
  `;
221
233
  }
222
- function k() {
234
+ function Y() {
223
235
  return `
224
236
 
225
237
  void main(){
@@ -450,6 +462,35 @@ mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
450
462
  mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
451
463
  -0.09991, -0.33609, 0.43600,
452
464
  0.615, -0.5586, -0.05639);
465
+
466
+ vec3 oklab2rgb(vec3 linear)
467
+ {
468
+ const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,
469
+ 0.5362752080, 0.6807189584, 0.2818474174,
470
+ 0.0514575653, 0.1074065790, 0.6302613616);
471
+
472
+ const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,
473
+ +0.7936177850, -2.4285922050, +0.7827717662,
474
+ -0.0040720468, +0.4505937099, -0.8086757660);
475
+
476
+ vec3 lms = im1 * linear;
477
+
478
+ return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));
479
+ }
480
+
481
+ vec3 rgb2oklab(vec3 oklab)
482
+ {
483
+ const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,
484
+ +0.396337777, -0.105561346, -0.089484178,
485
+ +0.215803757, -0.063854173, -1.291485548);
486
+
487
+ const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,
488
+ -3.307216883, +2.609332323, -0.703476310,
489
+ +0.230759054, -0.341134429, +1.706862569);
490
+ vec3 lms = m1 * oklab;
491
+
492
+ return m2 * (lms * lms * lms);
493
+ }
453
494
 
454
495
  `, A = () => `
455
496
 
@@ -494,19 +535,19 @@ vec3 hsv2rgb(vec3 c)
494
535
  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
495
536
  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
496
537
  }
497
- `, M = (t) => {
498
- 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.fontFamily = "sans-serif", t.style.fontSize = "16px", t.style.fontWeight = "bold", t.style.textDecoration = "none", t.style.zIndex = "100", t.innerHTML = "NEAT";
538
+ `, k = (t) => {
539
+ 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";
499
540
  }, L = (t) => {
500
541
  const e = t.parentElement?.getElementsByTagName("a");
501
542
  if (e) {
502
543
  for (let s = 0; s < e.length; s++)
503
544
  if (e[s].id === "neat-link") {
504
- M(e[s]);
545
+ k(e[s]);
505
546
  return;
506
547
  }
507
548
  }
508
549
  const r = document.createElement("a");
509
- M(r), t.parentElement?.appendChild(r);
550
+ k(r), t.parentElement?.appendChild(r);
510
551
  };
511
552
  export {
512
553
  W as NeatGradient
package/dist/index.es.js.map CHANGED
@@ -1 +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.OrthographicCamera,\n scene: THREE.Scene,\n meshes: THREE.Mesh[],\n}\n\nexport type NeatConfig = {\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 _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 readonly sceneState: SceneState;\n\n constructor(config: NeatConfig & { ref: HTMLCanvasElement, resolution?: 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 } = config;\n\n const width = ref.width,\n height = ref.height;\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(ref, width, height, resolution);\n\n const { renderer, camera, scene, meshes } = this.sceneState;\n\n let tick = 0;\n const render = () => {\n\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 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 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 console.log(\"colorBrightness\", colorBrightness)\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 backgroundColor(backgroundColor: string) {\n this._backgroundColor = backgroundColor;\n }\n\n set backgroundAlpha(backgroundAlpha: number) {\n this._backgroundAlpha = backgroundAlpha;\n }\n\n _initScene(ref: HTMLCanvasElement, width: number, height: number, resolution: number): SceneState {\n\n const renderer = new THREE.WebGLRenderer({\n // antialias: true,\n alpha: true,\n canvas: 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 // camera.zoom = 1;\n updateCamera(camera, width, height);\n\n return {\n renderer,\n camera,\n scene,\n meshes\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.OrthographicCamera, 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 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}\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 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\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.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"],"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","width","height","renderer","camera","scene","meshes","tick","render","addNeatLink","mesh","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"],"mappings":"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"}
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 }) {\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 } = 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\n let tick = 0;\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"],"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","tick","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"],"mappings":"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AAA;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,CAACvB,MAA2B;AAC5C,QAAMqD,IAAgBrD,EAAI,eAAe,qBAAqB,GAAG;AACjE,MAAIqD;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,GACdpD,EAAA,eAAe,YAAYoD,CAAI;AACvC;"}
package/dist/index.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(l,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],h):(l=typeof globalThis<"u"?globalThis:l||self,h(l.FireCMS={},l.THREE))})(this,function(l,h){"use strict";function O(t){if(t&&t.__esModule)return t;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,i.get?i:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const s=O(h),g=50,x=80,T=!0,p=5,j=new s.Clock;class R{_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundAlpha=1;requestRef=-1;sizeObserver;sceneState;constructor(e){const{ref:o,speed:i=4,horizontalPressure:u=3,verticalPressure:n=3,waveFrequencyX:a=5,waveFrequencyY:v=5,waveAmplitude:m=3,colors:f,highlights:c=4,shadows:_=4,colorSaturation:w=0,colorBrightness:z=1,colorBlending:b=5,wireframe:k=!1,backgroundColor:D="#FFFFFF",backgroundAlpha:Y=1,resolution:G=1}=e,M=o.width,E=o.height;this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this._buildMaterial=this._buildMaterial.bind(this),this.speed=i,this.horizontalPressure=u,this.verticalPressure=n,this.waveFrequencyX=a,this.waveFrequencyY=v,this.waveAmplitude=m,this.colorBlending=b,this.colors=f,this.shadows=_,this.highlights=c,this.colorSaturation=w,this.colorBrightness=z,this.wireframe=k,this.backgroundColor=D,this.backgroundAlpha=Y,this.sceneState=this._initScene(o,M,E,G);const{renderer:P,camera:H,scene:L,meshes:W}=this.sceneState;let q=0;const N=()=>{Math.floor(q*10)%5===0&&V(o),P.setClearColor(this._backgroundColor,this._backgroundAlpha),W.forEach(r=>{const y=[...this._colors.map(d=>({is_active:d.enabled,color:new s.Color(d.color),influence:d.influence})),...Array.from({length:p-this._colors.length}).map(()=>({is_active:!1,color:new s.Color(0)}))];q+=j.getDelta()*this._speed,r.material.uniforms.u_time.value=q,r.material.uniforms.u_resolution={value:new s.Vector2(M,E)},r.material.uniforms.u_color_pressure={value:new s.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:x},r.material.uniforms.u_color_blending={value:this._colorBlending},r.material.uniforms.u_colors={value:y},r.material.uniforms.u_colors_count={value:p},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.wireframe=this._wireframe}),P.render(L,H),this.requestRef=requestAnimationFrame(N)},U=()=>{const r=P.domElement,y=r.clientWidth,d=r.clientHeight;this.sceneState.renderer.setSize(y,d,!1),C(this.sceneState.camera,y,d)};this.sizeObserver=new ResizeObserver(r=>{U()}),this.sizeObserver.observe(o),N()}destroy(){this&&(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect())}set speed(e){this._speed=e/20}set horizontalPressure(e){this._horizontalPressure=e/4}set verticalPressure(e){this._verticalPressure=e/4}set waveFrequencyX(e){this._waveFrequencyX=e*.04}set waveFrequencyY(e){this._waveFrequencyY=e*.04}set waveAmplitude(e){this._waveAmplitude=e*.75}set colors(e){this._colors=e}set highlights(e){this._highlights=e/100}set shadows(e){this._shadows=e/100}set colorSaturation(e){this._saturation=e/10}set colorBrightness(e){console.log("colorBrightness",e),this._brightness=e}set colorBlending(e){this._colorBlending=e/10}set wireframe(e){this._wireframe=e}set backgroundColor(e){this._backgroundColor=e}set backgroundAlpha(e){this._backgroundAlpha=e}_initScene(e,o,i,u){const n=new s.WebGLRenderer({alpha:!0,canvas:e});n.setClearColor(16711680,.5),n.setSize(o,i,!1);const a=[],v=new s.Scene,m=this._buildMaterial(o,i),f=new s.PlaneGeometry(g,x,240*u,240*u),c=new s.Mesh(f,m);c.rotation.x=-Math.PI/3.5,c.position.z=-1,a.push(c),v.add(c);const _=new s.OrthographicCamera(0,0,0,0,0,0);return C(_,o,i),{renderer:n,camera:_,scene:v,meshes:a}}_buildMaterial(e,o){const i=[...this._colors.map(a=>({is_active:a.enabled,color:new s.Color(a.color),influence:a.influence})),...Array.from({length:p-this._colors.length}).map(()=>({is_active:!1,color:new s.Color(0)}))],u={u_time:{value:0},u_color_pressure:{value:new s.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 s.Vector2(e,o)},u_colors:{value:i},u_colors_count:{value:this._colors.length},u_plane_width:{value:g},u_plane_height:{value:x},u_shadows:{value:this._shadows},u_highlights:{value:this._highlights}},n=new s.ShaderMaterial({uniforms:u,vertexShader:F()+K()+S()+B(),fragmentShader:F()+S()+I()});return n.wireframe=T,n}}function C(t,e,o){const n=e*o/1e6*g*x/1.5,a=e/o,v=Math.sqrt(n*a),m=n/v,f=-g/2,c=Math.min((f+v)/1.5,g/2),_=x/4,w=Math.max((_-m)/2,-x/4),z=-100,b=1e3;t.left=f,t.right=c,t.top=_,t.bottom=w,t.near=z,t.far=b,t.updateProjectionMatrix()}function B(){return`
1
+ (function(u,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],m):(u=typeof globalThis<"u"?globalThis:u||self,m(u.FireCMS={},u.THREE))})(this,function(u,m){"use strict";function E(t){if(t&&t.__esModule)return t;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,i.get?i:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const r=E(m),_=50,g=80,N=!0,b=5,j=new r.Clock;class T{_ref;_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundAlpha=1;requestRef=-1;sizeObserver;sceneState;constructor(e){const{ref:o,speed:i=4,horizontalPressure:l=3,verticalPressure:n=3,waveFrequencyX:a=5,waveFrequencyY:x=5,waveAmplitude:h=3,colors:c,highlights:v=4,shadows:d=4,colorSaturation:z=0,colorBrightness:P=1,colorBlending:C=5,wireframe:V=!1,backgroundColor:D="#FFFFFF",backgroundAlpha:Y=1,resolution:G=1}=e;this._ref=o,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this._buildMaterial=this._buildMaterial.bind(this),this.speed=i,this.horizontalPressure=l,this.verticalPressure=n,this.waveFrequencyX=a,this.waveFrequencyY=x,this.waveAmplitude=h,this.colorBlending=C,this.colors=c,this.shadows=d,this.highlights=v,this.colorSaturation=z,this.colorBrightness=P,this.wireframe=V,this.backgroundColor=D,this.backgroundAlpha=Y,this.sceneState=this._initScene(G);let q=0;const k=()=>{const{renderer:f,camera:y,scene:p,meshes:w}=this.sceneState;Math.floor(q*10)%5===0&&K(o),f.setClearColor(this._backgroundColor,this._backgroundAlpha),w.forEach(s=>{const L=this._ref.width,W=this._ref.height,U=[...this._colors.map(S=>({is_active:S.enabled,color:new r.Color(S.color),influence:S.influence})),...Array.from({length:b-this._colors.length}).map(()=>({is_active:!1,color:new r.Color(0)}))];q+=j.getDelta()*this._speed,s.material.uniforms.u_time.value=q,s.material.uniforms.u_resolution={value:new r.Vector2(L,W)},s.material.uniforms.u_color_pressure={value:new r.Vector2(this._horizontalPressure,this._verticalPressure)},s.material.uniforms.u_wave_frequency_x={value:this._waveFrequencyX},s.material.uniforms.u_wave_frequency_y={value:this._waveFrequencyY},s.material.uniforms.u_wave_amplitude={value:this._waveAmplitude},s.material.uniforms.u_plane_width={value:_},s.material.uniforms.u_plane_height={value:g},s.material.uniforms.u_color_blending={value:this._colorBlending},s.material.uniforms.u_colors={value:U},s.material.uniforms.u_colors_count={value:b},s.material.uniforms.u_shadows={value:this._shadows},s.material.uniforms.u_highlights={value:this._highlights},s.material.uniforms.u_saturation={value:this._saturation},s.material.uniforms.u_brightness={value:this._brightness},s.material.wireframe=this._wireframe}),f.render(p,y),this.requestRef=requestAnimationFrame(k)},H=()=>{const{renderer:f}=this.sceneState,y=f.domElement,p=y.clientWidth,w=y.clientHeight;this.sceneState.renderer.setSize(p,w,!1),F(this.sceneState.camera,p,w)};this.sizeObserver=new ResizeObserver(f=>{H()}),this.sizeObserver.observe(o),k()}destroy(){this&&(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect())}set speed(e){this._speed=e/20}set horizontalPressure(e){this._horizontalPressure=e/4}set verticalPressure(e){this._verticalPressure=e/4}set waveFrequencyX(e){this._waveFrequencyX=e*.04}set waveFrequencyY(e){this._waveFrequencyY=e*.04}set waveAmplitude(e){this._waveAmplitude=e*.75}set colors(e){this._colors=e}set highlights(e){this._highlights=e/100}set shadows(e){this._shadows=e/100}set colorSaturation(e){this._saturation=e/10}set colorBrightness(e){this._brightness=e}set colorBlending(e){this._colorBlending=e/10}set wireframe(e){this._wireframe=e}set resolution(e){this.sceneState=this._initScene(e)}set backgroundColor(e){this._backgroundColor=e}set backgroundAlpha(e){this._backgroundAlpha=e}_initScene(e){const o=this._ref.width,i=this._ref.height,l=new r.WebGLRenderer({alpha:!0,canvas:this._ref});l.setClearColor(16711680,.5),l.setSize(o,i,!1);const n=[],a=new r.Scene,x=this._buildMaterial(o,i),h=new r.PlaneGeometry(_,g,240*e,240*e),c=new r.Mesh(h,x);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,F(v,o,i),{renderer:l,camera:v,scene:a,meshes:n,resolution:e}}_buildMaterial(e,o){const i=[...this._colors.map(a=>({is_active:a.enabled,color:new r.Color(a.color),influence:a.influence})),...Array.from({length:b-this._colors.length}).map(()=>({is_active:!1,color:new r.Color(0)}))],l={u_time:{value:0},u_color_pressure:{value:new r.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:i},u_colors_count:{value:this._colors.length},u_plane_width:{value:_},u_plane_height:{value:g},u_shadows:{value:this._shadows},u_highlights:{value:this._highlights}},n=new r.ShaderMaterial({uniforms:l,vertexShader:A()+I()+M()+R(),fragmentShader:A()+M()+B()});return n.wireframe=N,n}}function F(t,e,o){const n=e*o/1e6*_*g/1.5,a=e/o,x=Math.sqrt(n*a),h=n/x,c=-_/2,v=Math.min((c+x)/1.5,_/2),d=g/4,z=Math.max((d-h)/2,-g/4),P=-100,C=1e3;t instanceof r.OrthographicCamera?(t.left=c,t.right=v,t.top=d,t.bottom=z,t.near=P,t.far=C,t.updateProjectionMatrix()):t instanceof r.PerspectiveCamera&&(t.aspect=e/o,t.updateProjectionMatrix())}function R(){return`
2
2
 
3
3
  void main() {
4
4
 
@@ -37,6 +37,13 @@ void main() {
37
37
 
38
38
  noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
39
39
  vec3 nextColor = u_colors[i].color;
40
+
41
+ // vec3 colorOklab = oklab2rgb(color);
42
+ // vec3 nextColorOklab = oklab2rgb(nextColor);
43
+ // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
44
+ //
45
+ // color = rgb2oklab(mixColor);
46
+
40
47
  color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
41
48
  }
42
49
 
@@ -49,7 +56,7 @@ void main() {
49
56
 
50
57
  v_new_position = gl_Position;
51
58
  }
52
- `}function I(){return`
59
+ `}function B(){return`
53
60
 
54
61
  void main(){
55
62
  vec3 color = v_color;
@@ -61,7 +68,7 @@ void main(){
61
68
 
62
69
  gl_FragColor = vec4(color,1.0);
63
70
  }
64
- `}const F=()=>`
71
+ `}const A=()=>`
65
72
  precision highp float;
66
73
 
67
74
  struct Color {
@@ -97,7 +104,7 @@ varying vec4 v_new_position;
97
104
  varying vec3 v_color;
98
105
  varying float v_displacement_amount;
99
106
 
100
- `,K=()=>`
107
+ `,I=()=>`
101
108
 
102
109
  vec3 mod289(vec3 x)
103
110
  {
@@ -277,8 +284,37 @@ mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
277
284
  mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
278
285
  -0.09991, -0.33609, 0.43600,
279
286
  0.615, -0.5586, -0.05639);
287
+
288
+ vec3 oklab2rgb(vec3 linear)
289
+ {
290
+ const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,
291
+ 0.5362752080, 0.6807189584, 0.2818474174,
292
+ 0.0514575653, 0.1074065790, 0.6302613616);
293
+
294
+ const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,
295
+ +0.7936177850, -2.4285922050, +0.7827717662,
296
+ -0.0040720468, +0.4505937099, -0.8086757660);
297
+
298
+ vec3 lms = im1 * linear;
299
+
300
+ return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));
301
+ }
302
+
303
+ vec3 rgb2oklab(vec3 oklab)
304
+ {
305
+ const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,
306
+ +0.396337777, -0.105561346, -0.089484178,
307
+ +0.215803757, -0.063854173, -1.291485548);
308
+
309
+ const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,
310
+ -3.307216883, +2.609332323, -0.703476310,
311
+ +0.230759054, -0.341134429, +1.706862569);
312
+ vec3 lms = m1 * oklab;
313
+
314
+ return m2 * (lms * lms * lms);
315
+ }
280
316
 
281
- `,S=()=>`
317
+ `,M=()=>`
282
318
 
283
319
  vec3 saturation(vec3 rgb, float adjustment) {
284
320
  const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -321,5 +357,5 @@ vec3 hsv2rgb(vec3 c)
321
357
  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
322
358
  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
323
359
  }
324
- `,A=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.fontFamily="sans-serif",t.style.fontSize="16px",t.style.fontWeight="bold",t.style.textDecoration="none",t.style.zIndex="100",t.innerHTML="NEAT"},V=t=>{const e=t.parentElement?.getElementsByTagName("a");if(e){for(let i=0;i<e.length;i++)if(e[i].id==="neat-link"){A(e[i]);return}}const o=document.createElement("a");A(o),t.parentElement?.appendChild(o)};l.NeatGradient=R,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
360
+ `,O=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"},K=t=>{const e=t.parentElement?.getElementsByTagName("a");if(e){for(let i=0;i<e.length;i++)if(e[i].id==="neat-link"){O(e[i]);return}}const o=document.createElement("a");O(o),t.parentElement?.appendChild(o)};u.NeatGradient=T,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
325
361
  //# sourceMappingURL=index.umd.js.map