Streamathon

Streamathon shows a live countdown timer in OBS and other tools that support browser sources. Use it when viewer activity should add time to a stream timer.

Quick setup

1. Open the Synchra Dashboard.
2. Go to Widgets.
3. Create a Streamathon widget.
4. Enter a title and start seconds.
5. Set Ends at if you want to have cap it to a specific date.
6. Select which sources should add time.
7. Set how many seconds each source adds.
8. Click Widget URL and copy the URL.
9. Add it to OBS as a Browser Source.
10. Open Controls and start the timer.

Timer controls

Open controls from the widget settings.

You can start, pause, resume, restart, reset, add seconds and remove seconds.

How time is added

The timer starts with the configured start seconds. When it is running, it counts down until it reaches zero. When it is paused, it stays where it is.

Activity such as subs, bits and donations can add seconds after the timer has started. You decide how much time each source adds.

Customization

You can customize the title, start seconds, end cap, sources, seconds, subtype multipliers, colors, font, size, padding, border and visibility settings.

Disabling the widget hides it from the browser source.

Custom CSS

Streamathon can be styled using custom CSS. Start with the built-in settings first. Use custom CSS when you need a specific layout, glow, shadow, background or timer treatment.

CSS classes

Class	Description
.streamathon-widget	Main streamathon widget container.
.streamathon-widget--disabled	Applied when the widget is disabled.
.streamathon-widget__content	Content wrapper.
.streamathon-widget__title	Widget title.
.streamathon-widget__timer-wrap	Timer and gain text wrapper.
.streamathon-widget__timer	Countdown timer text.
.streamathon-widget__timer--bump	Applied briefly when activity adds time.
.streamathon-widget__gain	Added-time text shown after activity adds time.
.streamathon-widget__status	Status text, such as paused or ended.

Data attributes

Attribute	Description
data-status="idle"	Timer has not started.
data-status="running"	Timer is running.
data-status="paused"	Timer is paused.
data-status="ended"	Timer reached zero.

CSS variables

Variable	Description
--streamathon-widget-text-color	Main text color.
--streamathon-widget-background-color	Widget background.
--streamathon-widget-border-color	Widget border color.
--streamathon-widget-time-left-color	Time left color.
--streamathon-widget-ended-timer-color	Timer color when ended.
--streamathon-widget-border-width	Widget border width.
--streamathon-widget-border-radius	Widget corner radius.
--streamathon-widget-padding	Widget padding.
--streamathon-widget-font-family	Widget font family.
--streamathon-widget-font-size	Base font size.
--streamathon-widget-min-width	Minimum widget width.
--streamathon-widget-max-width	Maximum widget width.

Emphasize timer

.streamathon-widget__timer {
  text-shadow: 0 0 12px currentColor;
}

.streamathon-widget__status {
  opacity: 0.85;
}

Ended state

.streamathon-widget[data-status="ended"] .streamathon-widget__timer {
  color: var(--streamathon-widget-ended-timer-color);
  text-shadow: 0 0 18px currentColor;
}