Skip to main content

Countdown Timer Widget

The Countdown Timer widget reveals the widgets nested inside it only while a countdown is running. It hides them when the countdown reaches zero. It is built on a Degrading number streamer variable that counts down by itself, so your flows can add time to it whenever something happens, like a sub or a cheer.

It is a countdown that viewers extend. Use it for a stream timer, a "stream ends in" clock, or a challenge that grows with support.

How it works​

  1. Create a Degrading number streamer variable (see the setup below).
  2. Add a Countdown Timer widget (Add Widget → Group widgets → Countdown Timer; it's also listed under Interactive).
  3. Pick your variable in Countdown variable.
  4. Nest your widgets inside it. It comes with a Timer widget already inside, set to count down to the end time.
  5. The nested widgets show while the variable is counting down and hide when it reaches its resting value.

If you reload the overlay in the middle of a countdown, it shows straight away.

Settings​

SettingDescription
Countdown variableThe Degrading number streamer variable to follow. If it was deleted or renamed, it shows as name (missing).
InvertShow the nested widgets whenever the countdown is not running, including before it has ever started. This is not an "ended" screen.
Fade durationFade in/out time, in milliseconds.
BackdropOptional background colour behind the nested widgets.

Displaying the live values​

Add a widget inside, then set a dynamic value (the </> toggle). Pick from the Show / Hide widget values group, or type it in.

VariableDescription
`{{subtreeContext.countdownTimer.active}}`true while the countdown is running.
`{{subtreeContext.countdownTimer.endsAt}}`When the countdown reaches 0 (an ISO time).

For a Split-Flap Board or Text widget, use the $(countdown) function:

$(countdown {{subtreeContext.countdownTimer.endsAt}} showHours)

→ 01:23:45

A Split-Flap Board's flaps only roll forward, so each second of a countdown spins the last flap most of the way round. Set its Flap time to about 25 ms so the digits settle quickly between seconds.

For the Timer widget, set the mode to Countdown to date/time and bind the date/time to `{{subtreeContext.countdownTimer.endsAt}}`.

tip

For countdowns of 100 hours or more, set the Timer's format to DD:HH:MM:SS or Auto.

You can also use the end time in any widget, without the group. `{{streamerVariables.endsAt.<name>}}` gives the end time of a running Degrading number variable.

Setup: a countdown viewers extend​

1. Create the variable​

Create a streamer variable called countdown with the type Degrading number:

  • Current value: 0
  • Drifts back to: 0
  • Amount per step: 1
  • Seconds per step: 1

Create it at 0. Saving the variable starts its clock, so a starting value would begin counting down straight away. When you are ready to go live, set the starting time (in seconds) by editing Current value, or with a flow, like a chat command that uses Set Broadcaster Variable.

2. Add time with flows​

End every flow below with a Change Broadcaster Variable effect set to countdown, Add, Minimum 0 and a Maximum such as 259200 (three days).

TriggerWhat to add
Subscription MessageAmount 300. Fires for new subs and resubs, but not for people who receive a gift.
Gift SubscriptionAdd an Advanced Math node with a * 300, with Quantity in a, then wire its result into Amount.
Gift Subscription (Single Recipient)Amount 300. A gift to one person fires this trigger.
CheerAdd an Advanced Math node with round(a * 0.6), with Bits in a, then wire its result into Amount.

That gives 5 minutes per sub and 0.6 seconds per bit. Change the numbers to suit your stream.

3. Show it on your overlay​

Add a Countdown Timer widget and pick countdown as the variable. The Timer inside already counts down.

See also​