Spaces:

GuglielmoTor
/

LinkedinMonitor

Running

App Files Files Community

GuglielmoTor commited on 19 days ago

Commit

fc169c4

verified ·

1 Parent(s): 51b5851

Update sync_animation.html

Browse files

Files changed (1) hide show

sync_animation.html +126 -212

sync_animation.html CHANGED Viewed

@@ -5,89 +5,73 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CMD Ingaze Reveal Animation</title>
     <style>
         body {
-            background-color: #000000; /* Black background */
             color: #00FF00; /* Bright green text */
             font-family: 'Courier New', Courier, monospace; /* Classic CMD font */
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh; /* Make body fill viewport height */
-            margin: 0;
-            overflow: hidden; /* Prevent scrollbars */
         }
         #cmd-animation-container {
-            padding: 20px;
             border: 2px solid #00AA00; /* Darker green border */
             background-color: #080808; /* Slightly off-black for the "screen" */
-            box-shadow: 0 0 15px #00FF00; /* Green glow effect */
             border-radius: 8px; /* Rounded corners for the container */
-            /* Ensure the container doesn't exceed viewport width if content is too wide */
-            max-width: 95vw;
             box-sizing: border-box; /* Include padding and border in the element's total width and height */
         }
         pre#cmd-animation {
             white-space: pre; /* Preserve whitespace and newlines */
             text-align: left;
-            font-size: 14px; /* Adjusted for better fit */
-            line-height: 1.1; /* Compact lines */
             margin: 0;
             overflow-x: auto; /* Add scroll if content is wider than container */
         }
     </style>
 </head>
 <body>
     <div id="cmd-animation-container">
-        <pre id="cmd-animation"></pre>
     </div>
     <script>
         // --- Configuration ---
-        const scene_width = 65; // Characters, increased for Ingaze logo
         const scene_height = 22; // Lines
         const frameDuration = 150; // Milliseconds per frame
-        const MAX_DATA_PARTICLES = 150;
         const FLOOR_LEVEL = scene_height - 1;
         // --- ASCII Art Definitions ---
         const stick_man_art_normal = ["   O   ", "  /|\\  ", "  / \\  "];
         const stick_man_art_walk_1 = ["   O   ", "  /|\\  ", "  / >  "];
         const stick_man_art_walk_2 = ["   O   ", "  /|\\  ", " < \\  "];
-        const stick_man_art_surprise = ["  \\O/  ", "   |   ", "  / \\  "]; // Stickman surprised by lightning/explosion
-        const stick_man_art_gone = ["       ", "       ", "       "]; // For when stickman disappears
         const linked_in_art = ["+----+", "|i n |", "+----+"];
-        const linked_in_art_hit = ["x----x", "|BOOM|", "x----x"]; // When hit by lightning
-        const lightning_strike_segment = "\\"; // Simple segment for descending lightning
-        const explosion_symbols = ['*', '#', '@', '!', '%', '&', 'X', 'O', '$', '+', '~'];
         const explosion_art_frames = [
-            // Frame 1: Small impact
-            [
-                "   * ",
-                "  *#* ",
-                "   * "
-            ],
-            // Frame 2: Expanding
-            [
-                "  @!%  ",
-                " @*#*& ",
-                "  X%O  "
-            ],
-            // Frame 3: Larger and more chaotic
-            [
-                " $*~+@ ",
-                "$#@!%*&",
-                " X*O#~ ",
-                "  !+%$ "
-            ],
-            // Frame 4: Fading / contracting
-            [
-                "   ~   ",
-                "  +*%  ",
-                "   $   "
-            ]
         ];
         const ingaze_logo_art = [
@@ -100,10 +84,9 @@
         const ingaze_logo_width = ingaze_logo_art[0].length;
         const ingaze_logo_height = ingaze_logo_art.length;
-        // --- Global State ---
-        let data_particles = []; // {char, x, y, vy, active}
-        let current_lightning_y = -1; // Y position of the lightning tip, -1 means not active
         // --- Helper Functions ---
         function overlay(baseLines, artLines, startX, startY, ignoreSpaces = true) {
@@ -123,12 +106,12 @@
             });
         }
-        function drawLightningBolt(sceneLines, tipX, tipY, length) {
             for (let i = 0; i < length; i++) {
                 const y = tipY - i;
-                const x = tipX + (i % 2 === 0 ? 0 : (i % 4 === 1 ? -1 : 1)); // Simple zig-zag
                 if (y >= 0 && y < scene_height && x >= 0 && x < scene_width) {
-                    if (sceneLines[y][x] === ' ') { // Avoid overwriting other elements if possible
                         let lineArr = sceneLines[y].split('');
                         lineArr[x] = lightning_strike_segment;
                         sceneLines[y] = lineArr.join('');
@@ -137,15 +120,13 @@
             }
         }
-        function buildScene(stickmanArt, stickmanPos, showLogo, currentLogoArt, currentLogoPos,
                               showLightningBolt, lightningTipX, lightningTipY, lightningLength,
                               currentExplosionArt, explosionPos,
                               showIngazeLogo, ingazeArt, ingazePos) {
             let sceneLines = Array(scene_height).fill(" ".repeat(scene_width));
-            // 1. Data particles (drawn first, can be overwritten)
-            data_particles.forEach(p => {
                 const px = Math.round(p.x);
                 const py = Math.round(p.y);
                 if (py >= 0 && py < sceneLines.length && px >= 0 && px < scene_width) {
@@ -157,49 +138,32 @@
                 }
             });
-            // 2. Stickman
             overlay(sceneLines, stickmanArt, stickmanPos.x, stickmanPos.y);
-            // 3. LinkedIn Logo
-            if (showLogo) {
-                overlay(sceneLines, currentLogoArt, currentLogoPos.x, currentLogoPos.y);
-            }
-            // 4. Lightning Bolt
             if (showLightningBolt && lightningTipY >=0) {
-                drawLightningBolt(sceneLines, lightningTipX, lightningTipY, lightningLength);
             }
-            // 5. Explosion
             if (currentExplosionArt && currentExplosionArt.length > 0) {
-                overlay(sceneLines, currentExplosionArt, explosionPos.x, explosionPos.y, false); // false: allow spaces in explosion art
-            }
-            // 6. Ingaze Logo
-            if (showIngazeLogo) {
-                overlay(sceneLines, ingazeArt, ingazePos.x, ingazePos.y);
             }
             return sceneLines.join('\n');
         }
-        function spawnDataParticle(logoX, logoY, logoWidth) {
-            if (data_particles.length >= MAX_DATA_PARTICLES) return;
             const char = Math.random() > 0.5 ? '1' : '0';
             const x = logoX + 1 + Math.floor(Math.random() * (logoWidth - 2));
             const y = logoY + linked_in_art.length;
             const vy = 0.2 + Math.random() * 0.3;
-            data_particles.push({ char, x, y, vy, active: true });
         }
-        // --- Animation Sequence Generation ---
-        // This function generates all frames once and stores them.
         function generateAnimationFrames() {
             const sequence = [];
-            // Reset global state that might persist across generations if this is called multiple times
-            data_particles = [];
-            current_lightning_y = -1;
             const stickman_height = stick_man_art_normal.length;
             const stickman_width = stick_man_art_normal[0].length;
@@ -207,14 +171,11 @@
             const logo_height = linked_in_art.length;
             const stickman_base_y = FLOOR_LEVEL - stickman_height;
-            const logo_base_y = stickman_base_y;
             const stickman_initial_pos = { x: 2, y: stickman_base_y };
-            // Adjusted logo_initial_pos to be more to the right to give stickman space
-            const logo_initial_pos = { x: scene_width - logo_width - 20, y: logo_base_y };
-            const stickman_walk_target_x = logo_initial_pos.x - stickman_width - 1;
             const ingaze_pos = {
                 x: Math.floor((scene_width - ingaze_logo_width) / 2),
                 y: Math.floor((scene_height - ingaze_logo_height) / 2)
@@ -222,100 +183,66 @@
             const explosion_center_x = logo_initial_pos.x + Math.floor(logo_width / 2);
             const explosion_center_y = logo_initial_pos.y + Math.floor(logo_height / 2);
-            // Phase 0: Stickman Walks to Logo
-            // Ensure stickman_walk_target_x is not less than initial_pos.x if logo is too far left
-            const target_x_for_walk = Math.max(stickman_initial_pos.x + 1, stickman_walk_target_x);
-            const walk_frames = Math.max(10, Math.floor(Math.abs(target_x_for_walk - stickman_initial_pos.x) / 1.2) );
             let current_stickman_x = stickman_initial_pos.x;
-             // Ensure walk_step_x is not NaN if walk_frames is 0 (though it's max(10, ...))
-            const walk_step_x = walk_frames > 0 ? (target_x_for_walk - stickman_initial_pos.x) / walk_frames : 0;
             for (let i = 0; i < walk_frames; i++) {
                 current_stickman_x += walk_step_x;
                 const walk_art = (i % 4 < 2) ? stick_man_art_walk_1 : stick_man_art_walk_2;
-                sequence.push(buildScene(walk_art, { x: Math.round(current_stickman_x), y: stickman_base_y }, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
-            current_stickman_x = target_x_for_walk;
-            let current_stickman_pos = { x: current_stickman_x, y: stickman_base_y };
-            // Phase 1: Pause before shake
             for (let i = 0; i < 3; i++) {
-                sequence.push(buildScene(stick_man_art_normal, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
-            // Phase 2: Shaking LinkedIn & Data Fall
             let current_logo_pos_phase2 = { ...logo_initial_pos };
-            const shake_frames = 25;
             for (let i = 0; i < shake_frames; i++) {
                 let logoAdj = { x: 0, y: 0 };
                 if (i % 6 < 2) logoAdj = { x: 1, y: 0 }; else if (i % 6 < 4) logoAdj = { x: -1, y: 0 };
                 current_logo_pos_phase2.x = logo_initial_pos.x + logoAdj.x;
-                if (i % 2 === 0) spawnDataParticle(current_logo_pos_phase2.x, current_logo_pos_phase2.y, logo_width);
-                // Create a new array for data_particles to update positions for this frame
-                let next_frame_particles = [];
-                data_particles.forEach(p => {
-                    let new_p = {...p};
-                    if (new_p.active) {
-                        new_p.y += new_p.vy;
-                        if (new_p.y >= FLOOR_LEVEL) {
-                            new_p.y = FLOOR_LEVEL;
-                            new_p.vy = 0;
-                            new_p.active = false;
-                        }
-                    }
-                    next_frame_particles.push(new_p);
                 });
-                data_particles = next_frame_particles; // Update global particles for next frame generation
-                sequence.push(buildScene(stick_man_art_normal, current_stickman_pos, true, linked_in_art, current_logo_pos_phase2, false,0,0,0, [], {}, false, [], {}));
             }
-            current_logo_pos_phase2 = { ...logo_initial_pos }; // Reset logo position
-            // Phase 3: Data Settles, Stickman gets ready for impact
-            const settle_frames = 10;
             for (let i = 0; i < settle_frames; i++) {
                 let stickmanArtPhase3 = (i < settle_frames / 2) ? stick_man_art_normal : stick_man_art_surprise;
-                let next_frame_particles_settle = [];
-                data_particles.forEach(p => { // Ensure all particles settle
-                    let new_p = {...p};
-                    if (new_p.active) {
-                        new_p.y += new_p.vy;
-                        if (new_p.y >= FLOOR_LEVEL) {
-                            new_p.y = FLOOR_LEVEL;
-                            new_p.vy = 0;
-                            new_p.active = false;
-                        }
-                    }
-                    next_frame_particles_settle.push(new_p);
                 });
-                data_particles = next_frame_particles_settle;
-                sequence.push(buildScene(stickmanArtPhase3, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
             // Phase 4: Lightning Strike
             const lightning_target_y = logo_initial_pos.y;
-            const lightning_strike_frames = lightning_target_y + 3;
-            const lightning_bolt_length = 5;
             const lightning_tip_x_strike = logo_initial_pos.x + Math.floor(logo_width / 2);
-            let frame_lightning_y = 0;
             for (let i = 0; i < lightning_strike_frames; i++) {
-                frame_lightning_y = i;
                 let logo_art_to_use = linked_in_art;
-                if (frame_lightning_y >= lightning_target_y) {
                     logo_art_to_use = linked_in_art_hit;
-                    frame_lightning_y = lightning_target_y;
                 }
-                // Update current_lightning_y for buildScene to use
-                current_lightning_y = frame_lightning_y;
-                sequence.push(buildScene(stick_man_art_surprise, current_stickman_pos, true, logo_art_to_use, logo_initial_pos, true, lightning_tip_x_strike, current_lightning_y, lightning_bolt_length, [], {}, false, [], {}));
             }
-            current_lightning_y = -1; // Lightning done for buildScene logic
             // Phase 5: Explosion
             const explosion_duration_per_frame = 2;
@@ -328,99 +255,86 @@
                     x: explosion_center_x - Math.floor(explosion_art_width / 2),
                     y: explosion_center_y - Math.floor(explosion_art_height / 2)
                 };
                 for (let j = 0; j < explosion_duration_per_frame; j++) {
                     if (i === 0 && j === 0) {
-                        data_particles = []; // Clear all data particles for buildScene
                         stickman_art_explosion = stick_man_art_gone;
                     }
-                    sequence.push(buildScene(stickman_art_explosion, current_stickman_pos, false, [], {}, false,0,0,0, explosion_art, current_explosion_pos, false, [], {}));
                 }
             }
             // Phase 6: "Ingaze" Logo Reveal
-            const ingaze_reveal_pause_frames = 5;
             for(let i=0; i < ingaze_reveal_pause_frames; i++) {
-                sequence.push(buildScene(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, false, [], {}));
             }
-            const ingaze_display_frames = 30;
             for (let i = 0; i < ingaze_display_frames; i++) {
-                sequence.push(buildScene(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, true, ingaze_logo_art, ingaze_pos));
             }
             return sequence;
         }
         // --- Animation Player ---
         const animationElement = document.getElementById('cmd-animation');
-        let currentFrame = 0;
-        let animationInterval;
-        let staticAnimationFrames = []; // Will hold the pre-generated frames
-        function playAnimation() {
-            // Ensure frames are generated before playing
-            if (staticAnimationFrames.length === 0) {
-                console.error("Animation frames not generated yet!");
-                if(animationElement) animationElement.textContent = "Error: Animation frames missing.";
                 return;
             }
-            animationInterval = setInterval(() => {
-                if (animationElement && staticAnimationFrames[currentFrame]) {
-                    animationElement.textContent = staticAnimationFrames[currentFrame];
                 }
-                currentFrame++;
-                if (currentFrame >= staticAnimationFrames.length) {
-                    currentFrame = 0; // Loop animation
-                    // Re-initialize particle state for a clean loop if it's not handled by generation
-                    // The generateAnimationFrames function now resets particles at its start.
-                    // For a true visual loop, we might need to call generateAnimationFrames() again
-                    // or design the particle logic to reset cleanly on loop.
-                    // For now, a simple frame loop is implemented.
-                    // If generateAnimationFrames is heavy, avoid calling it every loop.
-                    // The current logic in generateAnimationFrames resets data_particles at the beginning.
-                    // To make the loop truly seamless with dynamic particles, the generation logic
-                    // would need to be part of the loop or the state reset more carefully.
-                    // Given the current structure, we'll loop the pre-generated sequence.
                 }
             }, frameDuration);
         }
-        // Initialize and start animation
-        // Using a self-invoking function or ensuring DOM is ready
-        (function() {
-            // Check if the DOM is already loaded
-            if (document.readyState === "complete" || document.readyState === "interactive") {
-                initAnimation();
-            } else {
-                window.addEventListener('DOMContentLoaded', initAnimation);
-            }
-        })();
-        function initAnimation() {
             if (!animationElement) {
-                console.error("Animation element not found");
-                return;
             }
             try {
-                staticAnimationFrames = generateAnimationFrames(); // Generate all frames
-                if (staticAnimationFrames.length > 0) {
-                    animationElement.textContent = staticAnimationFrames[0]; // Show first frame
-                    playAnimation();
-                } else {
-                    animationElement.textContent = "Error: Could not generate animation.";
                 }
             } catch (error) {
-                console.error("Error during animation setup:", error);
-                if(animationElement) animationElement.textContent = "Error initializing animation: " + error.message;
             }
         }
-        // Clean up interval when the window/iframe is unloaded (optional, good practice)
         window.addEventListener('unload', () => {
-            if (animationInterval) {
-                clearInterval(animationInterval);
             }
         });
     </script>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CMD Ingaze Reveal Animation</title>
     <style>
+        /* Styles for the animation when embedded */
         body {
+            background-color: #000000; /* Black background for the animation area */
             color: #00FF00; /* Bright green text */
             font-family: 'Courier New', Courier, monospace; /* Classic CMD font */
+            margin: 0; /* Remove default margin */
+            padding: 0; /* Remove default padding */
+            overflow: hidden; /* Prevent scrollbars on the body of the iframe content */
+            display: flex; /* Flex container to center the animation content */
+            justify-content: center; /* Center horizontally */
+            align-items: center; /* Center vertically */
+            min-height: 350px; /* Minimum height for the animation area, adjust as needed */
         }
         #cmd-animation-container {
+            padding: 15px; /* Reduced padding slightly */
             border: 2px solid #00AA00; /* Darker green border */
             background-color: #080808; /* Slightly off-black for the "screen" */
+            box-shadow: 0 0 10px #00FF00; /* Green glow effect, slightly reduced */
             border-radius: 8px; /* Rounded corners for the container */
             box-sizing: border-box; /* Include padding and border in the element's total width and height */
+            /* width: 100%; */ /* Let it size based on pre content or set a max-width */
+            max-width: calc(100% - 10px); /* Ensure it fits if iframe has padding */
+            margin: 5px; /* Add a small margin around the container */
         }
         pre#cmd-animation {
             white-space: pre; /* Preserve whitespace and newlines */
             text-align: left;
+            font-size: 12px; /* Adjusted for potentially smaller iframe, ensure legibility */
+            line-height: 1.15; /* Compact lines, slightly increased for readability */
             margin: 0;
             overflow-x: auto; /* Add scroll if content is wider than container */
+            /* The height of the pre will be determined by its content (number of lines) */
         }
     </style>
 </head>
 <body>
     <div id="cmd-animation-container">
+        <pre id="cmd-animation">Loading Animation...</pre>
     </div>
     <script>
         // --- Configuration ---
+        const scene_width = 65; // Characters
         const scene_height = 22; // Lines
         const frameDuration = 150; // Milliseconds per frame
+        const MAX_DATA_PARTICLES = 100; // Reduced slightly
         const FLOOR_LEVEL = scene_height - 1;
         // --- ASCII Art Definitions ---
         const stick_man_art_normal = ["   O   ", "  /|\\  ", "  / \\  "];
         const stick_man_art_walk_1 = ["   O   ", "  /|\\  ", "  / >  "];
         const stick_man_art_walk_2 = ["   O   ", "  /|\\  ", " < \\  "];
+        const stick_man_art_surprise = ["  \\O/  ", "   |   ", "  / \\  "];
+        const stick_man_art_gone = ["       ", "       ", "       "];
         const linked_in_art = ["+----+", "|i n |", "+----+"];
+        const linked_in_art_hit = ["x----x", "|BOOM|", "x----x"];
+        const lightning_strike_segment = "\\";
         const explosion_art_frames = [
+            ["   * ", "  *#* ", "   * "],
+            ["  @!%  ", " @*#*& ", "  X%O  "],
+            [" $*~+@ ", "$#@!%*&", " X*O#~ ", "  !+%$ "],
+            ["   ~   ", "  +*%  ", "   $   "]
         ];
         const ingaze_logo_art = [
         const ingaze_logo_width = ingaze_logo_art[0].length;
         const ingaze_logo_height = ingaze_logo_art.length;
+        // --- Global State (scoped within this script) ---
+        let data_particles_state = []; // Renamed to avoid conflict if script is ever not isolated
+        let current_lightning_y_state = -1;
         // --- Helper Functions ---
         function overlay(baseLines, artLines, startX, startY, ignoreSpaces = true) {
             });
         }
+        function drawLightningBoltInScene(sceneLines, tipX, tipY, length) {
             for (let i = 0; i < length; i++) {
                 const y = tipY - i;
+                const x = tipX + (i % 2 === 0 ? 0 : (i % 4 === 1 ? -1 : 1));
                 if (y >= 0 && y < scene_height && x >= 0 && x < scene_width) {
+                    if (sceneLines[y][x] === ' ') {
                         let lineArr = sceneLines[y].split('');
                         lineArr[x] = lightning_strike_segment;
                         sceneLines[y] = lineArr.join('');
             }
         }
+        function buildSceneFrame(stickmanArt, stickmanPos, showLogo, currentLogoArt, currentLogoPos,
                               showLightningBolt, lightningTipX, lightningTipY, lightningLength,
                               currentExplosionArt, explosionPos,
                               showIngazeLogo, ingazeArt, ingazePos) {
             let sceneLines = Array(scene_height).fill(" ".repeat(scene_width));
+            data_particles_state.forEach(p => {
                 const px = Math.round(p.x);
                 const py = Math.round(p.y);
                 if (py >= 0 && py < sceneLines.length && px >= 0 && px < scene_width) {
                 }
             });
             overlay(sceneLines, stickmanArt, stickmanPos.x, stickmanPos.y);
+            if (showLogo) overlay(sceneLines, currentLogoArt, currentLogoPos.x, currentLogoPos.y);
             if (showLightningBolt && lightningTipY >=0) {
+                drawLightningBoltInScene(sceneLines, lightningTipX, lightningTipY, lightningLength);
             }
             if (currentExplosionArt && currentExplosionArt.length > 0) {
+                overlay(sceneLines, currentExplosionArt, explosionPos.x, explosionPos.y, false);
             }
+            if (showIngazeLogo) overlay(sceneLines, ingazeArt, ingazePos.x, ingazePos.y);
             return sceneLines.join('\n');
         }
+        function spawnNewDataParticle(logoX, logoY, logoWidth) {
+            if (data_particles_state.length >= MAX_DATA_PARTICLES) return;
             const char = Math.random() > 0.5 ? '1' : '0';
             const x = logoX + 1 + Math.floor(Math.random() * (logoWidth - 2));
             const y = logoY + linked_in_art.length;
             const vy = 0.2 + Math.random() * 0.3;
+            data_particles_state.push({ char, x, y, vy, active: true });
         }
         function generateAnimationFrames() {
             const sequence = [];
+            data_particles_state = []; // Reset particles for this generation
+            current_lightning_y_state = -1; // Reset lightning state
             const stickman_height = stick_man_art_normal.length;
             const stickman_width = stick_man_art_normal[0].length;
             const logo_height = linked_in_art.length;
             const stickman_base_y = FLOOR_LEVEL - stickman_height;
+            const logo_base_y = stickman_base_y;
             const stickman_initial_pos = { x: 2, y: stickman_base_y };
+            const logo_initial_pos = { x: scene_width - logo_width - 15, y: logo_base_y }; // Adjusted position
+            const stickman_walk_target_x = Math.max(stickman_initial_pos.x + 1, logo_initial_pos.x - stickman_width - 1);
             const ingaze_pos = {
                 x: Math.floor((scene_width - ingaze_logo_width) / 2),
                 y: Math.floor((scene_height - ingaze_logo_height) / 2)
             const explosion_center_x = logo_initial_pos.x + Math.floor(logo_width / 2);
             const explosion_center_y = logo_initial_pos.y + Math.floor(logo_height / 2);
+            // Phase 0: Stickman Walks
+            const walk_frames = Math.max(10, Math.floor(Math.abs(stickman_walk_target_x - stickman_initial_pos.x) / 1.0) );
             let current_stickman_x = stickman_initial_pos.x;
+            const walk_step_x = walk_frames > 0 ? (stickman_walk_target_x - stickman_initial_pos.x) / walk_frames : 0;
             for (let i = 0; i < walk_frames; i++) {
                 current_stickman_x += walk_step_x;
                 const walk_art = (i % 4 < 2) ? stick_man_art_walk_1 : stick_man_art_walk_2;
+                sequence.push(buildSceneFrame(walk_art, { x: Math.round(current_stickman_x), y: stickman_base_y }, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
+            current_stickman_x = stickman_walk_target_x;
+            let current_stickman_pos = { x: Math.round(current_stickman_x), y: stickman_base_y };
+            // Phase 1: Pause
             for (let i = 0; i < 3; i++) {
+                sequence.push(buildSceneFrame(stick_man_art_normal, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
+            // Phase 2: Shaking & Data Fall
             let current_logo_pos_phase2 = { ...logo_initial_pos };
+            const shake_frames = 20; // Reduced shake frames
             for (let i = 0; i < shake_frames; i++) {
                 let logoAdj = { x: 0, y: 0 };
                 if (i % 6 < 2) logoAdj = { x: 1, y: 0 }; else if (i % 6 < 4) logoAdj = { x: -1, y: 0 };
                 current_logo_pos_phase2.x = logo_initial_pos.x + logoAdj.x;
+                if (i % 3 === 0) spawnNewDataParticle(current_logo_pos_phase2.x, current_logo_pos_phase2.y, logo_width);
+                data_particles_state.forEach(p => {
+                    if (p.active) { p.y += p.vy; if (p.y >= FLOOR_LEVEL) { p.y = FLOOR_LEVEL; p.vy = 0; p.active = false; } }
                 });
+                sequence.push(buildSceneFrame(stick_man_art_normal, current_stickman_pos, true, linked_in_art, current_logo_pos_phase2, false,0,0,0, [], {}, false, [], {}));
             }
+            current_logo_pos_phase2 = { ...logo_initial_pos };
+            // Phase 3: Data Settles, Stickman Surprised
+            const settle_frames = 8;
             for (let i = 0; i < settle_frames; i++) {
                 let stickmanArtPhase3 = (i < settle_frames / 2) ? stick_man_art_normal : stick_man_art_surprise;
+                data_particles_state.forEach(p => {
+                    if (p.active) { p.y += p.vy; if (p.y >= FLOOR_LEVEL) { p.y = FLOOR_LEVEL; p.vy = 0; p.active = false; } }
                 });
+                sequence.push(buildSceneFrame(stickmanArtPhase3, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
             // Phase 4: Lightning Strike
             const lightning_target_y = logo_initial_pos.y;
+            const lightning_strike_frames = lightning_target_y + 2;
+            const lightning_bolt_length = 4;
             const lightning_tip_x_strike = logo_initial_pos.x + Math.floor(logo_width / 2);
             for (let i = 0; i < lightning_strike_frames; i++) {
+                current_lightning_y_state = i; // This is the tip's current y as it descends
                 let logo_art_to_use = linked_in_art;
+                if (current_lightning_y_state >= lightning_target_y) {
                     logo_art_to_use = linked_in_art_hit;
+                    current_lightning_y_state = lightning_target_y; // Hold at target
                 }
+                sequence.push(buildSceneFrame(stick_man_art_surprise, current_stickman_pos, true, logo_art_to_use, logo_initial_pos, true, lightning_tip_x_strike, current_lightning_y_state, lightning_bolt_length, [], {}, false, [], {}));
             }
+            current_lightning_y_state = -1; // Reset lightning state
             // Phase 5: Explosion
             const explosion_duration_per_frame = 2;
                     x: explosion_center_x - Math.floor(explosion_art_width / 2),
                     y: explosion_center_y - Math.floor(explosion_art_height / 2)
                 };
                 for (let j = 0; j < explosion_duration_per_frame; j++) {
                     if (i === 0 && j === 0) {
+                        data_particles_state = [];
                         stickman_art_explosion = stick_man_art_gone;
                     }
+                    sequence.push(buildSceneFrame(stickman_art_explosion, current_stickman_pos, false, [], {}, false,0,0,0, explosion_art, current_explosion_pos, false, [], {}));
                 }
             }
             // Phase 6: "Ingaze" Logo Reveal
+            const ingaze_reveal_pause_frames = 4;
             for(let i=0; i < ingaze_reveal_pause_frames; i++) {
+                sequence.push(buildSceneFrame(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, false, [], {}));
             }
+            const ingaze_display_frames = 25;
             for (let i = 0; i < ingaze_display_frames; i++) {
+                sequence.push(buildSceneFrame(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, true, ingaze_logo_art, ingaze_pos));
             }
             return sequence;
         }
         // --- Animation Player ---
         const animationElement = document.getElementById('cmd-animation');
+        let currentFrameIndex = 0;
+        let animationIntervalId;
+        let allAnimationFrames = [];
+        function runAnimation() {
+            if (!animationElement) {
+                console.error("Animation element 'cmd-animation' not found.");
+                return;
+            }
+            if (allAnimationFrames.length === 0) {
+                console.error("Animation frames are empty. Cannot play animation.");
+                animationElement.textContent = "Error: No frames.";
                 return;
             }
+            animationIntervalId = setInterval(() => {
+                if (allAnimationFrames[currentFrameIndex]) {
+                    animationElement.textContent = allAnimationFrames[currentFrameIndex];
                 }
+                currentFrameIndex++;
+                if (currentFrameIndex >= allAnimationFrames.length) {
+                    currentFrameIndex = 0; // Loop animation
                 }
             }, frameDuration);
         }
+        function initializeAnimation() {
             if (!animationElement) {
+                // console.warn("Animation element not ready yet in initializeAnimation.");
+                return; // Element not ready
             }
             try {
+                allAnimationFrames = generateAnimationFrames();
+                if (allAnimationFrames.length > 0 && animationElement) {
+                    animationElement.textContent = allAnimationFrames[0];
+                    runAnimation();
+                } else if (animationElement) {
+                    animationElement.textContent = "Error: Could not generate animation frames.";
                 }
             } catch (error) {
+                console.error("Error during animation generation or initial play:", error);
+                if(animationElement) animationElement.textContent = "Error initializing: " + error.message;
             }
         }
+        // Start animation once DOM is ready
+        if (document.readyState === "complete" || document.readyState === "interactive") {
+            // DOM already loaded
+            setTimeout(initializeAnimation, 0); // Use setTimeout to ensure it runs after current execution block
+        } else {
+            document.addEventListener('DOMContentLoaded', initializeAnimation);
+        }
+        // Clean up interval when the window/iframe is unloaded
         window.addEventListener('unload', () => {
+            if (animationIntervalId) {
+                clearInterval(animationIntervalId);
             }
         });
     </script>