Lower thirds

A lower third is the name-and-role graphic in the bottom part of the frame that says who is speaking, laid over footage the graphic never sees. The deliverable is a file with an alpha channel: everything you do not draw stays see-through.

You copy templates/lower-third.html into the working folder, write the design into it, check it with scripts/render.mjs, and render the files. Run the script from the working folder (node <this skill>/scripts/render.mjs …); outputs land there. Make it in one go: don't ask questions the brief already answers or a sensible default covers, and list the defaults you chose when you deliver.

1. Read the brief

• The words, exactly as they should read: names, roles, show name, handle, scripture reference, song title. Keep the user's spelling and punctuation (setting a line in capitals is styling; the words stay theirs); never invent a title or a surname. If they give no second line, use their own words for one (what the stream is about) or leave it out.
• How many cards: each person or item is one entry in CARDS, rendered to its own file with the same design. Add fields when a card needs more than title and sub.
• Where it goes: OBS or a stream → WebM only; a web page → WebM plus the Safari HEVC copy (references/delivery.md); Premiere Pro, DaVinci Resolve, Final Cut → ProRes 4444 .mov; both named → both; a phone editor or tool without alpha → an MP4 on a green ground for chroma key. Not said: WebM and .mov.
• The look: the show, the brand colours, the mood (news, podcast, gaming, documentary, church, corporate). The design comes from this, not from the template.
• Defaults when not given: 1920×1080 at 30 fps; about 8 seconds (under a second in, a still hold of 5–6 seconds, half a second out); lower left; silent.

2. Design it for this show

The template's drawGraphic is a working example of the structure, not the look: rewrite it for the brief. What holds for every design: