Source: HeyGen HyperFrames catalog — lower thirds & tickers (https://hyperframes.heygen.com/catalog), pulled 2026-06-27; pages archived under ai-research/hyperframes-block-*.md.
The lower-third / on-screen-title / ticker family of HyperFrames catalog blocks — name/role chyrons, broadcast styles, and a scrolling news ticker that overlay identifying text onto footage. Each block is a self-contained HTML composition installed with npx hyperframes add <slug> and dropped onto an overlay track above your base footage. This page covers 13 blocks: cardless text-on-footage name tags, card/bar chyrons, high-energy podcast styles, a BILD-style news lower third, a YouTube subscribe lower third, and a broadcast news ticker.
Key Takeaways
- Add any block with
npx hyperframes add <slug>; it installscompositions/<slug>.html(a couple also ship font or avatar assets) and you place it on the host composition with a<div data-composition-id="<slug>" data-composition-src="compositions/<slug>.html" data-start="0" data-duration="<dur>" data-track-index="1" data-width="1920" data-height="1080">element on an overlay track ^[inferred:data-track-index="1"sits above base track 0; the catalog pages show the placement div but not the track semantics]. - Format: all 13 render at 1920×1080. Durations are mostly 4.8s; exceptions are
lower-third-bild(8s),news-ticker(7s),yt-lower-third(4.5s). Timing/placement is controlled bydata-start+data-durationon the placement div. - Content slots: most blocks show a name line + a role/subtitle line plus an accent color/rule; broadcast styles swap in a headline + sub-line (BILD) or a live label + scrolling crawl (ticker); the YouTube block adds an avatar + channel info + subscribe prompt. Customize the on-screen text and accent by editing the installed
compositions/<slug>.html^[inferred — standard HyperFrames block pattern; the catalog pages list install + placement only, not a per-variable API]. - Style families ^[inferred grouping, derived from the per-block descriptions]: cardless text-on-footage (
lt-accent-underline,lt-kicker-name,lt-mask-reveal,lt-side-rule—minimal/bold, text-shadowed for legibility); card / bar chyrons (lt-clean-bar,lt-dark-card,lt-soft-pill,lt-color-block,lt-bold-block,lt-stack-bars); broadcast / news (lower-third-bild,news-ticker); social (yt-lower-third). - When to use: cardless minimal styles for clean podcast/interview name tags; bold/color/block styles for high-energy;
lt-dark-cardover bright footage;lower-third-bildornews-tickerfor news/broadcast looks;yt-lower-thirdfor YouTube subscribe CTAs.
Lower Thirds & Tickers
| Block | Slug | Family | Duration | Tags |
|---|---|---|---|---|
| Lower Third — BILD Style | lower-third-bild | broadcast/news | 8s | broadcast, lower-third, news, overlay |
| News Ticker | news-ticker | broadcast/news | 7s | lower-third, overlay, news, ticker |
| Lower Third — Clean Bar | lt-clean-bar | card/bar | 4.8s | lower-third, overlay, podcast, interview |
| Lower Third — Dark Card | lt-dark-card | card/bar | 4.8s | lower-third, overlay, podcast, interview, dark |
| Lower Third — Soft Pill | lt-soft-pill | card/bar | 4.8s | lower-third, overlay, podcast, interview, minimal |
| Lower Third — Color Block | lt-color-block | card/bar | 4.8s | lower-third, overlay, podcast, interview, bold |
| Lower Third — Bold Block | lt-bold-block | card/bar | 4.8s | lower-third, overlay, podcast, interview, bold |
| Lower Third — Stack Bars | lt-stack-bars | card/bar | 4.8s | lower-third, overlay, podcast, interview, bold |
| Lower Third — Accent Underline | lt-accent-underline | cardless | 4.8s | lower-third, overlay, podcast, interview, minimal |
| Lower Third — Kicker Name | lt-kicker-name | cardless | 4.8s | lower-third, overlay, podcast, interview, bold |
| Lower Third — Mask Reveal | lt-mask-reveal | cardless | 4.8s | lower-third, overlay, podcast, interview, bold |
| Lower Third — Side Rule | lt-side-rule | cardless | 4.8s | lower-third, overlay, podcast, interview, minimal |
| YouTube Lower Third | yt-lower-third | social | 4.5s | social, overlay, youtube |
Lower Third — BILD Style (lower-third-bild)
- Renders: news-style lower third with tight-fit text boxes — white headline bar with red drop-shadow, red sub-line with white drop-shadow.
- Tags:
broadcastlower-thirdnewsoverlay - Slots / timing: headline + sub-line; 8s. Ships Barlow Condensed Bold + ExtraBold fonts.
- Add:
npx hyperframes add lower-third-bild→ composition-idlower-third-bild.
News Ticker (news-ticker)
- Renders: premium broadcast-style lower-third ticker — live label, headline ribbon, and a scrolling news crawl.
- Tags:
lower-thirdoverlaynewsticker - Slots / timing: live label + headline + scrolling crawl; 7s.
- Add:
npx hyperframes add news-ticker→ composition-idnews-ticker.
Lower Third — Clean Bar (lt-clean-bar)
- Renders: minimal white-card lower third for podcasts/interviews — accent tab, name + role, clip-wipe entrance.
- Tags:
lower-thirdoverlaypodcastinterview - Slots / timing: name + role + accent tab; 4.8s.
- Add:
npx hyperframes add lt-clean-bar→ composition-idlt-clean-bar.
Lower Third — Dark Card (lt-dark-card)
- Renders: charcoal card lower third for bright footage — name, drawn accent underline, role; slide-up entrance.
- Tags:
lower-thirdoverlaypodcastinterviewdark - Slots / timing: name + role + accent underline; 4.8s.
- Add:
npx hyperframes add lt-dark-card→ composition-idlt-dark-card.
Lower Third — Soft Pill (lt-soft-pill)
- Renders: rounded white pill lower third for podcasts/interviews — status dot, name + role, scale-pop entrance.
- Tags:
lower-thirdoverlaypodcastinterviewminimal - Slots / timing: name + role + status dot; 4.8s.
- Add:
npx hyperframes add lt-soft-pill→ composition-idlt-soft-pill.
Lower Third — Color Block (lt-color-block)
- Renders: high-energy lower third — bold accent-color block slides in with overshoot, condensed name + mono role.
- Tags:
lower-thirdoverlaypodcastinterviewbold - Slots / timing: name (condensed) + role (mono) + accent-color block; 4.8s.
- Add:
npx hyperframes add lt-color-block→ composition-idlt-color-block.
Lower Third — Bold Block (lt-bold-block)
- Renders: high-energy podcast lower third — solid dark block wipes in, uppercase name slams up, accent tag pops.
- Tags:
lower-thirdoverlaypodcastinterviewbold - Slots / timing: uppercase name + accent tag + dark block; 4.8s.
- Add:
npx hyperframes add lt-bold-block→ composition-idlt-bold-block.
Lower Third — Stack Bars (lt-stack-bars)
- Renders: two stacked bars — a dark name bar wipes from the left, an accent role bar wipes from the right.
- Tags:
lower-thirdoverlaypodcastinterviewbold - Slots / timing: name bar + accent role bar; 4.8s.
- Add:
npx hyperframes add lt-stack-bars→ composition-idlt-stack-bars.
Lower Third — Accent Underline (lt-accent-underline)
- Renders: cardless lower third for footage overlay — name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility.
- Tags:
lower-thirdoverlaypodcastinterviewminimal - Slots / timing: name + role + drawn accent rule; 4.8s.
- Add:
npx hyperframes add lt-accent-underline→ composition-idlt-accent-underline.
Lower Third — Kicker Name (lt-kicker-name)
- Renders: cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage.
- Tags:
lower-thirdoverlaypodcastinterviewbold - Slots / timing: kicker/eyebrow + heavy name + drawn baseline; 4.8s.
- Add:
npx hyperframes add lt-kicker-name→ composition-idlt-kicker-name.
Lower Third — Mask Reveal (lt-mask-reveal)
- Renders: cardless lower third — an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage.
- Tags:
lower-thirdoverlaypodcastinterviewbold - Slots / timing: heavy name (mask-revealed) + role + accent sweep; 4.8s.
- Add:
npx hyperframes add lt-mask-reveal→ composition-idlt-mask-reveal.
Lower Third — Side Rule (lt-side-rule)
- Renders: cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage.
- Tags:
lower-thirdoverlaypodcastinterviewminimal - Slots / timing: name (condensed) + role (mono) + vertical accent bar; 4.8s.
- Add:
npx hyperframes add lt-side-rule→ composition-idlt-side-rule.
YouTube Lower Third (yt-lower-third)
- Renders: animated YouTube subscribe lower third with avatar and channel info.
- Tags:
socialoverlayyoutube - Slots / timing: avatar + channel info + subscribe prompt; 4.5s. Ships
assets/avatar.jpg(swap for your channel avatar) ^[inferred: the catalog lists the avatar asset; replacing it is the obvious customization]. - Add:
npx hyperframes add yt-lower-third→ composition-idyt-lower-third.
Try It
- Browse the family at https://hyperframes.heygen.com/catalog and filter the
lower-thirdtag to preview the motion of each block. - Pick a style and install it:
npx hyperframes add <slug>(e.g.lt-clean-barfor podcasts,lower-third-bildfor a news look). - Place it on an overlay track in your host composition with the
<div data-composition-id="<slug>" ... data-track-index="1">snippet, settingdata-start/data-durationfor when it appears. - Edit the name/role/headline text and accent color in the installed
compositions/<slug>.html^[inferred — blocks are plain editable HTML]; foryt-lower-thirdalso replaceassets/avatar.jpg. - Preview and render with the HyperFrames CLI (
npx hyperframes preview, thennpx hyperframes render) ^[inferred — standard HyperFrames CLI loop, not stated on these catalog pages].