Skip to main content

Hype Train Widget

The Hype Train widget is a container that reveals the widgets nested inside it only while a Twitch Hype Train is running. When a train starts, the nested widgets fade in; after it ends (plus a short linger) they fade out. It also carries the train's live values — level, total, goal, progress, train type, the level timer and the top contributors — so the widgets inside can display them.

How it works​

  1. Add a Hype Train widget to your overlay (Add Widget → Primitives → Hype Train).
  2. Nest your own widgets inside it (Text, Image, Progress Bar, …).
  3. The nested widgets are hidden by default.
  4. When a Hype Train begins, they fade in; when it ends, they fade out after the linger.
  5. Turn on Invert to flip it — the widgets show except during a Hype Train.

Settings​

SettingDescription
Linger after endSeconds to keep showing after the train ends (default 6).
Fade durationFade in/out time, in milliseconds.
InvertShow the nested widgets only while there is no Hype Train.
BackdropOptional background colour behind the nested widgets.

Displaying the live values​

The Hype Train widget publishes live values that the widgets inside it can show. To use one:

  1. Add a Text widget inside the Hype Train widget.
  2. On its text, switch to a dynamic value (the </> toggle) and insert a value — either pick it from the Show / Hide widget values group in the variable picker, or type it in.

For example, a Text widget whose content is `Level {{subtreeContext.hypeTrain.level}}` shows Level 3 while a level-3 train is running.

Available values​

VariableDescription
`{{subtreeContext.hypeTrain.level}}`The current Hype Train level (1, 2, 3, …).
`{{subtreeContext.hypeTrain.total}}`Total contribution points in the train so far.
`{{subtreeContext.hypeTrain.goal}}`Points needed to finish the current level.
`{{subtreeContext.hypeTrain.progress}}`Progress through the current level, 0–1 (e.g. 0.6 = 60%).
`{{subtreeContext.hypeTrain.phase}}`begin, progress, or end.
`{{subtreeContext.hypeTrain.active}}`true while a train is showing.
`{{subtreeContext.hypeTrain.trainType}}`The kind of train — regular, golden_kappa, or treasure.
`{{subtreeContext.hypeTrain.expiresAt}}`When the current level times out (ISO timestamp) — feed it to `$(countdown …)` for a live "time remaining".
`{{subtreeContext.hypeTrain.startedAt}}`When the train began (ISO timestamp).
`{{subtreeContext.hypeTrain.endedAt}}`When the train ended (ISO timestamp) — end/linger only.
`{{subtreeContext.hypeTrain.cooldownEndsAt}}`When the next train can start (ISO timestamp) — end/linger only.
`{{subtreeContext.hypeTrain.isSharedTrain}}`true when the train is shared across multiple channels.
`{{subtreeContext.hypeTrain.allTimeHighLevel}}`The channel's all-time record level.
`{{subtreeContext.hypeTrain.allTimeHighTotal}}`The channel's all-time record points.
`{{subtreeContext.hypeTrain.topBitsUser}}`The top bits contributor's display name (blank until someone cheers).
`{{subtreeContext.hypeTrain.topBitsTotal}}`How many bits that contributor has put in.
`{{subtreeContext.hypeTrain.topSubsUser}}`The top subs contributor's display name (blank until someone subs).
`{{subtreeContext.hypeTrain.topSubsTotal}}`That contributor's sub points.
note

goal and progress aren't sent on the final end phase, so they may be blank for the end/linger moment. Likewise expiresAt only exists while the train is running, and endedAt/cooldownEndsAt only on the end/linger moment.

tip

Feed `{{subtreeContext.hypeTrain.progress}}` straight into a Progress Bar widget's value — it's already a 0–1 fraction, so it makes a live level meter with no maths.

tip

For a ticking "time left on this level" timer, set a Text widget's content to `$(countdown {{subtreeContext.hypeTrain.expiresAt}})`.

Use cases​

  • A celebratory graphic that appears only during a Hype Train.
  • A live "LEVEL 3" badge driven by `{{subtreeContext.hypeTrain.level}}`.
  • A progress meter for the current level.

See also​