# Advanced OBS Lower Thirds System

## Description for OBS Forum
**Title:** Advanced Lower Thirds with Control Panel (11 Animations, Custom Colors, Typewriter Effect)

**Description:**
Take your stream's production value to the next level with this fully customizable, browser-based Lower Thirds system. It comes with a dedicated Control Panel that docks directly into OBS, giving you live control over 4 independent lower third slots.

**Key Features:**
*   **11 Unique Animations:** Choose from Slide, Bounce, Fade, Swing, Flip, Elastic, Zoom, Rotate, Wave, Glitch, and Curtain.
*   **Full Timing Control:** Customize "Animation In" and "Animation Out" speeds independently for perfect pacing.
*   **Per-Panel Customization:** Set unique backgrounds (Gradients, Solids, Custom Colors, or Transparent) for each lower third.
*   **Realistic Typewriter Effect:** Optional typewriter animation with a blinking cursor for text.
*   **Compact Control Panel:** A clean, collapsible interface that fits perfectly in your OBS Docks.
*   **Auto-Sequencer:** Automatically cycle through your lower thirds with adjustable intervals.

---

## How to Install & Use in OBS Studio

### Step 1: Add the Lower Thirds Source
1.  Open OBS Studio.
2.  In your **Sources** dock, click the **+** button and select **Browser**.
3.  Name it "Lower Thirds" and click OK.
4.  Check the box **"Local file"**.
5.  Click **Browse** and select the `obs_lower_thirds_source.html` file.
6.  Set **Width** to `1920` and **Height** to `1080`.
7.  **Important:** Delete everything in the "Custom CSS" box so it's completely empty.
8.  Click **OK**.

### Step 2: Add the Control Panel Dock
1.  In the OBS menu bar, go to **View** > **Docks** > **Custom Browser Docks...**
2.  In the **Dock Name** column, type: `Lower Thirds Control`
3.  In the **URL** column, type the full file path to `obs_control_panel.html`.
    *   *Tip: You can open the file in Chrome/Edge, copy the address from the address bar (starts with `file:///`), and paste it here.*
4.  Click **Apply**.
5.  The control panel will appear. You can now drag and drop it to dock it anywhere in your OBS interface (e.g., next to your Scene Transitions).

### Step 3: Using the System
1.  **Enter Text:** Type a Name and Title for any of the 4 slots.
2.  **Customize:** Click the **Gear Icon (⚙️)** to open Advanced Settings for that panel.
    *   Choose your **Transition** style.
    *   Set **Anim In/Out** durations (e.g., 1.5s for slow, 0.5s for fast).
    *   Pick a **Background** (use "Custom Color" to pick any hex color).
3.  **Show/Hide:** Click the green **Show** button to animate it in. Click **Hide** to animate it out.
4.  **Global Settings:** Use the collapsible "Global Settings" at the top to apply a style to ALL panels at once.