Kreesten-hsh/video

Lower Thirds

Erstellen Sie einen sauberen, gebrandeten Lower Third – die Namens-/Rollenbeschriftung im unteren Bildbereich – der elegant einblendet, lange genug zum Lesen hält und wieder ausblendet, ohne die Aufnahme zu stören. Die Kunst liegt in der Zurückhaltung: eine klare Enthüllung, eine starke Typografie-Hierarchie, korrekte Safe-Area-Platzierung und eine Vorlage, die eine ganze Rednerliste bedient.

Wann verwenden

• Sprecher-/Interview-Namensschilder, Panel-Listen, Sprecher-Beschriftungen.
• Broadcast-Titel, News-Straps, Podcast-/Webinar-Namensschilder.
• Templating eines Designs über eine Liste von Namen/Titeln → viele Clips (der Nutzen).

Anatomie

Ein Lower Third besteht aus zwei Textzeilen plus einem grafischen Hintergrund, platziert im unteren Bereich:

Element	Rolle	Typografie-Behandlung
Name (primär)	Wer	Größte, schwerste Schrift, engster Buchstabenabstand
Rolle/Titel (sekundär)	Was/Wo	~45–60 % der Namensgröße, hellere Schriftstärke, oft eine Marken-Akzentfarbe
Balken / Panel / Akzent	Lesbarkeit vor jedem Hintergrund	Solide oder 70–85 % Deckkraft; ein Akzentbalken verbindet mit der Marke

Halten Sie es bei zwei Zeilen. Eine Namenszeile + Rollenzeile reichen völlig – zusätzliche Zeilen verwässern die Hierarchie und beengen den Safe-Bereich.

Drei Regeln, die billig aussehende Titel verhindern

1. Schneiden Sie einen Titel niemals hart an oder aus. Ein bloßes Erscheinen/Verschwinden wirkt wie ein Fehler. Selbst ein 12-Frame-Weichzeichner oder -Schieber lässt es produziert wirken.
2. Staffeln, nicht knallen. Animieren Sie zuerst den Balken, dann den Namen, dann die Rolle, jeweils um 3–6 Frames versetzt. Wenn alles auf einmal ankommt, wirkt es flach; eine kurze Kaskade wirkt designed.
3. Halten Sie lange genug zum zweimaligen Lesen. Ungefähr 3–5 s auf dem Bildschirm (laut zweimal vorlesen). Zu kurz und es wird übersehen; zu lang und es nervt. Animieren Sie ein/aus, niemals mitten im Segment.

Ein- & Ausgangsanimationen

Wählen Sie eine Bewegungssprache und verwenden Sie sie wieder. Die zuverlässigsten, hochwertig aussehenden Enthüllungen:

Enthüllung	Gefühl	Wie
Schieben + Einblenden	Sauber, Standard	~24–40 px verschieben während des Einblendens; Ease-Out beim Eintritt
Wischbalken	Broadcast	Ein Balken skaliert/schwenkt ein (scaleX/Clip), Text blendet dahinter ein
Masken-Enthüllung	Hochwertig	Text auf ein bewegliches Rechteck clippen, sodass Buchstaben „aufwischen“

Verwenden Sie asymmetrisches Easing: ein schnelles ease-out (cubic-bezier(.22,1,.36,1)) beim Eintritt, ein schnelleres ease-in beim Austritt. Beenden Sie schneller als Sie begonnen haben (~⅔ der Dauer), damit der Titel aus dem Weg geht.

/* Masken-Enthüllung: Text wischt von links nach rechts ein, kein Plugin nötig */
.lt-name { clip-path: inset(0 100% 0 0); animation: wipe .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

Ein-/Aus-Timing & Verweildauer

Denken Sie in drei Phasen. Budgetieren Sie Frames, nicht Gefühle (bei 30 fps):

Phase	Budget	Hinweis
Eintritt	12–18f (0,4–0,6 s)	Gestaffelt: Balken → Name → Rolle
Halten	90–150f (3–5 s)	Die lesbare Verweildauer; an die Zeilenlänge anpassen
Austritt	8–12f (0,27–0,4 s)	Schneller als der Eintritt

Im Code steuern Sie jeden Zustand vom aktuellen Frame (oder einer pausierten Timeline) aus, nicht von der Wanduhrzeit – ein Videorenderer erfordert deterministische Frames. Drücken Sie Eintritt/Halten/Austritt als eine einzige Fortschrittskurve aus, sodass dieselbe Komponente live im Browser und Frame für Frame im Renderer funktioniert.

Safe-Area & Broadcast-Konventionen

Der Lower Third muss auf jedem Bildschirm und jeder Plattform-UI überleben. Komponieren Sie innerhalb des Title-Safe-Bereichs (innere ~90 % / Rand 5 %) und respektieren Sie die Plattform-Chrome:

Format	Anker	Vermeiden
16:9 (1920×1080)	Linke Kante bei ~5 % Rand; Grundlinie ~80–85 % von oben	Äußere 5 % (Title-Safe), Action-Safe äußere 10 %
9:16 (1080×1920)	Gleicher linker Rand; Band anheben	Untere ~18 % (Untertitel/UI), obere ~12 %
1:1 (1080×1080)	Unterer Bereich, mittig-links	Äußere 5 %

Verankern Sie links und lassen Sie nach rechts wachsen, sodass Namen unterschiedlicher Länge fixiert bleiben und sich nie ungeschickt neu zentrieren. Halten Sie die Rollenzeile im gleichen linken Rand wie den Namen. Bei 9:16 parken Sie den Titel nicht ganz unten – dort befinden sich Plattform-Untertitel und Schaltflächen.

Typografie-Hierarchie & Brand-Styling

Hierarchie ist das gesamte Design. Machen Sie den Namen unmissverständlich dominant:

• Größenkontrast ≥ 1,6× (Name vs. Rolle). Wenn unsicher, machen Sie den Namen größer, nicht die Rolle.
• Stärke + Farbe: Namen in Fett/Near-White; Rolle in einer helleren Stärke und einer Marken-Akzentfarbe (ein Akzent, konsistent verwendet).
• Lesbarkeit durch Kontrast: Text liegt über unbekanntem Filmmaterial. Verwenden Sie einen soliden/halbdurchsichtigen Balken, einen feinen Scrim oder einen weichen Textschatten, damit er sowohl auf hellen als auch auf dunklen Hintergründen lesbar ist.
• Brand-Lock: Fixieren Sie Schriftart, Akzentfarbe, Balkenstil und Eckenradius in einem Theme-Objekt, sodass jeder Titel in einer Serie übereinstimmt.

Templating eines Designs über eine Liste

Der Grund, dies in Code zu bauen: Text/Daten ändern, neu exportieren – kein Neu-Animieren. Machen Sie Name/Rolle/Theme zu Props, niemals hartcodiert, und mappen Sie dann eine Liste auf Instanzen.

const ROSTER = [
  { name: "Ada Lovelace",  role: "Gründerin, Analytische Maschinen" },
  { name: "Grace Hopper",  role: "Konteradmiral, US Navy" },
  { name: "Alan Turing",   role: "Mathematiker" },
];
// Ein <LowerThird>-Design; die Liste mappen → viele Instanzen (im Renderer sequenzieren)
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}

Machen Sie in einem Renderer die Liste zu einer Eingabe-Prop und rendern Sie einmal pro Zeile (--props), um einen gebrandeten Clip pro Person auszugeben – gleiche Animation, gleiche Marke, nur der Text ändert sich. Siehe references/lower-third-component.md für die vollständige ausführbare Komponente und das Batch-Skript.

Ausgabe-Checkliste

• Nur zwei Zeilen: dominanter Name, sekundäre Rolle (≥1,6× Größenkontrast).
• Ein- und ausgeblendet (kein harter Schnitt); Eintritt gestaffelt Balken→Name→Rolle; Austritt schneller.
• Halten 3–5 s (zweimal lesbar); Bewegung nur an den Enden, niemals mitten im Segment.
• Links verankert im Title-Safe; 9:16-Band über der unteren 18%-UI-Zone angehoben.
• Text lesbar auf jedem Hintergrund (Balken/Scrim/Schatten); ein Markenakzent durchgängig.
• Name/Rolle/Theme sind Props – eine Vorlage rendert die gesamte Liste.

Liefern & Verifizieren (gerenderte Standbilder → MP4)

Verpacktes Hilfsskript (scripts/): erstellen Sie ein Kontaktblatt mit scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, dann überprüfen Sie die Kodierung mit scripts/probe-mp4.sh out.mp4 [WxH] [fps]. Siehe scripts/README.md.

Der Lower Third wird als Remotion-Komposition ausgeliefert (<Composition> + Zod schema + defaultProps, Name/Rolle/Theme als Props) – Ein-/Verweil-/Austritt alle gesteuert von useCurrentFrame(), niemals Date.now() / Math.random() / Timer. Liefergegenstand = out/*.mp4 + das Projekt (erneut rendern pro Listenzeile). 9:16 Hochformat (1080×1920) ist die Voreinstellung.

Verifizierungsschleife – Standbilder rendern → prüfen → kodieren. Samples der drei Phasen, um einen Staffelungs- oder Safe-Area-Fehler vor der Kodierung (oder dem Batch-Rendering der gesamten Liste) zu erkennen.

# Standbilder bei Eintritt / Verweil / Austritt – MIT AUSGELIEFERTEN PROPS (einer echten Listenzeile, nicht den Standardwerten)
npx remotion still LowerThird out/f-enter.png --frame=10  --props='{"name":"Ada Lovelace","role":"Gründerin, Analytische Maschinen"}'
npx remotion still LowerThird out/f-dwell.png --frame=75  --props='{"name":"Ada Lovelace","role":"Gründerin, Analytische Maschinen"}'
npx remotion still LowerThird out/f-exit.png  --frame=N   --props='{"name":"Ada Lovelace","role":"Gründerin, Analytische Maschinen"}'

# Jedes PNG prüfen – den VERWEIL-Frame fokussieren (vollständig auf dem Bildschirm):
#  - Hierarchie hält: Name dominant (>=1,6x Rolle), Rolle in Markenakzent; beide vollständig sichtbar, nicht mid-wipe
#  - Brand-Lock: Schriftart, Akzentfarbe, Balken/Scrim korrekt; lesbar auf dem Hintergrund
#  - 9:16 Safe-Area: Band ANGEHOBEN über der unteren ~20-35% UI-Zone, frei von oberen ~12% und der rechten Aktionsschiene; links verankert im Title-Safe
#  - Ein-/Austrittsframes zeigen teilweise Enthüllung (Animation läuft tatsächlich), kein harter Schnitt

npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"Ada Lovelace","role":"Gründerin, Analytische Maschinen"}'
npx remotion render LowerThird out/demo.gif --codec=gif                # README-Beweisclip

Batch-Rendering: überprüfen Sie EINE Zeile mittels Standbildern, bevor Sie alle Namen rendern – fangen Sie einen Layout-/Überlauffehler einmal, nicht N-mal. Verwenden Sie npx remotion compositions für durationInFrames/fps, um die Verweil- und Austrittsframes auszuwählen.

Bevor Sie fertig sind:

1. Standbilder rendern sauber bei Eintritt, Verweil und Austritt – keine fehlenden Schrift-/Marken-Assets.
2. Im Verweil-Frame: Name dominant über Rolle, Markenakzent + Balken korrekt, vollständig (nicht teilweise) sichtbar.
3. Das Band befindet sich im 9:16-Safe-Area – über der unteren UI-Zone angehoben, frei von oberer und rechter Schiene – in jedem geprüften Frame.
4. Nur Frame-gesteuert – kein Date.now() / Math.random() / Timer; Ein-/Austritt zeigen Bewegung, niemals einen harten Schnitt.
5. Eine echte Listenzeile (nicht defaultProps) rendert korrekt; MP4 kodiert, GIF optional.

Referenzdateien

• references/lower-third-component.md – ein vollständig ausführbarer Lower Third: eine Remotion-Komponente mit gestaffeltem Spring-Eintritt, lesbarem Halten und schnellerem Austritt, rein frame-gesteuert; ein typisiertes Theme-Objekt für Brand-Lock; das Listen→viele-Instanzen-Sequenzierungsmuster; ein Batch-Render-Skript pro Zeile; plus eine abhängigkeitsfreie CSS/HTML-Version des gleichen Designs mit Masken-Enthüllungs- und Wischbalken-Varianten.