@firecms/neat 0.8.0 → 0.9.1

package/dist/NeatGradient.js

@@ -1,5 +1,5 @@
 import { buildColorFunctions, buildNoise, buildVertUniforms, buildFragUniforms, fragmentShaderSource, vertexShaderSource } from "./shaders";
-import { generatePlaneGeometry, OrthographicCamera, updateCamera, Matrix4 } from "./math";
+import { generatePlaneGeometry, generateSphereGeometry, generateTorusGeometry, generateCylinderGeometry, generateRibbonGeometry, OrthographicCamera, updateCamera, Matrix4 } from "./math";
 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;
@@ -22,6 +22,7 @@ export class NeatGradient {
     _grainSparsity = -1;
     _grainSpeed = -1;
     _colorBlending = -1;
+    _resolution = 1;
     _colors = [];
     _wireframe = false;
     _backgroundColor = "#FFFFFF";
@@ -43,6 +44,7 @@ export class NeatGradient {
     _textureColorBlending = 0.01;
     _textureSeed = 333;
     _textureEase = 0.5;
+    _transparentTextureVoid = false;
     // New effects
     _domainWarpEnabled = false;
     _domainWarpIntensity = 0.5;
@@ -60,6 +62,33 @@ export class NeatGradient {
     _bloomIntensity = 0;
     _bloomThreshold = 0.7;
     _chromaticAberration = 0;
+    _silhouetteFade = 0.25;
+    _cylinderFade = 0.08;
+    _ribbonFade = 0.05;
+    _flatShading = true;
+    // 3D Shapes config
+    _shapeType = 'plane';
+    _shapeRotationX = 0;
+    _shapeRotationY = 0;
+    _shapeRotationZ = 0;
+    _shapeAutoRotateSpeedX = 0;
+    _shapeAutoRotateSpeedY = 0;
+    _sphereRadius = 15;
+    _torusRadius = 15;
+    _torusTube = 5;
+    _cylinderRadius = 10;
+    _cylinderHeight = 40;
+    _planeBend = 0;
+    _planeTwist = 0;
+    // Camera settings
+    _cameraLock = false;
+    _cameraX = 0;
+    _cameraY = 0;
+    _cameraZ = 0;
+    _cameraRotationX = 0;
+    _cameraRotationY = 0;
+    _cameraRotationZ = 0;
+    _cameraZoom = 1.0;
     _proceduralTexture = null;
     _proceduralBackgroundColor = "#000000";
     _textureShapeTriangles = 20;
@@ -75,6 +104,11 @@ export class NeatGradient {
     _yOffsetWaveMultiplier = 0.004;
     _yOffsetColorMultiplier = 0.004;
     _yOffsetFlowMultiplier = 0.004;
+    // Cached offscreen canvases for procedural texture generation
+    _sourceCanvas = null;
+    _sourceCtx = null;
+    _maskedCanvas = null;
+    _maskedCtx = null;
     // Performance optimizations
     _resizeTimeoutId = null;
     _textureNeedsUpdate = false;
@@ -82,12 +116,21 @@ export class NeatGradient {
     _colorsChanged = true;
     _uniformsDirty = true;
     _textureDirty = true;
+    _yOffsetDirty = false;
+    _modelViewMatrix = new Matrix4();
+    _isVisible = true;
+    _visibilityObserver = null;
+    _visibilityHandler = null;
     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
         flowDistortionA = 0, flowDistortionB = 0, flowScale = 1.0, flowEase = 0.0, flowEnabled = true, 
         // 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, domainWarpEnabled = false, domainWarpIntensity = 0.5, domainWarpScale = 1.0, vignetteIntensity = 0.5, vignetteRadius = 0.8, fresnelEnabled = false, fresnelPower = 2.0, fresnelIntensity = 0.5, fresnelColor = "#FFFFFF", iridescenceEnabled = false, iridescenceIntensity = 0.5, iridescenceSpeed = 1.0, bloomIntensity = 0.0, bloomThreshold = 0.7, chromaticAberration = 0.0, } = config;
+        enableProceduralTexture = false, textureVoidLikelihood = 0.45, textureVoidWidthMin = 200, textureVoidWidthMax = 486, textureBandDensity = 2.15, textureColorBlending = 0.01, textureSeed = 333, textureEase = 0.5, proceduralBackgroundColor = "#000000", transparentTextureVoid = false, textureShapeTriangles = 20, textureShapeCircles = 15, textureShapeBars = 15, textureShapeSquiggles = 10, domainWarpEnabled = false, domainWarpIntensity = 0.5, domainWarpScale = 1.0, vignetteIntensity = 0.0, vignetteRadius = 0.8, fresnelEnabled = false, fresnelPower = 2.0, fresnelIntensity = 0.5, fresnelColor = "#FFFFFF", iridescenceEnabled = false, iridescenceIntensity = 0.5, iridescenceSpeed = 1.0, bloomIntensity = 0.0, bloomThreshold = 0.7, chromaticAberration = 0.0, silhouetteFade = 0.25, cylinderFade = 0.08, ribbonFade = 0.05, flatShading = true, 
+        // Camera configuration
+        cameraLock = false, cameraX = 0, cameraY = 0, cameraZ = 0, cameraRotationX = 0, cameraRotationY = 0, cameraRotationZ = 0, cameraZoom = 1.0, 
+        // 3D shapes default
+        shapeType = 'plane', shapeRotationX = 0, shapeRotationY = 0, shapeRotationZ = 0, shapeAutoRotateSpeedX = 0, shapeAutoRotateSpeedY = 0, sphereRadius = 15, torusRadius = 15, torusTube = 5, cylinderRadius = 10, cylinderHeight = 40, planeBend = 0, planeTwist = 0, } = config;
         this._ref = ref;
         this.destroy = this.destroy.bind(this);
         this._initScene = this._initScene.bind(this);
@@ -98,6 +141,7 @@ export class NeatGradient {
         this.waveFrequencyY = waveFrequencyY;
         this.waveAmplitude = waveAmplitude;
         this.colorBlending = colorBlending;
+        this._resolution = resolution;
         this.grainScale = grainScale;
         this.grainIntensity = grainIntensity;
         this.grainSparsity = grainSparsity;
@@ -130,6 +174,7 @@ export class NeatGradient {
         this.textureSeed = textureSeed;
         this.textureEase = textureEase;
         this._proceduralBackgroundColor = proceduralBackgroundColor;
+        this.transparentTextureVoid = transparentTextureVoid;
         this._textureShapeTriangles = textureShapeTriangles;
         this._textureShapeCircles = textureShapeCircles;
         this._textureShapeBars = textureShapeBars;
@@ -149,6 +194,31 @@ export class NeatGradient {
         this.bloomIntensity = bloomIntensity;
         this.bloomThreshold = bloomThreshold;
         this.chromaticAberration = chromaticAberration;
+        this.silhouetteFade = silhouetteFade;
+        this.cylinderFade = cylinderFade;
+        this.ribbonFade = ribbonFade;
+        this._flatShading = flatShading;
+        this._cameraLock = cameraLock;
+        this._cameraX = cameraX;
+        this._cameraY = cameraY;
+        this._cameraZ = cameraZ;
+        this._cameraRotationX = cameraRotationX;
+        this._cameraRotationY = cameraRotationY;
+        this._cameraRotationZ = cameraRotationZ;
+        this._cameraZoom = cameraZoom;
+        this._shapeType = shapeType;
+        this._shapeRotationX = shapeRotationX;
+        this._shapeRotationY = shapeRotationY;
+        this._shapeRotationZ = shapeRotationZ;
+        this._shapeAutoRotateSpeedX = shapeAutoRotateSpeedX;
+        this._shapeAutoRotateSpeedY = shapeAutoRotateSpeedY;
+        this._sphereRadius = sphereRadius;
+        this._torusRadius = torusRadius;
+        this._torusTube = torusTube;
+        this._cylinderRadius = cylinderRadius;
+        this._cylinderHeight = cylinderHeight;
+        this._planeBend = planeBend;
+        this._planeTwist = planeTwist;
         this.glState = this._initScene(resolution);
         injectSEO();
         let tick = seed !== undefined ? seed : getElapsedSecondsInLastHour();
@@ -169,6 +239,42 @@ export class NeatGradient {
                 lastTime = timeNow;
                 gl.useProgram(program);
                 gl.uniform1f(locations.uniforms['u_time'], tick);
+                // Update modelViewMatrix in every frame to support dynamic rotation and auto-rotation
+                const camera = this.glState.camera;
+                const modelViewMatrix = this._modelViewMatrix;
+                modelViewMatrix.identity();
+                // 1. Camera translation (default camera distance + displacement)
+                modelViewMatrix.translate(-camera.position[0] - this._cameraX, -camera.position[1] - this._cameraY, -camera.position[2] - this._cameraZ);
+                modelViewMatrix.translate(0, 0, -1);
+                // 2. Camera rotation (revolving around target)
+                modelViewMatrix.rotateX(-this._cameraRotationX);
+                modelViewMatrix.rotateY(-this._cameraRotationY);
+                modelViewMatrix.rotateZ(-this._cameraRotationZ);
+                let rx = this._shapeRotationX;
+                let ry = this._shapeRotationY;
+                let rz = this._shapeRotationZ;
+                if (this._shapeAutoRotateSpeedX !== 0) {
+                    rx += tick * this._shapeAutoRotateSpeedX * 0.1;
+                }
+                if (this._shapeAutoRotateSpeedY !== 0) {
+                    ry += tick * this._shapeAutoRotateSpeedY * 0.1;
+                }
+                if (this._shapeType === 'plane' || this._shapeType === 'ribbon') {
+                    modelViewMatrix.rotateX(rx - Math.PI / 3.5);
+                }
+                else {
+                    modelViewMatrix.rotateX(rx);
+                }
+                modelViewMatrix.rotateY(ry);
+                modelViewMatrix.rotateZ(rz);
+                const mvLoc = locations.uniforms["modelViewMatrix"];
+                if (mvLoc)
+                    gl.uniformMatrix4fv(mvLoc, false, modelViewMatrix.elements);
+                // Fast path: only upload yOffset when it changed (scroll)
+                if (this._yOffsetDirty && !this._uniformsDirty) {
+                    gl.uniform1f(locations.uniforms['u_y_offset'], this._yOffset);
+                    this._yOffsetDirty = false;
+                }
                 // Only upload static uniforms when they've been modified
                 if (this._uniformsDirty) {
                     gl.uniform2f(locations.uniforms['u_resolution'], this._ref.clientWidth, this._ref.clientHeight);
@@ -194,8 +300,19 @@ export class NeatGradient {
                     gl.uniform1f(locations.uniforms['u_flow_scale'], this._flowScale);
                     gl.uniform1f(locations.uniforms['u_flow_ease'], this._flowEase);
                     gl.uniform1f(locations.uniforms['u_flow_enabled'], this._flowEnabled ? 1.0 : 0.0);
+                    let shapeTypeVal = 0.0;
+                    if (this._shapeType === 'sphere')
+                        shapeTypeVal = 1.0;
+                    else if (this._shapeType === 'torus')
+                        shapeTypeVal = 2.0;
+                    else if (this._shapeType === 'cylinder')
+                        shapeTypeVal = 3.0;
+                    else if (this._shapeType === 'ribbon')
+                        shapeTypeVal = 4.0;
+                    gl.uniform1f(locations.uniforms['u_shape_type'], shapeTypeVal);
                     gl.uniform1f(locations.uniforms['u_enable_procedural_texture'], this._enableProceduralTexture ? 1.0 : 0.0);
                     gl.uniform1f(locations.uniforms['u_texture_ease'], this._textureEase);
+                    gl.uniform1f(locations.uniforms['u_transparent_texture_void'], this._transparentTextureVoid ? 1.0 : 0.0);
                     gl.uniform1f(locations.uniforms['u_domain_warp_enabled'], this._domainWarpEnabled ? 1.0 : 0.0);
                     gl.uniform1f(locations.uniforms['u_domain_warp_intensity'], this._domainWarpIntensity);
                     gl.uniform1f(locations.uniforms['u_domain_warp_scale'], this._domainWarpScale);
@@ -211,7 +328,12 @@ export class NeatGradient {
                     gl.uniform1f(locations.uniforms['u_bloom_intensity'], this._bloomIntensity);
                     gl.uniform1f(locations.uniforms['u_bloom_threshold'], this._bloomThreshold);
                     gl.uniform1f(locations.uniforms['u_chromatic_aberration'], this._chromaticAberration);
+                    gl.uniform1f(locations.uniforms['u_silhouette_fade'], this._silhouetteFade);
+                    gl.uniform1f(locations.uniforms['u_cylinder_fade'], this._cylinderFade);
+                    gl.uniform1f(locations.uniforms['u_ribbon_fade'], this._ribbonFade);
+                    gl.uniform1f(locations.uniforms['u_flat_shading'], this._flatShading ? 1.0 : 0.0);
                     this._uniformsDirty = false;
+                    this._yOffsetDirty = false;
                 }
                 // Only regenerate procedural texture when needed
                 if (this._textureNeedsUpdate && this._enableProceduralTexture) {
@@ -258,8 +380,34 @@ export class NeatGradient {
             else {
                 gl.drawElements(gl.TRIANGLES, indexCount, indexType, 0);
             }
-            this.requestRef = requestAnimationFrame(render);
+            if (this._isVisible) {
+                this.requestRef = requestAnimationFrame(render);
+            }
+        };
+        // Visibility optimization: pause rendering when off-screen or tab hidden
+        this._visibilityObserver = new IntersectionObserver((entries) => {
+            const wasVisible = this._isVisible;
+            this._isVisible = entries[0].isIntersecting && document.visibilityState !== 'hidden';
+            if (this._isVisible && !wasVisible) {
+                lastTime = performance.now(); // Avoid time jump after resume
+                this.requestRef = requestAnimationFrame(render);
+            }
+        }, { threshold: 0 });
+        this._visibilityObserver.observe(ref);
+        this._visibilityHandler = () => {
+            const wasVisible = this._isVisible;
+            if (document.visibilityState === 'hidden') {
+                this._isVisible = false;
+            }
+            else {
+                this._isVisible = true;
+                if (!wasVisible) {
+                    lastTime = performance.now();
+                    this.requestRef = requestAnimationFrame(render);
+                }
+            }
         };
+        document.addEventListener('visibilitychange', this._visibilityHandler);
         const setSize = () => {
             const { gl, camera } = this.glState;
             const width = this._ref.clientWidth;
@@ -268,11 +416,12 @@ export class NeatGradient {
             this._ref.width = width;
             this._ref.height = height;
             gl.viewport(0, 0, width, height);
-            updateCamera(camera, width, height);
+            updateCamera(camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
             // Recompute projection matrix on resize
-            const projLoc = gl.getUniformLocation(this.glState.program, "projectionMatrix");
+            const projLoc = this.glState.locations.uniforms["projectionMatrix"];
             gl.useProgram(this.glState.program);
-            gl.uniformMatrix4fv(projLoc, false, camera.projectionMatrix.elements);
+            if (projLoc)
+                gl.uniformMatrix4fv(projLoc, false, camera.projectionMatrix.elements);
         };
         // Debounce resize to prevent excessive operations
         this.sizeObserver = new ResizeObserver(() => {
@@ -290,6 +439,15 @@ export class NeatGradient {
     destroy() {
         cancelAnimationFrame(this.requestRef);
         this.sizeObserver.disconnect();
+        // Cleanup visibility observers
+        if (this._visibilityObserver) {
+            this._visibilityObserver.disconnect();
+            this._visibilityObserver = null;
+        }
+        if (this._visibilityHandler) {
+            document.removeEventListener('visibilitychange', this._visibilityHandler);
+            this._visibilityHandler = null;
+        }
         // Clear resize timeout
         if (this._resizeTimeoutId !== null) {
             clearTimeout(this._resizeTimeoutId);
@@ -318,101 +476,297 @@ export class NeatGradient {
         const dataURL = this._ref.toDataURL("image/png");
         downloadURI(dataURL, filename);
     }
+    /**
+     * Records the canvas animation as a video with a NEAT watermark overlay.
+     * @param options.durationMs  Recording duration in milliseconds (default 5000).
+     * @param options.filename    Output file name (default "neat.firecms.co").
+     * @param options.width       Output video width in pixels (default: current canvas width).
+     * @param options.height      Output video height in pixels (default: current canvas height).
+     * @param options.format      Preferred format: 'mp4' or 'webm' (default: best available).
+     * @param options.onProgress  Callback with progress 0-1.
+     * @param options.onComplete  Callback when recording finishes.
+     * @returns A stop function to end recording early.
+     */
+    recordVideo(options = {}) {
+        const { durationMs = 5000, filename = "neat.firecms.co", format, onProgress, onComplete, } = options;
+        const source = this._ref;
+        const width = options.width || source.width || source.clientWidth;
+        const height = options.height || source.height || source.clientHeight;
+        // Offscreen canvas that composites gradient + watermark each frame
+        const offscreen = document.createElement("canvas");
+        offscreen.width = width;
+        offscreen.height = height;
+        const ctx = offscreen.getContext("2d");
+        // Use captureStream(0) — only captures a frame when we explicitly
+        // call requestFrame() on the video track, so every composited frame
+        // is guaranteed to be captured.
+        const stream = offscreen.captureStream(0);
+        const videoTrack = stream.getVideoTracks()[0];
+        // Codec candidates ordered by preference
+        const mp4Candidates = [
+            "video/mp4;codecs=avc1",
+            "video/mp4;codecs=avc1,opus",
+            "video/mp4",
+        ];
+        const webmCandidates = [
+            "video/webm;codecs=vp9,opus",
+            "video/webm;codecs=vp9",
+            "video/webm;codecs=vp8,opus",
+            "video/webm",
+        ];
+        // Build candidate list based on preferred format
+        let candidates;
+        if (format === 'mp4')
+            candidates = [...mp4Candidates, ...webmCandidates];
+        else if (format === 'webm')
+            candidates = [...webmCandidates, ...mp4Candidates];
+        else
+            candidates = [...mp4Candidates, ...webmCandidates];
+        let mimeType = "video/webm";
+        for (const candidate of candidates) {
+            if (MediaRecorder.isTypeSupported(candidate)) {
+                mimeType = candidate;
+                break;
+            }
+        }
+        // Scale bitrate with pixel count: 8 Mbps baseline at 720p
+        const pixels = width * height;
+        const baseBitrate = 8_000_000;
+        const basePixels = 1280 * 720;
+        const videoBitsPerSecond = Math.round(baseBitrate * Math.max(1, pixels / basePixels));
+        const recorder = new MediaRecorder(stream, {
+            mimeType,
+            videoBitsPerSecond,
+        });
+        const chunks = [];
+        recorder.ondataavailable = (e) => {
+            if (e.data.size > 0)
+                chunks.push(e.data);
+        };
+        let stopped = false;
+        let rafId;
+        const startTime = performance.now();
+        let lastProgressTime = 0;
+        // Composite loop: draw source canvas + watermark overlay on each frame
+        const drawFrame = () => {
+            if (stopped)
+                return;
+            ctx.clearRect(0, 0, width, height);
+            ctx.drawImage(source, 0, 0, width, height);
+            // Watermark: "NEAT" in bottom-right corner
+            const fontSize = Math.max(14, Math.round(height * 0.025));
+            ctx.font = `bold ${fontSize}px "Sofia Sans", sans-serif`;
+            ctx.textAlign = "right";
+            ctx.textBaseline = "bottom";
+            ctx.shadowColor = "rgba(0,0,0,0.5)";
+            ctx.shadowBlur = 4;
+            ctx.shadowOffsetX = 1;
+            ctx.shadowOffsetY = 1;
+            ctx.fillStyle = "rgba(255,255,255,0.7)";
+            ctx.fillText("NEAT", width - fontSize * 0.8, height - fontSize * 0.5);
+            ctx.shadowColor = "transparent";
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+            // Signal the stream to capture this frame
+            // @ts-ignore – requestFrame exists on CanvasCaptureMediaStreamTrack
+            if (videoTrack.requestFrame)
+                videoTrack.requestFrame();
+            // Throttle progress to ~4 updates/sec to avoid flooding React state
+            if (onProgress) {
+                const now = performance.now();
+                if (now - lastProgressTime > 250) {
+                    lastProgressTime = now;
+                    onProgress(Math.min(0.99, (now - startTime) / durationMs));
+                }
+            }
+            rafId = requestAnimationFrame(drawFrame);
+        };
+        recorder.onstop = () => {
+            stopped = true;
+            cancelAnimationFrame(rafId);
+            // Use the correct file extension for the actual format
+            const isMP4 = mimeType.startsWith("video/mp4");
+            const ext = isMP4 ? ".mp4" : ".webm";
+            const blobType = isMP4 ? "video/mp4" : "video/webm";
+            const finalFilename = filename + ext;
+            const blob = new Blob(chunks, { type: blobType });
+            const url = URL.createObjectURL(blob);
+            downloadURI(url, finalFilename);
+            setTimeout(() => URL.revokeObjectURL(url), 30000);
+            onProgress?.(1);
+            onComplete?.();
+        };
+        // Start drawing frames, then start recording
+        drawFrame();
+        recorder.start(100); // collect data every 100ms
+        // Auto-stop after the requested duration
+        const timeoutId = window.setTimeout(() => {
+            if (recorder.state === "recording") {
+                recorder.stop();
+            }
+        }, durationMs);
+        // Return a stop function for early termination
+        return () => {
+            clearTimeout(timeoutId);
+            if (recorder.state === "recording") {
+                recorder.stop();
+            }
+        };
+    }
+    get speed() {
+        return this._speed * 20;
+    }
     set speed(speed) {
         this._uniformsDirty = true;
         this._speed = speed / 20;
     }
+    get horizontalPressure() {
+        return this._horizontalPressure * 4;
+    }
     set horizontalPressure(horizontalPressure) {
         this._uniformsDirty = true;
         this._horizontalPressure = horizontalPressure / 4;
     }
+    get verticalPressure() {
+        return this._verticalPressure * 4;
+    }
     set verticalPressure(verticalPressure) {
         this._uniformsDirty = true;
         this._verticalPressure = verticalPressure / 4;
     }
+    get waveFrequencyX() {
+        return this._waveFrequencyX / 0.04;
+    }
     set waveFrequencyX(waveFrequencyX) {
         this._uniformsDirty = true;
         this._waveFrequencyX = waveFrequencyX * 0.04;
     }
+    get waveFrequencyY() {
+        return this._waveFrequencyY / 0.04;
+    }
     set waveFrequencyY(waveFrequencyY) {
         this._uniformsDirty = true;
         this._waveFrequencyY = waveFrequencyY * 0.04;
     }
+    get waveAmplitude() {
+        return this._waveAmplitude / 0.75;
+    }
     set waveAmplitude(waveAmplitude) {
         this._uniformsDirty = true;
         this._waveAmplitude = waveAmplitude * .75;
     }
+    get colors() {
+        return this._colors;
+    }
     set colors(colors) {
         this._uniformsDirty = true;
         this._colors = colors;
         this._cachedColorRgb = colors.map(c => this._hexToRgb(c.color));
         this._colorsChanged = true;
     }
+    get highlights() {
+        return this._highlights * 100;
+    }
     set highlights(highlights) {
         this._uniformsDirty = true;
         this._highlights = highlights / 100;
     }
+    get shadows() {
+        return this._shadows * 100;
+    }
     set shadows(shadows) {
         this._uniformsDirty = true;
         this._shadows = shadows / 100;
     }
+    get colorSaturation() {
+        return this._saturation * 10;
+    }
     set colorSaturation(colorSaturation) {
         this._uniformsDirty = true;
         this._saturation = colorSaturation / 10;
     }
+    get colorBrightness() {
+        return this._brightness;
+    }
     set colorBrightness(colorBrightness) {
         this._uniformsDirty = true;
         this._brightness = colorBrightness;
     }
+    get colorBlending() {
+        return this._colorBlending * 10;
+    }
     set colorBlending(colorBlending) {
         this._uniformsDirty = true;
         this._colorBlending = colorBlending / 10;
     }
+    get grainScale() {
+        return this._grainScale;
+    }
     set grainScale(grainScale) {
         this._uniformsDirty = true;
         this._grainScale = grainScale == 0 ? 1 : grainScale;
     }
+    get grainIntensity() {
+        return this._grainIntensity;
+    }
     set grainIntensity(grainIntensity) {
         this._uniformsDirty = true;
         this._grainIntensity = grainIntensity;
     }
+    get grainSparsity() {
+        return this._grainSparsity;
+    }
     set grainSparsity(grainSparsity) {
         this._uniformsDirty = true;
         this._grainSparsity = grainSparsity;
     }
+    get grainSpeed() {
+        return this._grainSpeed;
+    }
     set grainSpeed(grainSpeed) {
         this._uniformsDirty = true;
         this._grainSpeed = grainSpeed;
     }
+    get wireframe() {
+        return this._wireframe;
+    }
     set wireframe(wireframe) {
         this._uniformsDirty = true;
         this._wireframe = wireframe;
     }
+    get resolution() {
+        return this._resolution;
+    }
     set resolution(resolution) {
-        this._uniformsDirty = true;
-        if (this.glState) {
-            const gl = this.glState.gl;
-            gl.deleteProgram(this.glState.program);
-            gl.deleteBuffer(this.glState.buffers.position);
-            gl.deleteBuffer(this.glState.buffers.normal);
-            gl.deleteBuffer(this.glState.buffers.uv);
-            gl.deleteBuffer(this.glState.buffers.index);
-            gl.deleteBuffer(this.glState.buffers.wireframeIndex);
-        }
-        this.glState = this._initScene(resolution);
+        if (this._resolution === resolution)
+            return;
+        this._resolution = resolution;
+        this._updateGeometry();
+    }
+    get backgroundColor() {
+        return this._backgroundColor;
     }
     set backgroundColor(backgroundColor) {
         this._uniformsDirty = true;
         this._backgroundColor = backgroundColor;
         this._backgroundColorRgb = this._hexToRgb(backgroundColor);
     }
+    get backgroundAlpha() {
+        return this._backgroundAlpha;
+    }
     set backgroundAlpha(backgroundAlpha) {
         this._uniformsDirty = true;
         this._backgroundAlpha = backgroundAlpha;
     }
+    get yOffset() {
+        return this._yOffset;
+    }
     set yOffset(yOffset) {
-        this._uniformsDirty = true;
-        this._yOffset = yOffset;
+        if (this._yOffset !== yOffset) {
+            this._yOffsetDirty = true;
+            this._yOffset = yOffset;
+        }
     }
     get yOffsetWaveMultiplier() {
         return this._yOffsetWaveMultiplier * 1000;
@@ -435,18 +789,30 @@ export class NeatGradient {
         this._uniformsDirty = true;
         this._yOffsetFlowMultiplier = value / 1000;
     }
+    get flowDistortionA() {
+        return this._flowDistortionA;
+    }
     set flowDistortionA(value) {
         this._uniformsDirty = true;
         this._flowDistortionA = value;
     }
+    get flowDistortionB() {
+        return this._flowDistortionB;
+    }
     set flowDistortionB(value) {
         this._uniformsDirty = true;
         this._flowDistortionB = value;
     }
+    get flowScale() {
+        return this._flowScale;
+    }
     set flowScale(value) {
         this._uniformsDirty = true;
         this._flowScale = value;
     }
+    get flowEase() {
+        return this._flowEase;
+    }
     set flowEase(value) {
         this._uniformsDirty = true;
         this._flowEase = value;
@@ -458,6 +824,9 @@ export class NeatGradient {
     get flowEnabled() {
         return this._flowEnabled;
     }
+    get enableProceduralTexture() {
+        return this._enableProceduralTexture;
+    }
     set enableProceduralTexture(value) {
         this._uniformsDirty = true;
         this._enableProceduralTexture = value;
@@ -465,6 +834,9 @@ export class NeatGradient {
             this._textureNeedsUpdate = true;
         }
     }
+    get textureVoidLikelihood() {
+        return this._textureVoidLikelihood;
+    }
     set textureVoidLikelihood(value) {
         this._uniformsDirty = true;
         this._textureVoidLikelihood = value;
@@ -472,6 +844,9 @@ export class NeatGradient {
             this._textureNeedsUpdate = true;
         }
     }
+    get textureVoidWidthMin() {
+        return this._textureVoidWidthMin;
+    }
     set textureVoidWidthMin(value) {
         this._uniformsDirty = true;
         this._textureVoidWidthMin = value;
@@ -479,6 +854,9 @@ export class NeatGradient {
             this._textureNeedsUpdate = true;
         }
     }
+    get textureVoidWidthMax() {
+        return this._textureVoidWidthMax;
+    }
     set textureVoidWidthMax(value) {
         this._uniformsDirty = true;
         this._textureVoidWidthMax = value;
@@ -486,6 +864,9 @@ export class NeatGradient {
             this._textureNeedsUpdate = true;
         }
     }
+    get textureBandDensity() {
+        return this._textureBandDensity;
+    }
     set textureBandDensity(value) {
         this._uniformsDirty = true;
         this._textureBandDensity = value;
@@ -493,6 +874,9 @@ export class NeatGradient {
             this._textureNeedsUpdate = true;
         }
     }
+    get textureColorBlending() {
+        return this._textureColorBlending;
+    }
     set textureColorBlending(value) {
         this._uniformsDirty = true;
         this._textureColorBlending = value;
@@ -500,6 +884,9 @@ export class NeatGradient {
             this._textureNeedsUpdate = true;
         }
     }
+    get textureSeed() {
+        return this._textureSeed;
+    }
     set textureSeed(value) {
         this._uniformsDirty = true;
         this._textureSeed = value;
@@ -514,6 +901,19 @@ export class NeatGradient {
         this._uniformsDirty = true;
         this._textureEase = value;
     }
+    get transparentTextureVoid() {
+        return this._transparentTextureVoid;
+    }
+    set transparentTextureVoid(value) {
+        this._uniformsDirty = true;
+        this._transparentTextureVoid = value;
+        if (this._enableProceduralTexture) {
+            this._textureNeedsUpdate = true;
+        }
+    }
+    get proceduralBackgroundColor() {
+        return this._proceduralBackgroundColor;
+    }
     set proceduralBackgroundColor(value) {
         this._uniformsDirty = true;
         this._proceduralBackgroundColor = value;
@@ -521,30 +921,90 @@ export class NeatGradient {
             this._textureNeedsUpdate = true;
         }
     }
+    get textureShapeTriangles() {
+        return this._textureShapeTriangles;
+    }
     set textureShapeTriangles(value) {
         this._uniformsDirty = true;
         this._textureShapeTriangles = value;
         if (this._enableProceduralTexture)
             this._textureNeedsUpdate = true;
     }
+    get textureShapeCircles() {
+        return this._textureShapeCircles;
+    }
     set textureShapeCircles(value) {
         this._uniformsDirty = true;
         this._textureShapeCircles = value;
         if (this._enableProceduralTexture)
             this._textureNeedsUpdate = true;
     }
+    get textureShapeBars() {
+        return this._textureShapeBars;
+    }
     set textureShapeBars(value) {
         this._uniformsDirty = true;
         this._textureShapeBars = value;
         if (this._enableProceduralTexture)
             this._textureNeedsUpdate = true;
     }
+    get textureShapeSquiggles() {
+        return this._textureShapeSquiggles;
+    }
     set textureShapeSquiggles(value) {
         this._uniformsDirty = true;
         this._textureShapeSquiggles = value;
         if (this._enableProceduralTexture)
             this._textureNeedsUpdate = true;
     }
+    _updateGeometry() {
+        if (!this.glState)
+            return;
+        const gl = this.glState.gl;
+        const resolution = this._resolution || 1;
+        let geometry;
+        if (this._shapeType === 'sphere') {
+            geometry = generateSphereGeometry(this._sphereRadius, 120 * resolution, 120 * resolution);
+        }
+        else if (this._shapeType === 'torus') {
+            geometry = generateTorusGeometry(this._torusRadius, this._torusTube, 120 * resolution, 120 * resolution);
+        }
+        else if (this._shapeType === 'cylinder') {
+            geometry = generateCylinderGeometry(this._cylinderRadius, this._cylinderRadius, this._cylinderHeight, 120 * resolution, 120 * resolution);
+        }
+        else if (this._shapeType === 'ribbon') {
+            geometry = generateRibbonGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution, this._planeBend, this._planeTwist);
+        }
+        else {
+            geometry = generatePlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);
+        }
+        const { position, normal, uv, index, wireframeIndex } = geometry;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glState.buffers.position);
+        gl.bufferData(gl.ARRAY_BUFFER, position, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glState.buffers.normal);
+        gl.bufferData(gl.ARRAY_BUFFER, normal, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glState.buffers.uv);
+        gl.bufferData(gl.ARRAY_BUFFER, uv, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.glState.buffers.index);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.glState.buffers.wireframeIndex);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, wireframeIndex, gl.STATIC_DRAW);
+        // Restore default bound element buffer
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.glState.buffers.index);
+        this.glState.indexCount = index.length;
+        this.glState.wireframeIndexCount = wireframeIndex.length;
+        this.glState.indexType = (index instanceof Uint32Array) ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+        // Keep camera updated with the new shapeType and dimensions
+        const width = this._ref.clientWidth;
+        const height = this._ref.clientHeight;
+        updateCamera(this.glState.camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
+        // Recompute projection matrix
+        const projLoc = this.glState.locations.uniforms["projectionMatrix"];
+        gl.useProgram(this.glState.program);
+        if (projLoc)
+            gl.uniformMatrix4fv(projLoc, false, this.glState.camera.projectionMatrix.elements);
+        this._uniformsDirty = true;
+    }
     _hexToRgb(hex) {
         const bigint = parseInt(hex.replace('#', ''), 16);
         return [
@@ -564,8 +1024,24 @@ export class NeatGradient {
         const ext = gl.getExtension("OES_standard_derivatives");
         gl.getExtension("OES_element_index_uint");
         gl.viewport(0, 0, width, height);
-        // Generate plane geometry with Uint32Array for large meshes
-        const { position, normal, uv, index, wireframeIndex } = generatePlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);
+        // Generate parametric geometry based on shapeType
+        let geometry;
+        if (this._shapeType === 'sphere') {
+            geometry = generateSphereGeometry(this._sphereRadius, 120 * resolution, 120 * resolution);
+        }
+        else if (this._shapeType === 'torus') {
+            geometry = generateTorusGeometry(this._torusRadius, this._torusTube, 120 * resolution, 120 * resolution);
+        }
+        else if (this._shapeType === 'cylinder') {
+            geometry = generateCylinderGeometry(this._cylinderRadius, this._cylinderRadius, this._cylinderHeight, 120 * resolution, 120 * resolution);
+        }
+        else if (this._shapeType === 'ribbon') {
+            geometry = generateRibbonGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution, this._planeBend, this._planeTwist);
+        }
+        else {
+            geometry = generatePlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT, 240 * resolution, 240 * resolution);
+        }
+        const { position, normal, uv, index, wireframeIndex } = geometry;
         const positionBuffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, position, gl.STATIC_DRAW);
@@ -620,7 +1096,7 @@ export class NeatGradient {
         gl.useProgram(program);
         const camera = new OrthographicCamera(0, 0, 0, 0, 0, 1000);
         camera.position = [0, 0, 5];
-        updateCamera(camera, width, height);
+        updateCamera(camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
         // Define attributes
         const aPosition = gl.getAttribLocation(program, "position");
         const aNormal = gl.getAttribLocation(program, "normal");
@@ -635,15 +1111,7 @@ export class NeatGradient {
         gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
         gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 0, 0);
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-        const modelViewMatrix = new Matrix4();
-        // The View Matrix is the inverse of the Camera's position
-        // Camera is at [0, 0, 5], so view matrix translates by [0, 0, -5]
-        modelViewMatrix.translate(-camera.position[0], -camera.position[1], -camera.position[2]);
-        // The Model Matrix mimicking: plane.rotation.x = -Math.PI / 3.5; plane.position.z = -1;
-        modelViewMatrix.translate(0, 0, -1);
-        modelViewMatrix.rotateX(-Math.PI / 3.5);
-        const mvLoc = gl.getUniformLocation(program, "modelViewMatrix");
-        gl.uniformMatrix4fv(mvLoc, false, modelViewMatrix.elements);
+        // modelViewMatrix is set dynamically in the render loop
         const projLoc = gl.getUniformLocation(program, "projectionMatrix");
         gl.uniformMatrix4fv(projLoc, false, camera.projectionMatrix.elements);
         const planeWidthLoc = gl.getUniformLocation(program, "u_plane_width");
@@ -653,17 +1121,19 @@ export class NeatGradient {
         const colorsCountLoc = gl.getUniformLocation(program, "u_colors_count");
         gl.uniform1i(colorsCountLoc, COLORS_COUNT);
         const uniformsList = [
+            "projectionMatrix", "modelViewMatrix",
             "u_time", "u_resolution", "u_color_pressure", "u_wave_frequency_x", "u_wave_frequency_y",
             "u_wave_amplitude", "u_colors_count", "u_plane_width", "u_plane_height", "u_shadows",
             "u_highlights", "u_grain_intensity", "u_grain_sparsity", "u_grain_scale", "u_grain_speed",
             "u_flow_distortion_a", "u_flow_distortion_b", "u_flow_scale", "u_flow_ease", "u_flow_enabled",
             "u_y_offset", "u_y_offset_wave_multiplier", "u_y_offset_color_multiplier", "u_y_offset_flow_multiplier",
-            "u_procedural_texture", "u_enable_procedural_texture", "u_texture_ease", "u_saturation", "u_brightness", "u_color_blending",
+            "u_procedural_texture", "u_enable_procedural_texture", "u_texture_ease", "u_transparent_texture_void", "u_saturation", "u_brightness", "u_color_blending",
             "u_domain_warp_enabled", "u_domain_warp_intensity", "u_domain_warp_scale",
             "u_vignette_intensity", "u_vignette_radius",
             "u_fresnel_enabled", "u_fresnel_power", "u_fresnel_intensity", "u_fresnel_color",
             "u_iridescence_enabled", "u_iridescence_intensity", "u_iridescence_speed",
-            "u_bloom_intensity", "u_bloom_threshold", "u_chromatic_aberration"
+            "u_bloom_intensity", "u_bloom_threshold", "u_chromatic_aberration",
+            "u_shape_type", "u_silhouette_fade", "u_cylinder_fade", "u_ribbon_fade", "u_flat_shading"
         ];
         const locations = {
             attributes: { position: aPosition, normal: aNormal, uv: aUv },
@@ -708,10 +1178,14 @@ export class NeatGradient {
         // 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 (!this._sourceCanvas) {
+            this._sourceCanvas = document.createElement('canvas');
+            this._sourceCanvas.width = texSize;
+            this._sourceCanvas.height = texSize;
+            this._sourceCtx = this._sourceCanvas.getContext('2d');
+        }
+        const sourceCanvas = this._sourceCanvas;
+        const sCtx = this._sourceCtx;
         if (!sCtx)
             return null;
         let seed = this._textureSeed;
@@ -727,6 +1201,9 @@ export class NeatGradient {
         const colors = this._colors.filter(c => c.enabled).map(c => c.color);
         if (colors.length === 0)
             return null;
+        const shouldTile = this._shapeType !== 'plane';
+        const dxs = shouldTile ? [-1, 0, 1] : [0];
+        const dys = shouldTile ? [-1, 0, 1] : [0];
         // Helper functions
         function hexToRgb(hex) {
             const bigint = parseInt(hex.replace('#', ''), 16);
@@ -763,64 +1240,120 @@ export class NeatGradient {
         sCtx.fillRect(0, 0, texSize, texSize);
         // Triangles: use configurable count
         for (let i = 0; i < this._textureShapeTriangles; i++) {
-            sCtx.fillStyle = getInterColor();
-            sCtx.beginPath();
+            const fillStyle = getInterColor();
             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();
+            const x1 = (random() - 0.5) * s;
+            const y1 = (random() - 0.5) * s;
+            const x2 = (random() - 0.5) * s;
+            const y2 = (random() - 0.5) * s;
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.fillStyle = fillStyle;
+                    sCtx.beginPath();
+                    const tx = x + dx * texSize;
+                    const ty = y + dy * texSize;
+                    sCtx.moveTo(tx, ty);
+                    sCtx.lineTo(tx + x1, ty + y1);
+                    sCtx.lineTo(tx + x2, ty + y2);
+                    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 strokeStyle = getInterColor();
+            const lineWidth = 10 + random() * 50;
             const x = random() * texSize;
             const y = random() * texSize;
             const r = 50 + random() * 150;
-            sCtx.arc(x, y, r, 0, Math.PI * 2);
-            sCtx.stroke();
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.strokeStyle = strokeStyle;
+                    sCtx.lineWidth = lineWidth;
+                    sCtx.beginPath();
+                    sCtx.arc(x + dx * texSize, y + dy * texSize, 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();
+            const fillStyle = getInterColor();
+            const x = random() * texSize;
+            const y = random() * texSize;
+            const rot = random() * Math.PI;
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.fillStyle = fillStyle;
+                    sCtx.save();
+                    sCtx.translate(x + dx * texSize, y + dy * texSize);
+                    sCtx.rotate(rot);
+                    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);
+            const strokeStyle = getInterColor();
+            const x = random() * texSize;
+            const y = random() * texSize;
+            const curves = [];
+            let cx = 0;
+            let cy = 0;
             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;
+                const ex = cx + (random() - 0.5) * 300;
+                const ey = cy + (random() - 0.5) * 300;
+                curves.push({
+                    cx1: cx + (random() - 0.5) * 300,
+                    cy1: cy + (random() - 0.5) * 300,
+                    cx2: cx + (random() - 0.5) * 300,
+                    cy2: cy + (random() - 0.5) * 300,
+                    ex: ex,
+                    ey: ey
+                });
+                cx = ex;
+                cy = ey;
+            }
+            for (const dx of dxs) {
+                for (const dy of dys) {
+                    sCtx.strokeStyle = strokeStyle;
+                    sCtx.beginPath();
+                    const tx = x + dx * texSize;
+                    const ty = y + dy * texSize;
+                    sCtx.moveTo(tx, ty);
+                    for (const curve of curves) {
+                        sCtx.bezierCurveTo(tx + curve.cx1, ty + curve.cy1, tx + curve.cx2, ty + curve.cy2, tx + curve.ex, ty + curve.ey);
+                    }
+                    sCtx.stroke();
+                }
             }
-            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 (!this._maskedCanvas) {
+            this._maskedCanvas = document.createElement('canvas');
+            this._maskedCanvas.width = texSize;
+            this._maskedCanvas.height = texSize;
+            this._maskedCtx = this._maskedCanvas.getContext('2d');
+        }
+        const canvas = this._maskedCanvas;
+        const ctx = this._maskedCtx;
         if (!ctx)
             return null;
         // Start filled with the chosen void color so gaps show that color
-        ctx.fillStyle = baseColor;
-        ctx.fillRect(0, 0, texSize, texSize);
+        if (this._transparentTextureVoid) {
+            ctx.clearRect(0, 0, texSize, texSize);
+        }
+        else {
+            ctx.fillStyle = baseColor;
+            ctx.fillRect(0, 0, texSize, texSize);
+        }
         // Determine layout segments (matter vs void)
         let layoutHead = 0;
         const segments = [];
@@ -869,54 +1402,117 @@ export class NeatGradient {
         }
         return tex;
     }
+    get silhouetteFade() {
+        return this._silhouetteFade;
+    }
+    set silhouetteFade(value) {
+        if (this._silhouetteFade !== value) {
+            this._silhouetteFade = value;
+            this._uniformsDirty = true;
+        }
+    }
+    get cylinderFade() {
+        return this._cylinderFade;
+    }
+    set cylinderFade(value) {
+        if (this._cylinderFade !== value) {
+            this._cylinderFade = value;
+            this._uniformsDirty = true;
+        }
+    }
+    get ribbonFade() {
+        return this._ribbonFade;
+    }
+    set ribbonFade(value) {
+        if (this._ribbonFade !== value) {
+            this._ribbonFade = value;
+            this._uniformsDirty = true;
+        }
+    }
+    get flatShading() {
+        return this._flatShading;
+    }
+    set flatShading(value) {
+        if (this._flatShading !== value) {
+            this._flatShading = value;
+            this._uniformsDirty = true;
+        }
+    }
+    get domainWarpEnabled() {
+        return this._domainWarpEnabled;
+    }
     set domainWarpEnabled(enabled) {
         if (this._domainWarpEnabled !== enabled) {
             this._domainWarpEnabled = enabled;
             this._uniformsDirty = true;
         }
     }
+    get domainWarpIntensity() {
+        return this._domainWarpIntensity;
+    }
     set domainWarpIntensity(intensity) {
         if (this._domainWarpIntensity !== intensity) {
             this._domainWarpIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+    get domainWarpScale() {
+        return this._domainWarpScale;
+    }
     set domainWarpScale(scale) {
         if (this._domainWarpScale !== scale) {
             this._domainWarpScale = scale;
             this._uniformsDirty = true;
         }
     }
+    get vignetteIntensity() {
+        return this._vignetteIntensity;
+    }
     set vignetteIntensity(intensity) {
         if (this._vignetteIntensity !== intensity) {
             this._vignetteIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+    get vignetteRadius() {
+        return this._vignetteRadius;
+    }
     set vignetteRadius(radius) {
         if (this._vignetteRadius !== radius) {
             this._vignetteRadius = radius;
             this._uniformsDirty = true;
         }
     }
+    get fresnelEnabled() {
+        return this._fresnelEnabled;
+    }
     set fresnelEnabled(enabled) {
         if (this._fresnelEnabled !== enabled) {
             this._fresnelEnabled = enabled;
             this._uniformsDirty = true;
         }
     }
+    get fresnelPower() {
+        return this._fresnelPower;
+    }
     set fresnelPower(power) {
         if (this._fresnelPower !== power) {
             this._fresnelPower = power;
             this._uniformsDirty = true;
         }
     }
+    get fresnelIntensity() {
+        return this._fresnelIntensity;
+    }
     set fresnelIntensity(intensity) {
         if (this._fresnelIntensity !== intensity) {
             this._fresnelIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+    get fresnelColor() {
+        return this._fresnelColor;
+    }
     set fresnelColor(fresnelColor) {
         if (this._fresnelColor !== fresnelColor) {
             this._fresnelColor = fresnelColor;
@@ -924,42 +1520,199 @@ export class NeatGradient {
             this._uniformsDirty = true;
         }
     }
+    get iridescenceEnabled() {
+        return this._iridescenceEnabled;
+    }
     set iridescenceEnabled(enabled) {
         if (this._iridescenceEnabled !== enabled) {
             this._iridescenceEnabled = enabled;
             this._uniformsDirty = true;
         }
     }
+    get iridescenceIntensity() {
+        return this._iridescenceIntensity;
+    }
     set iridescenceIntensity(intensity) {
         if (this._iridescenceIntensity !== intensity) {
             this._iridescenceIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+    get iridescenceSpeed() {
+        return this._iridescenceSpeed;
+    }
     set iridescenceSpeed(speed) {
         if (this._iridescenceSpeed !== speed) {
             this._iridescenceSpeed = speed;
             this._uniformsDirty = true;
         }
     }
+    get bloomIntensity() {
+        return this._bloomIntensity;
+    }
     set bloomIntensity(intensity) {
         if (this._bloomIntensity !== intensity) {
             this._bloomIntensity = intensity;
             this._uniformsDirty = true;
         }
     }
+    get bloomThreshold() {
+        return this._bloomThreshold;
+    }
     set bloomThreshold(threshold) {
         if (this._bloomThreshold !== threshold) {
             this._bloomThreshold = threshold;
             this._uniformsDirty = true;
         }
     }
+    get chromaticAberration() {
+        return this._chromaticAberration;
+    }
     set chromaticAberration(aberration) {
         if (this._chromaticAberration !== aberration) {
             this._chromaticAberration = aberration;
             this._uniformsDirty = true;
         }
     }
+    // Getters and Setters for 3D Shapes
+    get shapeType() {
+        return this._shapeType;
+    }
+    set shapeType(val) {
+        if (this._shapeType !== val) {
+            this._shapeType = val;
+            this._updateGeometry();
+        }
+    }
+    get shapeRotationX() { return this._shapeRotationX; }
+    set shapeRotationX(val) {
+        this._shapeRotationX = val;
+        this._uniformsDirty = true;
+    }
+    get shapeRotationY() { return this._shapeRotationY; }
+    set shapeRotationY(val) {
+        this._shapeRotationY = val;
+        this._uniformsDirty = true;
+    }
+    get shapeRotationZ() { return this._shapeRotationZ; }
+    set shapeRotationZ(val) {
+        this._shapeRotationZ = val;
+        this._uniformsDirty = true;
+    }
+    get shapeAutoRotateSpeedX() { return this._shapeAutoRotateSpeedX; }
+    set shapeAutoRotateSpeedX(val) {
+        this._shapeAutoRotateSpeedX = val;
+        this._uniformsDirty = true;
+    }
+    get shapeAutoRotateSpeedY() { return this._shapeAutoRotateSpeedY; }
+    set shapeAutoRotateSpeedY(val) {
+        this._shapeAutoRotateSpeedY = val;
+        this._uniformsDirty = true;
+    }
+    get sphereRadius() { return this._sphereRadius; }
+    set sphereRadius(val) {
+        if (this._sphereRadius !== val) {
+            this._sphereRadius = val;
+            this._updateGeometry();
+        }
+    }
+    get torusRadius() { return this._torusRadius; }
+    set torusRadius(val) {
+        if (this._torusRadius !== val) {
+            this._torusRadius = val;
+            this._updateGeometry();
+        }
+    }
+    get torusTube() { return this._torusTube; }
+    set torusTube(val) {
+        if (this._torusTube !== val) {
+            this._torusTube = val;
+            this._updateGeometry();
+        }
+    }
+    get cylinderRadius() { return this._cylinderRadius; }
+    set cylinderRadius(val) {
+        if (this._cylinderRadius !== val) {
+            this._cylinderRadius = val;
+            this._updateGeometry();
+        }
+    }
+    get cylinderHeight() { return this._cylinderHeight; }
+    set cylinderHeight(val) {
+        if (this._cylinderHeight !== val) {
+            this._cylinderHeight = val;
+            this._updateGeometry();
+        }
+    }
+    get planeBend() { return this._planeBend; }
+    set planeBend(val) {
+        if (this._planeBend !== val) {
+            this._planeBend = val;
+            this._updateGeometry();
+        }
+    }
+    get planeTwist() { return this._planeTwist; }
+    set planeTwist(val) {
+        if (this._planeTwist !== val) {
+            this._planeTwist = val;
+            this._updateGeometry();
+        }
+    }
+    // Camera Getters and Setters
+    get cameraLock() { return this._cameraLock; }
+    set cameraLock(val) {
+        this._cameraLock = val;
+    }
+    get cameraX() { return this._cameraX; }
+    set cameraX(val) {
+        this._cameraX = val;
+        this._uniformsDirty = true;
+    }
+    get cameraY() { return this._cameraY; }
+    set cameraY(val) {
+        this._cameraY = val;
+        this._uniformsDirty = true;
+    }
+    get cameraZ() { return this._cameraZ; }
+    set cameraZ(val) {
+        this._cameraZ = val;
+        this._uniformsDirty = true;
+    }
+    get cameraRotationX() { return this._cameraRotationX; }
+    set cameraRotationX(val) {
+        this._cameraRotationX = val;
+        this._uniformsDirty = true;
+    }
+    get cameraRotationY() { return this._cameraRotationY; }
+    set cameraRotationY(val) {
+        this._cameraRotationY = val;
+        this._uniformsDirty = true;
+    }
+    get cameraRotationZ() { return this._cameraRotationZ; }
+    set cameraRotationZ(val) {
+        this._cameraRotationZ = val;
+        this._uniformsDirty = true;
+    }
+    get cameraZoom() { return this._cameraZoom; }
+    set cameraZoom(val) {
+        if (this._cameraZoom !== val) {
+            this._cameraZoom = val;
+            this._updateCameraFrustum();
+        }
+    }
+    _updateCameraFrustum() {
+        if (!this.glState)
+            return;
+        const gl = this.glState.gl;
+        const width = this._ref.clientWidth;
+        const height = this._ref.clientHeight;
+        updateCamera(this.glState.camera, width, height, PLANE_WIDTH, PLANE_HEIGHT, this._shapeType, this._cameraZoom);
+        const projLoc = this.glState.locations.uniforms["projectionMatrix"];
+        gl.useProgram(this.glState.program);
+        if (projLoc)
+            gl.uniformMatrix4fv(projLoc, false, this.glState.camera.projectionMatrix.elements);
+        this._uniformsDirty = true;
+    }
 }
 const setLinkStyles = (link) => {
     link.id = LINK_ID;