106.9K+Download
Skip to the usage guide
Lower Thirdsby iart-ai

Lower Thirds Skill.

Render transparent animated name straps and broadcast overlays.

  • Lower Thirds
  • Typography
Download OpenDesignView Usage Guide
Source Review · lower-thirdsSKILL.md
Task Render transparent animated name straps and broadcast overlays. Produces Transparent WebM or ProRes 4444 overlay files for the requested destination. Before You Start Provide the exact names and roles, show fonts and destination player. Select the delivery format before rendering: a transparent overlay for OBS or an editor has different requirements from an ordinary MP4.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Render transparent animated name straps and broadcast overlays

Create readable name straps with transparent WebM or ProRes output, editable card data and checks for text fit, timing and alpha.

Source-based workflowNot an execution benchmark

The Working Approach

lower-thirds creates animated name straps and other overlays as video files with transparency. It draws the graphic frame by frame on a canvas, then exports a format suited to a livestream, browser or editing application. Everything outside the drawn graphic remains transparent.

The workflow gives the reading hold as much attention as the entrance. Text sits on its own backing so it remains legible over unknown footage, long names are fitted to their boxes, and the first and last frames are empty. Multiple cards share a design but render to separate files.

Expected Deliverables

  • Transparent WebM or ProRes 4444 overlay files for the requested destination.
  • An editable HTML source page with card data and timing.
  • Hold-frame previews and entrance/exit contact sheets.
See the Example Brief

From Brief to Review

  1. 01
    Read exact card text

    Preserve names, roles and punctuation. Determine the destination so the export format is selected before rendering.

  2. 02
    Design the overlay

    Keep the middle of the frame clear, place the graphic inside safe margins and give text a backing. Fit the longest entry and keep the reading hold still.

  3. 03
    Inspect and decode the output

    Run the provided checks, review light and dark background previews, then inspect build-in and build-out sheets. Confirm transparency in the encoded file.

02 When to Use It

When to Use It

Provide the exact names and roles, show fonts and destination player. Select the delivery format before rendering: a transparent overlay for OBS or an editor has different requirements from an ordinary MP4.

A Good Fit

  • Names must overlay live footageThe design is evaluated over different backgrounds because it cannot know the eventual shot.
  • Several speakers share one styleCard records allow the same layout and motion to render separately for each person.

Limits to Check

  • H.264 needs a solid groundThe renderer uses alpha-capable formats for transparency and requires a ground color for ordinary MP4 delivery.
  • The renderer has local dependenciesThe source lists Node, browser capture tooling, Chrome or Chromium, and FFmpeg.
  • Web playback is destination-specificThe source routes Safari delivery separately; one transparent file is not a blanket browser-compatibility guarantee.

Bring These Inputs

  • Exact textProvide each name, role or caption exactly as it should appear.
  • DestinationSpecify OBS, a browser, an editing application or a chroma-key workflow.
  • Show designSupply colors, fonts, mood, frame size and duration requirements.

03 Decisions That Matter

Decisions That Matter

  1. Readable over footage

    A backing surface prevents light text disappearing over a bright shot.

  2. Clean edit boundaries

    Empty opening and closing frames avoid a graphic appearing or disappearing abruptly.

  3. Verified alpha

    The source decodes a hold frame instead of trusting the file extension alone.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Provide each name, role or caption exactly as it should appear.

Upstream Source File
https://github.com/iart-ai/lower-thirds-skills/blob/aa8ef7ed9fa59d0a79fc57701e493cfd8197b5d8/skills/lower-thirds/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use lower-thirds to make matching overlays for three podcast guests using the names and roles in my attached list. Use our dark green and cream palette, keep the graphics in the lower left, and leave the center clear for the speaker. Deliver transparent WebM files for OBS plus editable HTML. Keep each name still during a five-second reading hold, with empty first and last frames. Check the longest name, inspect the overlay on bright and dark backgrounds, and review both entrance and exit frames before rendering every card.

Inspect the Result

Check the actual output against these observable criteria.

  • Read every card on both bright and dark footage previews.
  • Check empty ends, safe margins and the longest text entry.
  • Decode the exported hold frame to confirm actual transparency.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
iart-ai
Repository
iart-ai/lower-thirds-skills
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · aa8ef7ed9fa5
Editorial Source Summary
Render transparent animated name straps and broadcast overlays.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can I get a transparent MP4?

The source uses WebM or ProRes 4444 for alpha. Its ordinary H.264 MP4 route requires a solid ground, such as green for chroma key.

Can it make several names at once?

Yes. Each entry in the card data renders to its own file with the shared design. Every entry still needs a text-fit check.

Are the automated checks enough?

No. The source explicitly says they cannot judge clipped wipe text or readability. Stills and entrance/exit sheets require visual inspection.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/iart-ai/lower-thirds-skills/blob/aa8ef7ed9fa59d0a79fc57701e493cfd8197b5d8/skills/lower-thirds/SKILL.md