Enhance cat animation: adjust size, spawn logic, and animation duration for improved visual effect

Jellyfin.Plugin.Seasonals/Web/friday13.css

@@ -13,23 +13,22 @@
 
 .friday13-cat {
     position: absolute;
-    width: 100px;
+    width: 150px; /* MARK: Cat size */
     height: auto;
     user-select: none;
     animation-timing-function: linear;
-    animation-iteration-count: infinite;
     opacity: 0;
 }
 
 @keyframes cat-walk-right {
-    0% { left: -10vw; transform: scaleX(1); opacity: 1; }
+    0% { left: -10vw; transform: scaleX(-1); opacity: 1; }
-    99% { left: 110vw; transform: scaleX(1); opacity: 1; }
+    99% { left: 110vw; transform: scaleX(-1); opacity: 1; }
-    100% { opacity: 0; }
+    100% { opacity: 0; transform: scaleX(-1); left: 110vw; }
 }
 
 @keyframes cat-walk-left {
-    0% { left: 110vw; transform: scaleX(-1); opacity: 1; }
+    0% { left: 110vw; transform: scaleX(1); opacity: 1; }
-    99% { left: -10vw; transform: scaleX(-1); opacity: 1; }
+    99% { left: -10vw; transform: scaleX(1); opacity: 1; }
-    100% { opacity: 0; }
+    100% { opacity: 0; transform: scaleX(1); left: -10vw; }
 }
 

Jellyfin.Plugin.Seasonals/Web/friday13.js

@@ -35,21 +35,38 @@ observer.observe(document.body, {
 });
 
 function createFriday13(container) {
-    // Add walking black cat
+    function spawnCat() {
-    const numCats = 1;
+        // MARK: Height of the cat from bottom
-    for (let i = 0; i < numCats; i++) {
+        const catBottomPosition = "-15px"; 
+        // MARK: Time it takes for the cat to cross the screen
+        const catWalkDurationSeconds = 20;
+        
         const cat = document.createElement('img');
         cat.className = 'friday13-cat';
         cat.src = '../Seasonals/Resources/friday_assets/black-cat.gif';
-        cat.style.animationDelay = `${Math.random() * 5}s`;
+        cat.style.bottom = catBottomPosition;
-        cat.style.bottom = `5px`; // Walk along the very bottom edge
         
         // Either walk left to right or right to left
         const dir = Math.random() > 0.5 ? 'right' : 'left';
         cat.style.animationName = `cat-walk-${dir}`;
-        cat.style.animationDuration = `18s`;
+        cat.style.animationDuration = `${catWalkDurationSeconds}s`;
+        cat.style.animationIterationCount = `1`; // play once and remove
+        cat.style.animationFillMode = `forwards`;
+        
         container.appendChild(cat);
+        
+        // Remove and respawn
+        setTimeout(() => {
+            if (cat.parentNode) {
+                cat.parentNode.removeChild(cat);
             }
+            // Respawn with random delay between 5 to 25 seconds
+            setTimeout(spawnCat, Math.random() * 20000 + 5000);
+        }, (catWalkDurationSeconds * 1000) + 500); // Wait for duration + 500ms safety margin
+    }
+    
+    // Initial spawn with random delay
+    setTimeout(spawnCat, Math.random() * 5000);
 }
 
 function initializeFriday13() {