Update app.py

app.py

@@ -97,22 +97,38 @@ def generate_word_design(word, word_id, use_color=False):
         }
         
         if use_color:
-            style['animation'] = f'{animation_name} 0.8s ease-in-out infinite'
+            # Animation plays once and stops (no infinite)
+            style['animation'] = f'{animation_name} 1.2s ease-in-out forwards'
             style['animation-delay'] = f'{i * 0.15}s'
         
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
         styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    # Create keyframes for movement animation
+    # Create keyframes for movement animation - plays once and stops
     keyframes = f"""
     <style>
     @keyframes {animation_name} {{
-        0% {{ transform: scale(1) rotate(0deg) skew({random.choice(skew_angles)}); }}
-        25% {{ transform: scale(1.3) rotate({random.choice(["-15deg", "15deg", "20deg"])}deg) skew({random.choice(skew_angles)}); }}
-        50% {{ transform: scale(0.9) rotate({random.choice(["-10deg", "10deg", "25deg"])}deg) skew({random.choice(skew_angles)}); }}
-        75% {{ transform: scale(1.2) rotate({random.choice(["-5deg", "5deg", "30deg"])}deg) skew({random.choice(skew_angles)}); }}
-        100% {{ transform: scale(1.1) rotate(0deg) skew({random.choice(skew_angles)}); }}
+        0% {{ 
+            transform: scale(1) rotate(0deg) skew({random.choice(skew_angles)});
+            opacity: 0.7;
+        }}
+        25% {{ 
+            transform: scale(1.3) rotate({random.choice(["-15deg", "15deg", "20deg"])}deg) skew({random.choice(skew_angles)});
+            opacity: 1;
+        }}
+        50% {{ 
+            transform: scale(0.9) rotate({random.choice(["-10deg", "10deg", "25deg"])}deg) skew({random.choice(skew_angles)});
+            opacity: 1;
+        }}
+        75% {{ 
+            transform: scale(1.2) rotate({random.choice(["-5deg", "5deg", "30deg"])}deg) skew({random.choice(skew_angles)});
+            opacity: 1;
+        }}
+        100% {{ 
+            transform: scale(1.1) rotate(0deg) skew({random.choice(skew_angles)});
+            opacity: 1;
+        }}
     }}
     </style>
     """ if use_color else ""
@@ -204,7 +220,7 @@ def trigger_movement(input_html):
     # Replace each word with its completely new animated version
     for i, word in enumerate(selected_words):
         if i in original_word_designs:
-            # Generate COMPLETELY NEW design with color and animation
+            # Generate COMPLETELY NEW design with color and animation (that stops)
             new_movement_design = generate_word_design(word, i, use_color=True)
             # Replace the original design with the new one
             updated_html = updated_html.replace(original_word_designs[i], new_movement_design, 1)
@@ -213,7 +229,7 @@ def trigger_movement(input_html):
 
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# Random Word Styler\nGenerate 5 random styled words that transform into completely new styles!")
+    gr.Markdown("# Random Word Styler\nGenerate 5 random styled words that transform with a one-time animation!")
     
     generate_button = gr.Button("Generate Random Words", variant="primary")
     output_html = gr.HTML()