Build broadcast-style lower thirds in your browser.

A lower third is the name-and-title graphic that slides into the lower-left corner of the screen during interviews, newscasts and streams.

Type a name and title — or drop in a whole tab-separated list of up to four guests — pick a colour, and download a single HTML file with a fully transparent background. Drop it into OBS as a Browser Source and cue each name with the number keys. No plugins, no sign-up, nothing to install.

Make yours

Edit the fields, or drag a tab-separated name ⇥ title file onto the preview to load up to four at once. Then download a ready-to-key file.

Drop a tab-separated name / title file

Names

The number on each is its cue key. Press it to bring that name in; press again to take it out.

Accent colour

In the download: 1–4 cue each name · O out · H hide help · B checkerboard.
Press H here to hide this panel and cue from the keyboard.

How it works

A few small ideas do all the work. No video compositing, no green screen.

01 — TRANSPARENCY

A see-through page

The page body has no background at all. When a browser renders with an alpha channel — as OBS Browser Sources do — every empty pixel is transparent, so only the graphic shows over your footage.

02 — MOTION

CSS slides it in

Each graphic starts pushed off-screen to the left. A short CSS keyframe animation slides it to its resting spot and fades it in; a matching animation reverses it out.

03 — CONTROL

Number keys cue names

A key listener maps 1–4 to your loaded names. Bringing one in takes any other out, so only one is ever on screen — cue a whole panel of guests from the keyboard or a stream deck.

The build, start to finish

The whole thing is one self-contained HTML file: markup, styles and script in a single document, no external libraries. That is deliberate — a lower third has to load instantly and behave identically on any machine you drop it into, so there are no fonts to fetch, no frameworks, no build step.

1. The transparent canvas

Everything starts with a body that paints nothing. A checkerboard toggle is layered on top only for previewing — it is never part of the output.

/* nothing is painted, so the page keys cleanly */
html, body { margin: 0; height: 100%; background: transparent; }

2. The graphic

A coloured accent bar sits beside a semi-transparent panel holding two lines of text — a bold name and an upper-cased title. A single CSS custom property drives the accent colour, so re-skinning the whole graphic is one value.

.lt     { position: fixed; left: 60px; bottom: 90px;
         transform: translateX(-120%); opacity: 0; }
.bar   { width: 8px; background: var(--bar); }
.title { color: var(--bar); text-transform: uppercase; }

3. Slide in, hold, slide out

Two keyframe animations handle the movement. Adding a class plays one; a forced reflow between plays lets the same animation re-trigger cleanly on every cue.

@keyframes ltIn {
  from { transform: translateX(-120%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

4. Many names, one on screen

Drop a tab-separated list and the tool builds one graphic per line, stacked in the same corner but hidden. Pressing a number brings that one in and slides whatever was showing back out — so the corner never double-books.

function cue(i) {
  if (active === i) return slideOut(i);  // same key = toggle off
  if (active >= 0) slideOut(active);      // take the current one out
  slideIn(i); active = i;
}

5. Live control from the keyboard

One listener watches for keystrokes. 1–4 cue names, O clears the screen, and H hides the helper UI so the recorded frame stays clean. The listener steps aside while you are typing in a field, so editing text never fires a cue by accident.

document.addEventListener('keydown', e => {
  if (/INPUT|TEXTAREA/.test(e.target.tagName)) return;
  if (e.key >= '1' && e.key <= '4') cue(+e.key - 1);
  if (e.key === 'o') clear();
});

6. Make it a tool

The maker above wraps those pieces in a small form. Editing a field live-updates the preview; dropping a file loads a list; the download button bakes your names, titles and colour into a fresh copy of that single file and hands it back — ready to point OBS at. That last step is what turns a one-off graphic into something anyone can use.

Using it in OBS

1. Download your file above. 2. In OBS, add a Browser Source, tick Local file, and choose the downloaded HTML. 3. Set width and height to match your canvas (e.g. 1920×1080). 4. The background stays transparent, so it composites straight over your camera or capture. 5. To cue names, give the Browser Source focus and press 1–4; press O to clear. Bind the same keys on a stream deck for one-touch cues.