Lower Thirds

Was macht Lower Thirds?

Erstelle eine saubere, gebrandete Bauchbinde (Lower Third) – die Namens-/Rollen-Beschriftung, die im unteren Bildbereich lebt – die einblendet, lang genug zum Lesen sichtbar bleibt und sich wieder ausblendet, ohne das Bild zu stehlen. Die Kunst liegt in der Zurückhaltung: eine knackige Einblendung, eine starke typografische Hierarchie, korrekte Platzierung in der Sicherheitszone und eine Vorlage, die eine ganze Liste von Sprechern antreibt.

Wann zu verwenden

• Namensschilder für Sprecher/Interviews, Listen von Diskussionsteilnehmern, Bildunterschriften für sprechende Köpfe.
• Broadcast-ähnliche Titel, Nachrichtenleisten, Namensschilder für Podcasts/Webinare.
• Eine Vorlage für eine Liste von Namen/Titeln für viele Clips (der Nutzen).

Anatomie

Eine Bauchbinde besteht aus zwei Textzeilen plus einem grafischen Hintergrund, platziert im unteren Bildbereich:

Element	Rolle	Typografische Behandlung
Name (primär)	Wer	Größte, schwerste Schrift, engste Laufweite
Rolle/Titel (sekundär)	Was/Wo	~45–60 % der Namensgröße, leichtere Schriftstärke, oft in einer Brand-Akzentfarbe
Balken / Panel / Akzent	Lesbarkeit vor jedem Hintergrund	Deckend oder 70–85 % Deckkraft; ein Akzentstreifen verbindet mit der Marke

Beschränke es auf zwei Zeilen. Eine Namenszeile + Rollenzeile erfüllen den Zweck – weitere Zeilen untergraben die Hierarchie und überladen die Sicherheitszone.

Drei Regeln, die billig aussehende Titel verhindern

1. Schneide einen Titel niemals hart ein oder aus. Ein bloßes Erscheinen/Verschwinden wirkt wie ein Fehler. Schon ein 12-Frames-Überblenden oder -Schieben lässt es produziert wirken.
2. Staffelung, nicht gleichzeitig. Blende zuerst den Balken ein, dann den Namen, dann die Rolle, jeweils mit 3–6 Frames Versatz. Wenn alles gleichzeitig kommt, wirkt es flach; eine kurze Kaskade wirkt durchdacht.
3. Halte die Einblendung lang genug, um sie zweimal zu lesen. Ungefähr 3–5 s auf dem Bildschirm (lies es zweimal laut vor). Zu kurz und es wird übersehen; zu lang und es nervt. Blende ein und aus, niemals mitten im Segment.

Ein- und Ausblend-Animationen

Wähle eine Bewegungsart und verwende sie wieder. Die zuverlässigsten, hochwertig lesbaren Einblendungen:

Einblendung	Gefühl	Wie
Schieben + Überblenden	Sauber, Standard	~24–40 px verschieben und gleichzeitig überblenden; Ease-Out beim Einblenden
Wischbalken	Broadcast	Ein Balken skaliert/schwenkt ein (scaleX/Clip), Text blendeet dahinter ein
Masken-Einblendung	Hochwertig	Clip den Text auf ein sich bewegendes Rechteck, sodass Buchstaben „aufgewischt“ werden

Verwende asymmetrische Beschleunigung: ein schnelles ease-out (cubic-bezier(.22,1,.36,1)) beim Einblenden, ein schnelleres ease-in beim Ausblenden. Blende schneller aus als ein (~⅔ der Dauer), damit der Titel aus dem Weg geht.

/* Masken-Einblendung: Text wischet von links nach rechts auf, 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-/Ausblend-Timing und Haltezeit

Denke in drei Phasen. Budget in Frames, nicht in Gefühl (bei 30 fps):

Phase	Budget	Anmerkung
Einblenden	12–18f (0,4–0,6 s)	Gestaffelt: Balken → Name → Rolle
Halten	90–150f (3–5 s)	Die lesbare Haltezeit; skaliere mit der Zeilenlänge
Ausblenden	8–12f (0,27–0,4 s)	Schneller als Einblenden

Treibe im Code jeden Zustand mit dem aktuellen Frame (oder einer pausierten Timeline), nicht mit der Wanduhrzeit – ein Video-Renderer benötigt deterministische Frames. Drücke Einblenden/Halten/Ausblenden als einzelne Fortschrittskurve aus, so dass dieselbe Komponente sowohl live im Browser als auch Frame-für-Frame im Renderer funktioniert.

Sicherheitszone und Broadcast-Konventionen

Die Bauchbinde muss auf jedem Bildschirm und jeder Plattform überleben. Gestalte innerhalb der Title-Safe-Zone (innere ~90 % / Rand 5 %) und respektiere die Plattform-Oberfläche:

Frame	Anker	Vermeiden
16:9 (1920×1080)	Linke Kante bei ~5 % Rand; Grundlinie bei ~80–85 % Höhe	Äußere 5 % (Title-Safe), Action-Safe außen 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 %

Verankere den Titel links und lasse ihn nach rechts wachsen, so dass Namen unterschiedlicher Länge fixiert bleiben und sich nie seltsam zentrieren. Halte die Rollenzeile auf dem gleichen linken Rand wie den Namen. Bei 9:16 platziere den Titel nicht ganz unten – Plattform-Untertitel und Buttons befinden sich dort.

Typografische Hierarchie und Brand-Styling

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

• Größenkontrast ≥ 1,6× (Name vs. Rolle). Wenn unsicher, mache den Namen größer, nicht die Rolle.
• Stärke + Farbe: Name fett / fast weiß; Rolle in einer leichteren Stärke und einer Brand-Akzentfarbe (ein Akzent, durchgehend verwendet).
• Lesbarkeit durch Kontrast: Text liegt auf unbekanntem Filmmaterial. Verwende einen deckenden / halbdeckenden Balken, einen subtilen Weichzeichner oder einen weichen Textschatten, damit er sowohl über hellen als auch dunklen Hintergründen lesbar ist.
• Markentreue: Fixiere Schriftart, Akzentfarbe, Balkenstil und Eckenradius in einem Theme-Objekt, sodass jeder Titel innerhalb einer Serie übereinstimmt.

Eine Vorlage für eine Liste

Der Grund, dies in Code zu bauen: Text/Daten ändern, neu exportieren – kein erneutes Animieren. Mache Name/Rolle/Theme zu Props, niemals hartcodiert, und ordne dann eine Liste Instanzen zu.

const ROSTER = [
  { name: "Ada Lovelace",  role: "Founder, Analytical Engines" },
  { name: "Grace Hopper",  role: "Rear Admiral, US Navy" },
  { name: "Alan Turing",   role: "Mathematician" },
];
// Ein <LowerThird>-Design; Liste mappen → viele Instanzen (im Renderer sequenzieren)
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}

In einem Renderer mache die Liste zu einer Input-Prop und rendere einmal pro Zeile (--props), um einen gebrandeten Clip pro Person zu erzeugen – gleiche Animation, gleiche Marke, nur der Text ändert sich. Siehe references/lower-third-component.md für die vollständig 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); Einblendung gestaffelt Balken→Name→Rolle; Ausblendung schneller.
• Halte 3–5 s (zweimal lesbar); Bewegung nur an den Enden, niemals mittendrin.
• Links verankert innerhalb Title-Safe; bei 9:16 Band über der unteren 18 %-UI-Zone anheben.
• Text auf jedem Hintergrund lesbar (Balken/Weichzeichner/Schatten); ein Brand-Akzent durchgehend.
• Name/Rolle/Theme sind Props – eine Vorlage rendert die ganze Liste.

Liefern und verifizieren (gerenderte Standbilder → MP4)

Gepacktes Hilfsprogramm (scripts/): Ordne deine Standbilder mit scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png an, dann prüfe die Kodierung mit scripts/probe-mp4.sh out.mp4 [WxH] [fps]. Siehe scripts/README.md.

Die Bauchbinde wird als Remotion-Komposition ausgeliefert (<Composition> + zod schema + defaultProps, Name/Rolle/Theme als Props) – Einblenden/Halten/Ausblenden alle durch useCurrentFrame() gesteuert, niemals durch Date.now() / Math.random() / Timer. Auslieferung = out/*.mp4 + das Projekt (erneut rendern pro Listenzeile). 9:16 Hochformat (1080×1920) ist der Standard.

Verifizierungsschleife – Standbilder rendern → inspizieren → kodieren. Nimm die drei Phasen als Stichprobe, um einen Staffelungs- oder Sicherheitszonen-Fehler zu erkennen, bevor du kodierst (oder die ganze Liste stapelverarbeitest).

# Standbilder bei Einblenden / Halten / Ausblenden – MIT AUSGELIEFERTEN PROPS (einer echten Listenzeile, nicht den Standardwerten)
npx remotion still LowerThird out/f-enter.png --frame=10  --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-dwell.png --frame=75  --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-exit.png  --frame=N   --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'

# Jedes PNG inspizieren – den HALTEN-Frame fokussieren (vollständig auf dem Bildschirm):
#  - Hierarchie hält: Name dominant (>=1,6x Rolle), Rolle in Brand-Akzent; beide vollständig sichtbar, nicht mittendrin
#  - Markentreue: Schriftart, Akzentfarbe, Balken/Weichzeichner korrekt; lesbar auf dem Hintergrund
#  - 9:16-Sicherheitszone: Band ANGEHOBEN über der unteren ~20-35 % UI-Zone, frei von oberen ~12 % und der rechten Aktionsleiste; links verankert innerhalb Title-Safe
#  - Ein-/Ausblend-Frames zeigen teilweise Einblendung (Animation läuft tatsächlich), keinen harten Schnitt

npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion render LowerThird out/demo.gif --codec=gif                # README-Nachweis-Clip

Stapelverarbeitung der Liste: Verifiziere EINE Zeile über Standbilder bevor du alle Namen renderst – fange einen Layout/Überlauf-Fehler einmal, nicht N mal. Verwende npx remotion compositions für durationInFrames/fps, um die Halte- und Ausblend-Frames zu bestimmen.

Bevor du fertig bist:

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

Referenzdateien

• references/lower-third-component.md – eine vollständig ausführbare Bauchbinde: eine Remotion-Komponente mit gestaffeltem Feder-Einblenden, lesbarem Halten und schnellerem, rein Frame-gesteuertem Ausblenden; ein typisiertes Theme-Objekt für Markentreue; das Listen-zu-vielen-Instanzen-Sequenzierungsmuster; ein Pro-Zeilen-Batch-Render-Skript; sowie eine nebenwirkungsfreie CSS/HTML-Version desselben Designs mit Masken-Einblend- und Wischbalken-Varianten.