Generate custom countdown timers for live streams. Create URL-based timers for OBS, Streamlabs, and Twitch. Fully customizable styles, fonts, and colors.
AI Generation Prompt
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.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I add this countdown timer to OBS Studio?
Once you generate your timer URL, copy it. In OBS Studio, add a new 'Browser' source, paste the URL into the 'URL' field, and set the dimensions to match your timer's aspect ratio.
Does this countdown timer support transparent backgrounds?
Yes, the generator outputs a URL that renders the timer with a transparent background by default, allowing it to overlay seamlessly on your gameplay or camera feed.
Can I customize the font and colors of the timer?
Absolutely. The generator includes a design panel where you can select various Google Fonts, adjust text size, font weight, colors, shadows, and text outlines.
