@firecms/neat 0.4.0 → 0.5.1

package/src/NeatGradient.ts

@@ -4,7 +4,7 @@ const PLANE_WIDTH = 50;
 const PLANE_HEIGHT = 80;
 
 const WIREFRAME = true;
-const COLORS_COUNT = 5;
+const COLORS_COUNT = 6;
 
 const clock = new THREE.Clock();
 
@@ -18,6 +18,16 @@ type SceneState = {
     resolution: number
 }
 
+// Interface for the Uniforms to avoid @ts-ignore and improve access speed
+interface NeatUniforms {
+    [key: string]: THREE.IUniform;
+    u_time: { value: number };
+    u_resolution: { value: THREE.Vector2 };
+    u_color_pressure: { value: THREE.Vector2 };
+    u_colors: { value: { is_active: number; color: THREE.Color; influence: number }[] };
+    u_mouse_texture: { value: THREE.Texture | null };
+}
+
 export type NeatConfig = {
     resolution?: number;
     speed?: number;
@@ -40,6 +50,37 @@ export type NeatConfig = {
     backgroundColor?: string;
     backgroundAlpha?: number;
     yOffset?: number;
+    yOffsetWaveMultiplier?: number;
+    yOffsetColorMultiplier?: number;
+    yOffsetFlowMultiplier?: number;
+    // Flow field parameters
+    flowDistortionA?: number;
+    flowDistortionB?: number;
+    flowScale?: number;
+    flowEase?: number;
+    flowEnabled?: boolean;
+    // Mouse interaction
+    /** Strength of mouse-driven distortion */
+    mouseDistortionStrength?: number;
+    /** Radius / area of mouse-driven distortion in UV space (0–1-ish) */
+    mouseDistortionRadius?: number;
+    /** How quickly mouse trails decay/fade (0.9=slow/wobbly, 0.99=fast/sharp) */
+    mouseDecayRate?: number;
+    mouseDarken?: number;
+    // Texture generation
+    enableProceduralTexture?: boolean;
+    textureVoidLikelihood?: number;
+    textureVoidWidthMin?: number;
+    textureVoidWidthMax?: number;
+    textureBandDensity?: number;
+    textureColorBlending?: number;
+    textureSeed?: number;
+    textureEase?: number;
+    proceduralBackgroundColor?: string;
+    textureShapeTriangles?: number;
+    textureShapeCircles?: number;
+    textureShapeBars?: number;
+    textureShapeSquiggles?: number;
 };
 
 export type NeatColor = {
@@ -86,11 +127,67 @@ export class NeatGradient implements NeatController {
     private _backgroundColor: string = "#FFFFFF";
     private _backgroundAlpha: number = 1.0;
 
+    // Flow field properties
+    private _flowDistortionA: number = 0;
+    private _flowDistortionB: number = 0;
+    private _flowScale: number = 1.0;
+    private _flowEase: number = 0.0;
+    private _flowEnabled: boolean = true;
+
+    // Mouse interaction properties
+    private _mouseDistortionStrength: number = 0.0;
+    private _mouseDistortionRadius: number = 0.25;
+    private _mouseDecayRate: number = 0.96;
+    private _mouseDarken: number = 0.0;
+    private _mouse: THREE.Vector2 = new THREE.Vector2(-1000, -1000);
+    private _mouseFBO: THREE.WebGLRenderTarget | null = null;
+    private _sceneMouse: THREE.Scene | null = null;
+    private _cameraMouse: THREE.OrthographicCamera | null = null;
+    private _mouseObjects: Array<{ mesh: THREE.Mesh, active: boolean }> = [];
+    private _currentBrush: number = 0;
+    private _mouseBrushBaseScale: number = 1;
+
+    // Texture generation properties
+    private _enableProceduralTexture: boolean = false;
+    private _textureVoidLikelihood: number = 0.45;
+    private _textureVoidWidthMin: number = 200;
+    private _textureVoidWidthMax: number = 486;
+    private _textureBandDensity: number = 2.15;
+    private _textureColorBlending: number = 0.01;
+    private _textureSeed: number = 333;
+    private _textureEase: number = 0.5;
+    private _proceduralTexture: THREE.Texture | null = null;
+    private _proceduralBackgroundColor: string = "#000000";
+
+    private _textureShapeTriangles: number = 20;
+    private _textureShapeCircles: number = 15;
+    private _textureShapeBars: number = 15;
+    private _textureShapeSquiggles: number = 10;
+
     private requestRef: number = -1;
     private sizeObserver: ResizeObserver;
     private sceneState: SceneState;
 
+    // Optimization: Cache uniforms to avoid lookups and object creation in render loop
+    private _cachedUniforms: NeatUniforms | null = null;
+    private _linkElement: HTMLAnchorElement | null = null;
+
     private _yOffset: number = 0;
+    private _yOffsetWaveMultiplier: number = 0.004;
+    private _yOffsetColorMultiplier: number = 0.004;
+    private _yOffsetFlowMultiplier: number = 0.004;
+
+    // For saving/restoring clear color
+    private _tempClearColor = new THREE.Color();
+
+    // Performance optimizations
+    private _resizeTimeoutId: number | null = null;
+    private _textureNeedsUpdate: boolean = false;
+    private _lastColorUpdate: number = 0;
+    private _linkCheckCounter: number = 0;
+    private _mouseUpdateScheduled: boolean = false;
+    private _pendingMousePosition: { x: number; y: number } | null = null;
+    private _colorsChanged: boolean = true; // Track if colors need update
 
     constructor(config: NeatConfig & { ref: HTMLCanvasElement, resolution?: number, seed?: number }) {
 
@@ -117,7 +214,35 @@ export class NeatGradient implements NeatController {
             backgroundAlpha = 1.0,
             resolution = 1,
             seed,
-            yOffset = 0
+            yOffset = 0,
+            yOffsetWaveMultiplier = 4,
+            yOffsetColorMultiplier = 4,
+            yOffsetFlowMultiplier = 4,
+            // Flow field parameters
+            flowDistortionA = 0,
+            flowDistortionB = 0,
+            flowScale = 1.0,
+            flowEase = 0.0,
+            flowEnabled = true,
+            // Mouse interaction
+            mouseDistortionStrength = 0.0,
+            mouseDistortionRadius = 0.25,
+            mouseDecayRate = 0.96,
+            mouseDarken = 0.0,
+            // Texture generation
+            enableProceduralTexture = false,
+            textureVoidLikelihood = 0.45,
+            textureVoidWidthMin = 200,
+            textureVoidWidthMax = 486,
+            textureBandDensity = 2.15,
+            textureColorBlending = 0.01,
+            textureSeed = 333,
+            textureEase = 0.5,
+            proceduralBackgroundColor = "#000000",
+            textureShapeTriangles = 20,
+            textureShapeCircles = 15,
+            textureShapeBars = 15,
+            textureShapeSquiggles = 10,
         } = config;
 
 
@@ -147,84 +272,183 @@ export class NeatGradient implements NeatController {
         this.backgroundColor = backgroundColor;
         this.backgroundAlpha = backgroundAlpha;
         this.yOffset = yOffset;
-
+        this.yOffsetWaveMultiplier = yOffsetWaveMultiplier;
+        this.yOffsetColorMultiplier = yOffsetColorMultiplier;
+        this.yOffsetFlowMultiplier = yOffsetFlowMultiplier;
+
+        // Flow field
+        this.flowDistortionA = flowDistortionA;
+        this.flowDistortionB = flowDistortionB;
+        this.flowScale = flowScale;
+        this.flowEase = flowEase;
+        this.flowEnabled = flowEnabled;
+
+        // Mouse interaction
+        this.mouseDistortionStrength = mouseDistortionStrength;
+        this.mouseDistortionRadius = mouseDistortionRadius;
+        this.mouseDecayRate = mouseDecayRate;
+        this.mouseDarken = mouseDarken;
+
+        // Texture generation
+        this.enableProceduralTexture = enableProceduralTexture;
+        this.textureVoidLikelihood = textureVoidLikelihood;
+        this.textureVoidWidthMin = textureVoidWidthMin;
+        this.textureVoidWidthMax = textureVoidWidthMax;
+        this.textureBandDensity = textureBandDensity;
+        this.textureColorBlending = textureColorBlending;
+        this.textureSeed = textureSeed;
+        this.textureEase = textureEase;
+        this._proceduralBackgroundColor = proceduralBackgroundColor;
+
+        this._textureShapeTriangles = textureShapeTriangles;
+        this._textureShapeCircles = textureShapeCircles;
+        this._textureShapeBars = textureShapeBars;
+        this._textureShapeSquiggles = textureShapeSquiggles;
+
+        // FIX 1: Setup mouse resources BEFORE building the material/scene
+        // This ensures u_mouse_texture isn't null during material compilation
+        this._setupMouseInteraction();
         this.sceneState = this._initScene(resolution);
 
         let tick = seed !== undefined ? seed : getElapsedSecondsInLastHour();
+
         const render = () => {
 
-            const { renderer, camera, scene, meshes } = this.sceneState;
-            if (Math.floor(tick * 10) % 5 === 0) {
-                addNeatLink(ref);
+            const { renderer, camera, scene } = this.sceneState;
+
+            // 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);
+                }
             }
 
-            renderer.setClearColor(this._backgroundColor, this._backgroundAlpha);
-            meshes.forEach((mesh) => {
-
-                const width = this._ref.width,
-                    height = this._ref.height;
-
-                const colors = [
-                    ...this._colors.map(color => {
-                        let threeColor = new THREE.Color();
-                        threeColor.setStyle(color.color, "");
-                        return ({
-                            is_active: color.enabled,
-                            color: threeColor,
-                            influence: color.influence
-                        });
-                    }),
-                    ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({
-                        is_active: false,
-                        color: new THREE.Color(0x000000)
-                    }))
-                ];
+            // Update Uniforms efficiently without creating new objects
+            if (this._cachedUniforms) {
+                const u = this._cachedUniforms;
 
                 tick += clock.getDelta() * this._speed;
-                // @ts-ignore
-                mesh.material.uniforms.u_time.value = tick;
-                // @ts-ignore
-                mesh.material.uniforms.u_resolution = { value: new THREE.Vector2(width, height) };
-                // @ts-ignore
-                mesh.material.uniforms.u_color_pressure = { value: new THREE.Vector2(this._horizontalPressure, this._verticalPressure) };
-                // @ts-ignore
-                mesh.material.uniforms.u_wave_frequency_x = { value: this._waveFrequencyX };
-                // @ts-ignore
-                mesh.material.uniforms.u_wave_frequency_y = { value: this._waveFrequencyY };
-                // @ts-ignore
-                mesh.material.uniforms.u_wave_amplitude = { value: this._waveAmplitude };
-                // @ts-ignore
-                mesh.material.uniforms.u_plane_width = { value: PLANE_WIDTH };
-                // @ts-ignore
-                mesh.material.uniforms.u_plane_height = { value: PLANE_HEIGHT };
-                // @ts-ignore
-                mesh.material.uniforms.u_color_blending = { value: this._colorBlending };
-                // @ts-ignore
-                mesh.material.uniforms.u_colors = { value: colors };
-                // @ts-ignore
-                mesh.material.uniforms.u_colors_count = { value: COLORS_COUNT };
-                // @ts-ignore
-                mesh.material.uniforms.u_shadows = { value: this._shadows };
-                // @ts-ignore
-                mesh.material.uniforms.u_highlights = { value: this._highlights };
-                // @ts-ignore
-                mesh.material.uniforms.u_saturation = { value: this._saturation };
-                // @ts-ignore
-                mesh.material.uniforms.u_brightness = { value: this._brightness };
-                // @ts-ignore
-                mesh.material.uniforms.u_grain_intensity = { value: this._grainIntensity };
-                // @ts-ignore
-                mesh.material.uniforms.u_grain_sparsity = { value: this._grainSparsity };
-                // @ts-ignore
-                mesh.material.uniforms.u_grain_speed = { value: this._grainSpeed };
-                // @ts-ignore
-                mesh.material.uniforms.u_grain_scale = { value: this._grainScale };
-                // @ts-ignore
-                mesh.material.uniforms.u_y_offset = { value: this._yOffset };
-                // @ts-ignore
-                mesh.material.wireframe = this._wireframe;
-            });
 
+                u.u_time.value = tick;
+                u.u_resolution.value.set(this._ref.width, this._ref.height);
+                u.u_color_pressure.value.set(this._horizontalPressure, this._verticalPressure);
+
+                // Directly assign simple values
+                u.u_wave_frequency_x.value = this._waveFrequencyX;
+                u.u_wave_frequency_y.value = this._waveFrequencyY;
+                u.u_wave_amplitude.value = this._waveAmplitude;
+                u.u_color_blending.value = this._colorBlending;
+                u.u_shadows.value = this._shadows;
+                u.u_highlights.value = this._highlights;
+                u.u_saturation.value = this._saturation;
+                u.u_brightness.value = this._brightness;
+                u.u_grain_intensity.value = this._grainIntensity;
+                u.u_grain_sparsity.value = this._grainSparsity;
+                u.u_grain_speed.value = this._grainSpeed;
+                u.u_grain_scale.value = this._grainScale;
+                u.u_y_offset.value = this._yOffset;
+                u.u_y_offset_wave_multiplier.value = this._yOffsetWaveMultiplier;
+                u.u_y_offset_color_multiplier.value = this._yOffsetColorMultiplier;
+                u.u_y_offset_flow_multiplier.value = this._yOffsetFlowMultiplier;
+                u.u_flow_distortion_a.value = this._flowDistortionA;
+                u.u_flow_distortion_b.value = this._flowDistortionB;
+                u.u_flow_scale.value = this._flowScale;
+                u.u_flow_ease.value = this._flowEase;
+                u.u_flow_enabled.value = this._flowEnabled ? 1.0 : 0.0;
+                u.u_mouse_distortion_strength.value = this._mouseDistortionStrength;
+                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;
+
+                // 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_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 - 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++) {
+                    const obj = this._mouseObjects[i];
+                    if (obj.mesh.visible) {
+                        hasActiveBrushes = true;
+                        obj.mesh.rotation.z += 0.01;
+                        if (obj.mesh.material instanceof THREE.MeshBasicMaterial) {
+                            // Decay only affects opacity
+                            obj.mesh.material.opacity *= this._mouseDecayRate;
+
+                            if (obj.mesh.material.opacity < 0.01) {
+                                obj.mesh.visible = false;
+                            }
+                        }
+                    }
+                }
+
+                // 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;
+                    }
+                }
+            }
+
+            // Ensure we set the clear color for the main scene explicitly before rendering
+            renderer.setClearColor(this._backgroundColor, this._backgroundAlpha);
             renderer.render(scene, camera);
             this.requestRef = requestAnimationFrame(render);
         };
@@ -238,10 +462,30 @@ export class NeatGradient implements NeatController {
 
             this.sceneState.renderer.setSize(width, height, false);
             updateCamera(this.sceneState.camera, width, height);
+
+            // FIX 3: Update Mouse FBO and Camera on resize
+            // If we don't do this, mouse coordinates map incorrectly after a resize
+            if (this._mouseFBO && this._cameraMouse) {
+                const fSize = height / 2;
+                const aspect = width / height;
+                this._mouseFBO.setSize(width / 2, height / 2);
+                this._cameraMouse.left = -fSize * aspect;
+                this._cameraMouse.right = fSize * aspect;
+                this._cameraMouse.top = fSize;
+                this._cameraMouse.bottom = -fSize;
+                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);
@@ -254,6 +498,24 @@ export class NeatGradient implements NeatController {
         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();
+                this.sceneState.meshes.forEach(m => {
+                    m.geometry.dispose();
+                    if(Array.isArray(m.material)) m.material.forEach(mat => mat.dispose());
+                    else m.material.dispose();
+                });
+            }
+            if (this._mouseFBO) this._mouseFBO.dispose();
+            if (this._proceduralTexture) this._proceduralTexture.dispose();
         }
     }
 
@@ -290,6 +552,7 @@ export class NeatGradient implements NeatController {
 
     set colors(colors: NeatColor[]) {
         this._colors = colors;
+        this._colorsChanged = true; // Flag for immediate update
     }
 
     set highlights(highlights: number) {
@@ -348,11 +611,178 @@ export class NeatGradient implements NeatController {
         this._yOffset = yOffset;
     }
 
+    get yOffsetWaveMultiplier(): number {
+        return this._yOffsetWaveMultiplier * 1000;
+    }
+
+    set yOffsetWaveMultiplier(value: number) {
+        this._yOffsetWaveMultiplier = value / 1000;
+    }
+
+    get yOffsetColorMultiplier(): number {
+        return this._yOffsetColorMultiplier * 1000;
+    }
+
+    set yOffsetColorMultiplier(value: number) {
+        this._yOffsetColorMultiplier = value / 1000;
+    }
+
+    get yOffsetFlowMultiplier(): number {
+        return this._yOffsetFlowMultiplier * 1000;
+    }
+
+    set yOffsetFlowMultiplier(value: number) {
+        this._yOffsetFlowMultiplier = value / 1000;
+    }
+
+    set flowDistortionA(value: number) {
+        this._flowDistortionA = value;
+    }
+
+    set flowDistortionB(value: number) {
+        this._flowDistortionB = value;
+    }
+
+    set flowScale(value: number) {
+        this._flowScale = value;
+    }
+
+    set flowEase(value: number) {
+        this._flowEase = value;
+    }
+
+    set flowEnabled(value: boolean) {
+        this._flowEnabled = value;
+    }
+
+    get flowEnabled(): boolean {
+        return this._flowEnabled;
+    }
+
+
+    set mouseDistortionStrength(value: number) {
+        this._mouseDistortionStrength = Math.max(0, value);
+    }
+
+    set mouseDistortionRadius(value: number) {
+        // Clamp to a sane range in UV space
+        this._mouseDistortionRadius = Math.max(0.01, Math.min(value, 1.0));
+        // Update brush scale when radius changes
+        this._updateBrushScale();
+    }
+
+    _updateBrushScale() {
+        if (!this._mouseObjects || this._mouseObjects.length === 0) return;
+        // Radius directly controls the brush scale
+        // Base geometry is 200px, so radius 0.25 = 50px, radius 1.0 = 200px
+        this._mouseBrushBaseScale = this._mouseDistortionRadius;
+    }
+
+    set mouseDecayRate(value: number) {
+        // Clamp between 0.9 (slow decay, more wobble) and 0.99 (fast decay, less wobble)
+        this._mouseDecayRate = Math.max(0.9, Math.min(value, 0.99));
+    }
+
+    set mouseDarken(value: number) {
+        this._mouseDarken = value;
+    }
+
+    set enableProceduralTexture(value: boolean) {
+        this._enableProceduralTexture = value;
+        if (value && !this._proceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    set textureVoidLikelihood(value: number) {
+        this._textureVoidLikelihood = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    set textureVoidWidthMin(value: number) {
+        this._textureVoidWidthMin = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    set textureVoidWidthMax(value: number) {
+        this._textureVoidWidthMax = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    set textureBandDensity(value: number) {
+        this._textureBandDensity = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    set textureColorBlending(value: number) {
+        this._textureColorBlending = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    set textureSeed(value: number) {
+        this._textureSeed = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    get textureEase(): number {
+        return this._textureEase;
+    }
+
+    set textureEase(value: number) {
+        this._textureEase = value;
+    }
+
+    set proceduralBackgroundColor(value: string) {
+        this._proceduralBackgroundColor = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+
+    set textureShapeTriangles(value: number) {
+        this._textureShapeTriangles = value;
+        if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
+    }
+    set textureShapeCircles(value: number) {
+        this._textureShapeCircles = value;
+        if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
+    }
+    set textureShapeBars(value: number) {
+        this._textureShapeBars = value;
+        if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
+    }
+    set textureShapeSquiggles(value: number) {
+        this._textureShapeSquiggles = value;
+        if (this._enableProceduralTexture) this._textureNeedsUpdate = true;
+    }
+
     _initScene(resolution: number): SceneState {
 
         const width = this._ref.width,
             height = this._ref.height;
 
+        // Cleanup existing renderer if needed
+        if (this.sceneState && this.sceneState.renderer) {
+            this.sceneState.renderer.dispose();
+            this.sceneState.meshes.forEach(m => {
+                m.geometry.dispose();
+                if(Array.isArray(m.material)) m.material.forEach(mat => mat.dispose());
+                else m.material.dispose();
+            });
+        }
+
         const renderer = new THREE.WebGLRenderer({
             // antialias: true,
             alpha: true,
@@ -392,17 +822,13 @@ export class NeatGradient implements NeatController {
 
     _buildMaterial(width: number, height: number) {
 
-        const colors = [
-            ...this._colors.map(color => ({
-                is_active: color.enabled,
-                color: new THREE.Color(color.color),
-                influence: color.influence
-            })),
-            ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({
-                is_active: false,
-                color: new THREE.Color(0x000000)
-            }))
-        ];
+        // Initialize stable array structure for colors
+        // We create 6 objects and just update them in the render loop to avoid GC
+        const colors = Array.from({ length: COLORS_COUNT }).map((_, i) => ({
+            is_active: i < this._colors.length ? (this._colors[i].enabled ? 1.0 : 0.0) : 0.0,
+            color: new THREE.Color(i < this._colors.length ? this._colors[i].color : 0x000000),
+            influence: i < this._colors.length ? (this._colors[i].influence || 0) : 0
+        }));
 
         const uniforms = {
             u_time: { value: 0 },
@@ -421,6 +847,29 @@ export class NeatGradient implements NeatController {
             u_grain_sparsity: { value: this._grainSparsity },
             u_grain_scale: { value: this._grainScale },
             u_grain_speed: { value: this._grainSpeed },
+            // Flow field
+            u_flow_distortion_a: { value: this._flowDistortionA },
+            u_flow_distortion_b: { value: this._flowDistortionB },
+            u_flow_scale: { value: this._flowScale },
+            u_flow_ease: { value: this._flowEase },
+            u_flow_enabled: { value: this._flowEnabled ? 1.0 : 0.0 },
+            // Y offset multipliers
+            u_y_offset: { value: this._yOffset },
+            u_y_offset_wave_multiplier: { value: this._yOffsetWaveMultiplier },
+            u_y_offset_color_multiplier: { value: this._yOffsetColorMultiplier },
+            u_y_offset_flow_multiplier: { value: this._yOffsetFlowMultiplier },
+            // Mouse interaction
+            u_mouse_distortion_strength: { value: this._mouseDistortionStrength },
+            u_mouse_distortion_radius: { value: this._mouseDistortionRadius },
+            u_mouse_darken: { value: this._mouseDarken },
+            u_mouse_texture: { value: this._mouseFBO ? this._mouseFBO.texture : null },
+            // Procedural texture
+            u_procedural_texture: { value: this._proceduralTexture },
+            u_enable_procedural_texture: { value: this._enableProceduralTexture ? 1.0 : 0.0 },
+            u_texture_ease: { value: this._textureEase },
+            u_saturation: { value: this._saturation },
+            u_brightness: { value: this._brightness },
+            u_color_blending: { value: this._colorBlending }
         };
 
         const material = new THREE.ShaderMaterial({
@@ -429,10 +878,306 @@ export class NeatGradient implements NeatController {
             fragmentShader: buildUniforms() + buildColorFunctions() + buildNoise() + buildFragmentShader()
         });
 
+        // Cache the uniforms object for direct access in render loop
+        this._cachedUniforms = uniforms as unknown as NeatUniforms;
+
         material.wireframe = WIREFRAME;
         return material;
     }
 
+    _setupMouseInteraction() {
+        if (!this._ref) return;
+
+        const width = this._ref.width;
+        const height = this._ref.height;
+
+        // Create mouse FBO
+        this._mouseFBO = new THREE.WebGLRenderTarget(width / 2, height / 2);
+
+        // Create mouse scene and camera
+        this._sceneMouse = new THREE.Scene();
+        const fSize = height / 2;
+        const aspect = width / height;
+
+        // FIX 4: Ensure near plane allows viewing objects at Z=0
+        // Near -100 is safer for objects at 0
+        this._cameraMouse = new THREE.OrthographicCamera(
+            -fSize * aspect, fSize * aspect,
+            fSize, -fSize,
+            0, 10000
+        );
+        this._cameraMouse.position.set(0, 0, 100);
+
+        // Create brush texture - More visible and impactful
+        const brushCanvas = document.createElement('canvas');
+        brushCanvas.width = 128;
+        brushCanvas.height = 128;
+        const bCtx = brushCanvas.getContext('2d');
+        if (bCtx) {
+            const grd = bCtx.createRadialGradient(64, 64, 0, 64, 64, 64);
+            // Match reference implementation's stronger gradient
+            grd.addColorStop(0, 'rgba(255,255,255,0.8)');
+            grd.addColorStop(0.5, 'rgba(255,255,255,0.4)');
+            grd.addColorStop(1, 'rgba(255,255,255,0)');
+            bCtx.fillStyle = grd;
+            bCtx.fillRect(0, 0, 128, 128);
+        }
+        const brushTex = new THREE.CanvasTexture(brushCanvas);
+        const brushMat = new THREE.MeshBasicMaterial({
+            map: brushTex,
+            transparent: true,
+            opacity: 1.0,
+            depthTest: false,
+            blending: THREE.AdditiveBlending // Additive blending for better accumulation
+        });
+        // Brush geometry size - will be scaled by radius parameter
+        const brushGeo = new THREE.PlaneGeometry(200, 200);
+
+        // Create brush pool
+        const brushPoolSize = 50;
+        for (let i = 0; i < brushPoolSize; i++) {
+            const m = new THREE.Mesh(brushGeo, brushMat.clone());
+            m.visible = false;
+            this._sceneMouse!.add(m);
+            this._mouseObjects.push({ mesh: m, active: false });
+        }
+
+        // Initialize brush scale based on current radius
+        this._updateBrushScale();
+
+        // Add mouse move listener
+        this._ref.addEventListener('mousemove', this._onMouseMove.bind(this));
+    }
+
+    _onMouseMove(e: MouseEvent) {
+        if (!this._ref || !this._sceneMouse) return;
+
+        const rect = this._ref.getBoundingClientRect();
+        const width = this._ref.width;
+        const height = this._ref.height;
+
+        // 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;
+            });
+        }
+    }
+
+    _createProceduralTexture(): THREE.Texture {
+        // Texture size - 1024 provides good balance between quality and performance
+        // 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', { willReadFrequently: true });
+        if (!sCtx) return new THREE.Texture();
+
+        let seed = this._textureSeed;
+        const baseSeed = this._textureSeed;
+
+        function random() {
+            const x = Math.sin(seed++) * 10000;
+            return x - Math.floor(x);
+        }
+
+        // Helper to reset seed for isolated shape generation
+        const setSeed = (offset: number) => {
+            seed = baseSeed + offset;
+        };
+
+        const colors = this._colors.filter(c => c.enabled).map(c => c.color);
+        if (colors.length === 0) return new THREE.Texture();
+
+        // Helper functions
+        function hexToRgb(hex: string) {
+            const bigint = parseInt(hex.replace('#', ''), 16);
+            return {
+                r: (bigint >> 16) & 255,
+                g: (bigint >> 8) & 255,
+                b: bigint & 255
+            };
+        }
+
+        function rgbToHex(r: number, g: number, b: number) {
+            return "#" + ((1 << 24) + (Math.round(r) << 16) + (Math.round(g) << 8) + Math.round(b)).toString(16).slice(1);
+        }
+
+        const getInterColor = () => {
+            const c1 = colors[Math.floor(random() * colors.length)];
+            const c2 = colors[Math.floor(random() * colors.length)];
+            const mix = random() * this._textureColorBlending;
+            const rgb1 = hexToRgb(c1);
+            const rgb2 = hexToRgb(c2);
+            const r = rgb1.r + (rgb2.r - rgb1.r) * mix;
+            const g = rgb1.g + (rgb2.g - rgb1.g) * mix;
+            const b = rgb1.b + (rgb2.b - rgb1.b) * mix;
+            return rgbToHex(r, g, b);
+        };
+
+        // === SOURCE CANVAS ===
+        // Base with procedural background color so even sparse areas pick it up
+        const baseColor = this._proceduralBackgroundColor || "#000000";
+        sCtx.fillStyle = baseColor;
+        sCtx.fillRect(0, 0, texSize, texSize);
+
+        // Then lay a vertical gradient of mixed colors on top for richness
+        const bgGrad = sCtx.createLinearGradient(0, 0, 0, texSize);
+        bgGrad.addColorStop(0, getInterColor());
+        bgGrad.addColorStop(1, getInterColor());
+        sCtx.fillStyle = bgGrad;
+        sCtx.fillRect(0, 0, texSize, texSize);
+
+        // Triangles: use configurable count
+        for (let i = 0; i < this._textureShapeTriangles; i++) {
+            sCtx.fillStyle = getInterColor();
+            sCtx.beginPath();
+            const x = random() * texSize;
+            const y = random() * texSize;
+            const s = 100 + random() * 300;
+            sCtx.moveTo(x, y);
+            sCtx.lineTo(x + (random() - 0.5) * s, y + (random() - 0.5) * s);
+            sCtx.lineTo(x + (random() - 0.5) * s, y + (random() - 0.5) * s);
+            sCtx.fill();
+        }
+
+        // Circles / rings: use configurable count
+        for (let i = 0; i < this._textureShapeCircles; i++) {
+            sCtx.strokeStyle = getInterColor();
+            sCtx.lineWidth = 10 + random() * 50;
+            sCtx.beginPath();
+            const x = random() * texSize;
+            const y = random() * texSize;
+            const r = 50 + random() * 150;
+            sCtx.arc(x, y, r, 0, Math.PI * 2);
+            sCtx.stroke();
+        }
+
+        // Bars: use configurable count
+        for (let i = 0; i < this._textureShapeBars; i++) {
+            sCtx.fillStyle = getInterColor();
+            sCtx.save();
+            sCtx.translate(random() * texSize, random() * texSize);
+            sCtx.rotate(random() * Math.PI);
+            sCtx.fillRect(-150, -25, 300, 50);
+            sCtx.restore();
+        }
+
+        // Squiggles: use configurable count
+        sCtx.lineWidth = 15;
+        sCtx.lineCap = 'round';
+        for (let i = 0; i < this._textureShapeSquiggles; i++) {
+            sCtx.strokeStyle = getInterColor();
+            sCtx.beginPath();
+            let x = random() * texSize;
+            let y = random() * texSize;
+            sCtx.moveTo(x, y);
+            for (let j = 0; j < 4; j++) {
+                sCtx.bezierCurveTo(
+                    x + (random() - 0.5) * 300, y + (random() - 0.5) * 300,
+                    x + (random() - 0.5) * 300, y + (random() - 0.5) * 300,
+                    x + (random() - 0.5) * 300, y + (random() - 0.5) * 300
+                );
+                x += (random() - 0.5) * 300;
+                y += (random() - 0.5) * 300;
+            }
+            sCtx.stroke();
+        }
+
+        // === MASKED CANVAS ===
+        // Masking: Seed isolation
+        setSeed(50000);
+        const canvas = document.createElement('canvas');
+        canvas.width = texSize;
+        canvas.height = texSize;
+        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
+        ctx.fillStyle = baseColor;
+        ctx.fillRect(0, 0, texSize, texSize);
+
+        // Determine layout segments (matter vs void)
+        let layoutHead = 0;
+        const segments: Array<{ type: 'void' | 'matter', x: number, width: number }> = [];
+
+        while (layoutHead < texSize) {
+            const isVoid = random() < this._textureVoidLikelihood;
+            if (isVoid) {
+                const w = this._textureVoidWidthMin + random() * (this._textureVoidWidthMax - this._textureVoidWidthMin);
+                segments.push({ type: 'void', x: layoutHead, width: w });
+                layoutHead += w;
+            } else {
+                const w = 50 + random() * 200;
+                segments.push({ type: 'matter', x: layoutHead, width: w });
+                layoutHead += w;
+            }
+        }
+
+        // Render only matter bands from the source into the masked canvas
+        for (const seg of segments) {
+            if (seg.type === 'matter') {
+                const startX = seg.x;
+                const endX = Math.min(seg.x + seg.width, texSize);
+                let currentX = startX;
+
+                while (currentX < endX) {
+                    const stripeWidth = (2 + random() * 20) / this._textureBandDensity;
+                    const sourceX = Math.floor(random() * texSize);
+                    ctx.drawImage(
+                        sourceCanvas,
+                        sourceX, 0, stripeWidth, texSize,
+                        currentX, 0, stripeWidth, texSize
+                    );
+                    currentX += stripeWidth;
+                }
+            }
+            // void segments: leave as baseColor
+        }
+
+        const tex = new THREE.CanvasTexture(canvas);
+        // Use mipmapping for better quality when texture is scaled
+        tex.minFilter = THREE.LinearMipmapLinearFilter;
+        tex.magFilter = THREE.LinearFilter;
+        tex.wrapS = THREE.RepeatWrapping;
+        tex.wrapT = THREE.RepeatWrapping;
+
+        // Enable anisotropic filtering for much better quality when texture is stretched
+        // 16 is a commonly supported value that dramatically improves quality
+        tex.anisotropy = 16;
+
+        // Ensure mipmaps are generated
+        tex.needsUpdate = true;
+
+        return tex;
+    }
+
 
 }
 
@@ -449,11 +1194,26 @@ function updateCamera(camera: THREE.Camera, width: number, height: number) {
     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;
@@ -473,43 +1233,69 @@ function updateCamera(camera: THREE.Camera, width: number, height: number) {
 }
 
 
-function buildVertexShader() {
-    return `
+// Cache shader strings to avoid repeated concatenation
+let cachedVertexShader: string | null = null;
+let cachedFragmentShader: string | null = null;
 
+function buildVertexShader() {
+    if (cachedVertexShader) return cachedVertexShader;
+    cachedVertexShader = `
 void main() {
-
     vUv = uv;
 
+    // SCROLLING LOGIC
+    // Separate multipliers for wave, color, and flow offsets
+    float waveOffset = -u_y_offset * u_y_offset_wave_multiplier;
+    float colorOffset = -u_y_offset * u_y_offset_color_multiplier;
+    float flowOffset = -u_y_offset * u_y_offset_flow_multiplier;
+
+    // 1. DISPLACEMENT (WAVES)
+    // We add waveOffset to Y to scroll the wave pattern
     v_displacement_amount = cnoise( vec3(
         u_wave_frequency_x * position.x + u_time,
-        u_wave_frequency_y * position.y + u_time,
+        u_wave_frequency_y * (position.y + waveOffset) + u_time,
         u_time
     ));
 
-    vec3 color;
+    // 2. FLOW FIELD
+    // Apply flow offset to scroll the flow field mask
+    vec2 baseUv = vUv;
+    baseUv.y += flowOffset / u_plane_height; // Scale to match wave speed
+    vec2 flowUv = baseUv;
+
+    if (u_flow_enabled > 0.5) {
+        if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
+            vec2 ppp = -1.0 + 2.0 * baseUv;
+            ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
+            ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
+            ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
+            ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
+
+            float r = length(ppp);
+            flowUv = mix(baseUv, vec2(baseUv.x * (1.0 - u_flow_ease) + r * u_flow_ease, baseUv.y), u_flow_ease);
+        }
+    }
 
-    // float t = mod(u_base_color, 100.0);
-    color = u_colors[0].color;
+    // Pass the standard flow UV to fragment shader (for mouse/texture)
+    vFlowUv = flowUv;
 
-    // Apply y_offset to the noise coordinates
-    vec2 noise_cord = vUv * u_color_pressure;
-    // Apply the y-offset to shift the pattern vertically (1:1 pixel ratio)
-    // Scale the offset to match the UV coordinate space
-    float scaledOffset = u_y_offset / u_resolution.y;
-    noise_cord.y -= scaledOffset;
+    // 3. COLOR MIXING
+    // We take the computed flow UVs and apply the color offset
+    // Scale by plane height to match wave offset speed (world space vs UV space)
+    vec3 color = u_colors[0].color;
+    vec2 adjustedUv = flowUv;
+    adjustedUv.y += colorOffset / u_plane_height; // Scroll the color mixing pattern
 
+    vec2 noise_cord = adjustedUv * u_color_pressure;
     const float minNoise = .0;
     const float maxNoise = .9;
 
     for (int i = 1; i < u_colors_count; i++) {
-
-        if(u_colors[i].is_active == 1.0){
+        if(u_colors[i].is_active > 0.5){
             float noiseFlow = (1. + float(i)) / 30.;
             float noiseSpeed = (1. + float(i)) * 0.11;
             float noiseSeed = 13. + float(i) * 7.;
 
-            int reverseIndex = u_colors_count - i;
-
             float noise = snoise(
                 vec3(
                     noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
@@ -519,23 +1305,24 @@ void main() {
             ) - (.1 * float(i)) + (.5 * u_color_blending);
 
             noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
-            vec3 nextColor = u_colors[i].color;
-            color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
+            color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
         }
     }
 
     v_color = color;
 
+    // 4. VERTEX POSITION
     vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
-
     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);
 }
@@ -553,35 +1340,80 @@ float fbm(vec3 x) {
 }
 
 void main() {
-    vec3 color = v_color;
+    // MOUSE DISTORTION
+    vec2 finalUv = vFlowUv;
+    
+    if (u_mouse_distortion_strength > 0.0) {
+        vec4 mouseColor = texture2D(u_mouse_texture, vUv);
+        float mouseValue = mouseColor.r;
+        
+        if (mouseValue > 0.001) {
+            float distortionAmount = mouseValue * u_mouse_distortion_strength;
+            vec2 mouseDisp = vec2(distortionAmount, distortionAmount);
+            finalUv -= mouseDisp;
+        }
+    }
+    
+    vec3 baseColor;
+
+    if (u_enable_procedural_texture > 0.5) {
+        // Calculate flow field distance for ease effect
+        vec2 ppp = -1.0 + 2.0 * finalUv;
+        ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
+        ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
+        ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
+        ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
+        float r = length(ppp); // Flow distance
+        
+        // Ease blending: 0 = topographic (flow), 1 = image (UV)
+        float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
+        float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
+        vec2 texUv = vec2(vx, vy);
+
+        // PARALLAX SCROLLING
+        // We manually apply a smaller offset here to make the texture lag behind
+        float parallaxFactor = 0.25; // 25% speed of the color mixing
+        texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
+
+        texUv *= 1.5; // Tiling scale
+
+        vec4 texSample = texture2D(u_procedural_texture, texUv);
+        baseColor = texSample.rgb;
+    } else {
+        baseColor = v_color;
+    }
+
+    vec3 color = baseColor;
+
+    // Post-processing
     color += pow(v_displacement_amount, 1.0) * u_highlights;
     color -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
     color = saturation(color, 1.0 + u_saturation);
     color = color * u_brightness;
 
-    // Generate grain using fbm
+    // Grain
     vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
     float grain = (u_grain_speed != 0.0) ? fbm(vec3(noiseCoords, u_time * u_grain_speed)) : fbm(vec3(noiseCoords, 0.0));
 
-    // Center the grain around zero
     grain = grain * 0.5 + 0.5;
     grain -= 0.5;
-
-    // Add sparsity control
     grain = (grain > u_grain_sparsity) ? grain : 0.0;
-
-    // Apply grain intensity
     grain *= u_grain_intensity;
 
-    // Add grain to color
     color += vec3(grain);
 
     gl_FragColor = vec4(color, 1.0);
 }
     `;
+    return cachedFragmentShader;
 }
 
-const buildUniforms = () => `
+// Cache uniforms string as well
+let cachedUniformsShader: string | null = null;
+
+const buildUniforms = () => {
+    if (cachedUniformsShader) return cachedUniformsShader;
+    cachedUniformsShader = `
 precision highp float;
 
 struct Color {
@@ -613,83 +1445,98 @@ uniform float u_brightness;
 uniform float u_color_blending;
 
 uniform int u_colors_count;
-uniform Color u_colors[5];
+uniform Color u_colors[6];
 uniform vec2 u_resolution;
 
 uniform float u_y_offset;
+uniform float u_y_offset_wave_multiplier;
+uniform float u_y_offset_color_multiplier;
+uniform float u_y_offset_flow_multiplier;
+
+// Flow field uniforms
+uniform float u_flow_distortion_a;
+uniform float u_flow_distortion_b;
+uniform float u_flow_scale;
+uniform float u_flow_ease;
+uniform float u_flow_enabled;
+
+// Mouse interaction uniforms
+uniform float u_mouse_distortion_strength;
+uniform float u_mouse_distortion_radius;
+uniform float u_mouse_darken;
+uniform sampler2D u_mouse_texture;
+
+// Procedural texture uniforms
+uniform sampler2D u_procedural_texture;
+uniform float u_enable_procedural_texture;
+uniform float u_texture_ease;
 
 varying vec2 vUv;
+varying vec2 vFlowUv;
 varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
 
     `;
+    return cachedUniformsShader;
+};
 
-const buildNoise = () => `
+// Cache noise functions as well
+let cachedNoiseShader: string | null = null;
 
-vec3 mod289(vec3 x)
-{
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
+const buildNoise = () => {
+    if (cachedNoiseShader) return cachedNoiseShader;
+    cachedNoiseShader = `
 
-vec4 mod289(vec4 x)
-{
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
+// 1. REPLACEMENT PERMUTE: 
+// Uses a hash function (fract/sin) instead of a modular lookup table.
+vec4 permute(vec4 x) {
+    return floor(fract(sin(x) * 43758.5453123) * 289.0);
 }
 
-vec4 permute(vec4 x)
-{
-  return mod289(((x*34.0)+1.0)*x);
-}
-
-vec4 taylorInvSqrt(vec4 r)
-{
+// Taylor Inverse Sqrt
+vec4 taylorInvSqrt(vec4 r) {
   return 1.79284291400159 - 0.85373472095314 * r;
 }
 
+// Fade function
 vec3 fade(vec3 t) {
   return t*t*t*(t*(t*6.0-15.0)+10.0);
 }
 
-float snoise(vec3 v)
-{
+// 3D Simplex Noise
+float snoise(vec3 v) {
   const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
   const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
 
-// First corner
+  // First corner
   vec3 i  = floor(v + dot(v, C.yyy) );
   vec3 x0 =   v - i + dot(i, C.xxx) ;
 
-// Other corners
+  // Other corners
   vec3 g = step(x0.yzx, x0.xyz);
   vec3 l = 1.0 - g;
   vec3 i1 = min( g.xyz, l.zxy );
   vec3 i2 = max( g.xyz, l.zxy );
 
-  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
-  //   x1 = x0 - i1  + 1.0 * C.xxx;
-  //   x2 = x0 - i2  + 2.0 * C.xxx;
-  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
   vec3 x1 = x0 - i1 + C.xxx;
-  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
-  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
 
-// Permutations
-  i = mod289(i);
+  // Permutations
   vec4 p = permute( permute( permute(
             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
 
-// Gradients: 7x7 points over a square, mapped onto an octahedron.
-// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  // Gradients
   float n_ = 0.142857142857; // 1.0/7.0
   vec3  ns = n_ * D.wyz - D.xzx;
 
-  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
 
   vec4 x_ = floor(j * ns.z);
-  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+  vec4 y_ = floor(j - 7.0 * x_ );
 
   vec4 x = x_ *ns.x + ns.yyyy;
   vec4 y = y_ *ns.x + ns.yyyy;
@@ -698,8 +1545,6 @@ float snoise(vec3 v)
   vec4 b0 = vec4( x.xy, y.xy );
   vec4 b1 = vec4( x.zw, y.zw );
 
-  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
-  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
   vec4 s0 = floor(b0)*2.0 + 1.0;
   vec4 s1 = floor(b1)*2.0 + 1.0;
   vec4 sh = -step(h, vec4(0.0));
@@ -712,14 +1557,14 @@ float snoise(vec3 v)
   vec3 p2 = vec3(a1.xy,h.z);
   vec3 p3 = vec3(a1.zw,h.w);
 
-//Normalise gradients
+  // Normalise gradients
   vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
   p0 *= norm.x;
   p1 *= norm.y;
   p2 *= norm.z;
   p3 *= norm.w;
 
-// Mix final noise value
+  // Mix final noise value
   vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
   m = m * m;
   return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
@@ -729,12 +1574,11 @@ float snoise(vec3 v)
 // Classic Perlin noise
 float cnoise(vec3 P)
 {
-  vec3 Pi0 = floor(P); // Integer part for indexing
-  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
-  Pi0 = mod289(Pi0);
-  Pi1 = mod289(Pi1);
-  vec3 Pf0 = fract(P); // Fractional part for interpolation
-  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+  vec3 Pi0 = floor(P); 
+  vec3 Pi1 = Pi0 + vec3(1.0); 
+  
+  vec3 Pf0 = fract(P); 
+  vec3 Pf1 = Pf0 - vec3(1.0); 
   vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
   vec4 iy = vec4(Pi0.yy, Pi1.yy);
   vec4 iz0 = Pi0.zzzz;
@@ -795,49 +1639,16 @@ float cnoise(vec3 P)
   float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
   return 2.2 * n_xyz;
 }
+`;
+    return cachedNoiseShader;
+};
 
-// YUV to RGB matrix
-mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
-                    1.0, -0.39465, -0.58060,
-                    1.0, 2.03211, 0.0);
-
-// RGB to YUV matrix
-mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
-                    -0.09991, -0.33609, 0.43600,
-                    0.615, -0.5586, -0.05639);
-                    
-vec3 oklab2rgb(vec3 linear)
-{
-    const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,
-                          0.5362752080, 0.6807189584, 0.2818474174,
-                          0.0514575653, 0.1074065790, 0.6302613616);
-                       
-    const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,
-                          +0.7936177850, -2.4285922050, +0.7827717662,
-                          -0.0040720468, +0.4505937099, -0.8086757660);
-                       
-    vec3 lms = im1 * linear;
-            
-    return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));
-}
-
-vec3 rgb2oklab(vec3 oklab)
-{
-    const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,
-                         +0.396337777, -0.105561346, -0.089484178,
-                         +0.215803757, -0.063854173, -1.291485548);
-                       
-    const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,
-                         -3.307216883, +2.609332323, -0.703476310,
-                         +0.230759054, -0.341134429, +1.706862569);
-    vec3 lms = m1 * oklab;
-    
-    return m2 * (lms * lms * lms);
-}
-
-    `;
+// Cache color functions as well
+let cachedColorFunctionsShader: string | null = null;
 
-const buildColorFunctions = () => `
+const buildColorFunctions = () => {
+    if (cachedColorFunctionsShader) return cachedColorFunctionsShader;
+    cachedColorFunctionsShader = `
 
 vec3 saturation(vec3 rgb, float adjustment) {
     const vec3 W = vec3(0.2125, 0.7154, 0.0721);
@@ -881,7 +1692,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: HTMLAnchorElement) => {
     link.id = LINK_ID;
@@ -902,19 +1714,20 @@ const setLinkStyles = (link: HTMLAnchorElement) => {
     link.innerHTML = "NEAT";
 }
 
-const addNeatLink = (ref: HTMLCanvasElement) => {
+const addNeatLink = (ref: HTMLCanvasElement): HTMLAnchorElement => {
     const existingLinks = ref.parentElement?.getElementsByTagName("a");
     if (existingLinks) {
         for (let i = 0; i < existingLinks.length; i++) {
             if (existingLinks[i].id === LINK_ID) {
                 setLinkStyles(existingLinks[i]);
-                return;
+                return existingLinks[i];
             }
         }
     }
     const link = document.createElement("a");
     setLinkStyles(link);
     ref.parentElement?.appendChild(link);
+    return link;
 }
 
 function getElapsedSecondsInLastHour() {