Update app.py

app.py

@@ -1,7 +1,7 @@
 import streamlit as st
 
 def create_animation_app():
-    st.title("Animated Pattern")
+    st.title("Animated Spiral Creature")
     
     # JavaScript code for the animation
     js_code = """
@@ -35,38 +35,57 @@ def create_animation_app():
         return [xPos, yPos];
     }
     
+    function getColor(x, y, t) {
+        // Create shifting colors based on position and time
+        const hue = (Math.sin(t/2) * 360 + x/3 + y/3) % 360;
+        const saturation = 70 + Math.sin(t) * 30;
+        const lightness = 50 + Math.cos(t/2) * 20;
+        return `hsla(${hue}, ${saturation}%, ${lightness}%, 0.5)`;
+    }
+    
     function draw() {
-        ctx.fillStyle = 'rgba(6, 6, 6, 0.3)';
+        // Clear canvas with a fade effect
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         
-        ctx.strokeStyle = 'rgba(255, 255, 255, 0.376)';
+        ctx.lineWidth = 1.5;
         
-        for(let y = 99; y < 300; y += 5) {
-            for(let x = 99; x < 300; x++) {
+        for(let y = 99; y < 300; y += 4) {
+            for(let x = 99; x < 300; x += 2) {
                 const [px, py] = a(x, y);
+                const color = getColor(x, y, t);
+                
+                ctx.strokeStyle = color;
                 ctx.beginPath();
                 ctx.moveTo(px, py);
-                ctx.lineTo(px, py);
+                ctx.lineTo(px + 1, py + 1);  // Make points slightly larger
                 ctx.stroke();
             }
         }
         
-        t += Math.PI / 60;
+        t += Math.PI / 120;  // Slowed down the animation slightly
         requestAnimationFrame(draw);
     }
     
+    // Ensure canvas is cleared on start
+    ctx.fillStyle = 'black';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
     // Start the animation
     draw();
     </script>
     """
     
-    # CSS to center the canvas
+    # CSS to center the canvas and ensure proper display
     css = """
     <style>
         canvas {
             display: block;
             margin: auto;
-            background: #000;
+            background: black;
+        }
+        .stApp {
+            background-color: black;
         }
     </style>
     """