Timer Element

What is the Timer Element?

Timer element overview showing the interface
Timer element overview

The Timer element is the core display component for showing countdown timers, count-up timers, and time of day clocks in your output. You can customize the appearance, format, and behavior of the timer display to match your production needs.

The timer automatically displays the currently active timer from your rundown. You can choose to show the countdown, count-up, time of day (clock), or a combination of these displays.

Display Modes

The timer element adapts to show different types of timing information based on the appearance setting of your active timer. You can configure each display mode independently.

Timer showing remaining seconds format
Countdown mode
Timer showing count-up format
Count up mode

Countdown

Shows the time remaining until the timer reaches zero. You can choose from multiple format options including standard numeric formats (10:00) and long formats (10 minutes).

Key features:

  • Multiple format options from HH:MM:SS to long-form text
  • Color changes based on wrap-up warnings (yellow and red zones)
  • Configurable behavior when reaching zero (continue, stop, or hide)
  • Decimal precision options for precise timing

Count Up

Shows elapsed time from when the timer started. This is useful for tracking how long something has been running, such as a presentation or performance.

Key features:

  • Same format options as countdown
  • Continues counting even after the scheduled duration
  • Optional overtime prefix display
  • Perfect for tracking overruns

Time of Day

Displays the current time as a clock. You can show the time of day alongside countdown or count-up timers, or display it independently.

Key features:

  • 12-hour and 24-hour formats
  • Optional seconds display
  • Timezone support with abbreviation display
  • Customizable font and styling

Element Settings

Timer element settings overview
Timer element settings overview

Format Options

You can choose how the countdown and count-up time is displayed:

Numeric formats:

  • D HH:MM:SS - Days, hours, minutes, seconds (e.g., 1d 02:30:45)
  • D HH:MM:SS.F - With decimal precision
  • HHH:MM:SS - Hours, minutes, seconds (e.g., 26:30:45)
  • HHH:MM:SS.F - With decimal precision
  • MMM:SS - Minutes and seconds (e.g., 150:45)
  • MMM:SS.F - With decimal precision
  • SSS - Seconds only (e.g., 9045)
  • SSS.F - With decimal precision

Long formats:

  • D - Days only (e.g., 1 day)
  • D H - Days and hours (e.g., 1 day 2 hours)
  • D H M - Days, hours, and minutes
  • D H M S - Days, hours, minutes, and seconds
  • H M S - Hours, minutes, and seconds
  • M S - Minutes and seconds
  • S - Seconds only

Each format option is available for both countdown and count-up displays. When no format is specified, the element uses the room’s default countdown format.

Timer showing count-up format
Count-up format example
Timer showing remaining seconds format
Remaining seconds format
Timer showing remaining seconds with decimal precision
Seconds with decimal precision

Font and Styling

The timer element provides extensive customization options for visual appearance:

Font selection:

  • Choose from built-in fonts (IBM Plex Mono, Inter, Open Sans, and many more)
  • Upload custom fonts for brand-specific displays
  • Font automatically loads and applies to the timer display

Styling options:

  • Font Weight: Light, Regular, Medium, Semibold, Bold
  • Font Size: Small (76%), Medium (88%), Large (100%)
  • Colors: Configure three colors for normal time, yellow wrap-up warning, and red wrap-up warning

The font size setting determines what percentage of the available space the timer fills. Large (100%) fills the entire container, while smaller sizes leave breathing room.

Timer Behavior

You can control what happens when a countdown timer reaches zero:

  • Continue (Room Default) - Timer continues into negative time with an overtime prefix
  • Stop - Timer stops at 00:00
  • Hide - Timer becomes invisible when reaching zero

This setting overrides the room default behavior for this specific timer element.

Text Contrast

Add visual effects to improve timer readability against various backgrounds:

  • None - No additional effects
  • Shadow - Drop shadow behind the timer
  • Outline - Stroke outline around characters
  • Background - Semi-transparent background behind timer

These effects are particularly useful when displaying timers over video backgrounds or busy imagery.

Time of Day Settings

When displaying time of day (clock) alongside or instead of countdown/count-up, you have separate customization options:

Format options:

  • Auto - Automatically detects 12h/24h based on locale
  • HH:MM:SS - 24-hour with seconds (14:30:45)
  • HH:MM - 24-hour without seconds (14:30)
  • HH:MM:SS AM - 12-hour with seconds and AM/PM (2:30:45 PM)
  • HH:MM AM - 12-hour without seconds and AM/PM (2:30 PM)
  • HH:MM:SS (12h) - 12-hour with seconds, no AM/PM (2:30:45)
  • HH:MM (12h) - 12-hour without seconds, no AM/PM (2:30)

Timezone settings:

  • Override the output’s timezone for this specific element
  • Useful for showing multiple time zones simultaneously
  • Display timezone abbreviation (e.g., EST, PST, GMT)

Font and styling:

  • Independent font selection from countdown/count-up
  • Separate font weight, size, and color settings
  • Same text contrast options available

Multiple Elements

You can add multiple timer elements to the same output to display different timer information simultaneously. Each element operates independently with its own settings.

Example use cases:

  • Show both countdown and count-up timers side by side
  • Display multiple time zones
  • Create a large main timer with a smaller secondary timer
  • Combine timer with time of day in different corners