Skip to content
evmux Knowledge Base

Banner and Lower Third Styles Reference

This reference documents all banner types and lower third (Animated Caption) animation styles.

Standard Banner

Basic banner with two text fields.

PropertyDescription
Primary TextMain title (max 54 characters)
Secondary TextSubtitle/description (max 200 characters)
TickerDisabled

Ticker Banner

Scrolling text banner for announcements.

PropertyDescription
Primary TextMain title (max 54 characters)
Secondary TextScrolling content (max 1000 characters)
TickerEnabled
DirectionAnimation direction

Ticker Directions:

  • ltr - Left to Right
  • rtl - Right to Left
{
  idx: string,           // Unique identifier
  title: string,         // Primary text
  text: string,          // Secondary text
  ticker: boolean,       // Is ticker mode
  direction: string,     // 'ltr' or 'rtl'
  order: number,         // Display order
}

Lower Third Animation Styles (Animated Captions)

15 animation styles available for lower thirds/name plates.

Standard Styles (ra_dc_1 through ra_dc_8)

IDStyle NameDescription
ra_dc_1Classic BarColor bar with logo, name, and title
ra_dc_2Two LineName on top, title below
ra_dc_3MinimalClean two-line layout
ra_dc_4Single Line + BarName with accent bar
ra_dc_5DecorativeMultiple accent lines
ra_dc_6BoldProminent design
ra_dc_7ModernContemporary layout
ra_dc_8ProfessionalBusiness style

Vertical Variants (ra_dc_9_v through ra_dc_11_v)

IDStyle NameDescription
ra_dc_9_vVertical 1Portrait-friendly layout
ra_dc_10_vVertical 2Portrait alternative
ra_dc_11_vVertical 3Portrait compact

Additional Styles

IDStyle NameDescription
ra_dc_12ExtendedFull-width design
ra_dc_14StylizedUnique accent layout
ra_dc_15ContemporaryModern minimal

Lower Third Configuration

Position Origins (tOrigin)

ValuePosition
t_origin_tlTop Left
t_origin_tcTop Center
t_origin_trTop Right
t_origin_blBottom Left
t_origin_bcBottom Center
t_origin_brBottom Right

CSS Transform Origins

tOriginList: {
  't_origin_tl': 'left top',
  't_origin_tc': 'center top',
  't_origin_tr': 'right top',
  't_origin_bl': 'left bottom',
  't_origin_bc': 'center bottom',
  't_origin_br': 'right bottom',
}

Color Settings

PropertyDescription
colorPrimary accent color (bars, lines)
color2Text color

Logo Settings

PropertyDescription
uselogoBoolean - show/hide logo
logoURL to logo image

Lower Third Data Structure

{
  animationType: string,    // 'ra_dc_1' through 'ra_dc_15'
  tOrigin: string,          // Position origin
  color: string,            // Primary color (hex)
  color2: string,           // Text color (hex)
  uselogo: boolean,         // Show logo
  logo: string,             // Logo URL
}

Animation States

Appear/Disappear

Lower thirds animate in and out using CSS classes:

  • .appear - Entry animation active
  • .disappear - Exit animation active

Scene Transitions

  • .scene_transition_not_finished - During scene change
  • .banner_or_comment_is_shown - When active

Character Limits

FieldStandardTicker
Primary Text5454
Secondary Text2001000

Validation Colors

  • Normal: Default text color
  • Warning: #fc6d72 (red) when over limit

UI Elements

ElementLabel
Title input“Primary Text” placeholder
Text input“Secondary Text” placeholder
Character counter“Characters X/54”
Ticker checkbox“Ticker (Scrolling text)”
Direction selector“Animation direction”
Create button“Create”
Clear button“Clear”
StateLabel
Closed“Create Banner” (with + icon)
Open“Close”