Update app.py

app.py

@@ -55,18 +55,22 @@ def generate_transition_style(word, animation_id):
         # Create unique animation name
         animation_name = f"sneakStyle_{animation_id}_{i}"
         
-        # Create keyframes that go: normal → styled → normal
+        # Create keyframes that go: normal → styled → normal (with complete reset)
         keyframes_css += f"""
         @keyframes {animation_name} {{
             0% {{
-                font-family: 'Josefin Sans', sans-serif;
-                font-size: 16px;
-                letter-spacing: 0px;
-                color: #000000;
-                text-shadow: 0px 0px 0px #000;
-                transform: skew(0deg) scale(1);
-                top: 0px;
-                margin-top: 0.00cm;
+                font-family: inherit;
+                font-size: inherit;
+                letter-spacing: normal;
+                color: inherit;
+                text-shadow: none;
+                transform: none;
+                top: auto;
+                margin-top: 0;
+                margin-left: 0;
+                margin-right: 0;
+                font-weight: inherit;
+                font-style: inherit;
             }}
             25% {{
                 font-family: {styled_font_family};
@@ -99,43 +103,41 @@ def generate_transition_style(word, animation_id):
                 margin-top: {styled_margin_top};
             }}
             100% {{
-                font-family: 'Josefin Sans', sans-serif;
-                font-size: 16px;
-                letter-spacing: 0px;
-                color: #000000;
-                text-shadow: 0px 0px 0px #000;
-                transform: skew(0deg) scale(1);
-                top: 0px;
-                margin-top: 0.00cm;
+                font-family: inherit;
+                font-size: inherit;
+                letter-spacing: normal;
+                color: inherit;
+                text-shadow: none;
+                transform: none;
+                top: auto;
+                margin-top: 0;
+                margin-left: 0;
+                margin-right: 0;
+                font-weight: inherit;
+                font-style: inherit;
+                display: inline;
+                position: static;
+                vertical-align: baseline;
             }}
         }}
         """
         
+        # Start with completely normal styling that will be overridden by animation
         style = {
-            'font-family': "'Josefin Sans', sans-serif",  # Start normal
-            'line-height': '1.6',
-            'font-size': '16px',
-            'letter-spacing': '0px',
-            'text-shadow': '0px 0px 0px #000',
-            'transform': 'skew(0deg)',
-            'margin-top': '0.00cm',
+            'display': 'inline',
             'position': 'relative',
-            'top': '0px',
-            'color': '#000000',
-            'display': 'inline-block',
-            'margin': '0 1px',
-            'vertical-align': 'middle',
             'animation': f'{animation_name} 3s ease-in-out forwards',
             'animation-delay': f'{i * 0.1}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_letter = f'<span style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
+    # Return just the letters with animation, no wrapper spans
     return f"""
     <style>{keyframes_css}</style>
-    <span class="special-word">{" ".join(styled_letters)}</span>
+    {"".join(styled_letters)}
     """
 
 def display_normal_text():
@@ -169,7 +171,7 @@ def display_normal_text():
     """
 
 def trigger_movement():
-    """Apply transition styling to selected words - they style then return to normal automatically."""
+    """Apply transition styling to selected words - they style then return to completely normal."""
     global current_text, special_words, original_paragraphs, animation_counter
     
     if not special_words or not original_paragraphs:
@@ -213,7 +215,7 @@ def trigger_movement():
 
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# CircularText Styler\nText with smooth sneaking style transitions - words style then smoothly return to normal.")
+    gr.Markdown("# CircularText Styler\nText with smooth sneaking style transitions - words style then blend back perfectly with original text.")
     
     output_html = gr.HTML()
     with gr.Row():