A very good looking, highly customizable countdown timer for your stream.
This project is an independent fork of markanderson96/twitchCountdown.
- Download the ZIP (got to the green code button at top of page)
- Extract and place files where convenient.
- Add
file://location/on/computer/index.html?m=1&s=0as a browser source in OBS/SLOBS/etc. - Customize the timer to your liking.
You can follow this guide to customize your timer to your liking.
You may edit any color: line in js/clock.css to customize the countdown timer's color scheme.
If you want to use another google font, modify the line below in index.html:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">You can find fonts to use on Google Fonts.
The countdown timer is specified by adding GET arguments to the browser source URL.
GET variables you can add to index.html to customize the countdown time:
| Variable | Description |
|---|---|
| d | Days |
| h | Hours |
| m | Minutes |
| s | Seconds |
- The timer starts fresh every time the browser source loads anew.
- Advanced math is used to colorize and animate the timer via sine wave oscillation of precomputed chroma.js scale array indexes.
- You can change the layout of the timer as long as you match the HTML structure included in
index.html. Deviating from the tag structure will cause issues.
- In a future update, we will allow support via a browser cookie to persist across browser instances.
- We plan to add a GET request variable to control the timer more than just autoplay on load. Please stay tuned.
- We plan to add some GET variables to customize the color animation parameters.