Upload folder using huggingface_hub

README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_creditspanel`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_creditspanel"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_creditspanel'>Component GitHub Code</a></span></p>
+<a href="https://pypi.org/project/gradio_creditspanel/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_creditspanel"></a>  
 
 Credits Panel for Gradio UI
 
@@ -23,78 +23,56 @@ pip install gradio_creditspanel
 ## Usage
 
 ```python
-"""
-app.py
-
-This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
-It showcases all available features of the component, allowing users to dynamically adjust
-properties like animation effects, speed, layout, and styling. The app also demonstrates
-how to handle file dependencies (logo, licenses) in a portable way.
-"""
+# app.py
 
 import gradio as gr
 from gradio_creditspanel import CreditsPanel
 import os
 
-# --- 1. SETUP & DATA PREPARATION ---
-# This section prepares all necessary assets and data for the demo.
-# It ensures the demo runs out-of-the-box without manual setup.
-
 def setup_demo_files():
-    """
-    Creates necessary directories and dummy files (logo, licenses) for the demo.
-    This makes the application self-contained and easy to run.
-    """
-    # Create dummy license files
+    """Creates necessary directories and dummy files for the demo."""
     os.makedirs("LICENSES", exist_ok=True)
     if not os.path.exists("LICENSES/Apache.txt"):
         with open("LICENSES/Apache.txt", "w") as f:
-            f.write("Apache License\nVersion 2.0, January 2004\nhttp://www.apache.org/licenses/...")
+            f.write("Apache License\nVersion 2.0, January 2004...")
     if not os.path.exists("LICENSES/MIT.txt"):
         with open("LICENSES/MIT.txt", "w") as f:
-            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
-
-    # Create a placeholder logo if it doesn't exist
+            f.write("MIT License\nCopyright (c) 2025 Author...")
     os.makedirs("assets", exist_ok=True)
     if not os.path.exists("./assets/logo.webp"):
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# Initial data for the credits roll
+# --- UPDATED: Credits list with sections ---
 credits_list = [
+    {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    
+    {"section_title": "Development Team"},
     {"title": "Lead Developer", "name": "John Doe"},
     {"title": "Senior Backend Engineer", "name": "Michael Chen"},
     {"title": "Frontend Developer", "name": "Sarah Johnson"},
     {"title": "UI/UX Designer", "name": "Jane Smith"},
     {"title": "Database Architect", "name": "Alex Ray"},
+    
+    {"section_title": "Quality & Operations"},
     {"title": "DevOps Engineer", "name": "Liam Patel"},
     {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
     {"title": "Test Automation Engineer", "name": "Olivia Brown"},
-    {"title": "Security Analyst", "name": "David Kim"},
-    {"title": "Data Scientist", "name": "Sophie Martinez"},
-    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
-    {"title": "API Developer", "name": "Isabella Garcia"},
-    {"title": "Technical Writer", "name": "Noah Davis"},
-    {"title": "Scrum Master", "name": "Ava Rodriguez"},
 ]
 
-# Paths to license files
 license_paths = {
     "Gradio Framework": "./LICENSES/Apache.txt",
     "This Component": "./LICENSES/MIT.txt"
 }
 
-# Default animation speeds for each effect to provide a good user experience
 DEFAULT_SPEEDS = {
     "scroll": 40.0,
-    "starwars": 80.0,
+    "starwars": 70.0,
     "matrix": 40.0
 }
 
-# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
-# These functions define the application's interactive logic.
-
 def update_panel(
     effect: str, 
     speed: float, 
@@ -105,53 +83,57 @@ def update_panel(
     show_logo: bool, 
     show_licenses: bool, 
     show_credits: bool, 
-    logo_position: str,
+    logo_position: str, 
     logo_sizing: str, 
     logo_width: str | None, 
     logo_height: str | None,
     scroll_background_color: str | None, 
-    scroll_title_color: str | None,
-    scroll_name_color: str | None
+    scroll_title_color: str | None, 
+    scroll_name_color: str | None,    
+    layout_style: str, 
+    title_uppercase: bool, 
+    name_uppercase: bool, 
+    section_title_uppercase: bool,
+    swap_font_sizes: bool
 ) -> dict:
-    """
-    Callback function that updates all properties of the CreditsPanel component.
-    It takes the current state of all UI controls and returns a gr.update() dictionary.
-    """
+    """Callback function that updates all properties of the CreditsPanel component."""
     return gr.update(
         visible=True,
-        effect=effect,
-        speed=speed,
+        effect=effect, 
+        speed=speed, 
         base_font_size=base_font_size,
-        intro_title=intro_title,
+        intro_title=intro_title, 
         intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position,
+        sidebar_position=sidebar_position, 
         show_logo=show_logo,
-        show_licenses=show_licenses,
+        show_licenses=show_licenses, 
         show_credits=show_credits,
-        logo_position=logo_position,
+        logo_position=logo_position, 
         logo_sizing=logo_sizing,
-        logo_width=logo_width,
+        logo_width=logo_width, 
         logo_height=logo_height,
         scroll_background_color=scroll_background_color,
         scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,
-        value=credits_list  # The list of credits to display
+        scroll_name_color=scroll_name_color,        
+        layout_style=layout_style,
+        title_uppercase=title_uppercase,
+        name_uppercase=name_uppercase,
+        section_title_uppercase=section_title_uppercase,
+        swap_font_sizes_on_two_column=swap_font_sizes,
+        value=credits_list
     )
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
-    """
-    Updates the speed and font size sliders to sensible defaults when the
-    animation effect is changed.
-    """
+    """Updates sliders to sensible defaults when the animation effect is changed."""
     font_size = 1.5
     if effect == "starwars":
-        font_size = 6.0  # Star Wars effect looks better with a larger font
-    
+        font_size = 3.8
     speed = DEFAULT_SPEEDS.get(effect, 40.0)
     return speed, font_size
 
-# --- 3. GRADIO UI DEFINITION ---
-# This section constructs the user interface using gr.Blocks.
+def toggle_swap_checkbox_visibility(layout: str) -> dict:
+    """Show the swap checkbox only for the two-column layout."""
+    return gr.update(visible=(layout == 'two-column'))
 
 with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
     gr.Markdown(
@@ -163,42 +145,37 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
 
     with gr.Sidebar(position="right"):
         gr.Markdown("### Effects Settings")
-        effect_radio = gr.Radio(
-            ["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll",
-            info="Select the visual style for the credits."
-        )
-        speed_slider = gr.Slider(
-            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
-            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
+        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
+        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
+        
+        gr.Markdown("### Credits Layout Settings")
+        layout_style_radio = gr.Radio(
+            ["stacked", "two-column"], label="Layout Style", value="stacked",
+            info="How to display titles and names."
         )
-        font_size_slider = gr.Slider(
-            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
-            label="Base Font Size (rem)", info="Controls the base font size."
+        swap_sizes_checkbox = gr.Checkbox(
+            label="Swap Title/Name Font Sizes", value=False,
+            info="Emphasize name over title in two-column layout.",
+            visible=False
         )
-
+        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
+        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
+        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
+        
         gr.Markdown("### Intro Text")
-        intro_title_input = gr.Textbox(
-            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
-        )
-        intro_subtitle_input = gr.Textbox(
-            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
-        )
+        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
+        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
 
         gr.Markdown("### Layout & Visibility")
-        sidebar_position_radio = gr.Radio(
-            ["right", "bottom"], label="Sidebar Position", value="right",
-            info="Place the licenses sidebar on the right or bottom."
-        )
+        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
         show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
         show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
         show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
+        
         gr.Markdown("### Logo Customization")
-        logo_position_radio = gr.Radio(
-            ["left", "center", "right"], label="Logo Position", value="center"
-        )
-        logo_sizing_radio = gr.Radio(
-            ["stretch", "crop", "resize"], label="Logo Sizing", value="resize"
-        )
+        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
+        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
         logo_width_input = gr.Textbox(label="Logo Width", value="200px")
         logo_height_input = gr.Textbox(label="Logo Height", value="100px")
 
@@ -207,7 +184,6 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    # Instantiate the custom CreditsPanel component with default values
     panel = CreditsPanel(
         credits=credits_list,
         licenses=license_paths,
@@ -228,10 +204,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_height="100px",
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
-        scroll_name_color="#FFFFFF",
+        scroll_name_color="#FFFFFF",       
+        layout_style="stacked",
+        title_uppercase=False,
+        name_uppercase=False,
+        section_title_uppercase=True,
+        swap_font_sizes_on_two_column=False,
     )
 
-    # List of all input components that should trigger a panel update
     inputs = [
         effect_radio, 
         speed_slider, 
@@ -241,35 +221,31 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         sidebar_position_radio, 
         show_logo_checkbox, 
         show_licenses_checkbox,
-        show_credits_checkbox,
+        show_credits_checkbox, 
         logo_position_radio, 
         logo_sizing_radio, 
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
         scroll_title_color, 
-        scroll_name_color
+        scroll_name_color,        
+        layout_style_radio, 
+        title_uppercase_checkbox, 
+        name_uppercase_checkbox,
+        section_title_uppercase_checkbox,
+        swap_sizes_checkbox
     ]
 
-    # --- 4. EVENT BINDING ---
-    # Connect the UI controls to the handler functions.
-
-    # Special event: changing the effect also updates speed and font size sliders
-    effect_radio.change(
-        fn=update_ui_on_effect_change,
-        inputs=effect_radio,
-        outputs=[speed_slider, font_size_slider]
+    layout_style_radio.change(
+        fn=toggle_swap_checkbox_visibility,
+        inputs=layout_style_radio,
+        outputs=swap_sizes_checkbox
     )
+    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
 
-    # General event: any change in an input control updates the main panel
     for input_component in inputs:
-        input_component.change(
-            fn=update_panel,
-            inputs=inputs,
-            outputs=panel
-        )
+        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
 
-# --- 5. APP LAUNCH ---
 if __name__ == "__main__":
     setup_demo_files()
     demo.launch()
@@ -590,6 +566,71 @@ str | None
 <td align="left">None</td>
 </tr>
 
+<tr>
+<td align="left"><code>layout_style</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"stacked" | "two-column"
+```
+
+</td>
+<td align="left"><code>"stacked"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>title_uppercase</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>name_uppercase</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>section_title_uppercase</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>swap_font_sizes_on_two_column</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
 <tr>
 <td align="left"><code>label</code></td>
 <td align="left" style="width: 25%;">

app.py

@@ -1,250 +1,226 @@
-"""
-app.py
-
-This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
-It showcases all available features of the component, allowing users to dynamically adjust
-properties like animation effects, speed, layout, and styling. The app also demonstrates
-how to handle file dependencies (logo, licenses) in a portable way.
-"""
-
-import gradio as gr
-from gradio_creditspanel import CreditsPanel
-import os
-
-# --- 1. SETUP & DATA PREPARATION ---
-# This section prepares all necessary assets and data for the demo.
-# It ensures the demo runs out-of-the-box without manual setup.
-
-def setup_demo_files():
-    """
-    Creates necessary directories and dummy files (logo, licenses) for the demo.
-    This makes the application self-contained and easy to run.
-    """
-    # Create dummy license files
-    os.makedirs("./src/LICENSES", exist_ok=True)
-    if not os.path.exists("./src/LICENSES/Apache.txt"):
-        with open("./src/LICENSES/Apache.txt", "w") as f:
-            f.write("Apache License\nVersion 2.0, January 2004\nhttp://www.apache.org/licenses/...")
-    if not os.path.exists("./src/LICENSES/MIT.txt"):
-        with open("./src/LICENSES/MIT.txt", "w") as f:
-            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
-
-    # Create a placeholder logo if it doesn't exist
-    os.makedirs(".src/assets", exist_ok=True)
-    if not os.path.exists(".src/assets/logo.webp"):
-        with open(".src/assets/logo.webp", "w") as f:
-            f.write("Placeholder WebP logo")
-
-# Initial data for the credits roll
-credits_list = [
-    {"title": "Project Manager", "name": "Emma Thompson"},
-    {"title": "Lead Developer", "name": "John Doe"},
-    {"title": "Senior Backend Engineer", "name": "Michael Chen"},
-    {"title": "Frontend Developer", "name": "Sarah Johnson"},
-    {"title": "UI/UX Designer", "name": "Jane Smith"},
-    {"title": "Database Architect", "name": "Alex Ray"},
-    {"title": "DevOps Engineer", "name": "Liam Patel"},
-    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
-    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
-    {"title": "Security Analyst", "name": "David Kim"},
-    {"title": "Data Scientist", "name": "Sophie Martinez"},
-    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
-    {"title": "API Developer", "name": "Isabella Garcia"},
-    {"title": "Technical Writer", "name": "Noah Davis"},
-    {"title": "Scrum Master", "name": "Ava Rodriguez"},
-]
-
-# Paths to license files
-license_paths = {
-    "Gradio Framework": "./src/LICENSES/Apache.txt",
-    "This Component": "./src/LICENSES/MIT.txt"
-}
-
-# Default animation speeds for each effect to provide a good user experience
-DEFAULT_SPEEDS = {
-    "scroll": 40.0,
-    "starwars": 80.0,
-    "matrix": 40.0
-}
-
-# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
-# These functions define the application's interactive logic.
-
-def update_panel(
-    effect: str, 
-    speed: float, 
-    base_font_size: float,
-    intro_title: str, 
-    intro_subtitle: str, 
-    sidebar_position: str,
-    show_logo: bool, 
-    show_licenses: bool, 
-    show_credits: bool, 
-    logo_position: str,
-    logo_sizing: str, 
-    logo_width: str | None, 
-    logo_height: str | None,
-    scroll_background_color: str | None, 
-    scroll_title_color: str | None,
-    scroll_name_color: str | None
-) -> dict:
-    """
-    Callback function that updates all properties of the CreditsPanel component.
-    It takes the current state of all UI controls and returns a gr.update() dictionary.
-    """
-    return gr.update(
-        visible=True,
-        effect=effect,
-        speed=speed,
-        base_font_size=base_font_size,
-        intro_title=intro_title,
-        intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position,
-        show_logo=show_logo,
-        show_licenses=show_licenses,
-        show_credits=show_credits,
-        logo_position=logo_position,
-        logo_sizing=logo_sizing,
-        logo_width=logo_width,
-        logo_height=logo_height,
-        scroll_background_color=scroll_background_color,
-        scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,
-        value=credits_list  # The list of credits to display
-    )
-
-def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
-    """
-    Updates the speed and font size sliders to sensible defaults when the
-    animation effect is changed.
-    """
-    font_size = 1.5
-    if effect == "starwars":
-        font_size = 6.0  # Star Wars effect looks better with a larger font
-    
-    speed = DEFAULT_SPEEDS.get(effect, 40.0)
-    return speed, font_size
-
-# --- 3. GRADIO UI DEFINITION ---
-# This section constructs the user interface using gr.Blocks.
-
-with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
-    gr.Markdown(
-        """
-        # Interactive CreditsPanel Demo
-        Use the sidebar controls to customize the `CreditsPanel` component in real-time.
-        """
-    )
-
-    with gr.Sidebar(position="right"):
-        gr.Markdown("### Effects Settings")
-        effect_radio = gr.Radio(
-            ["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll",
-            info="Select the visual style for the credits."
-        )
-        speed_slider = gr.Slider(
-            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
-            label="Animation Speed (seconds)", info="Duration of one animation cycle."
-        )
-        font_size_slider = gr.Slider(
-            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
-            label="Base Font Size (rem)", info="Controls the base font size."
-        )
-
-        gr.Markdown("### Intro Text")
-        intro_title_input = gr.Textbox(
-            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
-        )
-        intro_subtitle_input = gr.Textbox(
-            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
-        )
-
-        gr.Markdown("### Layout & Visibility")
-        sidebar_position_radio = gr.Radio(
-            ["right", "bottom"], label="Sidebar Position", value="right",
-            info="Place the licenses sidebar on the right or bottom."
-        )
-        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
-        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
-        show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
-        gr.Markdown("### Logo Customization")
-        logo_position_radio = gr.Radio(
-            ["left", "center", "right"], label="Logo Position", value="center"
-        )
-        logo_sizing_radio = gr.Radio(
-            ["stretch", "crop", "resize"], label="Logo Sizing", value="resize"
-        )
-        logo_width_input = gr.Textbox(label="Logo Width", value="200px")
-        logo_height_input = gr.Textbox(label="Logo Height", value="100px")
-
-        gr.Markdown("### Color Settings (Scroll Effect)")
-        scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
-        scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
-        scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
-
-    # Instantiate the custom CreditsPanel component with default values
-    panel = CreditsPanel(
-        credits=credits_list,
-        licenses=license_paths,
-        effect="scroll",
-        height=500,
-        speed=DEFAULT_SPEEDS["scroll"],
-        base_font_size=1.5,
-        intro_title="Gradio",
-        intro_subtitle="The best UI framework",
-        sidebar_position="right",
-        logo_path="src/assets/logo.webp",
-        show_logo=True,
-        show_licenses=True,
-        show_credits=True,
-        logo_position="center",
-        logo_sizing="resize",
-        logo_width="200px",
-        logo_height="100px",
-        scroll_background_color="#000000",
-        scroll_title_color="#FFFFFF",
-        scroll_name_color="#FFFFFF",
-    )
-
-    # List of all input components that should trigger a panel update
-    inputs = [
-        effect_radio, 
-        speed_slider, 
-        font_size_slider,
-        intro_title_input, 
-        intro_subtitle_input,
-        sidebar_position_radio, 
-        show_logo_checkbox, 
-        show_licenses_checkbox,
-        show_credits_checkbox,
-        logo_position_radio, 
-        logo_sizing_radio, 
-        logo_width_input, 
-        logo_height_input,
-        scroll_background_color, 
-        scroll_title_color, 
-        scroll_name_color
-    ]
-
-    # --- 4. EVENT BINDING ---
-    # Connect the UI controls to the handler functions.
-
-    # Special event: changing the effect also updates speed and font size sliders
-    effect_radio.change(
-        fn=update_ui_on_effect_change,
-        inputs=effect_radio,
-        outputs=[speed_slider, font_size_slider]
-    )
-
-    # General event: any change in an input control updates the main panel
-    for input_component in inputs:
-        input_component.change(
-            fn=update_panel,
-            inputs=inputs,
-            outputs=panel
-        )
-
-# --- 5. APP LAUNCH ---
-if __name__ == "__main__":
-    setup_demo_files()
+# app.py
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+def setup_demo_files():
+    """Creates necessary directories and dummy files for the demo."""
+    os.makedirs("LICENSES", exist_ok=True)
+    if not os.path.exists("LICENSES/Apache.txt"):
+        with open("LICENSES/Apache.txt", "w") as f:
+            f.write("Apache License\nVersion 2.0, January 2004...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author...")
+    os.makedirs("assets", exist_ok=True)
+    if not os.path.exists("./assets/logo.webp"):
+        with open("./assets/logo.webp", "w") as f:
+            f.write("Placeholder WebP logo")
+
+# --- UPDATED: Credits list with sections ---
+credits_list = [
+    {"section_title": "Project Leadership"},
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    
+    {"section_title": "Development Team"},
+    {"title": "Lead Developer", "name": "John Doe"},
+    {"title": "Senior Backend Engineer", "name": "Michael Chen"},
+    {"title": "Frontend Developer", "name": "Sarah Johnson"},
+    {"title": "UI/UX Designer", "name": "Jane Smith"},
+    {"title": "Database Architect", "name": "Alex Ray"},
+    
+    {"section_title": "Quality & Operations"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+]
+
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 70.0,
+    "matrix": 40.0
+}
+
+def update_panel(
+    effect: str, 
+    speed: float, 
+    base_font_size: float,
+    intro_title: str, 
+    intro_subtitle: str, 
+    sidebar_position: str,
+    show_logo: bool, 
+    show_licenses: bool, 
+    show_credits: bool, 
+    logo_position: str, 
+    logo_sizing: str, 
+    logo_width: str | None, 
+    logo_height: str | None,
+    scroll_background_color: str | None, 
+    scroll_title_color: str | None, 
+    scroll_name_color: str | None,    
+    layout_style: str, 
+    title_uppercase: bool, 
+    name_uppercase: bool, 
+    section_title_uppercase: bool,
+    swap_font_sizes: bool
+) -> dict:
+    """Callback function that updates all properties of the CreditsPanel component."""
+    return gr.update(
+        visible=True,
+        effect=effect, 
+        speed=speed, 
+        base_font_size=base_font_size,
+        intro_title=intro_title, 
+        intro_subtitle=intro_subtitle,
+        sidebar_position=sidebar_position, 
+        show_logo=show_logo,
+        show_licenses=show_licenses, 
+        show_credits=show_credits,
+        logo_position=logo_position, 
+        logo_sizing=logo_sizing,
+        logo_width=logo_width, 
+        logo_height=logo_height,
+        scroll_background_color=scroll_background_color,
+        scroll_title_color=scroll_title_color,
+        scroll_name_color=scroll_name_color,        
+        layout_style=layout_style,
+        title_uppercase=title_uppercase,
+        name_uppercase=name_uppercase,
+        section_title_uppercase=section_title_uppercase,
+        swap_font_sizes_on_two_column=swap_font_sizes,
+        value=credits_list
+    )
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    """Updates sliders to sensible defaults when the animation effect is changed."""
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 3.8
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+def toggle_swap_checkbox_visibility(layout: str) -> dict:
+    """Show the swap checkbox only for the two-column layout."""
+    return gr.update(visible=(layout == 'two-column'))
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
+    gr.Markdown(
+        """
+        # Interactive CreditsPanel Demo
+        Use the sidebar controls to customize the `CreditsPanel` component in real-time.
+        """
+    )
+
+    with gr.Sidebar(position="right"):
+        gr.Markdown("### Effects Settings")
+        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
+        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
+        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
+        
+        gr.Markdown("### Credits Layout Settings")
+        layout_style_radio = gr.Radio(
+            ["stacked", "two-column"], label="Layout Style", value="stacked",
+            info="How to display titles and names."
+        )
+        swap_sizes_checkbox = gr.Checkbox(
+            label="Swap Title/Name Font Sizes", value=False,
+            info="Emphasize name over title in two-column layout.",
+            visible=False
+        )
+        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
+        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
+        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
+        
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
+        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
+        show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
+        
+        gr.Markdown("### Logo Customization")
+        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
+        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
+        logo_width_input = gr.Textbox(label="Logo Width", value="200px")
+        logo_height_input = gr.Textbox(label="Logo Height", value="100px")
+
+        gr.Markdown("### Color Settings (Scroll Effect)")
+        scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
+        scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
+        scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
+
+    panel = CreditsPanel(
+        credits=credits_list,
+        licenses=license_paths,
+        effect="scroll",
+        height=500,
+        speed=DEFAULT_SPEEDS["scroll"],
+        base_font_size=1.5,
+        intro_title="Gradio",
+        intro_subtitle="The best UI framework",
+        sidebar_position="right",
+        logo_path="./assets/logo.webp",
+        show_logo=True,
+        show_licenses=True,
+        show_credits=True,
+        logo_position="center",
+        logo_sizing="resize",
+        logo_width="200px",
+        logo_height="100px",
+        scroll_background_color="#000000",
+        scroll_title_color="#FFFFFF",
+        scroll_name_color="#FFFFFF",       
+        layout_style="stacked",
+        title_uppercase=False,
+        name_uppercase=False,
+        section_title_uppercase=True,
+        swap_font_sizes_on_two_column=False,
+    )
+
+    inputs = [
+        effect_radio, 
+        speed_slider, 
+        font_size_slider,
+        intro_title_input, 
+        intro_subtitle_input,
+        sidebar_position_radio, 
+        show_logo_checkbox, 
+        show_licenses_checkbox,
+        show_credits_checkbox, 
+        logo_position_radio, 
+        logo_sizing_radio, 
+        logo_width_input, 
+        logo_height_input,
+        scroll_background_color, 
+        scroll_title_color, 
+        scroll_name_color,        
+        layout_style_radio, 
+        title_uppercase_checkbox, 
+        name_uppercase_checkbox,
+        section_title_uppercase_checkbox,
+        swap_sizes_checkbox
+    ]
+
+    layout_style_radio.change(
+        fn=toggle_swap_checkbox_visibility,
+        inputs=layout_style_radio,
+        outputs=swap_sizes_checkbox
+    )
+    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
+
+    for input_component in inputs:
+        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
+
+if __name__ == "__main__":
+    setup_demo_files()
     demo.launch()

space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nSupports displaying a logo, licenses, and configurable text styling.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': 'Dict[str, Any] | None: The input payload, returned unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
+_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nSupports displaying a logo, licenses, and configurable text styling.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'layout_style': {'type': '"stacked" | "two-column"', 'default': '"stacked"', 'description': None}, 'title_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'name_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'section_title_uppercase': {'type': 'bool', 'default': 'True', 'description': None}, 'swap_font_sizes_on_two_column': {'type': 'bool', 'default': 'False', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': 'Dict[str, Any] | None: The input payload, returned unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -38,78 +38,56 @@ pip install gradio_creditspanel
 ## Usage
 
 ```python
-\"\"\"
-app.py
-
-This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
-It showcases all available features of the component, allowing users to dynamically adjust
-properties like animation effects, speed, layout, and styling. The app also demonstrates
-how to handle file dependencies (logo, licenses) in a portable way.
-\"\"\"
+# app.py
 
 import gradio as gr
 from gradio_creditspanel import CreditsPanel
 import os
 
-# --- 1. SETUP & DATA PREPARATION ---
-# This section prepares all necessary assets and data for the demo.
-# It ensures the demo runs out-of-the-box without manual setup.
-
 def setup_demo_files():
-    \"\"\"
-    Creates necessary directories and dummy files (logo, licenses) for the demo.
-    This makes the application self-contained and easy to run.
-    \"\"\"
-    # Create dummy license files
+    \"\"\"Creates necessary directories and dummy files for the demo.\"\"\"
     os.makedirs("LICENSES", exist_ok=True)
     if not os.path.exists("LICENSES/Apache.txt"):
         with open("LICENSES/Apache.txt", "w") as f:
-            f.write("Apache License\nVersion 2.0, January 2004\nhttp://www.apache.org/licenses/...")
+            f.write("Apache License\nVersion 2.0, January 2004...")
     if not os.path.exists("LICENSES/MIT.txt"):
         with open("LICENSES/MIT.txt", "w") as f:
-            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
-
-    # Create a placeholder logo if it doesn't exist
+            f.write("MIT License\nCopyright (c) 2025 Author...")
     os.makedirs("assets", exist_ok=True)
     if not os.path.exists("./assets/logo.webp"):
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# Initial data for the credits roll
+# --- UPDATED: Credits list with sections ---
 credits_list = [
+    {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    
+    {"section_title": "Development Team"},
     {"title": "Lead Developer", "name": "John Doe"},
     {"title": "Senior Backend Engineer", "name": "Michael Chen"},
     {"title": "Frontend Developer", "name": "Sarah Johnson"},
     {"title": "UI/UX Designer", "name": "Jane Smith"},
     {"title": "Database Architect", "name": "Alex Ray"},
+    
+    {"section_title": "Quality & Operations"},
     {"title": "DevOps Engineer", "name": "Liam Patel"},
     {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
     {"title": "Test Automation Engineer", "name": "Olivia Brown"},
-    {"title": "Security Analyst", "name": "David Kim"},
-    {"title": "Data Scientist", "name": "Sophie Martinez"},
-    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
-    {"title": "API Developer", "name": "Isabella Garcia"},
-    {"title": "Technical Writer", "name": "Noah Davis"},
-    {"title": "Scrum Master", "name": "Ava Rodriguez"},
 ]
 
-# Paths to license files
 license_paths = {
     "Gradio Framework": "./LICENSES/Apache.txt",
     "This Component": "./LICENSES/MIT.txt"
 }
 
-# Default animation speeds for each effect to provide a good user experience
 DEFAULT_SPEEDS = {
     "scroll": 40.0,
-    "starwars": 80.0,
+    "starwars": 70.0,
     "matrix": 40.0
 }
 
-# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
-# These functions define the application's interactive logic.
-
 def update_panel(
     effect: str, 
     speed: float, 
@@ -120,53 +98,57 @@ def update_panel(
     show_logo: bool, 
     show_licenses: bool, 
     show_credits: bool, 
-    logo_position: str,
+    logo_position: str, 
     logo_sizing: str, 
     logo_width: str | None, 
     logo_height: str | None,
     scroll_background_color: str | None, 
-    scroll_title_color: str | None,
-    scroll_name_color: str | None
+    scroll_title_color: str | None, 
+    scroll_name_color: str | None,    
+    layout_style: str, 
+    title_uppercase: bool, 
+    name_uppercase: bool, 
+    section_title_uppercase: bool,
+    swap_font_sizes: bool
 ) -> dict:
-    \"\"\"
-    Callback function that updates all properties of the CreditsPanel component.
-    It takes the current state of all UI controls and returns a gr.update() dictionary.
-    \"\"\"
+    \"\"\"Callback function that updates all properties of the CreditsPanel component.\"\"\"
     return gr.update(
         visible=True,
-        effect=effect,
-        speed=speed,
+        effect=effect, 
+        speed=speed, 
         base_font_size=base_font_size,
-        intro_title=intro_title,
+        intro_title=intro_title, 
         intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position,
+        sidebar_position=sidebar_position, 
         show_logo=show_logo,
-        show_licenses=show_licenses,
+        show_licenses=show_licenses, 
         show_credits=show_credits,
-        logo_position=logo_position,
+        logo_position=logo_position, 
         logo_sizing=logo_sizing,
-        logo_width=logo_width,
+        logo_width=logo_width, 
         logo_height=logo_height,
         scroll_background_color=scroll_background_color,
         scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,
-        value=credits_list  # The list of credits to display
+        scroll_name_color=scroll_name_color,        
+        layout_style=layout_style,
+        title_uppercase=title_uppercase,
+        name_uppercase=name_uppercase,
+        section_title_uppercase=section_title_uppercase,
+        swap_font_sizes_on_two_column=swap_font_sizes,
+        value=credits_list
     )
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
-    \"\"\"
-    Updates the speed and font size sliders to sensible defaults when the
-    animation effect is changed.
-    \"\"\"
+    \"\"\"Updates sliders to sensible defaults when the animation effect is changed.\"\"\"
     font_size = 1.5
     if effect == "starwars":
-        font_size = 6.0  # Star Wars effect looks better with a larger font
-    
+        font_size = 3.8
     speed = DEFAULT_SPEEDS.get(effect, 40.0)
     return speed, font_size
 
-# --- 3. GRADIO UI DEFINITION ---
-# This section constructs the user interface using gr.Blocks.
+def toggle_swap_checkbox_visibility(layout: str) -> dict:
+    \"\"\"Show the swap checkbox only for the two-column layout.\"\"\"
+    return gr.update(visible=(layout == 'two-column'))
 
 with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
     gr.Markdown(
@@ -178,42 +160,37 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
 
     with gr.Sidebar(position="right"):
         gr.Markdown("### Effects Settings")
-        effect_radio = gr.Radio(
-            ["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll",
-            info="Select the visual style for the credits."
+        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
+        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
+        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
+        
+        gr.Markdown("### Credits Layout Settings")
+        layout_style_radio = gr.Radio(
+            ["stacked", "two-column"], label="Layout Style", value="stacked",
+            info="How to display titles and names."
         )
-        speed_slider = gr.Slider(
-            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
-            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        swap_sizes_checkbox = gr.Checkbox(
+            label="Swap Title/Name Font Sizes", value=False,
+            info="Emphasize name over title in two-column layout.",
+            visible=False
         )
-        font_size_slider = gr.Slider(
-            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
-            label="Base Font Size (rem)", info="Controls the base font size."
-        )
-
+        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
+        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
+        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
+        
         gr.Markdown("### Intro Text")
-        intro_title_input = gr.Textbox(
-            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
-        )
-        intro_subtitle_input = gr.Textbox(
-            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
-        )
+        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
+        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
 
         gr.Markdown("### Layout & Visibility")
-        sidebar_position_radio = gr.Radio(
-            ["right", "bottom"], label="Sidebar Position", value="right",
-            info="Place the licenses sidebar on the right or bottom."
-        )
+        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
         show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
         show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
         show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
+        
         gr.Markdown("### Logo Customization")
-        logo_position_radio = gr.Radio(
-            ["left", "center", "right"], label="Logo Position", value="center"
-        )
-        logo_sizing_radio = gr.Radio(
-            ["stretch", "crop", "resize"], label="Logo Sizing", value="resize"
-        )
+        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
+        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
         logo_width_input = gr.Textbox(label="Logo Width", value="200px")
         logo_height_input = gr.Textbox(label="Logo Height", value="100px")
 
@@ -222,7 +199,6 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    # Instantiate the custom CreditsPanel component with default values
     panel = CreditsPanel(
         credits=credits_list,
         licenses=license_paths,
@@ -243,10 +219,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_height="100px",
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
-        scroll_name_color="#FFFFFF",
+        scroll_name_color="#FFFFFF",       
+        layout_style="stacked",
+        title_uppercase=False,
+        name_uppercase=False,
+        section_title_uppercase=True,
+        swap_font_sizes_on_two_column=False,
     )
 
-    # List of all input components that should trigger a panel update
     inputs = [
         effect_radio, 
         speed_slider, 
@@ -256,35 +236,31 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         sidebar_position_radio, 
         show_logo_checkbox, 
         show_licenses_checkbox,
-        show_credits_checkbox,
+        show_credits_checkbox, 
         logo_position_radio, 
         logo_sizing_radio, 
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
         scroll_title_color, 
-        scroll_name_color
+        scroll_name_color,        
+        layout_style_radio, 
+        title_uppercase_checkbox, 
+        name_uppercase_checkbox,
+        section_title_uppercase_checkbox,
+        swap_sizes_checkbox
     ]
 
-    # --- 4. EVENT BINDING ---
-    # Connect the UI controls to the handler functions.
-
-    # Special event: changing the effect also updates speed and font size sliders
-    effect_radio.change(
-        fn=update_ui_on_effect_change,
-        inputs=effect_radio,
-        outputs=[speed_slider, font_size_slider]
+    layout_style_radio.change(
+        fn=toggle_swap_checkbox_visibility,
+        inputs=layout_style_radio,
+        outputs=swap_sizes_checkbox
     )
+    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
 
-    # General event: any change in an input control updates the main panel
     for input_component in inputs:
-        input_component.change(
-            fn=update_panel,
-            inputs=inputs,
-            outputs=panel
-        )
+        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
 
-# --- 5. APP LAUNCH ---
 if __name__ == "__main__":
     setup_demo_files()
     demo.launch()

src/README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_creditspanel`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_creditspanel"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_creditspanel'>Component GitHub Code</a></span></p>
+<a href="https://pypi.org/project/gradio_creditspanel/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_creditspanel"></a>  
 
 Credits Panel for Gradio UI
 
@@ -23,78 +23,56 @@ pip install gradio_creditspanel
 ## Usage
 
 ```python
-"""
-app.py
-
-This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
-It showcases all available features of the component, allowing users to dynamically adjust
-properties like animation effects, speed, layout, and styling. The app also demonstrates
-how to handle file dependencies (logo, licenses) in a portable way.
-"""
+# app.py
 
 import gradio as gr
 from gradio_creditspanel import CreditsPanel
 import os
 
-# --- 1. SETUP & DATA PREPARATION ---
-# This section prepares all necessary assets and data for the demo.
-# It ensures the demo runs out-of-the-box without manual setup.
-
 def setup_demo_files():
-    """
-    Creates necessary directories and dummy files (logo, licenses) for the demo.
-    This makes the application self-contained and easy to run.
-    """
-    # Create dummy license files
+    """Creates necessary directories and dummy files for the demo."""
     os.makedirs("LICENSES", exist_ok=True)
     if not os.path.exists("LICENSES/Apache.txt"):
         with open("LICENSES/Apache.txt", "w") as f:
-            f.write("Apache License\nVersion 2.0, January 2004\nhttp://www.apache.org/licenses/...")
+            f.write("Apache License\nVersion 2.0, January 2004...")
     if not os.path.exists("LICENSES/MIT.txt"):
         with open("LICENSES/MIT.txt", "w") as f:
-            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
-
-    # Create a placeholder logo if it doesn't exist
+            f.write("MIT License\nCopyright (c) 2025 Author...")
     os.makedirs("assets", exist_ok=True)
     if not os.path.exists("./assets/logo.webp"):
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# Initial data for the credits roll
+# --- UPDATED: Credits list with sections ---
 credits_list = [
+    {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    
+    {"section_title": "Development Team"},
     {"title": "Lead Developer", "name": "John Doe"},
     {"title": "Senior Backend Engineer", "name": "Michael Chen"},
     {"title": "Frontend Developer", "name": "Sarah Johnson"},
     {"title": "UI/UX Designer", "name": "Jane Smith"},
     {"title": "Database Architect", "name": "Alex Ray"},
+    
+    {"section_title": "Quality & Operations"},
     {"title": "DevOps Engineer", "name": "Liam Patel"},
     {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
     {"title": "Test Automation Engineer", "name": "Olivia Brown"},
-    {"title": "Security Analyst", "name": "David Kim"},
-    {"title": "Data Scientist", "name": "Sophie Martinez"},
-    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
-    {"title": "API Developer", "name": "Isabella Garcia"},
-    {"title": "Technical Writer", "name": "Noah Davis"},
-    {"title": "Scrum Master", "name": "Ava Rodriguez"},
 ]
 
-# Paths to license files
 license_paths = {
     "Gradio Framework": "./LICENSES/Apache.txt",
     "This Component": "./LICENSES/MIT.txt"
 }
 
-# Default animation speeds for each effect to provide a good user experience
 DEFAULT_SPEEDS = {
     "scroll": 40.0,
-    "starwars": 80.0,
+    "starwars": 70.0,
     "matrix": 40.0
 }
 
-# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
-# These functions define the application's interactive logic.
-
 def update_panel(
     effect: str, 
     speed: float, 
@@ -105,53 +83,57 @@ def update_panel(
     show_logo: bool, 
     show_licenses: bool, 
     show_credits: bool, 
-    logo_position: str,
+    logo_position: str, 
     logo_sizing: str, 
     logo_width: str | None, 
     logo_height: str | None,
     scroll_background_color: str | None, 
-    scroll_title_color: str | None,
-    scroll_name_color: str | None
+    scroll_title_color: str | None, 
+    scroll_name_color: str | None,    
+    layout_style: str, 
+    title_uppercase: bool, 
+    name_uppercase: bool, 
+    section_title_uppercase: bool,
+    swap_font_sizes: bool
 ) -> dict:
-    """
-    Callback function that updates all properties of the CreditsPanel component.
-    It takes the current state of all UI controls and returns a gr.update() dictionary.
-    """
+    """Callback function that updates all properties of the CreditsPanel component."""
     return gr.update(
         visible=True,
-        effect=effect,
-        speed=speed,
+        effect=effect, 
+        speed=speed, 
         base_font_size=base_font_size,
-        intro_title=intro_title,
+        intro_title=intro_title, 
         intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position,
+        sidebar_position=sidebar_position, 
         show_logo=show_logo,
-        show_licenses=show_licenses,
+        show_licenses=show_licenses, 
         show_credits=show_credits,
-        logo_position=logo_position,
+        logo_position=logo_position, 
         logo_sizing=logo_sizing,
-        logo_width=logo_width,
+        logo_width=logo_width, 
         logo_height=logo_height,
         scroll_background_color=scroll_background_color,
         scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,
-        value=credits_list  # The list of credits to display
+        scroll_name_color=scroll_name_color,        
+        layout_style=layout_style,
+        title_uppercase=title_uppercase,
+        name_uppercase=name_uppercase,
+        section_title_uppercase=section_title_uppercase,
+        swap_font_sizes_on_two_column=swap_font_sizes,
+        value=credits_list
     )
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
-    """
-    Updates the speed and font size sliders to sensible defaults when the
-    animation effect is changed.
-    """
+    """Updates sliders to sensible defaults when the animation effect is changed."""
     font_size = 1.5
     if effect == "starwars":
-        font_size = 6.0  # Star Wars effect looks better with a larger font
-    
+        font_size = 3.8
     speed = DEFAULT_SPEEDS.get(effect, 40.0)
     return speed, font_size
 
-# --- 3. GRADIO UI DEFINITION ---
-# This section constructs the user interface using gr.Blocks.
+def toggle_swap_checkbox_visibility(layout: str) -> dict:
+    """Show the swap checkbox only for the two-column layout."""
+    return gr.update(visible=(layout == 'two-column'))
 
 with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
     gr.Markdown(
@@ -163,42 +145,37 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
 
     with gr.Sidebar(position="right"):
         gr.Markdown("### Effects Settings")
-        effect_radio = gr.Radio(
-            ["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll",
-            info="Select the visual style for the credits."
-        )
-        speed_slider = gr.Slider(
-            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
-            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
+        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
+        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
+        
+        gr.Markdown("### Credits Layout Settings")
+        layout_style_radio = gr.Radio(
+            ["stacked", "two-column"], label="Layout Style", value="stacked",
+            info="How to display titles and names."
         )
-        font_size_slider = gr.Slider(
-            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
-            label="Base Font Size (rem)", info="Controls the base font size."
+        swap_sizes_checkbox = gr.Checkbox(
+            label="Swap Title/Name Font Sizes", value=False,
+            info="Emphasize name over title in two-column layout.",
+            visible=False
         )
-
+        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
+        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
+        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
+        
         gr.Markdown("### Intro Text")
-        intro_title_input = gr.Textbox(
-            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
-        )
-        intro_subtitle_input = gr.Textbox(
-            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
-        )
+        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
+        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
 
         gr.Markdown("### Layout & Visibility")
-        sidebar_position_radio = gr.Radio(
-            ["right", "bottom"], label="Sidebar Position", value="right",
-            info="Place the licenses sidebar on the right or bottom."
-        )
+        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
         show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
         show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
         show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
+        
         gr.Markdown("### Logo Customization")
-        logo_position_radio = gr.Radio(
-            ["left", "center", "right"], label="Logo Position", value="center"
-        )
-        logo_sizing_radio = gr.Radio(
-            ["stretch", "crop", "resize"], label="Logo Sizing", value="resize"
-        )
+        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
+        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
         logo_width_input = gr.Textbox(label="Logo Width", value="200px")
         logo_height_input = gr.Textbox(label="Logo Height", value="100px")
 
@@ -207,7 +184,6 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    # Instantiate the custom CreditsPanel component with default values
     panel = CreditsPanel(
         credits=credits_list,
         licenses=license_paths,
@@ -228,10 +204,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_height="100px",
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
-        scroll_name_color="#FFFFFF",
+        scroll_name_color="#FFFFFF",       
+        layout_style="stacked",
+        title_uppercase=False,
+        name_uppercase=False,
+        section_title_uppercase=True,
+        swap_font_sizes_on_two_column=False,
     )
 
-    # List of all input components that should trigger a panel update
     inputs = [
         effect_radio, 
         speed_slider, 
@@ -241,35 +221,31 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         sidebar_position_radio, 
         show_logo_checkbox, 
         show_licenses_checkbox,
-        show_credits_checkbox,
+        show_credits_checkbox, 
         logo_position_radio, 
         logo_sizing_radio, 
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
         scroll_title_color, 
-        scroll_name_color
+        scroll_name_color,        
+        layout_style_radio, 
+        title_uppercase_checkbox, 
+        name_uppercase_checkbox,
+        section_title_uppercase_checkbox,
+        swap_sizes_checkbox
     ]
 
-    # --- 4. EVENT BINDING ---
-    # Connect the UI controls to the handler functions.
-
-    # Special event: changing the effect also updates speed and font size sliders
-    effect_radio.change(
-        fn=update_ui_on_effect_change,
-        inputs=effect_radio,
-        outputs=[speed_slider, font_size_slider]
+    layout_style_radio.change(
+        fn=toggle_swap_checkbox_visibility,
+        inputs=layout_style_radio,
+        outputs=swap_sizes_checkbox
     )
+    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
 
-    # General event: any change in an input control updates the main panel
     for input_component in inputs:
-        input_component.change(
-            fn=update_panel,
-            inputs=inputs,
-            outputs=panel
-        )
+        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
 
-# --- 5. APP LAUNCH ---
 if __name__ == "__main__":
     setup_demo_files()
     demo.launch()
@@ -590,6 +566,71 @@ str | None
 <td align="left">None</td>
 </tr>
 
+<tr>
+<td align="left"><code>layout_style</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"stacked" | "two-column"
+```
+
+</td>
+<td align="left"><code>"stacked"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>title_uppercase</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>name_uppercase</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>section_title_uppercase</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>swap_font_sizes_on_two_column</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
 <tr>
 <td align="left"><code>label</code></td>
 <td align="left" style="width: 25%;">

src/backend/gradio_creditspanel/creditspanel.py

@@ -46,6 +46,11 @@ class CreditsPanel(Component):
         scroll_background_color: str | None = None,
         scroll_title_color: str | None = None,
         scroll_name_color: str | None = None,
+        layout_style: Literal["stacked", "two-column"] = "stacked",
+        title_uppercase: bool = False,
+        name_uppercase: bool = False,
+        section_title_uppercase: bool = True,
+        swap_font_sizes_on_two_column: bool = False,
         label: str | I18nData | None = None,
         every: float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
@@ -87,6 +92,11 @@ class CreditsPanel(Component):
             scroll_background_color (str | None, optional): Background color for scroll effect.
             scroll_title_color (str | None, optional): Color for credit titles.
             scroll_name_color (str | None, optional): Color for credit names.
+            layout_style (Literal["stacked", "two-column"], optional): Layout for credits ('title' above 'name' or side-by-side). Defaults to "stacked".
+            title_uppercase (bool, optional): Whether to display titles in uppercase. Defaults to False.
+            name_uppercase (bool, optional): Whether to display names in uppercase. Defaults to False.            
+            section_title_uppercase (bool, optional): Whether to display section titles in uppercase. Defaults to True.
+            swap_font_sizes_on_two_column (bool, optional): If True and layout is 'two-column', swap the font sizes of title and name. Defaults to False.
             label (str | I18nData | None, optional): Component label.
             every (float | None, optional): Interval for periodic updates.
             inputs (Component | Sequence[Component] | set[Component] | None, optional): Input components for events.
@@ -123,6 +133,12 @@ class CreditsPanel(Component):
         self.scroll_background_color = scroll_background_color
         self.scroll_title_color = scroll_title_color
         self.scroll_name_color = scroll_name_color
+        self.layout_style = layout_style
+        self.title_uppercase = title_uppercase
+        self.name_uppercase = name_uppercase
+        self.section_title_uppercase = section_title_uppercase
+        self.swap_font_sizes_on_two_column = swap_font_sizes_on_two_column
+        
         super().__init__(
             label=label,
             every=every,
@@ -217,7 +233,12 @@ class CreditsPanel(Component):
             "logo_height": self.logo_height,
             "scroll_background_color": self.scroll_background_color,
             "scroll_title_color": self.scroll_title_color,
-            "scroll_name_color": self.scroll_name_color
+            "scroll_name_color": self.scroll_name_color,
+            "layout_style": self.layout_style,
+            "title_uppercase": self.title_uppercase,
+            "name_uppercase": self.name_uppercase,
+            "section_title_uppercase": self.section_title_uppercase,
+            "swap_font_sizes_on_two_column": self.swap_font_sizes_on_two_column,
         }
 
     def api_info(self) -> Dict[str, Any]:
@@ -252,7 +273,12 @@ class CreditsPanel(Component):
             "logo_height": None,
             "scroll_background_color": None,
             "scroll_title_color": None,
-            "scroll_name_color": None
+            "scroll_name_color": None,
+            "layout_style": "stacked",
+            "title_uppercase": False,
+            "name_uppercase": False,
+            "section_title_uppercase": True,
+            "swap_font_sizes_on_two_column": False,
         }
 
     def example_value(self) -> Any:

src/backend/gradio_creditspanel/templates/component/style.css

@@ -1 +1 @@
-.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.wrapper.svelte-141h5y1.svelte-141h5y1{width:100%;height:100%;overflow:hidden;position:relative;font-family:sans-serif}.credit.intro-block.svelte-141h5y1.svelte-141h5y1{margin-bottom:5rem;text-align:center}.credits-container.svelte-141h5y1.svelte-141h5y1{position:absolute;bottom:0;transform:translateY(100%);width:100%;text-align:center;animation:svelte-141h5y1-scroll var(--animation-duration) linear infinite}.credit.svelte-141h5y1.svelte-141h5y1{margin-bottom:2rem}.credit.svelte-141h5y1 h2.svelte-141h5y1,.credit.svelte-141h5y1 p.svelte-141h5y1{margin:.5rem 0;font-family:sans-serif}@keyframes svelte-141h5y1-scroll{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.viewport.svelte-1gy01d0{width:100%;height:100%;position:relative;overflow:hidden;perspective:400px;-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%);mask-image:linear-gradient(to bottom,black 60%,transparent 100%);font-family:Droid Sans,sans-serif;font-weight:700}.stars.svelte-1gy01d0{position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;z-index:0;animation:svelte-1gy01d0-twinkle 10s linear infinite}.stars.small.svelte-1gy01d0{animation-duration:10s}.stars.medium.svelte-1gy01d0{animation-duration:15s}.stars.large.svelte-1gy01d0{animation-duration:20s}@keyframes svelte-1gy01d0-twinkle{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.crawl.svelte-1gy01d0{position:absolute;width:100%;bottom:0;transform-origin:50% 100%;animation:svelte-1gy01d0-crawl-animation var(--animation-duration) linear infinite;z-index:1;text-align:center}@keyframes svelte-1gy01d0-crawl-animation{0%{transform:rotateX(60deg) translateY(100%) translateZ(100px);opacity:1}to{transform:rotateX(60deg) translateY(-150%) translateZ(-1200px);opacity:1}}.credit.intro-block.svelte-1gy01d0{margin-bottom:5rem}.credit.svelte-1gy01d0{margin-bottom:2rem}h2.svelte-1gy01d0,p.svelte-1gy01d0{margin:.5rem 0;padding:0;white-space:nowrap}.matrix-container.svelte-8jsw80{width:100%;height:100%;position:relative;overflow:hidden}canvas.svelte-8jsw80{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.credits-scroll-overlay.svelte-8jsw80{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;color:#fff;font-family:monospace;text-align:center;-webkit-mask-image:linear-gradient(transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(transparent,black 20%,black 80%,transparent)}.credits-content.svelte-8jsw80{position:absolute;width:100%;bottom:0;transform:translateY(100%);animation:svelte-8jsw80-scroll-from-bottom var(--animation-duration) linear infinite}@keyframes svelte-8jsw80-scroll-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.credit-block.intro-block.svelte-8jsw80{margin-bottom:5rem}.credit-block.svelte-8jsw80{margin-bottom:2.5em}.title.svelte-8jsw80{color:#0f0;text-transform:uppercase;opacity:.8}.name.svelte-8jsw80{font-weight:700;color:#5f5;text-shadow:0 0 5px #0F0}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.block{border:none!important;box-shadow:none!important;border-style:none!important}.outer-logo-wrapper.svelte-1hawtr7.svelte-1hawtr7,.outer-credits-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:column;width:100%;border:none}.logo-panel.svelte-1hawtr7.svelte-1hawtr7{background:var(--background-fill-primary);border:none;display:flex!important;align-items:center;justify-content:var(--logo-justify, center);padding:0 0 20px;width:100%}.credits-panel-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:var(--panel-direction, row);min-height:var(--size-full, 500px);width:100%;background:var(--background-fill-primary);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden}.main-credits-panel.svelte-1hawtr7.svelte-1hawtr7{flex-grow:1;flex-shrink:1;min-width:200px;background:#000;overflow:hidden;position:relative}.licenses-sidebar.svelte-1hawtr7.svelte-1hawtr7{width:calc(100% - var(--main-panel-width, 400px));max-width:100%;max-height:var(--sidebar-max-height, none);flex-shrink:1;flex-grow:1;background:var(--background-fill-secondary);overflow-y:auto;border-left:var(--border-left, 1px solid var(--border-color-primary));border-top:var(--border-top, none)}.licenses-sidebar.svelte-1hawtr7 h3.svelte-1hawtr7{margin:var(--spacing-lg);font-size:var(--text-lg)}.licenses-sidebar.svelte-1hawtr7 li.svelte-1hawtr7{padding:0;margin:0;cursor:default;border-bottom:1px solid var(--border-color-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7{background:none;border:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;padding:var(--spacing-md) var(--spacing-lg);transition:background-color .2s}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:hover{background-color:var(--background-fill-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.licenses-sidebar.svelte-1hawtr7 li button.selected.svelte-1hawtr7{background-color:var(--color-accent);color:#fff;font-weight:700}.license-display.svelte-1hawtr7.svelte-1hawtr7{padding:var(--spacing-lg);overflow-y:auto;flex-grow:1;border-top:1px solid var(--border-color-primary);background:var(--background-fill-primary)}.license-display.svelte-1hawtr7 h4.svelte-1hawtr7{margin-top:0}.license-display.svelte-1hawtr7 pre.svelte-1hawtr7{white-space:pre-wrap;word-break:break-word;font-size:var(--text-sm);color:var(--body-text-color-subdued)}
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.wrapper.svelte-1t8lt48.svelte-1t8lt48{width:100%;height:100%;overflow:hidden;position:relative;font-family:sans-serif}.credits-container.svelte-1t8lt48.svelte-1t8lt48{position:absolute;bottom:0;transform:translateY(100%);width:100%;text-align:center;animation:svelte-1t8lt48-scroll var(--animation-duration) linear infinite;padding:0 2rem;box-sizing:border-box}.section-title.svelte-1t8lt48.svelte-1t8lt48{margin-top:4rem;margin-bottom:2.5rem;font-weight:700}.credit.intro-block.svelte-1t8lt48.svelte-1t8lt48{margin-bottom:5rem}.credit.svelte-1t8lt48.svelte-1t8lt48{margin-bottom:2rem}.credit.svelte-1t8lt48 h2.svelte-1t8lt48,.credit.svelte-1t8lt48 p.svelte-1t8lt48{margin:.5rem 0;font-family:sans-serif}.credit-two-column.svelte-1t8lt48.svelte-1t8lt48{display:flex;justify-content:space-between;align-items:baseline;text-align:left;margin:.8rem auto;max-width:80%;gap:1rem}.credit-two-column.svelte-1t8lt48 .title.svelte-1t8lt48{flex:1;text-align:right;padding-right:1rem}.credit-two-column.svelte-1t8lt48 .name.svelte-1t8lt48{flex:1;text-align:left;padding-left:1rem}.uppercase.svelte-1t8lt48.svelte-1t8lt48{text-transform:uppercase}@keyframes svelte-1t8lt48-scroll{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.viewport.svelte-upsott.svelte-upsott{width:100%;height:100%;position:relative;overflow:hidden;perspective:400px;-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%);mask-image:linear-gradient(to bottom,black 60%,transparent 100%);font-family:Droid Sans,sans-serif;font-weight:700}.stars.svelte-upsott.svelte-upsott{position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;z-index:0;animation:svelte-upsott-twinkle 10s linear infinite}.stars.small.svelte-upsott.svelte-upsott{animation-duration:10s}.stars.medium.svelte-upsott.svelte-upsott{animation-duration:15s}.stars.large.svelte-upsott.svelte-upsott{animation-duration:20s}@keyframes svelte-upsott-twinkle{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.crawl.svelte-upsott.svelte-upsott{position:absolute;width:100%;bottom:0;transform-origin:50% 100%;animation:svelte-upsott-crawl-animation var(--animation-duration) linear infinite;z-index:1;text-align:center}@keyframes svelte-upsott-crawl-animation{0%{transform:rotateX(60deg) translateY(100%) translateZ(100px)}to{transform:rotateX(60deg) translateY(-150%) translateZ(-1200px)}}.uppercase.svelte-upsott.svelte-upsott{text-transform:uppercase}.section-title.svelte-upsott.svelte-upsott{margin-top:5rem;margin-bottom:3rem;font-weight:700}.credit.intro-block.svelte-upsott.svelte-upsott{margin-bottom:5rem}.credit.svelte-upsott.svelte-upsott{margin-bottom:2rem}.credit.svelte-upsott h2.svelte-upsott,.credit.svelte-upsott p.svelte-upsott{margin:.5rem 0;padding:0;white-space:nowrap}.credit-two-column.svelte-upsott.svelte-upsott{display:flex;justify-content:space-between;align-items:baseline;margin:.8rem auto;width:90%;white-space:nowrap}.credit-two-column.svelte-upsott .spacer.svelte-upsott{flex-grow:1;border-bottom:1px dotted rgba(254,218,74,.3);margin:0 1em;transform:translateY(-.5em)}.matrix-container.svelte-1851m15.svelte-1851m15{width:100%;height:100%;position:relative;overflow:hidden}canvas.svelte-1851m15.svelte-1851m15{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.credits-scroll-overlay.svelte-1851m15.svelte-1851m15{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;color:#fff;font-family:monospace;text-align:center;-webkit-mask-image:linear-gradient(transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(transparent,black 20%,black 80%,transparent)}.credits-content.svelte-1851m15.svelte-1851m15{position:absolute;width:100%;bottom:0;transform:translateY(100%);animation:svelte-1851m15-scroll-from-bottom var(--animation-duration) linear infinite;padding:0 2rem;box-sizing:border-box}@keyframes svelte-1851m15-scroll-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.uppercase.svelte-1851m15.svelte-1851m15{text-transform:uppercase}.section-title.svelte-1851m15.svelte-1851m15{margin-top:4rem;margin-bottom:2.5rem;font-weight:700;color:#5f5;text-shadow:0 0 8px #0f0}.credit-block.intro-block.svelte-1851m15.svelte-1851m15{margin-bottom:5rem}.credit-block.svelte-1851m15.svelte-1851m15{margin-bottom:2.5em}.title.svelte-1851m15.svelte-1851m15{color:#0f0;opacity:.8}.name.svelte-1851m15.svelte-1851m15{font-weight:700;color:#5f5;text-shadow:0 0 5px #0f0}.credit-two-column.svelte-1851m15.svelte-1851m15{display:flex;justify-content:space-between;align-items:baseline;text-align:left;margin:.8em auto;max-width:80%;gap:1em}.credit-two-column.svelte-1851m15 .title.svelte-1851m15{flex:1;text-align:right;padding-right:1em}.credit-two-column.svelte-1851m15 .name.svelte-1851m15{flex:1;text-align:left;padding-left:1em}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.block{border:none!important;box-shadow:none!important;border-style:none!important}.outer-logo-wrapper.svelte-1hawtr7.svelte-1hawtr7,.outer-credits-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:column;width:100%;border:none}.logo-panel.svelte-1hawtr7.svelte-1hawtr7{background:var(--background-fill-primary);border:none;display:flex!important;align-items:center;justify-content:var(--logo-justify, center);padding:0 0 20px;width:100%}.credits-panel-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:var(--panel-direction, row);min-height:var(--size-full, 500px);width:100%;background:var(--background-fill-primary);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden}.main-credits-panel.svelte-1hawtr7.svelte-1hawtr7{flex-grow:1;flex-shrink:1;min-width:200px;background:#000;overflow:hidden;position:relative}.licenses-sidebar.svelte-1hawtr7.svelte-1hawtr7{width:calc(100% - var(--main-panel-width, 400px));max-width:100%;max-height:var(--sidebar-max-height, none);flex-shrink:1;flex-grow:1;background:var(--background-fill-secondary);overflow-y:auto;border-left:var(--border-left, 1px solid var(--border-color-primary));border-top:var(--border-top, none)}.licenses-sidebar.svelte-1hawtr7 h3.svelte-1hawtr7{margin:var(--spacing-lg);font-size:var(--text-lg)}.licenses-sidebar.svelte-1hawtr7 li.svelte-1hawtr7{padding:0;margin:0;cursor:default;border-bottom:1px solid var(--border-color-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7{background:none;border:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;padding:var(--spacing-md) var(--spacing-lg);transition:background-color .2s}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:hover{background-color:var(--background-fill-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.licenses-sidebar.svelte-1hawtr7 li button.selected.svelte-1hawtr7{background-color:var(--color-accent);color:#fff;font-weight:700}.license-display.svelte-1hawtr7.svelte-1hawtr7{padding:var(--spacing-lg);overflow-y:auto;flex-grow:1;border-top:1px solid var(--border-color-primary);background:var(--background-fill-primary)}.license-display.svelte-1hawtr7 h4.svelte-1hawtr7{margin-top:0}.license-display.svelte-1hawtr7 pre.svelte-1hawtr7{white-space:pre-wrap;word-break:break-word;font-size:var(--text-sm);color:var(--body-text-color-subdued)}

src/demo/app.py

@@ -1,75 +1,53 @@
-"""
-app.py
-
-This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
-It showcases all available features of the component, allowing users to dynamically adjust
-properties like animation effects, speed, layout, and styling. The app also demonstrates
-how to handle file dependencies (logo, licenses) in a portable way.
-"""
+# app.py
 
 import gradio as gr
 from gradio_creditspanel import CreditsPanel
 import os
 
-# --- 1. SETUP & DATA PREPARATION ---
-# This section prepares all necessary assets and data for the demo.
-# It ensures the demo runs out-of-the-box without manual setup.
-
 def setup_demo_files():
-    """
-    Creates necessary directories and dummy files (logo, licenses) for the demo.
-    This makes the application self-contained and easy to run.
-    """
-    # Create dummy license files
+    """Creates necessary directories and dummy files for the demo."""
     os.makedirs("LICENSES", exist_ok=True)
     if not os.path.exists("LICENSES/Apache.txt"):
         with open("LICENSES/Apache.txt", "w") as f:
-            f.write("Apache License\nVersion 2.0, January 2004\nhttp://www.apache.org/licenses/...")
+            f.write("Apache License\nVersion 2.0, January 2004...")
     if not os.path.exists("LICENSES/MIT.txt"):
         with open("LICENSES/MIT.txt", "w") as f:
-            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
-
-    # Create a placeholder logo if it doesn't exist
+            f.write("MIT License\nCopyright (c) 2025 Author...")
     os.makedirs("assets", exist_ok=True)
     if not os.path.exists("./assets/logo.webp"):
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# Initial data for the credits roll
+# --- UPDATED: Credits list with sections ---
 credits_list = [
+    {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    
+    {"section_title": "Development Team"},
     {"title": "Lead Developer", "name": "John Doe"},
     {"title": "Senior Backend Engineer", "name": "Michael Chen"},
     {"title": "Frontend Developer", "name": "Sarah Johnson"},
     {"title": "UI/UX Designer", "name": "Jane Smith"},
     {"title": "Database Architect", "name": "Alex Ray"},
+    
+    {"section_title": "Quality & Operations"},
     {"title": "DevOps Engineer", "name": "Liam Patel"},
     {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
     {"title": "Test Automation Engineer", "name": "Olivia Brown"},
-    {"title": "Security Analyst", "name": "David Kim"},
-    {"title": "Data Scientist", "name": "Sophie Martinez"},
-    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
-    {"title": "API Developer", "name": "Isabella Garcia"},
-    {"title": "Technical Writer", "name": "Noah Davis"},
-    {"title": "Scrum Master", "name": "Ava Rodriguez"},
 ]
 
-# Paths to license files
 license_paths = {
     "Gradio Framework": "./LICENSES/Apache.txt",
     "This Component": "./LICENSES/MIT.txt"
 }
 
-# Default animation speeds for each effect to provide a good user experience
 DEFAULT_SPEEDS = {
     "scroll": 40.0,
-    "starwars": 80.0,
+    "starwars": 70.0,
     "matrix": 40.0
 }
 
-# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
-# These functions define the application's interactive logic.
-
 def update_panel(
     effect: str, 
     speed: float, 
@@ -80,53 +58,57 @@ def update_panel(
     show_logo: bool, 
     show_licenses: bool, 
     show_credits: bool, 
-    logo_position: str,
+    logo_position: str, 
     logo_sizing: str, 
     logo_width: str | None, 
     logo_height: str | None,
     scroll_background_color: str | None, 
-    scroll_title_color: str | None,
-    scroll_name_color: str | None
+    scroll_title_color: str | None, 
+    scroll_name_color: str | None,    
+    layout_style: str, 
+    title_uppercase: bool, 
+    name_uppercase: bool, 
+    section_title_uppercase: bool,
+    swap_font_sizes: bool
 ) -> dict:
-    """
-    Callback function that updates all properties of the CreditsPanel component.
-    It takes the current state of all UI controls and returns a gr.update() dictionary.
-    """
+    """Callback function that updates all properties of the CreditsPanel component."""
     return gr.update(
         visible=True,
-        effect=effect,
-        speed=speed,
+        effect=effect, 
+        speed=speed, 
         base_font_size=base_font_size,
-        intro_title=intro_title,
+        intro_title=intro_title, 
         intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position,
+        sidebar_position=sidebar_position, 
         show_logo=show_logo,
-        show_licenses=show_licenses,
+        show_licenses=show_licenses, 
         show_credits=show_credits,
-        logo_position=logo_position,
+        logo_position=logo_position, 
         logo_sizing=logo_sizing,
-        logo_width=logo_width,
+        logo_width=logo_width, 
         logo_height=logo_height,
         scroll_background_color=scroll_background_color,
         scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,
-        value=credits_list  # The list of credits to display
+        scroll_name_color=scroll_name_color,        
+        layout_style=layout_style,
+        title_uppercase=title_uppercase,
+        name_uppercase=name_uppercase,
+        section_title_uppercase=section_title_uppercase,
+        swap_font_sizes_on_two_column=swap_font_sizes,
+        value=credits_list
     )
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
-    """
-    Updates the speed and font size sliders to sensible defaults when the
-    animation effect is changed.
-    """
+    """Updates sliders to sensible defaults when the animation effect is changed."""
     font_size = 1.5
     if effect == "starwars":
-        font_size = 6.0  # Star Wars effect looks better with a larger font
-    
+        font_size = 3.8
     speed = DEFAULT_SPEEDS.get(effect, 40.0)
     return speed, font_size
 
-# --- 3. GRADIO UI DEFINITION ---
-# This section constructs the user interface using gr.Blocks.
+def toggle_swap_checkbox_visibility(layout: str) -> dict:
+    """Show the swap checkbox only for the two-column layout."""
+    return gr.update(visible=(layout == 'two-column'))
 
 with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
     gr.Markdown(
@@ -138,42 +120,37 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
 
     with gr.Sidebar(position="right"):
         gr.Markdown("### Effects Settings")
-        effect_radio = gr.Radio(
-            ["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll",
-            info="Select the visual style for the credits."
+        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
+        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
+        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
+        
+        gr.Markdown("### Credits Layout Settings")
+        layout_style_radio = gr.Radio(
+            ["stacked", "two-column"], label="Layout Style", value="stacked",
+            info="How to display titles and names."
         )
-        speed_slider = gr.Slider(
-            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
-            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        swap_sizes_checkbox = gr.Checkbox(
+            label="Swap Title/Name Font Sizes", value=False,
+            info="Emphasize name over title in two-column layout.",
+            visible=False
         )
-        font_size_slider = gr.Slider(
-            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
-            label="Base Font Size (rem)", info="Controls the base font size."
-        )
-
+        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
+        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
+        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
+        
         gr.Markdown("### Intro Text")
-        intro_title_input = gr.Textbox(
-            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
-        )
-        intro_subtitle_input = gr.Textbox(
-            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
-        )
+        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
+        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
 
         gr.Markdown("### Layout & Visibility")
-        sidebar_position_radio = gr.Radio(
-            ["right", "bottom"], label="Sidebar Position", value="right",
-            info="Place the licenses sidebar on the right or bottom."
-        )
+        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
         show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
         show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
         show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
+        
         gr.Markdown("### Logo Customization")
-        logo_position_radio = gr.Radio(
-            ["left", "center", "right"], label="Logo Position", value="center"
-        )
-        logo_sizing_radio = gr.Radio(
-            ["stretch", "crop", "resize"], label="Logo Sizing", value="resize"
-        )
+        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
+        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
         logo_width_input = gr.Textbox(label="Logo Width", value="200px")
         logo_height_input = gr.Textbox(label="Logo Height", value="100px")
 
@@ -182,7 +159,6 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    # Instantiate the custom CreditsPanel component with default values
     panel = CreditsPanel(
         credits=credits_list,
         licenses=license_paths,
@@ -203,10 +179,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_height="100px",
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
-        scroll_name_color="#FFFFFF",
+        scroll_name_color="#FFFFFF",       
+        layout_style="stacked",
+        title_uppercase=False,
+        name_uppercase=False,
+        section_title_uppercase=True,
+        swap_font_sizes_on_two_column=False,
     )
 
-    # List of all input components that should trigger a panel update
     inputs = [
         effect_radio, 
         speed_slider, 
@@ -216,35 +196,31 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         sidebar_position_radio, 
         show_logo_checkbox, 
         show_licenses_checkbox,
-        show_credits_checkbox,
+        show_credits_checkbox, 
         logo_position_radio, 
         logo_sizing_radio, 
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
         scroll_title_color, 
-        scroll_name_color
+        scroll_name_color,        
+        layout_style_radio, 
+        title_uppercase_checkbox, 
+        name_uppercase_checkbox,
+        section_title_uppercase_checkbox,
+        swap_sizes_checkbox
     ]
 
-    # --- 4. EVENT BINDING ---
-    # Connect the UI controls to the handler functions.
-
-    # Special event: changing the effect also updates speed and font size sliders
-    effect_radio.change(
-        fn=update_ui_on_effect_change,
-        inputs=effect_radio,
-        outputs=[speed_slider, font_size_slider]
+    layout_style_radio.change(
+        fn=toggle_swap_checkbox_visibility,
+        inputs=layout_style_radio,
+        outputs=swap_sizes_checkbox
     )
+    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
 
-    # General event: any change in an input control updates the main panel
     for input_component in inputs:
-        input_component.change(
-            fn=update_panel,
-            inputs=inputs,
-            outputs=panel
-        )
+        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
 
-# --- 5. APP LAUNCH ---
 if __name__ == "__main__":
     setup_demo_files()
     demo.launch()

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nSupports displaying a logo, licenses, and configurable text styling.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': 'Dict[str, Any] | None: The input payload, returned unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
+_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nSupports displaying a logo, licenses, and configurable text styling.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'layout_style': {'type': '"stacked" | "two-column"', 'default': '"stacked"', 'description': None}, 'title_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'name_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'section_title_uppercase': {'type': 'bool', 'default': 'True', 'description': None}, 'swap_font_sizes_on_two_column': {'type': 'bool', 'default': 'False', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': 'Dict[str, Any] | None: The input payload, returned unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -38,78 +38,56 @@ pip install gradio_creditspanel
 ## Usage
 
 ```python
-\"\"\"
-app.py
-
-This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
-It showcases all available features of the component, allowing users to dynamically adjust
-properties like animation effects, speed, layout, and styling. The app also demonstrates
-how to handle file dependencies (logo, licenses) in a portable way.
-\"\"\"
+# app.py
 
 import gradio as gr
 from gradio_creditspanel import CreditsPanel
 import os
 
-# --- 1. SETUP & DATA PREPARATION ---
-# This section prepares all necessary assets and data for the demo.
-# It ensures the demo runs out-of-the-box without manual setup.
-
 def setup_demo_files():
-    \"\"\"
-    Creates necessary directories and dummy files (logo, licenses) for the demo.
-    This makes the application self-contained and easy to run.
-    \"\"\"
-    # Create dummy license files
+    \"\"\"Creates necessary directories and dummy files for the demo.\"\"\"
     os.makedirs("LICENSES", exist_ok=True)
     if not os.path.exists("LICENSES/Apache.txt"):
         with open("LICENSES/Apache.txt", "w") as f:
-            f.write("Apache License\nVersion 2.0, January 2004\nhttp://www.apache.org/licenses/...")
+            f.write("Apache License\nVersion 2.0, January 2004...")
     if not os.path.exists("LICENSES/MIT.txt"):
         with open("LICENSES/MIT.txt", "w") as f:
-            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
-
-    # Create a placeholder logo if it doesn't exist
+            f.write("MIT License\nCopyright (c) 2025 Author...")
     os.makedirs("assets", exist_ok=True)
     if not os.path.exists("./assets/logo.webp"):
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# Initial data for the credits roll
+# --- UPDATED: Credits list with sections ---
 credits_list = [
+    {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    
+    {"section_title": "Development Team"},
     {"title": "Lead Developer", "name": "John Doe"},
     {"title": "Senior Backend Engineer", "name": "Michael Chen"},
     {"title": "Frontend Developer", "name": "Sarah Johnson"},
     {"title": "UI/UX Designer", "name": "Jane Smith"},
     {"title": "Database Architect", "name": "Alex Ray"},
+    
+    {"section_title": "Quality & Operations"},
     {"title": "DevOps Engineer", "name": "Liam Patel"},
     {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
     {"title": "Test Automation Engineer", "name": "Olivia Brown"},
-    {"title": "Security Analyst", "name": "David Kim"},
-    {"title": "Data Scientist", "name": "Sophie Martinez"},
-    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
-    {"title": "API Developer", "name": "Isabella Garcia"},
-    {"title": "Technical Writer", "name": "Noah Davis"},
-    {"title": "Scrum Master", "name": "Ava Rodriguez"},
 ]
 
-# Paths to license files
 license_paths = {
     "Gradio Framework": "./LICENSES/Apache.txt",
     "This Component": "./LICENSES/MIT.txt"
 }
 
-# Default animation speeds for each effect to provide a good user experience
 DEFAULT_SPEEDS = {
     "scroll": 40.0,
-    "starwars": 80.0,
+    "starwars": 70.0,
     "matrix": 40.0
 }
 
-# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
-# These functions define the application's interactive logic.
-
 def update_panel(
     effect: str, 
     speed: float, 
@@ -120,53 +98,57 @@ def update_panel(
     show_logo: bool, 
     show_licenses: bool, 
     show_credits: bool, 
-    logo_position: str,
+    logo_position: str, 
     logo_sizing: str, 
     logo_width: str | None, 
     logo_height: str | None,
     scroll_background_color: str | None, 
-    scroll_title_color: str | None,
-    scroll_name_color: str | None
+    scroll_title_color: str | None, 
+    scroll_name_color: str | None,    
+    layout_style: str, 
+    title_uppercase: bool, 
+    name_uppercase: bool, 
+    section_title_uppercase: bool,
+    swap_font_sizes: bool
 ) -> dict:
-    \"\"\"
-    Callback function that updates all properties of the CreditsPanel component.
-    It takes the current state of all UI controls and returns a gr.update() dictionary.
-    \"\"\"
+    \"\"\"Callback function that updates all properties of the CreditsPanel component.\"\"\"
     return gr.update(
         visible=True,
-        effect=effect,
-        speed=speed,
+        effect=effect, 
+        speed=speed, 
         base_font_size=base_font_size,
-        intro_title=intro_title,
+        intro_title=intro_title, 
         intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position,
+        sidebar_position=sidebar_position, 
         show_logo=show_logo,
-        show_licenses=show_licenses,
+        show_licenses=show_licenses, 
         show_credits=show_credits,
-        logo_position=logo_position,
+        logo_position=logo_position, 
         logo_sizing=logo_sizing,
-        logo_width=logo_width,
+        logo_width=logo_width, 
         logo_height=logo_height,
         scroll_background_color=scroll_background_color,
         scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,
-        value=credits_list  # The list of credits to display
+        scroll_name_color=scroll_name_color,        
+        layout_style=layout_style,
+        title_uppercase=title_uppercase,
+        name_uppercase=name_uppercase,
+        section_title_uppercase=section_title_uppercase,
+        swap_font_sizes_on_two_column=swap_font_sizes,
+        value=credits_list
     )
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
-    \"\"\"
-    Updates the speed and font size sliders to sensible defaults when the
-    animation effect is changed.
-    \"\"\"
+    \"\"\"Updates sliders to sensible defaults when the animation effect is changed.\"\"\"
     font_size = 1.5
     if effect == "starwars":
-        font_size = 6.0  # Star Wars effect looks better with a larger font
-    
+        font_size = 3.8
     speed = DEFAULT_SPEEDS.get(effect, 40.0)
     return speed, font_size
 
-# --- 3. GRADIO UI DEFINITION ---
-# This section constructs the user interface using gr.Blocks.
+def toggle_swap_checkbox_visibility(layout: str) -> dict:
+    \"\"\"Show the swap checkbox only for the two-column layout.\"\"\"
+    return gr.update(visible=(layout == 'two-column'))
 
 with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
     gr.Markdown(
@@ -178,42 +160,37 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
 
     with gr.Sidebar(position="right"):
         gr.Markdown("### Effects Settings")
-        effect_radio = gr.Radio(
-            ["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll",
-            info="Select the visual style for the credits."
+        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
+        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
+        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
+        
+        gr.Markdown("### Credits Layout Settings")
+        layout_style_radio = gr.Radio(
+            ["stacked", "two-column"], label="Layout Style", value="stacked",
+            info="How to display titles and names."
         )
-        speed_slider = gr.Slider(
-            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
-            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        swap_sizes_checkbox = gr.Checkbox(
+            label="Swap Title/Name Font Sizes", value=False,
+            info="Emphasize name over title in two-column layout.",
+            visible=False
         )
-        font_size_slider = gr.Slider(
-            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
-            label="Base Font Size (rem)", info="Controls the base font size."
-        )
-
+        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
+        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
+        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
+        
         gr.Markdown("### Intro Text")
-        intro_title_input = gr.Textbox(
-            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
-        )
-        intro_subtitle_input = gr.Textbox(
-            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
-        )
+        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
+        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
 
         gr.Markdown("### Layout & Visibility")
-        sidebar_position_radio = gr.Radio(
-            ["right", "bottom"], label="Sidebar Position", value="right",
-            info="Place the licenses sidebar on the right or bottom."
-        )
+        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
         show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
         show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
         show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
+        
         gr.Markdown("### Logo Customization")
-        logo_position_radio = gr.Radio(
-            ["left", "center", "right"], label="Logo Position", value="center"
-        )
-        logo_sizing_radio = gr.Radio(
-            ["stretch", "crop", "resize"], label="Logo Sizing", value="resize"
-        )
+        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
+        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
         logo_width_input = gr.Textbox(label="Logo Width", value="200px")
         logo_height_input = gr.Textbox(label="Logo Height", value="100px")
 
@@ -222,7 +199,6 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    # Instantiate the custom CreditsPanel component with default values
     panel = CreditsPanel(
         credits=credits_list,
         licenses=license_paths,
@@ -243,10 +219,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_height="100px",
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
-        scroll_name_color="#FFFFFF",
+        scroll_name_color="#FFFFFF",       
+        layout_style="stacked",
+        title_uppercase=False,
+        name_uppercase=False,
+        section_title_uppercase=True,
+        swap_font_sizes_on_two_column=False,
     )
 
-    # List of all input components that should trigger a panel update
     inputs = [
         effect_radio, 
         speed_slider, 
@@ -256,35 +236,31 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         sidebar_position_radio, 
         show_logo_checkbox, 
         show_licenses_checkbox,
-        show_credits_checkbox,
+        show_credits_checkbox, 
         logo_position_radio, 
         logo_sizing_radio, 
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
         scroll_title_color, 
-        scroll_name_color
+        scroll_name_color,        
+        layout_style_radio, 
+        title_uppercase_checkbox, 
+        name_uppercase_checkbox,
+        section_title_uppercase_checkbox,
+        swap_sizes_checkbox
     ]
 
-    # --- 4. EVENT BINDING ---
-    # Connect the UI controls to the handler functions.
-
-    # Special event: changing the effect also updates speed and font size sliders
-    effect_radio.change(
-        fn=update_ui_on_effect_change,
-        inputs=effect_radio,
-        outputs=[speed_slider, font_size_slider]
+    layout_style_radio.change(
+        fn=toggle_swap_checkbox_visibility,
+        inputs=layout_style_radio,
+        outputs=swap_sizes_checkbox
     )
+    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
 
-    # General event: any change in an input control updates the main panel
     for input_component in inputs:
-        input_component.change(
-            fn=update_panel,
-            inputs=inputs,
-            outputs=panel
-        )
+        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
 
-# --- 5. APP LAUNCH ---
 if __name__ == "__main__":
     setup_demo_files()
     demo.launch()

src/frontend/Index.svelte

@@ -11,7 +11,7 @@
   /**
    * Props for the Index component.
    * @typedef {Object} Value
-   * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
+   * @property {Array<{title?: string, name?: string, section_title?: string}>} credits - List of credits with title and name.
    * @property {Record<string, string>} licenses - License names and content.
    * @property {"scroll" | "starwars" | "matrix"} effect - Credits display effect.
    * @property {number} speed - Animation speed in seconds.
@@ -32,6 +32,11 @@
    * @property {string | null} scroll_name_color - Credit name color.
    * @property {number} title_font_size - Title font size (unused in StarWarsEffect).
    * @property {number} name_font_size - Name font size (unused in StarWarsEffect).
+   * @property {"stacked" | "two-column"} layout_style - Credit layout style.
+   * @property {boolean} title_uppercase - Transform title to uppercase.
+   * @property {boolean} name_uppercase - Transform name to uppercase.
+   * @property {boolean} section_title_uppercase - Transform section title to uppercase.
+   * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes in two-column layout.
    */
   export let value: Value | null = null;
   export let elem_id = "";
@@ -48,11 +53,9 @@
   // Default value if `value` is null
   $: effectiveValue = value || {
     credits: [
+      { section_title: "Default Team"},
       { title: "Lead Developer", name: "John Doe" },
       { title: "UI/UX Design", name: "Jane Smith" },
-      { title: "Backend Engineering", name: "Alex Ray" },
-      { title: "Component Concept", name: "Your Name" },
-      { title: "Quality Assurance", name: "Sam Wilson" },
     ],
     licenses: {
       "Gradio Framework": "Apache License placeholder",
@@ -74,7 +77,12 @@
     logo_height: null,
     scroll_background_color: null,
     scroll_title_color: null,
-    scroll_name_color: null   
+    scroll_name_color: null,    
+    layout_style: "stacked",
+    title_uppercase: false,
+    name_uppercase: false,
+    section_title_uppercase: true,
+    swap_font_sizes_on_two_column: false,
   };
 
   // Tracks selected license for display
@@ -200,7 +208,12 @@
                       intro_subtitle={effectiveValue.intro_subtitle}
                       background_color={effectiveValue.scroll_background_color}
                       title_color={effectiveValue.scroll_title_color}
-                      name_color={effectiveValue.scroll_name_color}               
+                      name_color={effectiveValue.scroll_name_color}                     
+                      layout_style={effectiveValue.layout_style}
+                      title_uppercase={effectiveValue.title_uppercase}
+                      name_uppercase={effectiveValue.name_uppercase}
+                      section_title_uppercase={effectiveValue.section_title_uppercase}
+                      swap_font_sizes_on_two_column={effectiveValue.swap_font_sizes_on_two_column}
                     />
                   {:else if effectiveValue.effect === "starwars"}
                     <StarWarsEffect
@@ -208,7 +221,12 @@
                       speed={effectiveValue.speed}
                       base_font_size={effectiveValue.base_font_size}
                       intro_title={effectiveValue.intro_title}
-                      intro_subtitle={effectiveValue.intro_subtitle}                
+                      intro_subtitle={effectiveValue.intro_subtitle}     
+                      layout_style={effectiveValue.layout_style}
+                      title_uppercase={effectiveValue.title_uppercase}
+                      name_uppercase={effectiveValue.name_uppercase}
+                      section_title_uppercase={effectiveValue.section_title_uppercase}
+                      swap_font_sizes_on_two_column={effectiveValue.swap_font_sizes_on_two_column}           
                     />
                   {:else if effectiveValue.effect === "matrix"}
                     <MatrixEffect
@@ -216,7 +234,12 @@
                       speed={effectiveValue.speed}
                       base_font_size={effectiveValue.base_font_size}
                       intro_title={effectiveValue.intro_title}
-                      intro_subtitle={effectiveValue.intro_subtitle}                
+                      intro_subtitle={effectiveValue.intro_subtitle}    
+                      layout_style={effectiveValue.layout_style}
+                      title_uppercase={effectiveValue.title_uppercase}
+                      name_uppercase={effectiveValue.name_uppercase}
+                      section_title_uppercase={effectiveValue.section_title_uppercase}
+                      swap_font_sizes_on_two_column={effectiveValue.swap_font_sizes_on_two_column}            
                     />
                   {/if}
                 </div>
@@ -251,6 +274,7 @@
     {/key}
   {/if}
 </Block>
+
 <svelte:head>
   {#if effectiveValue.sidebar_position === "bottom"}
     <!-- Bottom sidebar styles -->

src/frontend/shared/MatrixEffect.svelte

@@ -1,192 +1,308 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from "svelte";
 
-    /**
-     * Props for the MatrixEffect component.
-     * @typedef {Object} Props
-     * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
-     * @property {number} speed - Animation speed in seconds (default: 20).
-     * @property {number} base_font_size - Base font size in em (default: 1.0).
-     * @property {string | null} intro_title - Optional intro title.
-     * @property {string | null} intro_subtitle - Optional intro subtitle.
-     */
-    export let credits: Props['credits'];
-    export let speed: number = 20;
-    export let base_font_size: number = 1.0;
-    export let intro_title: string | null = null;
-    export let intro_subtitle: string | null = null;
+  /**
+   * Props for the MatrixEffect component.
+   * @typedef {Object} Props
+   * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
+   * @property {number} speed - Animation speed in seconds (default: 20).
+   * @property {number} base_font_size - Base font size in em (default: 1.0).
+   * @property {string | null} intro_title - Optional intro title.
+   * @property {string | null} intro_subtitle - Optional intro subtitle.
+   * @property {"stacked" | "two-column"} layout_style - Layout for credits.
+   * @property {boolean} title_uppercase - Transform title to uppercase.
+   * @property {boolean} name_uppercase - Transform name to uppercase.
+   * @property {boolean} section_title_uppercase - Transform section title to uppercase.
+   * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.
+   */
+  export let credits: Props["credits"];
+  export let speed: number = 20;
+  export let base_font_size: number = 1.0;
+  export let intro_title: string | null = null;
+  export let intro_subtitle: string | null = null;
+  export let layout_style: "stacked" | "two-column" = "stacked";
+  export let title_uppercase: boolean = false;
+  export let name_uppercase: boolean = false;
+  export let section_title_uppercase: boolean = true;
+  export let swap_font_sizes_on_two_column: boolean = false;
 
-    // Combines intro and credits for display
-    $: display_items = (() => {
-        const items = [];
-        if (intro_title || intro_subtitle) {
-            items.push({ 
-                title: intro_title || '', 
-                name: intro_subtitle || '',
-                is_intro: true
-            });
-        }
-        return [...items, ...credits.map(c => ({ ...c, is_intro: false }))];
-    })();
+  // Combines intro and credits for display
+  $: display_items = (() => {
+    const items = [];
+    if (intro_title || intro_subtitle) {
+      items.push({
+        title: intro_title || "",
+        name: intro_subtitle || "",
+        is_intro: true,
+      });
+    }
+    return [...items, ...credits.map((c) => ({ ...c, is_intro: false }))];
+  })();
 
-    // Reactive font size styles
-    $: title_style = (is_intro: boolean) => `font-size: ${is_intro ? base_font_size * 1.2 : base_font_size * 0.8}em;`;
-    $: name_style = (is_intro: boolean) => `font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}em;`;
+  // Reactive font size styles
+  $: title_style = (is_intro: boolean) =>
+    `font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}em;`;
+  $: name_style = (is_intro: boolean) =>
+    `font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.8}em;`;
+  $: section_title_style = `font-size: ${base_font_size * 1.2}em;`;
 
-    // Canvas setup for Matrix effect
-    let canvas: HTMLCanvasElement;
-    let ctx: CanvasRenderingContext2D;
-    let contentElement: HTMLElement | null;
-    const fontSize = 16;
-    const characters = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン01';
-    let columns: number;
-    let drops: number[] = [];
-    let animationFrameId: number;
+  // Canvas setup for Matrix effect
+  let canvas: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D;
+  let contentElement: HTMLElement | null;
+  const fontSize = 16;
+  const characters =
+    "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン01";
+  let columns: number;
+  let drops: number[] = [];
+  let animationFrameId: number;
 
-    // Initialize canvas and drops
-    function setup() {
-        if (!canvas) return;
-        const parent = canvas.parentElement;
-        if (parent) {
-            canvas.width = parent.clientWidth;
-            canvas.height = parent.clientHeight;
-        }
-        ctx = canvas.getContext('2d')!;
-        columns = Math.floor(canvas.width / fontSize);
-        drops = Array(columns).fill(1);
+  // Initialize canvas and drops
+  function setup() {
+    if (!canvas) return;
+    const parent = canvas.parentElement;
+    if (parent) {
+      canvas.width = parent.clientWidth;
+      canvas.height = parent.clientHeight;
     }
+    ctx = canvas.getContext("2d")!;
+    columns = Math.floor(canvas.width / fontSize);
+    drops = Array(columns).fill(1);
+  }
 
-    // Draw Matrix falling characters
-    function drawMatrix() {
-        if (!ctx) return;
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = '#0F0';
-        ctx.font = `${fontSize}px monospace`;
-        for (let i = 0; i < drops.length; i++) {
-            const text = characters.charAt(Math.floor(Math.random() * characters.length));
-            ctx.fillText(text, i * fontSize, drops[i] * fontSize);
-            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
-                drops[i] = 0;
-            }
-            drops[i]++;
-        }
-        animationFrameId = requestAnimationFrame(drawMatrix);
+  // Draw Matrix falling characters
+  function drawMatrix() {
+    if (!ctx) return;
+    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "#0F0";
+    ctx.font = `${fontSize}px monospace`;
+    for (let i = 0; i < drops.length; i++) {
+      const text = characters.charAt(
+        Math.floor(Math.random() * characters.length)
+      );
+      ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+      if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+        drops[i] = 0;
+      }
+      drops[i]++;
     }
+    animationFrameId = requestAnimationFrame(drawMatrix);
+  }
 
-    // Reset credits animation
-    function resetCreditsAnimation() {
-        if (contentElement) {
-            contentElement.style.animation = 'none';
-            void contentElement.offsetHeight; // Trigger reflow
-            contentElement.style.animation = '';
-        }
+  // Reset credits animation
+  function resetCreditsAnimation() {
+    if (contentElement) {
+      contentElement.style.animation = "none";
+      void contentElement.offsetHeight; // Trigger reflow
+      contentElement.style.animation = "";
     }
+  }
 
-    // Setup canvas and animation on mount
-    onMount(() => {
-        setup();
-        drawMatrix();
-        resetCreditsAnimation();
-        const resizeObserver = new ResizeObserver(() => {
-            cancelAnimationFrame(animationFrameId);
-            setup();
-            drawMatrix();
-        });
-        if (canvas.parentElement) {
-            resizeObserver.observe(canvas.parentElement);
-        }
-        return () => {
-            cancelAnimationFrame(animationFrameId);
-            if (canvas.parentElement) {
-                resizeObserver.unobserve(canvas.parentElement);
-            }
-        };
+  // Setup canvas and animation on mount
+  onMount(() => {
+    setup();
+    drawMatrix();
+    resetCreditsAnimation();
+    const resizeObserver = new ResizeObserver(() => {
+      cancelAnimationFrame(animationFrameId);
+      setup();
+      drawMatrix();
     });
+    if (canvas.parentElement) {
+      resizeObserver.observe(canvas.parentElement);
+    }
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      if (canvas.parentElement) {
+        resizeObserver.unobserve(canvas.parentElement);
+      }
+    };
+  });
 
-    // Reset animation on prop changes
-    $: credits, speed, intro_title, intro_subtitle, resetCreditsAnimation();
+  // Reset animation on prop changes
+  $: credits,
+    speed,
+    intro_title,
+    intro_subtitle,
+    layout_style,
+    resetCreditsAnimation();
 
-    // Cleanup on destroy
-    onDestroy(() => {
-        contentElement = null;
-    });
+  // Cleanup on destroy
+  onDestroy(() => {
+    contentElement = null;
+  });
 </script>
 
 <div class="matrix-container">
-    <canvas bind:this={canvas}></canvas>
-    <div class="credits-scroll-overlay">
-        <div class="credits-content" bind:this={contentElement} style="--animation-duration: {speed}s;">
-            {#each display_items as item}
-                <div class="credit-block" class:intro-block={item.is_intro}>
-                    <div style={title_style(item.is_intro)} class="title">{item.title}</div>
-                    {#if item.name}
-                        <div style={name_style(item.is_intro)} class="name">{item.name}</div>
-                    {/if}
-                </div>
-            {/each}
-        </div>
+  <canvas bind:this={canvas}></canvas>
+  <div class="credits-scroll-overlay">
+    <div
+      class="credits-content"
+      bind:this={contentElement}
+      style="--animation-duration: {speed}s;"
+    >
+      {#each display_items as item}
+        <!-- Render Section Title -->
+        {#if item.section_title}
+          <div
+            class="section-title"
+            style={section_title_style}
+            class:uppercase={section_title_uppercase}
+          >
+            {item.section_title}
+          </div>
+          <!-- Render Credit or Intro -->
+        {:else if layout_style === "two-column" && !item.is_intro}
+          <!-- Two-Column Layout -->
+          <div class="credit-two-column">
+            <div
+              class="title"
+              style={swap_font_sizes_on_two_column
+                ? name_style(false)
+                : title_style(false)}
+              class:uppercase={title_uppercase}
+            >
+              {item.title}
+            </div>
+            <div
+              class="name"
+              style={swap_font_sizes_on_two_column
+                ? title_style(false)
+                : name_style(false)}
+              class:uppercase={name_uppercase}
+            >
+              {item.name}
+            </div>
+          </div>
+        {:else}
+          <!-- Stacked Layout -->
+          <div class="credit-block" class:intro-block={item.is_intro}>
+            <div
+              style={title_style(item.is_intro)}
+              class="title"
+              class:uppercase={title_uppercase && !item.is_intro}
+            >
+              {item.title}
+            </div>
+            {#if item.name}
+              <div
+                style={name_style(item.is_intro)}
+                class="name"
+                class:uppercase={name_uppercase && !item.is_intro}
+              >
+                {item.name}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      {/each}
     </div>
+  </div>
 </div>
 
 <style>
-    /* Container for Matrix effect */
-    .matrix-container {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-    }
-    /* Canvas for falling characters */
-    canvas {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-    }
-    /* Overlay for scrolling credits */
-    .credits-scroll-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 2;
-        color: #fff;
-        font-family: monospace;
-        text-align: center;
-        -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
-        mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
+  /* Container for Matrix effect */
+  .matrix-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  /* Canvas for falling characters */
+  canvas {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+  /* Overlay for scrolling credits */
+  .credits-scroll-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    color: #fff;
+    font-family: monospace;
+    text-align: center;
+    -webkit-mask-image: linear-gradient(
+      transparent,
+      black 20%,
+      black 80%,
+      transparent
+    );
+    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
+  }
+  /* Scrolling credits container */
+  .credits-content {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    transform: translateY(100%);
+    animation: scroll-from-bottom var(--animation-duration) linear infinite;
+    padding: 0 2rem;
+    box-sizing: border-box;
+  }
+  @keyframes scroll-from-bottom {
+    from {
+      transform: translateY(100%);
     }
-    /* Scrolling credits container */
-    .credits-content {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        transform: translateY(100%);
-        animation: scroll-from-bottom var(--animation-duration) linear infinite;
+    to {
+      transform: translateY(-100%);
     }
-    @keyframes scroll-from-bottom {
-        from { transform: translateY(100%); }
-        to { transform: translateY(-100%); }
-    }
-    /* Intro block spacing */
-    .credit-block.intro-block { margin-bottom: 5rem; }
-    /* Credit block spacing */
-    .credit-block { margin-bottom: 2.5em; }
-    /* Title styling */
-    .title {
-        color: #0F0;
-        text-transform: uppercase;
-        opacity: 0.8;
-    }
-    /* Name styling */
-    .name {
-        font-weight: bold;
-        color: #5F5;
-        text-shadow: 0 0 5px #0F0;
-    }
-</style>
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .section-title {
+    margin-top: 4rem;
+    margin-bottom: 2.5rem;
+    font-weight: bold;
+    color: #5f5;
+    text-shadow: 0 0 8px #0f0;
+  }
+  /* Intro block spacing */
+  .credit-block.intro-block {
+    margin-bottom: 5rem;
+  }
+  /* Credit block spacing */
+  .credit-block {
+    margin-bottom: 2.5em;
+  }
+  /* Title styling */
+  .title {
+    color: #0f0;    
+    opacity: 0.8;
+  }
+  /* Name styling */
+  .name {
+    font-weight: bold;
+    color: #5f5;
+    text-shadow: 0 0 5px #0f0;
+  }
+  .credit-two-column {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    text-align: left;
+    margin: 0.8em auto;
+    max-width: 80%;
+    gap: 1em;
+  }
+  .credit-two-column .title {
+    flex: 1;
+    text-align: right;
+    padding-right: 1em;
+  }
+  .credit-two-column .name {
+    flex: 1;
+    text-align: left;
+    padding-left: 1em;
+  }
+</style>

src/frontend/shared/ScrollEffect.svelte

@@ -10,6 +10,11 @@
      * @property {string | null} name_color - Name text color (default: white).
      * @property {string | null} intro_title - Optional intro title.
      * @property {string | null} intro_subtitle - Optional intro subtitle.
+     * @property {"stacked" | "two-column"} layout_style - Layout for credits.
+     * @property {boolean} title_uppercase - Transform title to uppercase.
+     * @property {boolean} name_uppercase - Transform name to uppercase.
+     * @property {boolean} section_title_uppercase - Transform section title to uppercase.
+     * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.
      */
     export let credits: Props['credits'];
     export let speed: number;
@@ -19,6 +24,11 @@
     export let name_color: string | null = null;
     export let intro_title: string | null = null;
     export let intro_subtitle: string | null = null;
+    export let layout_style: "stacked" | "two-column" = "stacked";
+    export let title_uppercase: boolean = false;
+    export let name_uppercase: boolean = false;
+    export let section_title_uppercase: boolean = true;
+    export let swap_font_sizes_on_two_column: boolean = false;
 
     // Flag to trigger animation reset
     let reset = false;
@@ -39,15 +49,14 @@
     // Reactive styles for title and name
     $: title_style = (is_intro: boolean) => `color: ${title_color || 'white'}; font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}rem;`;
     $: name_style = (is_intro: boolean) => `color: ${name_color || 'white'}; font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.8}rem;`;
-
+    $: section_title_style = `color: ${title_color || 'white'}; font-size: ${base_font_size * 1.2}rem;`;
+    
     // Reset animation on prop changes
    function resetAnimation() {
         reset = true;
         setTimeout(() => (reset = false), 0);
     }
 
-
-
     // Trigger reset on prop changes
     $: credits, speed, resetAnimation();
 </script>
@@ -56,17 +65,42 @@
     {#if !reset}
         <div class="credits-container">
             {#each display_items as item}
-                <div class="credit" class:intro-block={item.is_intro}>
-                    <h2 style={title_style(item.is_intro)}>{item.title}</h2>
-                    {#if item.name}<p style={name_style(item.is_intro)}>{item.name}</p>{/if}
-                </div>
+                <!-- Render Section Title -->
+                {#if item.section_title}
+                    <div class="section-title" style={section_title_style} class:uppercase={section_title_uppercase}>
+                        {item.section_title}
+                    </div>
+
+                <!-- Render Credit or Intro -->
+                {:else}
+                    {#if layout_style === 'two-column' && !item.is_intro}
+                        <!-- Two-Column Layout -->
+                        <div class="credit-two-column">                            
+                            <div class="title" style={swap_font_sizes_on_two_column ? name_style(false) : title_style(false)} class:uppercase={title_uppercase}>
+                                {item.title}
+                            </div>
+                            <div class="name" style={swap_font_sizes_on_two_column ? title_style(false) : name_style(false)} class:uppercase={name_uppercase}>
+                                {item.name}
+                            </div>
+                        </div>
+                    {:else}
+                        <!-- Stacked Layout (Default and for Intro) -->
+                        <div class="credit" class:intro-block={item.is_intro}>
+                            <h2 style={title_style(item.is_intro)} class:uppercase={title_uppercase && !item.is_intro}>{item.title}</h2>
+                            {#if item.name}
+                                <p style={name_style(item.is_intro)} class:uppercase={name_uppercase && !item.is_intro}>{item.name}</p>
+                            {/if}
+                        </div>
+                    {/if}
+                {/if}
             {/each}
         </div>
     {/if}
 </div>
 
+
 <style>
-    /* Container for scrolling credits */
+     /* Main container for the scrolling effect */
     .wrapper {
         width: 100%;
         height: 100%;
@@ -74,12 +108,8 @@
         position: relative;
         font-family: sans-serif;
     }
-    /* Intro block styling */
-    .credit.intro-block {
-        margin-bottom: 5rem;
-        text-align: center;
-    }
-    /* Credits container with scroll animation */
+
+    /* Animated container holding all credit items */
     .credits-container {
         position: absolute;
         bottom: 0;
@@ -87,19 +117,55 @@
         width: 100%;
         text-align: center;
         animation: scroll var(--animation-duration) linear infinite;
+        padding: 0 2rem; /* Adds horizontal padding */
+        box-sizing: border-box;
+    }
+
+    /* Section Title Style */
+    .section-title {
+        margin-top: 4rem;
+        margin-bottom: 2.5rem;
+        font-weight: bold;
+    }
+
+    /* Stacked Layout */
+    .credit.intro-block {
+        margin-bottom: 5rem;
     }
-    /* Individual credit block */
     .credit {
         margin-bottom: 2rem;
     }
-    .credit h2 {
+    .credit h2, .credit p {
         margin: 0.5rem 0;
         font-family: sans-serif;
     }
-    .credit p {
-        margin: 0.5rem 0;
-        font-family: sans-serif;
+
+    /* Two-Column Layout */
+    .credit-two-column {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        text-align: left;
+        margin: 0.8rem auto;
+        max-width: 80%; /* Limits width for better readability */
+        gap: 1rem;
+    }
+    .credit-two-column .title {
+        flex: 1;
+        text-align: right;
+        padding-right: 1rem;
+    }
+    .credit-two-column .name {
+        flex: 1;
+        text-align: left;
+        padding-left: 1rem;
     }
+
+    /* Utility class for uppercase */
+    .uppercase {
+        text-transform: uppercase;
+    }
+
     /* Scroll animation keyframes */
     @keyframes scroll {
         0% { transform: translateY(100%); }

src/frontend/shared/StarWarsEffect.svelte

@@ -1,10 +1,12 @@
+<!-- StarWarsEffect.svelte -->
+
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
 
     /**
      * Props for the StarWarsEffect component.
      * @typedef {Object} Props
-     * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
+     * @property {Array<{title?: string, name?: string, section_title?: string}>} credits - List of credits, can include sections.
      * @property {number} speed - Animation speed in seconds (default: 40).
      * @property {number} base_font_size - Base font size in rem (default: 1.5).
      * @property {string | null} background_color - Background color (default: black).
@@ -12,6 +14,11 @@
      * @property {string | null} name_color - Name text color (default: #feda4a).
      * @property {string | null} intro_title - Optional intro title.
      * @property {string | null} intro_subtitle - Optional intro subtitle.
+     * @property {"stacked" | "two-column"} layout_style - Layout for credits.
+     * @property {boolean} title_uppercase - Transform title to uppercase.
+     * @property {boolean} name_uppercase - Transform name to uppercase.
+     * @property {boolean} section_title_uppercase - Transform section title to uppercase.
+     * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.
      */
     export let credits: Props['credits'];
     export let speed: number = 40;
@@ -20,11 +27,17 @@
     export let title_color: string | null = null;
     export let name_color: string | null = null;
     export let intro_title: string | null = null;
-    export let intro_subtitle: string | null = null;
-
-    // Reactive styles for title and name
-    $: title_style = (is_intro: boolean) => `color: ${title_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}rem !important;`;
-    $: name_style = (is_intro: boolean) => `color: ${name_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.7}rem !important;`;
+    export let intro_subtitle: string | null = null;   
+    export let layout_style: "stacked" | "two-column" = "stacked";
+    export let title_uppercase: boolean = false;
+    export let name_uppercase: boolean = false;
+    export let section_title_uppercase: boolean = true;
+    export let swap_font_sizes_on_two_column: boolean = false;
+    
+    // Reactive styles
+    $: title_style = (is_intro: boolean) => `color: ${title_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}rem;`;
+    $: name_style = (is_intro: boolean) => `color: ${name_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.7}rem;`;
+    $: section_title_style = `color: ${title_color || '#feda4a'}; font-size: ${base_font_size * 1.2}rem;`;
 
     // Combine intro and credits for display
     $: display_items = (() => {
@@ -39,10 +52,8 @@
         return [...items, ...credits.map(c => ({ ...c, is_intro: false }))];
     })();
 
-    // Element for animation reset
     let crawlElement: HTMLElement | null;
 
-    // Reset animation on prop changes
     function resetAnimation() {
         if (crawlElement) {
             crawlElement.style.animation = 'none';
@@ -51,53 +62,56 @@
         }
     }
 
-    // Initialize animation on mount
-    onMount(() => {
-        resetAnimation();
-        return () => {};
-    });
+    onMount(resetAnimation);
+    onDestroy(() => { crawlElement = null; });
 
     // Trigger reset on prop changes
-    $: credits, speed, base_font_size, background_color, title_color, name_color, intro_title, intro_subtitle, resetAnimation();
-
-    // Cleanup on destroy
-    onDestroy(() => {
-        crawlElement = null;
-    });
+    $: credits, speed, layout_style, resetAnimation();
 
     // Generate star shadows for background
     const generate_star_shadows = (count: number, size: string) => {
-        let shadows = '';
-        for (let i = 0; i < count; i++) {
-            shadows += `${Math.random() * 2000}px ${Math.random() * 2000}px ${size} white, `;
-        }
-        return shadows.slice(0, -2);
+        let shadows = Array.from({ length: count }, () => `${Math.random() * 2000}px ${Math.random() * 2000}px ${size} white`).join(', ');
+        return shadows;
     };
-
     const small_stars = generate_star_shadows(200, '1px');
     const medium_stars = generate_star_shadows(100, '2px');
     const large_stars = generate_star_shadows(50, '3px');
 </script>
 
 <div class="viewport" style:background={background_color || 'black'}>
-    <!-- Star layers for background -->
     <div class="stars small" style="box-shadow: {small_stars};"></div>
     <div class="stars medium" style="box-shadow: {medium_stars};"></div>
     <div class="stars large" style="box-shadow: {large_stars};"></div>
 
-    <!-- Crawling credits -->
     <div class="crawl" bind:this={crawlElement} style="--animation-duration: {speed}s;">
         {#each display_items as item}
-            <div class="credit" class:intro-block={item.is_intro}>
-                <h2 style={title_style(item.is_intro)}>{item.title}</h2>
-                {#if item.name}<p style={name_style(item.is_intro)}>{item.name}</p>{/if}
-            </div>
+            <!-- Render Section Title -->
+            {#if item.section_title}
+                <div class="section-title" style={section_title_style} class:uppercase={section_title_uppercase}>
+                    {item.section_title}
+                </div>
+            <!-- Render Credit or Intro -->
+            {:else}
+                {#if layout_style === 'two-column' && !item.is_intro}
+                    <!-- Two-Column Layout -->
+                    <div class="credit-two-column">
+                        <span style={swap_font_sizes_on_two_column ? name_style(false) : title_style(false)} class:uppercase={title_uppercase}>{item.title}</span>
+                        <span class="spacer"></span>
+                        <span style={swap_font_sizes_on_two_column ? title_style(false) : name_style(false)} class:uppercase={name_uppercase}>{item.name}</span>
+                    </div>
+                {:else}
+                    <!-- Stacked Layout -->
+                    <div class="credit" class:intro-block={item.is_intro}>
+                        <h2 style={title_style(item.is_intro)} class:uppercase={title_uppercase && !item.is_intro}>{item.title}</h2>
+                        {#if item.name}<p style={name_style(item.is_intro)} class:uppercase={name_uppercase && !item.is_intro}>{item.name}</p>{/if}
+                    </div>
+                {/if}
+            {/if}
         {/each}
     </div>
 </div>
 
 <style>
-    /* Container with perspective for 3D effect */
     .viewport {
         width: 100%;
         height: 100%;
@@ -109,48 +123,53 @@
         font-family: "Droid Sans", sans-serif;
         font-weight: bold;
     }
-    /* Star layers with twinkling animation */
     .stars {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 1px;
-        background: transparent;
-        z-index: 0;
+        position: absolute; top: 0; left: 0;
+        width: 1px; height: 1px;
+        background: transparent; z-index: 0;
         animation: twinkle 10s linear infinite;
     }
     .stars.small { animation-duration: 10s; }
     .stars.medium { animation-duration: 15s; }
     .stars.large { animation-duration: 20s; }
-    @keyframes twinkle {
-        0% { opacity: 0.6; }
-        50% { opacity: 1; }
-        100% { opacity: 0.6; }
-    }
-    /* Crawling text container */
+    @keyframes twinkle { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
+    
     .crawl {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
+        position: absolute; width: 100%; bottom: 0;
         transform-origin: 50% 100%;
         animation: crawl-animation var(--animation-duration) linear infinite;
-        z-index: 1;
-        text-align: center;
+        z-index: 1; text-align: center;
     }
-    /* Crawl animation with 3D transform */
     @keyframes crawl-animation {
-        0% { transform: rotateX(60deg) translateY(100%) translateZ(100px); opacity: 1; }
-        100% { transform: rotateX(60deg) translateY(-150%) translateZ(-1200px); opacity: 1; }
+        0% { transform: rotateX(60deg) translateY(100%) translateZ(100px); }
+        100% { transform: rotateX(60deg) translateY(-150%) translateZ(-1200px); }
+    }
+    
+    /* STYLES */
+    .uppercase { text-transform: uppercase; }
+    
+    .section-title {
+        margin-top: 5rem;
+        margin-bottom: 3rem;
+        font-weight: bold;
     }
-    /* Intro block spacing */
+
     .credit.intro-block { margin-bottom: 5rem; }
-    /* Credit block spacing */
     .credit { margin-bottom: 2rem; }
-    /* Text styling */
-    h2, p {
-        margin: 0.5rem 0;
-        padding: 0;
+    .credit h2, .credit p { margin: 0.5rem 0; padding: 0; white-space: nowrap; }
+
+    .credit-two-column {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        margin: 0.8rem auto;
+        width: 90%;
         white-space: nowrap;
     }
+    .credit-two-column .spacer {
+        flex-grow: 1;
+        border-bottom: 1px dotted rgba(254, 218, 74, 0.3);
+        margin: 0 1em;
+        transform: translateY(-0.5em);
+    }
 </style>

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_creditspanel"
-version = "0.0.2"
+version = "0.0.3"
 description = "Credits Panel for Gradio UI"
 readme = "README.md"
 license = "apache-2.0"