@vib3code/sdk 2.0.1 → 2.0.3-canary.6f35b4c

package/src/shaders/holographic/holographic.frag.glsl

@@ -9,7 +9,8 @@ uniform vec2 u_resolution;
 uniform float u_time;
 uniform vec2 u_mouse;
 uniform float u_geometry;
-uniform float u_density;
+uniform float u_density;        // Used by inline visualizer (scaled 0.3-2.5)
+uniform float u_gridDensity;    // Used by bridge/external (raw 5-100)
 uniform float u_speed;
 uniform vec3 u_color;
 uniform float u_intensity;
@@ -40,6 +41,9 @@ uniform float u_rot4dXW;
 uniform float u_rot4dYW;
 uniform float u_rot4dZW;
 
+// EXHALE FEATURE: Breathing uniform
+uniform float u_breath;
+
 // 6D rotation matrices - 3D space rotations (XY, XZ, YZ)
 mat4 rotateXY(float theta) {
     float c = cos(theta);
@@ -78,9 +82,12 @@ mat4 rotateZW(float theta) {
     return mat4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, c, -s, 0, 0, s, c);
 }
 
-// 4D to 3D projection
+// 4D to 3D projection - BREATHING EFFECT
 vec3 project4Dto3D(vec4 p) {
-    float w = 2.5 / (2.5 + p.w);
+    // Modulate projection distance with breath for "exhale" effect (expansion/contraction)
+    float baseDim = 2.5;
+    float dim = baseDim + u_breath * 0.5; // Expands on exhale
+    float w = dim / (dim + p.w);
     return vec3(p.x * w, p.y * w, p.z * w);
 }
 
@@ -227,10 +234,10 @@ float torusLattice(vec3 p, float gridSize) {
 
 float kleinLattice(vec3 p, float gridSize) {
     vec3 q = fract(p * gridSize);
-    float ku = q.x * 2.0 * 3.14159;
-    float kv = q.y * 2.0 * 3.14159;
-    float kx = cos(ku) * (3.0 + cos(ku/2.0) * sin(kv) - sin(ku/2.0) * sin(2.0*kv));
-    float klein = length(vec2(kx, q.z)) - 0.1;
+    float u = q.x * 2.0 * 3.14159;
+    float v = q.y * 2.0 * 3.14159;
+    float x = cos(u) * (3.0 + cos(u/2.0) * sin(v) - sin(u/2.0) * sin(2.0*v));
+    float klein = length(vec2(x, q.z)) - 0.1;
     return 1.0 - smoothstep(0.0, 0.05, abs(klein));
 }
 
@@ -345,8 +352,17 @@ void main() {
 
     float scrollDensityMod = 1.0 + u_gridDensityShift * 0.3;
     float audioDensityMod = 1.0 + u_audioDensityBoost * 0.5;
-    // Controlled density calculation
-    float baseDensity = u_density * u_roleDensity;
+
+    // SCALE FIX: Support raw gridDensity (5-100) or pre-scaled density (0.3-2.5)
+    float effectiveDensity = u_density;
+    if (u_gridDensity > 0.1) {
+        // Convert 5-100 to 0.3-2.5
+        effectiveDensity = 0.3 + (u_gridDensity - 5.0) / 95.0 * 2.2;
+    }
+
+    float breathDensityMod = 1.0 + u_breath * 0.1;
+    float baseDensity = effectiveDensity * u_roleDensity * breathDensityMod;
+
     float densityVariations = (u_densityVariation * 0.3 + (scrollDensityMod - 1.0) * 0.4 + (audioDensityMod - 1.0) * 0.2);
     float roleDensity = baseDensity + densityVariations;
 
@@ -357,6 +373,9 @@ void main() {
     vec3 baseColor = u_color;
     float latticeIntensity = lattice * u_intensity;
 
+    // Breathing glow effect
+    latticeIntensity *= (1.0 + u_breath * 0.2);
+
     // Multi-layer color composition for higher fidelity
     vec3 color = baseColor * (0.2 + latticeIntensity * 0.8);
 

package/src/shaders/holographic/holographic.frag.wgsl

@@ -1,6 +1,6 @@
 // VIB3+ Holographic System Fragment Shader (WGSL)
 // 5-layer glassmorphic audio-reactive effects
-// Port of the GLSL HolographicVisualizer shader
+// Port of the GLSL HolographicVisualizer shader with Exhale feature
 
 struct VIB3Uniforms {
     time: f32,
@@ -28,7 +28,7 @@ struct VIB3Uniforms {
     high: f32,
     layerScale: f32,
     layerOpacity: f32,
-    _pad1: f32,
+    breath: f32,
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,
@@ -91,42 +91,91 @@ fn apply6DRot(pos: vec4<f32>) -> vec4<f32> {
     return p;
 }
 
-// ========== 24 Geometry SDFs ==========
-fn baseGeometry(p: vec4<f32>, t: f32) -> f32 {
-    if (t < 0.5) {
+// ========== 4D to 3D Projection (Breathing) ==========
+fn project4Dto3D_w(p: vec4<f32>) -> vec3<f32> {
+    // Modulate projection with breath
+    let baseDim = 2.5;
+    let dim = baseDim + u.breath * 0.5;
+    let w = dim / (dim + p.w);
+    return vec3<f32>(p.x * w, p.y * w, p.z * w);
+}
+
+// ========== Polytope Core Warp Functions ==========
+fn warpHypersphereCore_w(p: vec3<f32>, geomIdx: i32) -> vec3<f32> {
+    let radius = length(p);
+    let morphBlend = clamp(u.morphFactor * 0.6 + 0.3, 0.0, 2.0);
+    let w = sin(radius * (1.3 + f32(geomIdx) * 0.12) + u.time * 0.0008 * u.speed)
+          * (0.4 + morphBlend * 0.45);
+
+    var p4d = vec4<f32>(p * (1.0 + morphBlend * 0.2), w);
+    p4d = apply6DRot(p4d); // Reuse rotation helper
+
+    let proj = project4Dto3D_w(p4d);
+    return mix(p, proj, clamp(0.45 + morphBlend * 0.35, 0.0, 1.0));
+}
+
+fn warpHypertetraCore_w(p: vec3<f32>, geomIdx: i32) -> vec3<f32> {
+    let c1 = normalize(vec3<f32>(1.0, 1.0, 1.0));
+    let c2 = normalize(vec3<f32>(-1.0, -1.0, 1.0));
+    let c3 = normalize(vec3<f32>(-1.0, 1.0, -1.0));
+    let c4 = normalize(vec3<f32>(1.0, -1.0, -1.0));
+
+    let morphBlend = clamp(u.morphFactor * 0.8 + 0.2, 0.0, 2.0);
+    let basisMix = dot(p, c1) * 0.14 + dot(p, c2) * 0.1 + dot(p, c3) * 0.08;
+    let w = sin(basisMix * 5.5 + u.time * 0.0009 * u.speed)
+          * cos(dot(p, c4) * 4.2 - u.time * 0.0007 * u.speed)
+          * (0.5 + morphBlend * 0.4);
+
+    let offset = vec3<f32>(dot(p, c1), dot(p, c2), dot(p, c3)) * 0.1 * morphBlend;
+    var p4d = vec4<f32>(p + offset, w);
+    p4d = apply6DRot(p4d);
+
+    let proj = project4Dto3D_w(p4d);
+
+    let planeInf = min(min(abs(dot(p, c1)), abs(dot(p, c2))),
+                       min(abs(dot(p, c3)), abs(dot(p, c4))));
+    let blended = mix(p, proj, clamp(0.45 + morphBlend * 0.35, 0.0, 1.0));
+    return mix(blended, blended * (1.0 - planeInf * 0.55), 0.2 + morphBlend * 0.2);
+}
+
+fn applyCoreWarp_w(p: vec3<f32>, geomType: f32) -> vec3<f32> {
+    let totalBase = 8.0;
+    let coreFloat = floor(geomType / totalBase);
+    let coreIndex = i32(clamp(coreFloat, 0.0, 2.0));
+    let baseFloat = geomType - floor(geomType / totalBase) * totalBase;
+    let geomIdx = i32(clamp(floor(baseFloat + 0.5), 0.0, totalBase - 1.0));
+
+    if (coreIndex == 1) { return warpHypersphereCore_w(p, geomIdx); }
+    if (coreIndex == 2) { return warpHypertetraCore_w(p, geomIdx); }
+    return p;
+}
+
+// ========== 24 Geometry SDFs (Base 8) ==========
+fn baseGeometry(p: vec3<f32>, t: f32) -> f32 {
+    let totalBase = 8.0;
+    let baseFloat = t - floor(t / totalBase) * totalBase;
+    // We use integer comparison here since WGSL doesn't like float switches
+    if (baseFloat < 0.5) { // Tetrahedron
         return max(max(max(abs(p.x + p.y) - p.z, abs(p.x - p.y) - p.z),
                        abs(p.x + p.y) + p.z), abs(p.x - p.y) + p.z) / sqrt(3.0);
-    } else if (t < 1.5) {
-        let q = abs(p) - vec4<f32>(0.8);
-        return length(max(q, vec4<f32>(0.0))) + min(max(max(max(q.x, q.y), q.z), q.w), 0.0);
-    } else if (t < 2.5) {
+    } else if (baseFloat < 1.5) { // Hypercube (projected)
+        let q = abs(p) - vec3<f32>(0.8);
+        return length(max(q, vec3<f32>(0.0))) + min(max(max(q.x, q.y), q.z), 0.0);
+    } else if (baseFloat < 2.5) { // Sphere
         return length(p) - 1.0;
-    } else if (t < 3.5) {
+    } else if (baseFloat < 3.5) { // Torus
         let t2 = vec2<f32>(length(p.xy) - 0.8, p.z);
         return length(t2) - 0.3;
-    } else if (t < 4.5) {
+    } else if (baseFloat < 4.5) { // Klein
         let r = length(p.xy);
         return abs(r - 0.7) - 0.2 + sin(atan2(p.y, p.x) * 3.0 + p.z * 5.0) * 0.1;
-    } else if (t < 5.5) {
+    } else if (baseFloat < 5.5) { // Fractal
         return length(p) - 0.8 + sin(p.x * 5.0) * sin(p.y * 5.0) * sin(p.z * 5.0) * 0.2;
-    } else if (t < 6.5) {
+    } else if (baseFloat < 6.5) { // Wave
         return abs(p.z - sin(p.x * 5.0 + u.time) * cos(p.y * 5.0 + u.time) * 0.3) - 0.1;
-    } else {
+    } else { // Crystal
         let q = abs(p);
-        return max(max(max(q.x, q.y), q.z), q.w) - 0.8;
-    }
-}
-
-fn geom(p: vec4<f32>, t: f32) -> f32 {
-    if (t < 8.0) { return baseGeometry(p, t); }
-    else if (t < 16.0) { return max(baseGeometry(p, t - 8.0), length(p) - 1.2); }
-    else {
-        let tf = max(max(max(
-            abs(p.x + p.y) - p.z - p.w,
-            abs(p.x - p.y) - p.z + p.w),
-            abs(p.x + p.y) + p.z - p.w),
-            abs(p.x - p.y) + p.z + p.w) / sqrt(4.0);
-        return max(baseGeometry(p, t - 16.0), tf);
+        return max(max(q.x, q.y), q.z) - 0.8;
     }
 }
 
@@ -161,25 +210,45 @@ fn main(input: VertexOutput) -> @location(0) vec4<f32> {
     let density = u.densityMult;
     let spd = u.speedMult;
 
-    // Create 4D point
-    var pos = vec4<f32>(uv * 2.0 * density, sin(u.time * 0.3 * spd) * 0.5, cos(u.time * 0.2 * spd) * 0.5);
-    pos = apply6DRot(pos);
-    pos *= u.morphFactor;
-    pos += vec4<f32>(sin(u.time * 0.1), cos(u.time * 0.15), sin(u.time * 0.12), cos(u.time * 0.18)) * u.chaos;
+    // Create 4D point (simplified to 3D base + W)
+    // SCALE FIX: Apply gridDensity scaling if densityMult is weak?
+    // WGSL density logic usually relies on densityMult passed by bridge.
+    // But let's apply the same scaling logic just in case:
+    var effectiveDensity = density;
+    if (u.gridDensity > 0.1 && density < 0.5) {
+         effectiveDensity = 0.3 + (u.gridDensity - 5.0) / 95.0 * 2.2;
+    }
+
+    var pos4d = vec4<f32>(uv * 2.0 * effectiveDensity, sin(u.time * 0.3 * spd) * 0.5, cos(u.time * 0.2 * spd) * 0.5);
+
+    // Rotate
+    pos4d = apply6DRot(pos4d);
+
+    // Project to 3D (with breath)
+    let pos3d = project4Dto3D_w(pos4d);
+
+    // Warp (Polytope logic)
+    var warpedPos = applyCoreWarp_w(pos3d, u.geometry);
+
+    // Apply morph/chaos to warped point
+    warpedPos *= u.morphFactor;
+    warpedPos += vec3<f32>(sin(u.time * 0.1), cos(u.time * 0.15), sin(u.time * 0.12)) * u.chaos;
+
+    // Geometry evaluation on warped 3D point
+    let dist = baseGeometry(warpedPos, u.geometry);
 
-    // Geometry evaluation
-    let dist = geom(pos, u.geometry);
     let edge = smoothstep(0.02, 0.0, abs(dist));
     let fill = smoothstep(0.1, 0.0, dist) * 0.3;
 
     // Color from HSL
-    // colorShift is baked into layerColor; use hue directly
     let hueVal = u.hue / 360.0;
     let sat = clamp(u.saturation, 0.0, 1.0);
     let lightness = clamp(u.intensity, 0.2, 0.8);
     let color = hslToRgb(hueVal, sat, lightness);
 
-    // Final alpha
-    let alpha = (edge + fill) * u.intensity * u.layerOpacity;
+    // Final alpha - modulate with breath
+    let breathAlpha = 1.0 + u.breath * 0.2;
+    let alpha = (edge + fill) * u.intensity * u.layerOpacity * breathAlpha;
+
     return vec4<f32>(color * alpha, alpha);
 }

package/src/shaders/quantum/quantum.frag.glsl

@@ -30,6 +30,7 @@ uniform float u_rot4dZW;
 uniform float u_mouseIntensity;
 uniform float u_clickIntensity;
 uniform float u_roleIntensity;
+uniform float u_breath; // Vitality System exhale (0.0 - 1.0)
 
 // 6D rotation matrices - 3D space rotations (XY, XZ, YZ)
 mat4 rotateXY(float theta) {

package/src/shaders/quantum/quantum.frag.wgsl

@@ -28,7 +28,7 @@ struct VIB3Uniforms {
     high: f32,
     layerScale: f32,
     layerOpacity: f32,
-    _pad1: f32,
+    breath: f32,
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,

package/src/viewer/index.js

@@ -5,7 +5,7 @@
  */
 
 export { ViewerPortal, ViewerMode, ProjectionMode } from './ViewerPortal.js';
-export { ReactivityManager } from './ReactivityManager.js';
+export { ReactivityManager } from './ViewerInputHandler.js';
 export { CardBending, BendPreset } from './CardBending.js';
 export { TradingCardExporter, CardSize, FrameStyle, Rarity } from './TradingCardExporter.js';
 export { AudioReactivity, AudioSource, FrequencyBand } from './AudioReactivity.js';

package/tools/headless-renderer.js

@@ -0,0 +1,258 @@
+#!/usr/bin/env node
+
+/**
+ * headless-renderer.js - VIB3+ Headless Frame Capture Utility
+ *
+ * Uses Puppeteer to render VIB3+ visualizations in a headless browser and
+ * capture screenshots. Designed for:
+ * - Agent visual feedback loops (capture → analyze → refine)
+ * - CI visual regression testing
+ * - Thumbnail generation for gallery entries
+ * - Offline batch rendering
+ *
+ * Usage:
+ *   node tools/headless-renderer.js [options]
+ *
+ * Options:
+ *   --url <url>         Dev server URL (default: http://localhost:5173)
+ *   --output <path>     Output directory (default: ./renders)
+ *   --width <px>        Viewport width (default: 512)
+ *   --height <px>       Viewport height (default: 512)
+ *   --params <json>     JSON parameter object to apply
+ *   --system <name>     System: quantum|faceted|holographic
+ *   --geometry <index>  Geometry index 0-23
+ *   --delay <ms>        Wait time after parameter set (default: 500)
+ *   --frames <count>    Number of frames to capture (default: 1)
+ *   --interval <ms>     Interval between frames (default: 100)
+ *   --format <type>     png|jpeg|webp (default: png)
+ *   --base64            Output base64 to stdout instead of file
+ *
+ * Examples:
+ *   # Single frame with custom params
+ *   node tools/headless-renderer.js --system quantum --geometry 11 --params '{"hue":200,"chaos":0.3}'
+ *
+ *   # 10 frames of animation
+ *   node tools/headless-renderer.js --frames 10 --interval 200 --output ./animation
+ *
+ *   # Base64 output for piping to agents
+ *   node tools/headless-renderer.js --base64 --params '{"hue":120}'
+ *
+ * @module tools/headless-renderer
+ * @version 1.0.0
+ */
+
+import { existsSync, mkdirSync } from 'fs';
+import { join, resolve } from 'path';
+
+// Parse CLI arguments
+function parseArgs(argv) {
+    const args = {
+        url: 'http://localhost:5173',
+        output: './renders',
+        width: 512,
+        height: 512,
+        params: null,
+        system: null,
+        geometry: null,
+        delay: 500,
+        frames: 1,
+        interval: 100,
+        format: 'png',
+        base64: false
+    };
+
+    for (let i = 2; i < argv.length; i++) {
+        const flag = argv[i];
+        const next = argv[i + 1];
+
+        switch (flag) {
+            case '--url': args.url = next; i++; break;
+            case '--output': args.output = next; i++; break;
+            case '--width': args.width = parseInt(next, 10); i++; break;
+            case '--height': args.height = parseInt(next, 10); i++; break;
+            case '--params': args.params = JSON.parse(next); i++; break;
+            case '--system': args.system = next; i++; break;
+            case '--geometry': args.geometry = parseInt(next, 10); i++; break;
+            case '--delay': args.delay = parseInt(next, 10); i++; break;
+            case '--frames': args.frames = parseInt(next, 10); i++; break;
+            case '--interval': args.interval = parseInt(next, 10); i++; break;
+            case '--format': args.format = next; i++; break;
+            case '--base64': args.base64 = true; break;
+            case '--help':
+                console.log('Usage: node tools/headless-renderer.js [options]');
+                console.log('See file header for full option list.');
+                process.exit(0);
+        }
+    }
+
+    return args;
+}
+
+async function main() {
+    const args = parseArgs(process.argv);
+
+    // Dynamic import puppeteer (devDependency)
+    let puppeteer;
+    try {
+        puppeteer = await import('puppeteer-core');
+        if (puppeteer.default) puppeteer = puppeteer.default;
+    } catch {
+        try {
+            puppeteer = await import('puppeteer');
+            if (puppeteer.default) puppeteer = puppeteer.default;
+        } catch {
+            console.error('Error: puppeteer or puppeteer-core is required.');
+            console.error('Install with: npm install puppeteer-core');
+            process.exit(1);
+        }
+    }
+
+    // Find Chrome/Chromium
+    const executablePath = findChromium();
+
+    console.log(`[headless-renderer] Launching browser...`);
+    const browser = await puppeteer.launch({
+        headless: 'new',
+        executablePath,
+        args: [
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+            '--disable-dev-shm-usage',
+            '--use-gl=swiftshader',  // Software GPU for headless
+            `--window-size=${args.width},${args.height}`
+        ]
+    });
+
+    const page = await browser.newPage();
+    await page.setViewport({ width: args.width, height: args.height });
+
+    console.log(`[headless-renderer] Loading ${args.url}...`);
+    try {
+        await page.goto(args.url, { waitUntil: 'networkidle2', timeout: 30000 });
+    } catch (err) {
+        console.error(`Error: Could not load ${args.url}`);
+        console.error('Is the dev server running? Start it with: npm run dev');
+        await browser.close();
+        process.exit(1);
+    }
+
+    // Wait for VIB3+ engine to initialize
+    await page.waitForFunction(() => {
+        return typeof window.engine !== 'undefined' ||
+               document.querySelector('canvas') !== null;
+    }, { timeout: 10000 }).catch(() => {
+        console.warn('[headless-renderer] Warning: Engine not detected, capturing anyway');
+    });
+
+    // Apply system switch
+    if (args.system) {
+        console.log(`[headless-renderer] Switching to system: ${args.system}`);
+        await page.evaluate((system) => {
+            if (window.switchSystem) window.switchSystem(system);
+            else if (window.engine?.switchSystem) window.engine.switchSystem(system);
+        }, args.system);
+        await sleep(200);
+    }
+
+    // Apply geometry
+    if (args.geometry !== null) {
+        console.log(`[headless-renderer] Setting geometry: ${args.geometry}`);
+        await page.evaluate((geo) => {
+            if (window.selectGeometry) window.selectGeometry(geo);
+            else if (window.engine?.setParameter) window.engine.setParameter('geometry', geo);
+        }, args.geometry);
+        await sleep(100);
+    }
+
+    // Apply custom parameters
+    if (args.params) {
+        console.log(`[headless-renderer] Applying parameters:`, JSON.stringify(args.params));
+        await page.evaluate((params) => {
+            for (const [key, value] of Object.entries(params)) {
+                if (window.updateParameter) window.updateParameter(key, value);
+                else if (window.engine?.setParameter) window.engine.setParameter(key, value);
+            }
+        }, args.params);
+    }
+
+    // Wait for render to settle
+    console.log(`[headless-renderer] Waiting ${args.delay}ms for render...`);
+    await sleep(args.delay);
+
+    // Wait one animation frame
+    await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+
+    // Capture frames
+    if (!args.base64 && !existsSync(args.output)) {
+        mkdirSync(args.output, { recursive: true });
+    }
+
+    for (let i = 0; i < args.frames; i++) {
+        const screenshot = await page.screenshot({
+            type: args.format === 'jpeg' ? 'jpeg' : 'png',
+            encoding: args.base64 ? 'base64' : 'binary',
+            fullPage: false
+        });
+
+        if (args.base64) {
+            // Output base64 to stdout (for agent consumption)
+            if (args.frames === 1) {
+                process.stdout.write(screenshot);
+            } else {
+                console.log(JSON.stringify({
+                    frame: i,
+                    format: args.format,
+                    data: screenshot
+                }));
+            }
+        } else {
+            const ext = args.format === 'jpeg' ? 'jpg' : args.format;
+            const filename = args.frames === 1
+                ? `capture.${ext}`
+                : `frame_${String(i).padStart(4, '0')}.${ext}`;
+            const filepath = join(resolve(args.output), filename);
+
+            const fs = await import('fs');
+            fs.writeFileSync(filepath, screenshot);
+            console.log(`[headless-renderer] Saved: ${filepath}`);
+        }
+
+        // Wait between frames
+        if (i < args.frames - 1 && args.interval > 0) {
+            await sleep(args.interval);
+            await page.evaluate(() => new Promise(r => requestAnimationFrame(r)));
+        }
+    }
+
+    await browser.close();
+    console.log(`[headless-renderer] Done.`);
+}
+
+function sleep(ms) {
+    return new Promise(r => setTimeout(r, ms));
+}
+
+function findChromium() {
+    const candidates = [
+        '/usr/bin/chromium-browser',
+        '/usr/bin/chromium',
+        '/usr/bin/google-chrome',
+        '/usr/bin/google-chrome-stable',
+        '/snap/bin/chromium',
+        '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+        'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+        'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
+    ];
+
+    for (const path of candidates) {
+        if (existsSync(path)) return path;
+    }
+
+    // Let puppeteer figure it out
+    return undefined;
+}
+
+main().catch(err => {
+    console.error('[headless-renderer] Fatal error:', err.message);
+    process.exit(1);
+});

package/tools/shader-sync-verify.js

@@ -34,7 +34,8 @@ export class ShaderSyncVerifier {
                 'u_rot4dXY', 'u_rot4dXZ', 'u_rot4dYZ',
                 'u_rot4dXW', 'u_rot4dYW', 'u_rot4dZW',
                 'u_gridDensity', 'u_morphFactor', 'u_chaos',
-                'u_speed', 'u_hue', 'u_intensity', 'u_dimension'
+                'u_speed', 'u_hue', 'u_intensity', 'u_dimension',
+                'u_breath' // Exhale feature
             ],
             recommended: [
                 'u_saturation', 'u_mouseIntensity', 'u_clickIntensity',
@@ -590,6 +591,7 @@ uniform float u_rot4dZW;
 uniform float u_mouseIntensity;
 uniform float u_clickIntensity;
 uniform float u_roleIntensity;
+uniform float u_breath;
 void main() { gl_FragColor = vec4(0.0); }
 `;
 
@@ -620,6 +622,7 @@ uniform float u_clickIntensity;
 uniform float u_bass;
 uniform float u_mid;
 uniform float u_high;
+uniform float u_breath;
 void main() { gl_FragColor = vec4(0.0); }
 `;
 
@@ -657,7 +660,7 @@ struct VIB3Uniforms {
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
 `;
@@ -702,6 +705,7 @@ uniform float u_rot4dYZ;
 uniform float u_rot4dXW;
 uniform float u_rot4dYW;
 uniform float u_rot4dZW;
+uniform float u_breath;
 void main() { gl_FragColor = vec4(0.0); }
 `;
 
@@ -739,7 +743,7 @@ struct VIB3Uniforms {
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
 `;
@@ -778,7 +782,7 @@ struct VIB3Uniforms {
     layerColor: vec3<f32>,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
 `;

package/tools/site-analysis/all-reports.json

@@ -0,0 +1,32 @@
+[
+  {
+    "site": "clickerss",
+    "url": "https://www.clickerss.com/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.clickerss.com/\nCall log:\n  - navigating to \"https://www.clickerss.com/\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "facetad",
+    "url": "https://www.facetad.com/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.facetad.com/\nCall log:\n  - navigating to \"https://www.facetad.com/\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "wix-template-3630",
+    "url": "https://www.wix.com/website-template/view/html/3630",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.wix.com/website-template/view/html/3630\nCall log:\n  - navigating to \"https://www.wix.com/website-template/view/html/3630\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "tableside",
+    "url": "https://www.tableside.com.au/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.tableside.com.au/\nCall log:\n  - navigating to \"https://www.tableside.com.au/\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "wix-studio-space",
+    "url": "https://www.wix.com/studio/design/inspiration/space",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://www.wix.com/studio/design/inspiration/space\nCall log:\n  - navigating to \"https://www.wix.com/studio/design/inspiration/space\", waiting until \"networkidle\"\n"
+  },
+  {
+    "site": "simone-webflow",
+    "url": "https://weare-simone.webflow.io/",
+    "error": "page.goto: net::ERR_TUNNEL_CONNECTION_FAILED at https://weare-simone.webflow.io/\nCall log:\n  - navigating to \"https://weare-simone.webflow.io/\", waiting until \"networkidle\"\n"
+  }
+]