# Lower Third — `lower-third@1.0.0`

A broadcast name strap: an accent bar wipes in, a plate opens out of it, the name rises under a mask, then the role and a tag chip arrive.

The name strap of a broadcast or a documentary. An accent bar wipes in from the left, a dark plate opens out of it, the name rises into place under a mask in a condensed, tracked-out headline face, the role follows in a lighter weight and a small tag chip pops above the end of the plate. At the end it all folds away the way it came. Type the name, the role and an optional tag, choose the look (bar, stripe or boxed), the colours, and whether it leaves before the clip ends.

- Kind: text; status: published; digest sha256:54170e07f4f6db1f4f6c9728cf7b80244ff0133e52f8204727ddfaf17f9a07c5
- Role: Text overlay (Canvas 2D): the name-and-role strap every interview, talk and documentary needs.
- Implementation: canvas2d; entry `src/lower-third.js`
- Files: https://aipixelwizard.com/registry/lower-third/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/lower-third.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/lower-third/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/lower-third/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `apw-runtime@1.0.0` (demo) — Demo harness. The reusable source has no dependencies.

## Exports
- `createLowerThird({ name?, role?, tag?, style?, accent?, plate?, ink?, fontFamily?, x?, y?, inAt?, outAt? }) => { draw(ctx, info, width, height), revealDuration }` — Canvas 2D strap layer driven by info.time (seconds); draws on top of whatever is already on the canvas.
- `STYLES: ['bar', 'stripe', 'box']` — The three looks.

## Parameters
- `name` (text, default "MAYA OKAFOR") — Name
- `role` (text, default "Founder, Northlight Studio") — Role
- `tag` (text, default "KEYNOTE") — Tag: A small chip above the plate, such as LIVE or a place. Leave empty for none.
- `style` (select one of bar | stripe | box, default "bar") — Look
- `accent` (color, default "#ffb000") — Accent
- `plate` (color, default "#121316") — Plate
- `background` (color, default "#1b2230") — Backdrop
- `leave` (boolean, default true) — Fold away at the end

## Composition
- Inputs: Canvas 2D context, info.time (seconds), width, height.
- Outputs: Draws the strap on top of the canvas; does not clear it.
- Coordinates: The strap's left edge sits at 6% of the width and its bottom at 84% of the height; sizes scale with the smaller side of the canvas.
- Lighting: A soft drop shadow lifts the plate off the picture.
- Timing: Pure function of time; revealDuration says when everything has arrived (about 1.9 s with the default start).
- Works with: kinetic-title, gradient-background
- The name is uppercased and tracked out by hand so that it looks the same wherever letterSpacing is not supported.
- Text is treated as private: it is not stored in shared packs unless you choose to include it.

## Output and loop
- 1080×1080, 30 fps, 6 s, procedural
- Seamless loop: no — Not a loop: it arrives, holds, and (with the option on) folds away, ending on an empty backdrop.
- Verified 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes

## Use it
New project: Create the strap once, then each frame draw your picture and call strap.draw(ctx, { time: frame / fps }, width, height).

Existing project: Copy src/lower-third.js. Call draw on your existing 2D canvas (or an overlay canvas above a WebGL scene) after the rest of the frame.

Reuse ideas:
- Interview: Amber bar.
- Live news: Red stripe, live.
- Documentary: Outlined box, teal.

## Limitations
- System fonts differ between computers; pass fontFamily and load the font first for identical renders.
- The strap is single-line for the name and for the role.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

Provenance: Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).