Customizable OBS Countdown Timer URL Generator

Product Specification: URL-Based Countdown Timer Generator

Overview

A web-based utility that allows streamers to configure a countdown timer and receive a unique, parameter-encoded URL. This URL is intended to be used as a 'Browser Source' in streaming software like OBS Studio, Streamlabs, or xSplit. The app provides real-time updates to the preview and handles all logic client-side.

Core Functionality

• Time Configuration: Input fields for setting hours, minutes, and seconds.
• Dynamic URL Generation: As the user modifies settings, the URL automatically updates in the footer, appending query parameters (e.g., ?time=05:00&color=white&font=roboto).
• Live Preview: A central canvas showing exactly how the timer will look in the stream overlay.
• Browser Source Integration: The output URL is optimized to render a transparent background (rgba(0,0,0,0)) automatically.

Styling and Design Features

• Typography: Integration with the Google Fonts API to allow users to select from a variety of professional stream-friendly fonts.
• Visual Effects:
  • Text color and shadow customization.
  • Border/Outline thickness and color.
  • Background opacity toggle.
• Layout Control:
  • Alignment options (Left, Center, Right).
  • Padding and margin controls for the bounding box.

Advanced Features

• Post-Timer Behavior: Configuration for what happens when the clock hits zero:
  • Hide the element.
  • Loop the timer.
  • Display a custom text message (e.g., 'Starting Soon!').
• Audio Cues: Optional alert sound configuration (e.g., play a chime when the timer finishes).
• Animation Settings: Smooth transitions for numbers changing or a fade-out animation when the timer expires.

Technical Implementation

• Framework: React or Vue.js for state management of the timer parameters.
• State Persistence: URL parameters act as the single source of truth, ensuring the generated link is shareable and reloadable without a backend database.
• Asset Loading: Minimal footprint to ensure the Browser Source loads instantly inside OBS.
• Responsiveness: A mobile-friendly configuration UI to allow streamers to adjust timers from a phone if they are away from their main production PC.