{"id":"lower-third","version":"1.0.0","title":"Lower Third","summary":"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.","kind":"text","target":"canvas2d","collections":["kinetic-text","product-reveals"],"tags":["lower third","name strap","name tag","title card","interview","broadcast","speaker label","caption","overlay","text animation"],"loopable":false,"motion":"procedural","durationSeconds":6,"status":"published","media":{"poster":"https://aipixelwizard.com/media/lower-third/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/lower-third/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/lower-third/1.0.0/sample.mp4","sampleBytes":214487,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/lower-third","manifest":"https://aipixelwizard.com/api/v1/visuals/lower-third/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/lower-third/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/lower-third/1.0.0/","demo":"https://aipixelwizard.com/registry/lower-third/1.0.0/index.html"},"description":"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.","role":"Text overlay (Canvas 2D): the name-and-role strap every interview, talk and documentary needs.","useCases":["Naming a speaker in an interview or talk","A presenter strap on a product demo","A documentary caption for people and places"],"synonyms":["name plate","speaker title","chyron","lower-third graphic","name and title","on-screen name"],"digest":"54170e07f4f6db1f4f6c9728cf7b80244ff0133e52f8204727ddfaf17f9a07c5","implementation":{"target":"canvas2d","runtime":"browser","language":"javascript","module":"esm","entry":"src/lower-third.js","exports":[{"name":"createLowerThird","signature":"createLowerThird({ name?, role?, tag?, style?, accent?, plate?, ink?, fontFamily?, x?, y?, inAt?, outAt? }) => { draw(ctx, info, width, height), revealDuration }","description":"Canvas 2D strap layer driven by info.time (seconds); draws on top of whatever is already on the canvas."},{"name":"STYLES","signature":"STYLES: ['bar', 'stripe', 'box']","description":"The three looks."}],"reusable":["src/lower-third.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness. The reusable source has no dependencies."}],"uses":[],"usedBy":[],"params":[{"key":"name","label":"Name","type":"text","default":"MAYA OKAFOR","maxLength":32,"sensitive":true},{"key":"role","label":"Role","type":"text","default":"Founder, Northlight Studio","maxLength":48,"sensitive":true},{"key":"tag","label":"Tag","help":"A small chip above the plate, such as LIVE or a place. Leave empty for none.","type":"text","default":"KEYNOTE","maxLength":16,"sensitive":true},{"key":"style","label":"Look","type":"select","default":"bar","options":[{"value":"bar","label":"Side bar"},{"value":"stripe","label":"Underline stripe"},{"value":"box","label":"Outlined box"}]},{"key":"accent","label":"Accent","type":"color","default":"#ffb000"},{"key":"plate","label":"Plate","type":"color","default":"#121316"},{"key":"background","label":"Backdrop","type":"color","default":"#1b2230"},{"key":"leave","label":"Fold away at the end","type":"boolean","default":true}],"presets":[{"id":"default","label":"Amber bar","params":{}},{"id":"stripe","label":"Red stripe, live","params":{"style":"stripe","accent":"#ff3b30","tag":"LIVE","name":"JORDAN ELLIS","role":"Reporting from the harbour","background":"#14181f"}},{"id":"box","label":"Outlined box, teal","params":{"style":"box","accent":"#2dd4bf","plate":"#0b1a1c","tag":"","name":"DR. AMARA SINGH","role":"Marine biologist","background":"#0c1c20"}},{"id":"light","label":"White plate, violet","params":{"accent":"#7c5cff","plate":"#f4f1ea","name":"LEO FONTAINE","role":"Creative director","tag":"STUDIO","background":"#2a2540"}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":6,"posterSeconds":2.6,"alpha":false,"motion":"procedural","loop":{"seamless":false,"method":"Not a loop: it arrives, holds, and (with the option on) folds away, ending on an empty backdrop."},"seed":null},"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).","compatibleWith":["kinetic-title","gradient-background"],"notes":["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."]},"reuse":["Interview: Amber bar.","Live news: Red stripe, live.","Documentary: Outlined box, teal."],"integration":{"newProject":"Create the strap once, then each frame draw your picture and call strap.draw(ctx, { time: frame / fps }, width, height).","existingProject":"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."},"performance":{"notes":"One measureText per letter per frame and a few filled rectangles; negligible.","limits":"Best with names under about 24 characters and roles under about 40; there is no wrapping."},"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":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[]},"rights":{"approvedForPublicRelease":true},"provenance":"Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).","changelog":[{"version":"1.0.0","date":"2026-10-08","notes":"Initial release."}],"verification":{"testedOn":"2026-10-08","inputs":{"lower-third@1.0.0":"54170e07f4f6db1f4f6c9728cf7b80244ff0133e52f8204727ddfaf17f9a07c5","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"Canvas 2D","width":1080,"height":1080,"fps":30,"frames":180,"renderSeconds":22.9,"loopCheck":{"checked":false,"seamless":null,"maxDifference":null,"note":"Asset does not claim a seamless loop."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/lower-third/1.0.0/poster.webp","preview":"/media/lower-third/1.0.0/preview.mp4","sample":"/media/lower-third/1.0.0/sample.mp4","sampleBytes":214487}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/lower-third/1.0.0/LICENSE"},{"path":"asset.json","size":7386,"sha256":"a1f56a2aa9ea242b0151dd61b3e0ebc67dacc6b8cead93101b4b073dde15d001","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/lower-third/1.0.0/asset.json"},{"path":"demo.js","size":1548,"sha256":"e96f40f445ed0911f6629a371179e4507304be8c2e09f37589ef9c203b73e840","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/lower-third/1.0.0/demo.js"},{"path":"index.html","size":525,"sha256":"dd5fad99e4186dcf0320ca697da3c6c019f90955d327f2feedbd028750c0ffc5","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/lower-third/1.0.0/index.html"},{"path":"src/lower-third.js","size":7098,"sha256":"2be6eec35372598cba64e362313d264eaac399faf9bbd64a522d7c60d0d7974c","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/lower-third/1.0.0/src/lower-third.js"}],"warnings":[]}