scatter smiley on the screen also they should drop slowly - Follow Up Deployment

index.html

@@ -30,15 +30,17 @@
             to { opacity: 1; }
         }
         .falling-smiley {
-            position: absolute;
+            position: fixed;
             font-size: 2rem;
             animation: fall linear forwards;
             z-index: 10;
             pointer-events: none;
+            opacity: 0.8;
         }
         @keyframes fall {
             to {
                 transform: translateY(100vh);
+                opacity: 0;
             }
         }
     </style>
@@ -56,7 +58,6 @@
                 <div class="relative aspect-video bg-gray-200 rounded-lg overflow-hidden mb-4">
                     <video id="video" width="100%" height="100%" autoplay muted class="object-cover"></video>
                     <canvas id="canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
-                    <div id="smileyContainer" class="absolute top-0 left-0 w-full h-full overflow-hidden"></div>
                 </div>
             </div>
 
@@ -180,7 +181,7 @@
                     suggestionText.textContent = positiveSuggestions[dominantEmotion];
                     factText.textContent = emotionFacts[dominantEmotion];
                 }
-            }, 500); // Update every 500ms
+            }, 2000); // Update every 4 seconds
         }
 
 
@@ -194,12 +195,8 @@
 
         // Create falling smileys
         function createFallingSmileys(emotion) {
-            const container = document.getElementById('smileyContainer');
-            container.innerHTML = ''; // Clear previous smileys
-            
             const emoji = emotionEmojis[emotion];
-            const videoRect = video.getBoundingClientRect();
-            const duration = Math.random() * 3 + 2; // Random duration between 2-5s
+            const duration = 8; // Slower falling
             
             // Create multiple smileys
             for (let i = 0; i < 15; i++) {
@@ -207,16 +204,22 @@
                 smiley.className = 'falling-smiley';
                 smiley.textContent = emoji;
                 
-                // Random position across the video width
-                const left = Math.random() * videoRect.width;
+                // Random position across the whole screen width
+                const left = Math.random() * window.innerWidth;
                 smiley.style.left = `${left}px`;
-                smiley.style.top = '0';
-                smiley.style.animationDuration = `${duration}s`;
+                smiley.style.top = '-50px'; // Start above the viewport
+                smiley.style.animationDuration = `${duration + Math.random() * 4}s`; // Varying speeds
+                
+                // Random size variation
+                const size = 1 + Math.random();
+                smiley.style.fontSize = `${size}rem`;
                 
-                // Random delay for staggered appearance
-                smiley.style.animationDelay = `${Math.random() * 2}s`;
+                document.body.appendChild(smiley);
                 
-                container.appendChild(smiley);
+                // Remove smiley after animation completes
+                setTimeout(() => {
+                    smiley.remove();
+                }, duration * 1000);
             }
         }