Lower thirds and broadcast graphics in pure HTML

A lower-third is the typographic name-card that overlays the bottom of a video frame. It identifies who is speaking. It is the single most-reused broadcast asset, the asset most teams overpay for, and the asset most production tools handle worst.

It is also four CSS properties and one animation. Here is the version.

The anatomy

Two lines of text — name on top, role on the bottom — sitting in the lower-left or lower-right of the frame. A thin accent bar to the left. A subtle box behind. That is the entire visual. The motion brings it on with a slide-in and takes it off with a fade.

The four elements

1. The name — heaviest weight, largest size, mixed-case.
2. The role — lighter, smaller, often all-caps, tracked-out.
3. The accent — a 4px vertical bar in the brand color, sitting flush-left of the type.
4. The container — a low-opacity dark box, blurred behind, that lets the type stay legible over any footage.

That is it. Anything else (logos, animations on the role line, sponsored-by tags) is a brand decision that should fight for inclusion.

The motion

The slide-in is on a settle curve. The whole graphic enters from the left, with the accent bar arriving first and the type cascading after.

.lt { transform: translateX(-110%); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.lt.in { transform: translateX(0); }
.lt .name { opacity: 0; transition: opacity .4s ease .3s; }
.lt.in .name { opacity: 1; }
.lt .role { opacity: 0; transition: opacity .4s ease .5s; }
.lt.in .role { opacity: 1; }

The accent bar enters with the container. The name fades in 300ms after the slide starts. The role fades in 200ms after the name. Total motion: 900ms slide + 200ms tail = 1.1s. Long enough to read, short enough to not annoy.

The knobs

Three variables a producer will actually touch:

Compare: default versus branded

The same lower-third with two different brand systems. Notice how much the accent color does on its own.

The traps

Three things that bite first-time lower-third designers:

1. Legibility on busy footage

A lower-third that looks great over a static dark background falls apart over busy footage. The fix is contrast — either a darker container background (rgba(10,10,10,.85) not .5) or a subtle drop shadow on the type itself.

Test against the worst-case footage you have. If it does not read there, the lower-third is broken.

2. The exit animation

Most lower-third exits are too slow. The standard is "fade out over 600ms while sliding 30px right." This reads as polite. The better version is "fade out over 250ms in place." Exits should not draw attention. The faster the exit, the less the viewer notices it.

3. Stacking

If two lower-thirds need to appear at the same time (interview with two people), do not stack vertically. Pick one in each corner. Vertical stacks read as crowded; corner-paired reads as a two-shot.

Production-grade workflow

The path from this template to a broadcast workflow:

1. Build a lower-third.html template with placeholders.
2. Maintain a talent.csv with name,role,accent per person.
3. In CI, render a clean MP4 with alpha (or transparent overlay) per row.
4. Editor drops the right MP4 onto the right shot.

For marketing teams, the same template renders the social-cut version with a 9:16 aspect and a larger type scale. One source of truth, multiple outputs.

Why this beats a tool

A motion graphics plugin will give you a lower-third with twenty knobs. You will use four of them. The other sixteen are surface area for the brand to drift across episodes. A code template with exactly four variables enforces consistency at the API level — a producer cannot ship a lower-third with the wrong color because the wrong color is not on the menu.

This is the underrated value of code-as-design: the system enforces the brand. The developers guide covers wiring the template into your CI; the HyperFrames render API is the underlying infrastructure.

The lower-third is the place to start. If you ship the next ten episodes with a code-driven lower-third, you will start seeing every other broadcast asset the same way.