lotio 1.1.54 → 1.1.56

package/browser/wasm.js

@@ -1,5 +1,10 @@
 // Load WASM module
 let Module = null;
+let DebugMode = false;
+
+export function setDebugMode(debug) {
+    DebugMode = debug === true;
+}
 
 export async function initLotio(wasmPath = './lotio.wasm', wasmBinary = null) {
     // Load Emscripten module using ESM import
@@ -74,7 +79,9 @@ export async function initLotio(wasmPath = './lotio.wasm', wasmBinary = null) {
         // HEAP arrays should be exported directly, but if not, try to create them
         // First check if they're already available
         if (Module.HEAP8 && Module.HEAP32 && Module.HEAPF32 && Module.HEAPU8) {
-            console.log('HEAP arrays already available');
+            if (DebugMode) {
+                console.log('[WASM] HEAP arrays already available');
+            }
         } else {
             // Try to find the memory buffer
             let memoryBuffer = null;
@@ -105,11 +112,15 @@ export async function initLotio(wasmPath = './lotio.wasm', wasmBinary = null) {
                 Module.HEAPU32 = new Uint32Array(memoryBuffer);
                 Module.HEAPF32 = new Float32Array(memoryBuffer);
                 Module.HEAPF64 = new Float64Array(memoryBuffer);
-                console.log('Created HEAP arrays from memory buffer');
+                if (DebugMode) {
+                    console.log('[WASM] Created HEAP arrays from memory buffer');
+                }
             }
         }
         
-        console.log('Module initialized successfully');
+        if (DebugMode) {
+            console.log('[WASM] Module initialized successfully');
+        }
         return true;
     } catch (error) {
         throw new Error(`Failed to load WASM module: ${error.message}`);
@@ -121,10 +132,21 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
         throw new Error('WASM module not initialized. Call initLotio() first.');
     }
     
+    if (DebugMode) {
+        console.log('[WASM] createAnimation called');
+        console.log('[WASM] Parameters:', {
+            hasJsonData: !!jsonData,
+            jsonDataType: typeof jsonData,
+            hasLayerOverrides: !!layerOverrides,
+            textPadding,
+            textMeasurementMode
+        });
+    }
+    
     // Check if Module has the required functions
     if (!Module._malloc || !Module._free || !Module._lotio_init) {
-        console.error('Module object:', Module);
-        console.error('Available functions:', Object.keys(Module).filter(k => typeof Module[k] === 'function'));
+        console.error('[WASM] Module object:', Module);
+        console.error('[WASM] Available functions:', Object.keys(Module).filter(k => typeof Module[k] === 'function'));
         throw new Error('Module is not properly initialized. Missing _malloc, _free, or _lotio_init functions.');
     }
     
@@ -177,6 +199,13 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
     const jsonStr = typeof jsonData === 'string' ? jsonData : JSON.stringify(jsonData);
     const layerOverridesStr = layerOverrides ? (typeof layerOverrides === 'string' ? layerOverrides : JSON.stringify(layerOverrides)) : null;
     
+    if (DebugMode) {
+        console.log(`[WASM] JSON string length: ${jsonStr.length} bytes`);
+        if (layerOverridesStr) {
+            console.log(`[WASM] Layer overrides string length: ${layerOverridesStr.length} bytes`);
+        }
+    }
+    
     // Convert textMeasurementMode string to integer (0=FAST, 1=ACCURATE, 2=PIXEL_PERFECT)
     const modeStr = String(textMeasurementMode).toLowerCase();
     let modeInt = 1; // Default to ACCURATE
@@ -188,11 +217,21 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
         modeInt = 2;
     }
     
+    if (DebugMode) {
+        console.log(`[WASM] Text measurement mode: "${textMeasurementMode}" -> ${modeInt} (0=FAST, 1=ACCURATE, 2=PIXEL_PERFECT)`);
+        console.log(`[WASM] Text padding: ${textPadding}`);
+    }
+    
     // Allocate memory using exported _malloc
     const jsonPtr = Module._malloc(jsonStr.length + 1);
     if (!jsonPtr) {
         throw new Error('Failed to allocate memory for JSON data');
     }
+    
+    if (DebugMode) {
+        console.log(`[WASM] Allocated ${jsonStr.length + 1} bytes for JSON at pointer ${jsonPtr}`);
+    }
+    
     Module.stringToUTF8(jsonStr, jsonPtr, jsonStr.length + 1);
     
     let layerOverridesPtr = 0;
@@ -204,17 +243,34 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
             throw new Error('Failed to allocate memory for layer overrides');
         }
         layerOverridesLen = layerOverridesStr.length;
+        if (DebugMode) {
+            console.log(`[WASM] Allocated ${layerOverridesStr.length + 1} bytes for layer overrides at pointer ${layerOverridesPtr}`);
+        }
         Module.stringToUTF8(layerOverridesStr, layerOverridesPtr, layerOverridesStr.length + 1);
     }
     
+    let initStartTime;
+    if (DebugMode) {
+        console.log('[WASM] Calling _lotio_init...');
+        initStartTime = performance.now();
+    }
+    
     const result = Module._lotio_init(jsonPtr, jsonStr.length, layerOverridesPtr, layerOverridesLen, textPadding, modeInt);
     
+    if (DebugMode) {
+        const initEndTime = performance.now();
+        console.log(`[WASM] _lotio_init returned: ${result} (${result === 0 ? 'success' : 'error'}) in ${initStartTime ? (initEndTime - initStartTime).toFixed(2) : '?'}ms`);
+    }
+    
     Module._free(jsonPtr);
     if (layerOverridesPtr) {
         Module._free(layerOverridesPtr);
     }
     
     if (result !== 0) {
+        if (DebugMode) {
+            console.error(`[WASM] Animation initialization failed with error code: ${result}`);
+        }
         throw new Error('Failed to initialize animation');
     }
     
@@ -224,6 +280,10 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
     const durationPtr = Module._malloc(4);
     const fpsPtr = Module._malloc(4);
     
+    if (DebugMode) {
+        console.log('[WASM] Getting animation info...');
+    }
+    
     Module._lotio_get_info(widthPtr, heightPtr, durationPtr, fpsPtr);
     
     const info = {
@@ -233,6 +293,10 @@ export function createAnimation(jsonData, layerOverrides = null, textPadding = 0
         fps: Module.HEAPF32[fpsPtr / 4]
     };
     
+    if (DebugMode) {
+        console.log('[WASM] Animation info retrieved:', info);
+    }
+    
     Module._free(widthPtr);
     Module._free(heightPtr);
     Module._free(durationPtr);
@@ -246,6 +310,10 @@ export function renderFrameRGBA(time) {
         throw new Error('WASM module not initialized.');
     }
     
+    if (DebugMode) {
+        console.log(`[WASM] renderFrameRGBA called for time: ${time.toFixed(3)}s`);
+    }
+    
     // Ensure HEAP arrays are available - use same logic as createAnimation
     if (!Module.HEAP32 || !Module.HEAPU8) {
         let memoryBuffer = null;
@@ -283,8 +351,20 @@ export function renderFrameRGBA(time) {
     const bufferSize = width * height * 4; // RGBA
     const bufferPtr = Module._malloc(bufferSize);
     
+    let renderStartTime;
+    if (DebugMode) {
+        console.log(`[WASM] Allocated ${bufferSize} bytes (${width}x${height} RGBA) at pointer ${bufferPtr}`);
+        console.log(`[WASM] Calling _lotio_render_frame...`);
+        renderStartTime = performance.now();
+    }
+    
     const result = Module._lotio_render_frame(time, bufferPtr, bufferSize);
     
+    if (DebugMode) {
+        const renderEndTime = performance.now();
+        console.log(`[WASM] _lotio_render_frame returned: ${result} (${result === 0 ? 'success' : 'error'}) in ${renderStartTime ? (renderEndTime - renderStartTime).toFixed(2) : '?'}ms`);
+    }
+    
     if (result !== 0) {
         Module._free(bufferPtr);
         const errorMsg = result === 1 ? 'Animation not initialized' :
@@ -295,6 +375,9 @@ export function renderFrameRGBA(time) {
                         result === 6 ? 'Failed to create conversion surface' :
                         result === 7 ? 'Failed to create converted image' :
                         `Unknown error: ${result}`;
+        if (DebugMode) {
+            console.error(`[WASM] Render error: ${errorMsg} (code ${result})`);
+        }
         throw new Error(`Failed to render frame: ${errorMsg} (code ${result})`);
     }
     
@@ -304,33 +387,122 @@ export function renderFrameRGBA(time) {
     // Create a copy to avoid issues with memory being freed
     const rgba = new Uint8Array(bufferView);
     
-    // Debug: Check if we got any non-zero pixels
-    let nonZeroPixels = 0;
-    let maxValue = 0;
-    for (let i = 0; i < Math.min(rgba.length, 1000); i++) {
-        if (rgba[i] !== 0) {
-            nonZeroPixels++;
-            maxValue = Math.max(maxValue, rgba[i]);
+    // Debug: Sum ALL pixel data to check if everything is transparent
+    // This checks the ENTIRE frame (0,0 to width,height) - slow but 100% confidence
+    // Prints per frame/each frame
+    if (DebugMode) {
+        const pixelCount = rgba.length / 4;
+        let totalSum = 0;
+        let rSum = 0, gSum = 0, bSum = 0, aSum = 0;
+        let nonZeroPixels = 0;
+        let opaquePixels = 0;
+        let transparentPixels = 0;
+        
+        // Sum all pixels in the entire frame (0,0 to width,height)
+        for (let i = 0; i < rgba.length; i += 4) {
+            const r = rgba[i];
+            const g = rgba[i + 1];
+            const b = rgba[i + 2];
+            const a = rgba[i + 3];
+            
+            totalSum += r + g + b + a;
+            rSum += r;
+            gSum += g;
+            bSum += b;
+            aSum += a;
+            
+            if (r !== 0 || g !== 0 || b !== 0 || a !== 0) {
+                nonZeroPixels++;
+            }
+            if (a === 255) {
+                opaquePixels++;
+            } else if (a === 0) {
+                transparentPixels++;
+            }
+        }
+        
+        console.log(`[WASM] Frame ${time.toFixed(3)}s - Full frame pixel sum check (${width}x${height} = ${pixelCount} pixels, 0,0 to ${width},${height}):`);
+        console.log(`[WASM]   Total sum of all RGBA values: ${totalSum}`);
+        console.log(`[WASM]   Non-zero pixels: ${nonZeroPixels} / ${pixelCount} (${(nonZeroPixels / pixelCount * 100).toFixed(2)}%)`);
+        console.log(`[WASM]   Opaque pixels: ${opaquePixels} (${(opaquePixels / pixelCount * 100).toFixed(2)}%)`);
+        console.log(`[WASM]   Transparent pixels: ${transparentPixels} (${(transparentPixels / pixelCount * 100).toFixed(2)}%)`);
+        console.log(`[WASM]   Average per channel: R=${(rSum / pixelCount).toFixed(2)}, G=${(gSum / pixelCount).toFixed(2)}, B=${(bSum / pixelCount).toFixed(2)}, A=${(aSum / pixelCount).toFixed(2)}`);
+        
+        if (totalSum === 0) {
+            console.warn(`[WASM]   ⚠️ WARNING: Sum is 0 - ALL ${pixelCount} pixels are completely transparent (R=0, G=0, B=0, A=0)`);
+            console.warn(`[WASM]   This confirms that Skottie render() produced NO visible content`);
+        } else if (nonZeroPixels === 0) {
+            console.warn(`[WASM]   ⚠️ WARNING: No non-zero pixels found despite non-zero sum (sum=${totalSum})`);
+        } else {
+            console.log(`[WASM]   ✓ Frame has visible content: ${nonZeroPixels} pixels with non-zero values`);
         }
     }
     
-    // Sample a few pixels from the center
-    const centerX = Math.floor(width / 2);
-    const centerY = Math.floor(height / 2);
-    const centerIdx = (centerY * width + centerX) * 4;
-    const centerPixel = centerIdx < rgba.length ? [
-        rgba[centerIdx],
-        rgba[centerIdx + 1],
-        rgba[centerIdx + 2],
-        rgba[centerIdx + 3]
-    ] : [0, 0, 0, 0];
-    
-    if (nonZeroPixels === 0) {
-        console.warn(`[WASM] Warning: All pixels are zero! Frame at time ${time} may be empty.`);
-        console.warn(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
-    } else {
-        console.log(`[WASM] Frame rendered: ${nonZeroPixels} non-zero pixels found, max value: ${maxValue}`);
-        console.log(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
+    // Debug: Check if we got any non-zero pixels (sampling approach - faster but less thorough)
+    if (DebugMode) {
+        let nonZeroPixels = 0;
+        let maxValue = 0;
+        for (let i = 0; i < Math.min(rgba.length, 1000); i++) {
+            if (rgba[i] !== 0) {
+                nonZeroPixels++;
+                maxValue = Math.max(maxValue, rgba[i]);
+            }
+        }
+        
+        // Sample a few pixels from the center
+        const centerX = Math.floor(width / 2);
+        const centerY = Math.floor(height / 2);
+        const centerIdx = (centerY * width + centerX) * 4;
+        const centerPixel = centerIdx < rgba.length ? [
+            rgba[centerIdx],
+            rgba[centerIdx + 1],
+            rgba[centerIdx + 2],
+            rgba[centerIdx + 3]
+        ] : [0, 0, 0, 0];
+        
+        // Sample corner pixels too
+        const topLeftPixel = [
+            rgba[0],
+            rgba[1],
+            rgba[2],
+            rgba[3]
+        ];
+        const bottomRightIdx = (height - 1) * width * 4 + (width - 1) * 4;
+        const bottomRightPixel = bottomRightIdx < rgba.length ? [
+            rgba[bottomRightIdx],
+            rgba[bottomRightIdx + 1],
+            rgba[bottomRightIdx + 2],
+            rgba[bottomRightIdx + 3]
+        ] : [0, 0, 0, 0];
+        
+        if (nonZeroPixels === 0) {
+            console.warn(`[WASM] ⚠️ WARNING: All pixels are zero! Frame at time ${time.toFixed(3)}s is completely transparent.`);
+            console.warn(`[WASM] This suggests the animation may be empty or have no visible layers.`);
+            console.warn(`[WASM] Possible causes:`);
+            console.warn(`[WASM]   1. Animation JSON has no visible layers or all layers are hidden`);
+            console.warn(`[WASM]   2. Animation inPoint >= outPoint (no valid frame range)`);
+            console.warn(`[WASM]   3. Animation duration is 0 or invalid`);
+            console.warn(`[WASM]   4. Animation rendering failed silently`);
+            console.warn(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
+            console.warn(`[WASM] Top-left pixel: [${topLeftPixel.join(', ')}]`);
+            console.warn(`[WASM] Bottom-right pixel: [${bottomRightPixel.join(', ')}]`);
+        } else {
+            console.log(`[WASM] Frame rendered at time ${time.toFixed(3)}s: ${nonZeroPixels} non-zero pixels found, max value: ${maxValue}`);
+            console.log(`[WASM] Center pixel (${centerX}, ${centerY}): [${centerPixel.join(', ')}]`);
+            console.log(`[WASM] Top-left pixel: [${topLeftPixel.join(', ')}]`);
+            console.log(`[WASM] Bottom-right pixel: [${bottomRightPixel.join(', ')}]`);
+            
+            // Check alpha channel distribution
+            let opaquePixels = 0;
+            let transparentPixels = 0;
+            let semiTransparentPixels = 0;
+            for (let i = 3; i < Math.min(rgba.length, 10000); i += 4) {
+                if (rgba[i] === 0) transparentPixels++;
+                else if (rgba[i] === 255) opaquePixels++;
+                else semiTransparentPixels++;
+            }
+            console.log(`[WASM] Alpha channel stats (first 10k pixels): opaque=${opaquePixels}, transparent=${transparentPixels}, semi-transparent=${semiTransparentPixels}`);
+        }
     }
     
     Module._free(bufferPtr);
@@ -402,12 +574,54 @@ export function cleanup() {
 
 // Helper to render frame to canvas
 export function renderFrameToCanvas(canvas, time, bgColor = '#2a2a2a') {
+    // Validate and fix background color BEFORE using it
+    if (!bgColor || bgColor === 'transparent' || bgColor === 'undefined' || bgColor === 'null' || typeof bgColor !== 'string') {
+        if (DebugMode) {
+            console.warn(`[Canvas] WARNING: Background color is invalid (${bgColor})! Using default #2a2a2a`);
+        }
+        bgColor = '#2a2a2a';
+    }
+    
     const { rgba, width, height } = renderFrameRGBA(time);
     
-    // Set canvas size
+    // Validate dimensions
+    if (width <= 0 || height <= 0) {
+        console.error(`[Canvas] ERROR: Invalid animation dimensions: ${width}x${height}`);
+        throw new Error(`Invalid animation dimensions: ${width}x${height}`);
+    }
+    
+    // Check if RGBA data is all zeros (completely transparent)
+    let rgbaSum = 0;
+    let nonZeroPixels = 0;
+    for (let i = 0; i < Math.min(rgba.length, 10000); i += 4) {
+        const r = rgba[i];
+        const g = rgba[i + 1];
+        const b = rgba[i + 2];
+        const a = rgba[i + 3];
+        rgbaSum += r + g + b + a;
+        if (r !== 0 || g !== 0 || b !== 0 || a !== 0) {
+            nonZeroPixels++;
+        }
+    }
+    
+    if (rgbaSum === 0) {
+        console.warn(`[Canvas] ⚠️ WARNING: RGBA data is completely transparent (all zeros) for frame at time ${time.toFixed(3)}s`);
+        console.warn(`[Canvas] This means the animation rendered but produced no visible content`);
+        console.warn(`[Canvas] Check your Lottie JSON - it may have no visible layers or all layers are hidden`);
+    } else if (DebugMode) {
+        console.log(`[Canvas] RGBA data check: sum=${rgbaSum}, non-zero pixels (first 10k): ${nonZeroPixels}`);
+    }
+    
+    // Set canvas size (this will reset the canvas, so do it before getting context)
+    const oldWidth = canvas.width;
+    const oldHeight = canvas.height;
     canvas.width = width;
     canvas.height = height;
     
+    if (DebugMode && (oldWidth !== width || oldHeight !== height)) {
+        console.log(`[Canvas] Canvas size changed from ${oldWidth}x${oldHeight} to ${width}x${height}`);
+    }
+    
     const ctx = canvas.getContext('2d');
     
     // Fill with background color first
@@ -423,22 +637,27 @@ export function renderFrameToCanvas(canvas, time, bgColor = '#2a2a2a') {
     }
     
     // Debug: Check if imageData is being populated
-    const beforeSet = imageData.data[0];
-    imageData.data.set(rgba);
-    const afterSet = imageData.data[0];
-    
-    // Check a few sample pixels
-    const sampleIdx = Math.floor((height / 2) * width + width / 2) * 4;
-    const samplePixel = sampleIdx < imageData.data.length ? [
-        imageData.data[sampleIdx],
-        imageData.data[sampleIdx + 1],
-        imageData.data[sampleIdx + 2],
-        imageData.data[sampleIdx + 3]
-    ] : [0, 0, 0, 0];
-    
-    console.log(`[Canvas] Rendering frame at time ${time}, size: ${width}x${height}`);
-    console.log(`[Canvas] Sample pixel at center: [${samplePixel.join(', ')}]`);
-    console.log(`[Canvas] ImageData first byte before set: ${beforeSet}, after set: ${afterSet}`);
+    if (DebugMode) {
+        const beforeSet = imageData.data[0];
+        imageData.data.set(rgba);
+        const afterSet = imageData.data[0];
+        
+        // Check a few sample pixels
+        const sampleIdx = Math.floor((height / 2) * width + width / 2) * 4;
+        const samplePixel = sampleIdx < imageData.data.length ? [
+            imageData.data[sampleIdx],
+            imageData.data[sampleIdx + 1],
+            imageData.data[sampleIdx + 2],
+            imageData.data[sampleIdx + 3]
+        ] : [0, 0, 0, 0];
+        
+        console.log(`[Canvas] Rendering frame at time ${time.toFixed(3)}s, size: ${width}x${height}`);
+        console.log(`[Canvas] Sample pixel at center: [${samplePixel.join(', ')}]`);
+        console.log(`[Canvas] ImageData first byte before set: ${beforeSet}, after set: ${afterSet}`);
+        console.log(`[Canvas] Background color used: ${bgColor}`);
+    } else {
+        imageData.data.set(rgba);
+    }
     
     // Create a temporary canvas to composite the image over the background
     // This ensures the background color shows through transparent areas
@@ -454,22 +673,113 @@ export function renderFrameToCanvas(canvas, time, bgColor = '#2a2a2a') {
     // Draw the RGBA image data on top
     tempCtx.putImageData(imageData, 0, 0);
     
-    // Debug: Check what's actually on the temp canvas
-    const tempImageData = tempCtx.getImageData(0, 0, width, height);
-    const tempSamplePixel = sampleIdx < tempImageData.data.length ? [
-        tempImageData.data[sampleIdx],
-        tempImageData.data[sampleIdx + 1],
-        tempImageData.data[sampleIdx + 2],
-        tempImageData.data[sampleIdx + 3]
-    ] : [0, 0, 0, 0];
-    console.log(`[Canvas] Temp canvas sample pixel: [${tempSamplePixel.join(', ')}]`);
+    // Calculate and print sum of all pixels from temp canvas (before drawing to main canvas)
+    if (DebugMode) {
+        const tempImageData = tempCtx.getImageData(0, 0, width, height);
+        let totalSum = 0;
+        let rSum = 0, gSum = 0, bSum = 0, aSum = 0;
+        
+        for (let i = 0; i < tempImageData.data.length; i += 4) {
+            const r = tempImageData.data[i];
+            const g = tempImageData.data[i + 1];
+            const b = tempImageData.data[i + 2];
+            const a = tempImageData.data[i + 3];
+            
+            totalSum += r + g + b + a;
+            rSum += r;
+            gSum += g;
+            bSum += b;
+            aSum += a;
+        }
+        
+        const pixelCount = tempImageData.data.length / 4;
+        console.log(`[Canvas] Frame ${time.toFixed(3)}s - Temp canvas sum (${width}x${height} = ${pixelCount} pixels): Total=${totalSum}, R=${rSum}, G=${gSum}, B=${bSum}, A=${aSum}`);
+    }
     
     // Draw the composited result to the main canvas
     ctx.drawImage(tempCanvas, 0, 0);
     
-    // Final check: verify what's on the main canvas
-    const finalImageData = ctx.getImageData(0, 0, Math.min(width, 10), Math.min(height, 10));
-    console.log(`[Canvas] Final canvas first 10x10 pixels sample: [${Array.from(finalImageData.data.slice(0, 16)).join(', ')}]`);
+    // Print per frame - always show frame info
+    console.log(`[Canvas] Frame ${time.toFixed(3)}s - Rendering at coordinates: 0,0 to ${width},${height}`);
+    
+    // Final check: verify what's on the main canvas - check ENTIRE frame (0,0 to width,height)
+    // This is different from the temp canvas check above - this checks the final result after drawing
+    if (DebugMode) {
+        // Get the entire canvas image data (0,0 to width,height)
+        const fullImageData = ctx.getImageData(0, 0, width, height);
+        
+        // Sum all pixel data to check if everything is transparent
+        // This is slow but gives 100% confidence for the entire frame
+        let totalSum = 0;
+        let rSum = 0, gSum = 0, bSum = 0, aSum = 0;
+        let nonZeroPixels = 0;
+        let opaquePixels = 0;
+        let transparentPixels = 0;
+        
+        for (let i = 0; i < fullImageData.data.length; i += 4) {
+            const r = fullImageData.data[i];
+            const g = fullImageData.data[i + 1];
+            const b = fullImageData.data[i + 2];
+            const a = fullImageData.data[i + 3];
+            
+            totalSum += r + g + b + a;
+            rSum += r;
+            gSum += g;
+            bSum += b;
+            aSum += a;
+            
+            if (r !== 0 || g !== 0 || b !== 0 || a !== 0) {
+                nonZeroPixels++;
+            }
+            if (a === 255) {
+                opaquePixels++;
+            } else if (a === 0) {
+                transparentPixels++;
+            }
+        }
+        
+        const pixelCount = fullImageData.data.length / 4;
+        
+        console.log(`[Canvas] Frame ${time.toFixed(3)}s - Full frame analysis (${width}x${height} = ${pixelCount} pixels):`);
+        console.log(`[Canvas]   Total sum of all RGBA values: ${totalSum}`);
+        console.log(`[Canvas]   Non-zero pixels: ${nonZeroPixels} / ${pixelCount} (${(nonZeroPixels / pixelCount * 100).toFixed(2)}%)`);
+        console.log(`[Canvas]   Opaque pixels: ${opaquePixels} (${(opaquePixels / pixelCount * 100).toFixed(2)}%)`);
+        console.log(`[Canvas]   Transparent pixels: ${transparentPixels} (${(transparentPixels / pixelCount * 100).toFixed(2)}%)`);
+        console.log(`[Canvas]   Average per channel: R=${(rSum / pixelCount).toFixed(2)}, G=${(gSum / pixelCount).toFixed(2)}, B=${(bSum / pixelCount).toFixed(2)}, A=${(aSum / pixelCount).toFixed(2)}`);
+        
+        if (totalSum === 0) {
+            console.warn(`[Canvas]   ⚠️ WARNING: Sum is 0 - ALL ${pixelCount} pixels are completely transparent (R=0, G=0, B=0, A=0)`);
+            console.warn(`[Canvas]   This confirms the frame has NO visible content - only background color is showing`);
+        } else if (nonZeroPixels === 0) {
+            console.warn(`[Canvas]   ⚠️ WARNING: No non-zero pixels found despite non-zero sum (sum=${totalSum})`);
+        } else {
+            console.log(`[Canvas]   ✓ Frame has visible content: ${nonZeroPixels} pixels with non-zero values`);
+        }
+        
+        // Sample a few key pixels for reference
+        const centerX = Math.floor(width / 2);
+        const centerY = Math.floor(height / 2);
+        const centerIdx = (centerY * width + centerX) * 4;
+        const centerPixel = [
+            fullImageData.data[centerIdx],
+            fullImageData.data[centerIdx + 1],
+            fullImageData.data[centerIdx + 2],
+            fullImageData.data[centerIdx + 3]
+        ];
+        
+        // Text region sample (bottom-center)
+        const textRegionY = Math.floor(height * 0.78);
+        const textRegionX = Math.floor(width / 2);
+        const textIdx = (textRegionY * width + textRegionX) * 4;
+        const textPixel = [
+            fullImageData.data[textIdx],
+            fullImageData.data[textIdx + 1],
+            fullImageData.data[textIdx + 2],
+            fullImageData.data[textIdx + 3]
+        ];
+        
+        console.log(`[Canvas]   Sample pixels: center(${centerX},${centerY})=[${centerPixel.join(',')}], text-region(${textRegionX},${textRegionY})=[${textPixel.join(',')}]`);
+    }
 }
 
 // Helper to render frame as ImageData

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lotio",
-  "version": "1.1.54",
+  "version": "1.1.56",
   "description": "High-performance Lottie animation frame renderer for the browser",
   "main": "browser/index.js",
   "module": "browser/index.js",