feat(registry): add lower thirds (10 variations for podcasts/interviews)

[mattmadonna]

Fills the open catalog gap:

Lower thirds | 10 variations for podcasts/interviews | Easy

Ten standalone lower-third blocks at 1920×1080, one shared token contract, ten different mechanics. Drop a guest's name and title in via the data-lt-* attributes and any of the ten reads as broadcast-grade. They are drop-in interchangeable mid-edit, so a producer can point a loop at a CSV of guests and emit a whole season without touching the HTML.

The blocks

showcase-lower-thirds.mp4

| Name | Mechanic |

| --- | --- |
| lower-third-underline-grow | Accent rule grows out from under the name (the safe default) |
| lower-third-slab-wipe | Solid bar clip-path wipe under a slab serif |
| lower-third-hairline-rule | 1px rule draws, text staggers up through masks |
| lower-third-stacked-caps | Three condensed caps lines, sequential mask-up |
| lower-third-glass-panel | Frosted backdrop-filter panel, scale + blur-in |
| lower-third-badge-pill | Avatar pill with spring scale, 9:16 safe |
| lower-third-bracket-frame | Corner brackets draw in, no fill over footage |
| lower-third-tape-strike | Overshoot slam plus stepped typewriter |
| lower-third-ticker-crawl | Static name, single-pass credential crawl |
| lower-third-split-flap | Departure-board glyph flip, seeded |

Registry rules

All ten satisfy the five hard rules: deterministic (no wall-clock, no unseeded randomness; split-flap uses a mulberry32 seeded at 2308, verified byte-identical across runs), single paused timeline, registered under window.__timelines[ID] where ID equals both data-composition-id and the directory name, no requestAnimationFrame, and a hard kill at the end. Every id and class hook is prefixed with the block name, so nothing collides when a block is used as a sub-composition.

Accessibility

Every text layer clears WCAG AA on any footage, in both themes. Worst case in the set is 4.54:1. Accent splits into two tokens: --lt-accent stays saturated for bars, rules, brackets and flags, and --lt-accent-type is a tint used wherever accent becomes text. The four no-fill blocks carry a radial .lt-scrim plate that fades in and out with the block so it never lands as a rectangle.

Verification

hyperframes lint is clean on all ten. hyperframes check passes on eight; two (split-flap, tape-strike) trip the layout inspector on the semi-transparent .lt-scrim and the accent-block caret, which I verified visually are false positives (the renders are correct, contrast checks that run pass 40/40 and 4/4). Happy to annotate those with data-layout-allow-* if you'd prefer a clean check.

Note

lower-third-ticker-crawl also serves the separate "News ticker / scrolling text bar" gap on the catalog, if that's useful to cross-list.

Previews

Preview MP4s for all ten are attached below, plus a 50-second showcase running the full set back to back with one guest so the interchangeability reads at a glance.

showcase-lower-thirds.mp4

lower-third-badge-pill.mp4

lower-third-bracket-frame.mp4

lower-third-glass-panel.mp4

lower-third-hairline-rule.mp4

lower-third-slab-wipe.mp4

lower-third-split-flap.mp4

lower-third-stacked-caps.mp4

lower-third-tape-strike.mp4

lower-third-ticker-crawl.mp4

lower-third-underline-grow.mp4