Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Lower Third

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.

Text layer, V4 Titles2D124 lines of codev1.0.0

In Text & data

Next: Kinetic Title RevealSurprise me

Lower Third preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

A small chip above the plate, such as LIVE or a place. Leave empty for none.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 209 KB)
Info

What it is

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.

Reuse it in your own idea

  • Interview: Amber bar.
  • Live news: Red stripe, live.
  • Documentary: Outlined box, teal.

Which part is reusable

src/lower-third.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • 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.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/lower-third.js
Exports
  • createLowerThird({ name?, role?, tag?, style?, accent?, plate?, ink?, fontFamily?, x?, y?, inAt?, outAt? }) => { draw(ctx, info, width, height), revealDuration }
  • STYLES: ['bar', 'stripe', 'box']
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. The reusable source has no dependencies.
How it fits a scene

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).

Output
1080×1080, 30 fps, 6 s · procedural (computed from the frame number) · not a loop — Not a loop: it arrives, holds, and (with the option on) folds away, ending on an empty backdrop.
Tested
Rendered 180 frames on 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical.
Performance
One measureText per letter per frame and a few filled rectangles; negligible. Best with names under about 24 characters and roles under about 40; there is no wrapping.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- lower-third/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:54170e07f4f6db1f…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen