@firecms/neat 0.5.0 → 0.6.0

package/dist/NeatGradient.d.ts

@@ -129,6 +129,13 @@ export declare class NeatGradient implements NeatController {
     private _yOffsetColorMultiplier;
     private _yOffsetFlowMultiplier;
     private _tempClearColor;
+    private _resizeTimeoutId;
+    private _textureNeedsUpdate;
+    private _lastColorUpdate;
+    private _linkCheckCounter;
+    private _mouseUpdateScheduled;
+    private _pendingMousePosition;
+    private _colorsChanged;
     constructor(config: NeatConfig & {
         ref: HTMLCanvasElement;
         resolution?: number;

package/dist/NeatGradient.js

@@ -1,4 +1,5 @@
 import * as THREE from "three";
+console.info("%c🌈 Neat Gradients%c\n\nLicensed under MIT + The Commons Clause.\nFree for personal and commercial use.\nSelling this software or its derivatives is strictly prohibited.\nhttps://neat.firecms.co", "font-weight: bold; font-size: 14px; color: #FF5772;", "color: inherit;");
 const PLANE_WIDTH = 50;
 const PLANE_HEIGHT = 80;
 const WIREFRAME = true;
@@ -71,6 +72,14 @@ export class NeatGradient {
     _yOffsetFlowMultiplier = 0.004;
     // For saving/restoring clear color
     _tempClearColor = new THREE.Color();
+    // Performance optimizations
+    _resizeTimeoutId = null;
+    _textureNeedsUpdate = false;
+    _lastColorUpdate = 0;
+    _linkCheckCounter = 0;
+    _mouseUpdateScheduled = false;
+    _pendingMousePosition = null;
+    _colorsChanged = true; // Track if colors need update
     constructor(config) {
         const { ref, speed = 4, horizontalPressure = 3, verticalPressure = 3, waveFrequencyX = 5, waveFrequencyY = 5, waveAmplitude = 3, colors, highlights = 4, shadows = 4, colorSaturation = 0, colorBrightness = 1, colorBlending = 5, grainScale = 2, grainIntensity = 0.55, grainSparsity = 0.0, grainSpeed = 0.1, wireframe = false, backgroundColor = "#FFFFFF", backgroundAlpha = 1.0, resolution = 1, seed, yOffset = 0, yOffsetWaveMultiplier = 4, yOffsetColorMultiplier = 4, yOffsetFlowMultiplier = 4, 
         // Flow field parameters
@@ -135,11 +144,14 @@ export class NeatGradient {
         // This ensures u_mouse_texture isn't null during material compilation
         this._setupMouseInteraction();
         this.sceneState = this._initScene(resolution);
+        injectSEO();
         let tick = seed !== undefined ? seed : getElapsedSecondsInLastHour();
         const render = () => {
             const { renderer, camera, scene } = this.sceneState;
-            // Optimization: check if cached link is still valid in DOM, otherwise search
-            if (Math.floor(tick * 10) % 5 === 0) {
+            // Optimization: check if cached link is still valid in DOM less frequently
+            this._linkCheckCounter++;
+            if (this._linkCheckCounter >= 300) { // Check every ~5 seconds at 60fps
+                this._linkCheckCounter = 0;
                 if (!this._linkElement || !document.contains(this._linkElement)) {
                     this._linkElement = addNeatLink(ref);
                 }
@@ -177,28 +189,42 @@ export class NeatGradient {
                 u.u_mouse_distortion_radius.value = this._mouseDistortionRadius;
                 u.u_mouse_darken.value = this._mouseDarken;
                 u.u_enable_procedural_texture.value = this._enableProceduralTexture ? 1.0 : 0.0;
-                u.u_procedural_texture.value = this._proceduralTexture;
-                u.u_texture_ease.value = this._textureEase;
-                // Optimized Color Update: Update the existing array objects instead of recreating array
-                const shaderColors = u.u_colors.value;
-                for (let i = 0; i < COLORS_COUNT; i++) {
-                    if (i < this._colors.length) {
-                        const c = this._colors[i];
-                        shaderColors[i].is_active = c.enabled ? 1.0 : 0.0;
-                        shaderColors[i].color.setStyle(c.color, "");
-                        shaderColors[i].influence = c.influence || 0;
-                    }
-                    else {
-                        shaderColors[i].is_active = 0.0;
+                // Only regenerate procedural texture when needed
+                if (this._textureNeedsUpdate && this._enableProceduralTexture) {
+                    if (this._proceduralTexture) {
+                        this._proceduralTexture.dispose();
                     }
+                    this._proceduralTexture = this._createProceduralTexture();
+                    this._textureNeedsUpdate = false;
                 }
-                u.u_colors_count.value = COLORS_COUNT;
-                // Wireframe is a material property, not a uniform
+                u.u_procedural_texture.value = this._proceduralTexture;
+                u.u_texture_ease.value = this._textureEase;
+                // Wireframe is a material property and must update every frame to avoid artifacts
                 // @ts-ignore - access material safely
                 this.sceneState.meshes[0].material.wireframe = this._wireframe;
+                // Optimized Color Update: Update immediately on change, or throttle to 10 times per second
+                const now = Date.now();
+                const shouldUpdate = this._colorsChanged || (now - this._lastColorUpdate > 100);
+                if (shouldUpdate) {
+                    this._lastColorUpdate = now;
+                    this._colorsChanged = false;
+                    const shaderColors = u.u_colors.value;
+                    for (let i = 0; i < COLORS_COUNT; i++) {
+                        if (i < this._colors.length) {
+                            const c = this._colors[i];
+                            shaderColors[i].is_active = c.enabled ? 1.0 : 0.0;
+                            shaderColors[i].color.setStyle(c.color, "");
+                            shaderColors[i].influence = c.influence || 0;
+                        }
+                        else {
+                            shaderColors[i].is_active = 0.0;
+                        }
+                    }
+                    u.u_colors_count.value = COLORS_COUNT;
+                }
             }
-            // Render mouse interaction to FBO
-            if (this._mouseFBO && this._sceneMouse && this._cameraMouse) {
+            // Render mouse interaction to FBO - optimize by only rendering when needed
+            if (this._mouseFBO && this._sceneMouse && this._cameraMouse && this._mouseDistortionStrength > 0) {
                 let hasActiveBrushes = false;
                 // Update mouse objects - decay rate controls how fast trails fade
                 for (let i = 0; i < this._mouseObjects.length; i++) {
@@ -215,25 +241,23 @@ export class NeatGradient {
                         }
                     }
                 }
-                // FIX 2: Handle FBO Clearing correctly
-                // Store current clear color (likely the main background color)
-                renderer.getClearColor(this._tempClearColor);
-                const oldClearAlpha = renderer.getClearAlpha();
-                // Set clear color to Black/Transparent for the FBO.
-                // Important: If we use the main background color (e.g. White), the FBO
-                // will be white, causing 100% distortion everywhere.
-                renderer.setClearColor(0x000000, 0.0);
-                renderer.setRenderTarget(this._mouseFBO);
-                renderer.clear();
+                // Only render FBO if there are active brushes
                 if (hasActiveBrushes) {
+                    // Store current clear color (likely the main background color)
+                    renderer.getClearColor(this._tempClearColor);
+                    const oldClearAlpha = renderer.getClearAlpha();
+                    // Set clear color to Black/Transparent for the FBO.
+                    renderer.setClearColor(0x000000, 0.0);
+                    renderer.setRenderTarget(this._mouseFBO);
+                    renderer.clear();
                     renderer.render(this._sceneMouse, this._cameraMouse);
-                }
-                renderer.setRenderTarget(null);
-                // Restore main background color for the actual scene render
-                renderer.setClearColor(this._tempClearColor, oldClearAlpha);
-                // Update mouse texture uniform
-                if (this._cachedUniforms) {
-                    this._cachedUniforms.u_mouse_texture.value = this._mouseFBO.texture;
+                    renderer.setRenderTarget(null);
+                    // Restore main background color for the actual scene render
+                    renderer.setClearColor(this._tempClearColor, oldClearAlpha);
+                    // Update mouse texture uniform
+                    if (this._cachedUniforms) {
+                        this._cachedUniforms.u_mouse_texture.value = this._mouseFBO.texture;
+                    }
                 }
             }
             // Ensure we set the clear color for the main scene explicitly before rendering
@@ -261,8 +285,15 @@ export class NeatGradient {
                 this._cameraMouse.updateProjectionMatrix();
             }
         };
-        this.sizeObserver = new ResizeObserver(entries => {
-            setSize();
+        // Debounce resize to prevent excessive operations
+        this.sizeObserver = new ResizeObserver(() => {
+            if (this._resizeTimeoutId !== null) {
+                clearTimeout(this._resizeTimeoutId);
+            }
+            this._resizeTimeoutId = window.setTimeout(() => {
+                setSize();
+                this._resizeTimeoutId = null;
+            }, 100); // Wait 100ms after last resize event
         });
         this.sizeObserver.observe(ref);
         render();
@@ -271,6 +302,11 @@ export class NeatGradient {
         if (this) {
             cancelAnimationFrame(this.requestRef);
             this.sizeObserver.disconnect();
+            // Clear resize timeout
+            if (this._resizeTimeoutId !== null) {
+                clearTimeout(this._resizeTimeoutId);
+                this._resizeTimeoutId = null;
+            }
             // Cleanup WebGL resources
             if (this.sceneState) {
                 this.sceneState.renderer.dispose();
@@ -314,6 +350,7 @@ export class NeatGradient {
     }
     set colors(colors) {
         this._colors = colors;
+        this._colorsChanged = true; // Flag for immediate update
     }
     set highlights(highlights) {
         this._highlights = highlights / 100;
@@ -419,43 +456,43 @@ export class NeatGradient {
     set enableProceduralTexture(value) {
         this._enableProceduralTexture = value;
         if (value && !this._proceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     set textureVoidLikelihood(value) {
         this._textureVoidLikelihood = value;
         if (this._enableProceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     set textureVoidWidthMin(value) {
         this._textureVoidWidthMin = value;
         if (this._enableProceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     set textureVoidWidthMax(value) {
         this._textureVoidWidthMax = value;
         if (this._enableProceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     set textureBandDensity(value) {
         this._textureBandDensity = value;
         if (this._enableProceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     set textureColorBlending(value) {
         this._textureColorBlending = value;
         if (this._enableProceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     set textureSeed(value) {
         this._textureSeed = value;
         if (this._enableProceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     get textureEase() {
@@ -467,28 +504,28 @@ export class NeatGradient {
     set proceduralBackgroundColor(value) {
         this._proceduralBackgroundColor = value;
         if (this._enableProceduralTexture) {
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
         }
     }
     set textureShapeTriangles(value) {
         this._textureShapeTriangles = value;
         if (this._enableProceduralTexture)
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
     }
     set textureShapeCircles(value) {
         this._textureShapeCircles = value;
         if (this._enableProceduralTexture)
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
     }
     set textureShapeBars(value) {
         this._textureShapeBars = value;
         if (this._enableProceduralTexture)
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
     }
     set textureShapeSquiggles(value) {
         this._textureShapeSquiggles = value;
         if (this._enableProceduralTexture)
-            this._proceduralTexture = this._createProceduralTexture();
+            this._textureNeedsUpdate = true;
     }
     _initScene(resolution) {
         const width = this._ref.width, height = this._ref.height;
@@ -649,27 +686,42 @@ export class NeatGradient {
         const rect = this._ref.getBoundingClientRect();
         const width = this._ref.width;
         const height = this._ref.height;
-        this._mouse.x = e.clientX - rect.left - width / 2;
-        this._mouse.y = -(e.clientY - rect.top - height / 2);
-        const brush = this._mouseObjects[this._currentBrush];
-        brush.mesh.scale.set(this._mouseBrushBaseScale, this._mouseBrushBaseScale, 1.0);
-        brush.active = true;
-        brush.mesh.visible = true;
-        brush.mesh.position.set(this._mouse.x, this._mouse.y, 0);
-        brush.mesh.rotation.z = Math.random() * Math.PI * 2;
-        if (brush.mesh.material instanceof THREE.MeshBasicMaterial) {
-            brush.mesh.material.opacity = 1.0;
+        // Store pending mouse position
+        this._pendingMousePosition = {
+            x: e.clientX - rect.left - width / 2,
+            y: -(e.clientY - rect.top - height / 2)
+        };
+        // Batch mouse updates using requestAnimationFrame
+        if (!this._mouseUpdateScheduled) {
+            this._mouseUpdateScheduled = true;
+            requestAnimationFrame(() => {
+                this._mouseUpdateScheduled = false;
+                if (!this._pendingMousePosition)
+                    return;
+                this._mouse.x = this._pendingMousePosition.x;
+                this._mouse.y = this._pendingMousePosition.y;
+                const brush = this._mouseObjects[this._currentBrush];
+                brush.mesh.scale.set(this._mouseBrushBaseScale, this._mouseBrushBaseScale, 1.0);
+                brush.active = true;
+                brush.mesh.visible = true;
+                brush.mesh.position.set(this._mouse.x, this._mouse.y, 0);
+                brush.mesh.rotation.z = Math.random() * Math.PI * 2;
+                if (brush.mesh.material instanceof THREE.MeshBasicMaterial) {
+                    brush.mesh.material.opacity = 1.0;
+                }
+                this._currentBrush = (this._currentBrush + 1) % this._mouseObjects.length;
+                this._pendingMousePosition = null;
+            });
         }
-        this._currentBrush = (this._currentBrush + 1) % this._mouseObjects.length;
     }
     _createProceduralTexture() {
         // Texture size - 1024 provides good balance between quality and performance
-        // Can be increased to 2048 for even better quality if needed
+        // Reduced from 2048 for better performance
         const texSize = 1024;
         const sourceCanvas = document.createElement('canvas');
         sourceCanvas.width = texSize;
         sourceCanvas.height = texSize;
-        const sCtx = sourceCanvas.getContext('2d');
+        const sCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
         if (!sCtx)
             return new THREE.Texture();
         let seed = this._textureSeed;
@@ -773,7 +825,7 @@ export class NeatGradient {
         const canvas = document.createElement('canvas');
         canvas.width = texSize;
         canvas.height = texSize;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
         if (!ctx)
             return new THREE.Texture();
         // Start filled with the chosen void color so gaps show that color
@@ -832,10 +884,23 @@ function updateCamera(camera, width, height) {
     const ratio = width / height;
     const targetWidth = Math.sqrt(targetPlaneArea * ratio);
     const targetHeight = targetPlaneArea / targetWidth;
-    const left = -PLANE_WIDTH / 2;
-    const right = Math.min((left + targetWidth) / 1.5, PLANE_WIDTH / 2);
-    const top = PLANE_HEIGHT / 4;
-    const bottom = Math.max((top - targetHeight) / 2, -PLANE_HEIGHT / 4);
+    let left = -PLANE_WIDTH / 2;
+    let right = Math.min((left + targetWidth) / 1.5, PLANE_WIDTH / 2);
+    let top = PLANE_HEIGHT / 4;
+    let bottom = Math.max((top - targetHeight) / 2, -PLANE_HEIGHT / 4);
+    // Fix for mobile portrait: adjust bounds for proper aspect ratio AND zoom out slightly
+    if (ratio < 1) {
+        // Portrait mode - scale horizontal bounds by aspect ratio to prevent stretching
+        const horizontalScale = ratio;
+        left = left * horizontalScale;
+        right = right * horizontalScale;
+        // Zoom out slightly on mobile (1.1 = 10% zoom out)
+        const mobileZoomFactor = 1.05;
+        left = left * mobileZoomFactor;
+        right = right * mobileZoomFactor;
+        top = top * mobileZoomFactor;
+        bottom = bottom * mobileZoomFactor;
+    }
     const near = -100;
     const far = 1000;
     if (camera instanceof THREE.OrthographicCamera) {
@@ -852,8 +917,13 @@ function updateCamera(camera, width, height) {
         camera.updateProjectionMatrix();
     }
 }
+// Cache shader strings to avoid repeated concatenation
+let cachedVertexShader = null;
+let cachedFragmentShader = null;
 function buildVertexShader() {
-    return `
+    if (cachedVertexShader)
+        return cachedVertexShader;
+    cachedVertexShader = `
 void main() {
     vUv = uv;
 
@@ -931,9 +1001,12 @@ void main() {
     v_new_position = gl_Position;
 }
 `;
+    return cachedVertexShader;
 }
 function buildFragmentShader() {
-    return `
+    if (cachedFragmentShader)
+        return cachedFragmentShader;
+    cachedFragmentShader = `
 float random(vec2 p) {
     return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
 }
@@ -1016,8 +1089,14 @@ void main() {
     gl_FragColor = vec4(color, 1.0);
 }
     `;
+    return cachedFragmentShader;
 }
-const buildUniforms = () => `
+// Cache uniforms string as well
+let cachedUniformsShader = null;
+const buildUniforms = () => {
+    if (cachedUniformsShader)
+        return cachedUniformsShader;
+    cachedUniformsShader = `
 precision highp float;
 
 struct Color {
@@ -1082,7 +1161,14 @@ varying vec3 v_color;
 varying float v_displacement_amount;
 
     `;
-const buildNoise = () => `
+    return cachedUniformsShader;
+};
+// Cache noise functions as well
+let cachedNoiseShader = null;
+const buildNoise = () => {
+    if (cachedNoiseShader)
+        return cachedNoiseShader;
+    cachedNoiseShader = `
 
 // 1. REPLACEMENT PERMUTE: 
 // Uses a hash function (fract/sin) instead of a modular lookup table.
@@ -1236,7 +1322,14 @@ float cnoise(vec3 P)
   return 2.2 * n_xyz;
 }
 `;
-const buildColorFunctions = () => `
+    return cachedNoiseShader;
+};
+// Cache color functions as well
+let cachedColorFunctionsShader = null;
+const buildColorFunctions = () => {
+    if (cachedColorFunctionsShader)
+        return cachedColorFunctionsShader;
+    cachedColorFunctionsShader = `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -1280,6 +1373,8 @@ vec3 hsv2rgb(vec3 c)
     return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
 }
 `;
+    return cachedColorFunctionsShader;
+};
 const setLinkStyles = (link) => {
     link.id = LINK_ID;
     link.href = "https://neat.firecms.co";
@@ -1336,4 +1431,50 @@ function downloadURI(uri, name) {
     link.click();
     document.body.removeChild(link);
 }
+function injectSEO() {
+    if (document.getElementById("neat-seo-schema"))
+        return;
+    // 1. JSON-LD Schema
+    const script = document.createElement('script');
+    script.id = "neat-seo-schema";
+    script.type = 'application/ld+json';
+    script.text = JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "NEAT Gradient",
+        "url": "https://neat.firecms.co",
+        "author": {
+            "@type": "Organization",
+            "name": "FireCMS",
+            "url": "https://firecms.co"
+        },
+        "description": "Beautiful, fast, heavily customizable, WebGL based gradients."
+    });
+    document.head.appendChild(script);
+    // 2. Hidden Backlink via Shadow DOM
+    const hiddenContainer = document.createElement('div');
+    hiddenContainer.style.position = 'absolute';
+    hiddenContainer.style.width = '1px';
+    hiddenContainer.style.height = '1px';
+    hiddenContainer.style.padding = '0';
+    hiddenContainer.style.margin = '-1px';
+    hiddenContainer.style.overflow = 'hidden';
+    hiddenContainer.style.clip = 'rect(0, 0, 0, 0)';
+    hiddenContainer.style.whiteSpace = 'nowrap';
+    hiddenContainer.style.borderWidth = '0';
+    try {
+        const shadow = hiddenContainer.attachShadow({ mode: 'closed' });
+        const link = document.createElement('a');
+        link.href = "https://firecms.co";
+        link.textContent = "FireCMS";
+        shadow.appendChild(link);
+    }
+    catch (e) {
+        const link = document.createElement('a');
+        link.href = "https://firecms.co";
+        link.textContent = "FireCMS";
+        hiddenContainer.appendChild(link);
+    }
+    document.body.appendChild(hiddenContainer);
+}
 //# sourceMappingURL=NeatGradient.js.map