Kinetic Typography (Bewegte Typografie)

Was macht Kinetic Typography (Bewegte Typografie)?

Text in Bewegung hat eine Aufgabe, bevor er irgendeine andere hat: Er muss lesbar sein. Der häufigste Fehler bei animierter Typografie ist nicht Hässlichkeit, sondern Text, der vorbeirauscht, bevor der Betrachter das erste Wort zu Ende gelesen hat, oder Text, der sich so stark bewegt, dass das Auge der Bewegung hinterherjagt, anstatt die Wörter zu lesen. Dies ist die Handwerksebene. Sie bestimmt, wie lange jede Zeile stehen bleibt, wie sie ein- und ausgeht und was sich bewegen darf – und übergibt ein konkretes Frame-Budget an remotion-compose, das den eigentlichen React/TypeScript-Code schreibt, der ihn rendert.

Die oberste Regel: Animieren, um das Lesen zu unterstützen, niemals, um zu dekorieren. Bewegung verdient sich ihren Platz nur, wenn sie den Blick lenkt, Hierarchie herstellt oder einen Rhythmus markiert. Alles untenstehende setzt dies durch.

Arbeiten Sie mit einem durchgehenden Beispiel: einer 16:9-Produkttitelkarte mit dem Text "Ship video in one prompt" (5 Wörter), bei 30fps, plus einer animierten Lower-Third-Caption-Spur darunter.

Workflow

Führen Sie diese Schritte in der angegebenen Reihenfolge aus. Wählen Sie keine Einblend-Animation aus, bevor Sie das Halte-Budget kennen – das Budget sagt Ihnen, ob Sie überhaupt Platz für eine Animation haben.

Schritt 1 – Das Lesezeit-Budget pro Wort zuerst berechnen

Text muss lange genug auf dem Bildschirm bleiben, um in ruhigem Tempo gelesen zu werden, plus der Zeit, die seine Ein- und Ausblendung beanspruchen. Budgetieren Sie die Haltezeit, bevor Sie eine Animation auch nur berühren.

• Die durchschnittliche Lesegeschwindigkeit für Video auf dem Bildschirm ist langsamer als für Print: Nehmen Sie ~3,5 Wörter/Sekunde an (≈ 200 Wörter pro Minute). Die Caption-/Subtitle-Konvention ist ähnlich – unterschreiten Sie niemals ~0,3s lesbare Haltezeit pro Wort.
• Minimale Haltezeit auf dem Bildschirm = Wörter ÷ 3,5 Sekunden, mit einer Untergrenze von 0,8s für jede Zeile (selbst ein einzelnes Wort braucht einen Moment, um registriert zu werden) und einem +0,3s-Aufschlag für ungewohnte Begriffe, Zahlen oder Namen, die das Auge nicht vorhersagen kann.
• Die Ein- und Ausblendzeit ist zusätzlich – sie zählt nicht als Lesezeit, da der Text mitten im Übergang nicht vollständig lesbar ist. Gesamtslot = Einblendung + Haltezeit + Ausblendung.

Führen Sie type_budget.js (siehe unten) aus, um eine Textzeile in ein Frame-Budget zu verwandeln. Für die Titelkarte ergibt sich eine Haltezeit von ~43 Frames; das ist die Zahl, die Sie remotion-compose als lesbares Fenster der Sequence übergeben, mit Ein- und Ausblendung obendrauf.

Schritt 2 – Ein-/Ausblend-Timing wählen, das zum Schnitt passt, nicht zu einem Standard

Ein- und Ausblendungen sind Satzzeichen, nicht der Satz selbst. Halten Sie sie kurz und lassen Sie die Haltezeit die Arbeit machen.

• Einblendung: 8-15 Frames (0,25-0,5s) @ 30fps. Schnell genug, um flott zu wirken, langsam genug, um als bewusst gelesen zu werden. Eine Titel kann das obere Ende nehmen; eine schnelle Caption-Spur das untere Ende.
• Ausblendung: gleich lang oder kürzer als die Einblendung. Ausblendungen sollten nie verweilen – einmal gelesen, sollte der Text verschwinden. 6-12 Frames.
• Passen Sie die Ausblendung an das Folgende an. Harterschnitt zur nächsten Szene → Text auf dem Schnitt ausblenden (kein Fade, der Schnitt macht das). Cross-Dissolve → Text über den Dissolve ausfaden. Animieren Sie nie eine aufwändige Ausblendung in einen Harterschnitt; es kämpft gegen den Schnitt. Dies ist die Nahtstelle, an der motion-design-principles (Schnitt und Easing) und diese Fertigkeit aufeinandertreffen – nehmen Sie die Easing-Kurve von dort, wenden Sie sie hier auf den Text an.
• Staffeln Sie Multi-Element-Einblendungen, animieren Sie sie nicht unisono. Ein Titel + Untertitel liest sich am besten, wenn der Untertitel 4-8 Frames nach dem Titel einblendet, sodass das Auge von oben nach unten geführt wird.

Schritt 3 – Wählen Sie EINE Einblend-Technik pro Zeile und animieren Sie eine Eigenschaft

Je mehr Eigenschaften sich gleichzeitig bewegen, desto schwerer ist der Text mitten im Übergang zu lesen. Animieren Sie standardmäßig nur eine Eigenschaft; kombinieren Sie zwei nur mit Absicht (z. B. Opazität + eine kleine Verschiebung).

• Fade (opacity 0→1) – am sichersten, immer lesbar, der richtige Standard für Caption-Spuren und Fließtextzeilen.
• Hochschieben / Gleiten (kleine Verschiebung, 20-60px, kombiniert mit Fade) – verleiht Richtung und Leben; die Arbeitstier für Titel. Halten Sie die Distanz klein – große Slides lassen das Auge der Bewegung folgen, anstatt zu lesen.
• Wortweise Einblendung – jedes Wort blendet nacheinander mit einem kurzen Versatz ein/hoch. Verwenden für Betonungszeilen und lyrische Stücke, nicht für dichte Captions (das Lesen wird ruckelig). Budgetieren Sie die gesamte Zeile so, dass die Einblendung gut innerhalb der Haltezeit endet.
• Skalieren / Pop (Feder von 0,85→1) – energisch, gut für ein einzelnes Hero-Wort oder eine Zahl-Callout. Skalieren Sie nie einen ganzen Satz; das Refow ist unlesbar.
• Mask / Wipe-Einblendung – hochwertig, gerichtet, großartig für eine einzelne Überschrift. Aufwändiger zu bauen; reservieren für die eine Titel, die zählt.

Was auch immer Sie wählen, die Eigenschaft animiert; der Text selbst wird während der Animation nie neu umgebrochen. Animieren Sie opacity und transform (translate/scale/clip) – niemals font-size, width oder letter-spacing auf eine Weise, die die Glyphen neu anordnet, denn layoutgetriebene Animation flackert und ist unlesbar.

Schritt 4 – Gewicht und Größe als Übergänge animieren, nicht als Rauschen

Gewicht und Größe sind die Art und Weise, wie Typografie Betonung in Bewegung ausdrückt – aber sie sind Übergänge zwischen gehaltenen Zuständen, kein kontinuierliches Wackeln.

• Gewichtsübergang: ein Wort kann von einer helleren zu einer schwereren Schriftstärke übergehen, um Betonung zu setzen (z. B. 400→700 über 8 Frames, während es sich setzt). Verwenden Sie eine echte Variable-Font-Gewichtsachse oder zwei Schnitte der Familie; faken Sie niemals Fett durch Skalieren.
• Größenübergang: eine Zahl oder ein Schlüsselwort kann einmal skaliert werden, um Hierarchie zu beanspruchen, und dann halten. Scale-and-hold, nicht scale-and-pulse. Ein sich wiederholender Puls auf Text liest sich wie ein defekter Render, nicht wie Betonung.
• Diese sind Akzente. Höchstens ein Gewichts-/Größenakzent pro Zeile, auf dem einen wichtigsten Wort. Wenn alles betont wird, betont nichts.

Schritt 5 – Typografie-Hierarchie in Bewegung setzen (Reihenfolge, Größe, Gewicht, Timing)

Hierarchie in Bewegung besteht aus vier Signalen; setzen Sie sie zusammen ein, damit das Auge weiß, wohin es schauen soll und in welcher Reihenfolge.

1. Reihenfolge der Einblendung – das zuerst eingeblendete Element wird zuerst gelesen. Beginnen Sie mit der Überschrift, gefolgt vom Untertitel, enden Sie mit dem CTA.
2. Größenkontrast – halten Sie ein klares Verhältnis (Überschrift ≥ 1,6× Untertitel). Bewegung rettet keine schwache statische Hierarchie.
3. Gewichtskontrast – schwerer = wichtiger. Maximal zwei Gewichte gleichzeitig auf dem Bildschirm.
4. Timing – die wichtigste Zeile bekommt die längste Haltezeit und, wenn überhaupt, die Einblendung mit der meisten Präsenz. Die unwichtigste (ein persistentes Lower-Third, ein Wasserzeichen) animiert nach ihrer einmaligen Einblendung nicht weiter.

Füllen Sie die motion-type-spec-Vorlage (unten) mit dem Budget pro Zeile, der Technik und der Hierarchie-Rolle. Diese gefüllte Spezifikation ist die Übergabe an remotion-compose.

Schritt 6 – Entscheiden, wo NICHT zu animieren

Der fortgeschrittene Zug ist Zurückhaltung. Bevor Sie finalisieren, entfernen Sie Animationen von allem in der "Do NOT"-Liste unten. Eine Titel mit einem gut budgetierten Hochschieben liest sich besser als eine, bei der jedes Wort etwas tut.

Qualitätsstandard

Eine fertige Motion-Type-Spezifikation ist nur dann A+, wenn alles hält:

• Jede Zeile erfüllt das Lesezeit-Budget – Haltezeit ≥ max(0,8s, Wörter ÷ 3,5 + Begriffs-Aufschlag), berechnet von type_budget.js, mit Ein-/Ausblendung oben drauf, niemals davon abgezogen.
• Jede Zeile animiert eine Eigenschaft (zwei nur mit expliziter Absicht), und keine Zeile ordnet ihre Glyphen während der Animation neu – nur opacity/transform.
• Einblendungen sind 8-15 Frames, Ausblendungen ≤ Einblendung, und die Ausblendung ist an den folgenden Schnitt angepasst (Cut vs. Dissolve), nicht als Standard belassen.
• Hierarchie lesbar in der Reihenfolge: Einblend-Reihenfolge, Größenverhältnis (≥1,6×) und Gewicht verweisen alle auf dieselbe wichtigste Zeile.
• Höchstens ein Gewichts-/Größenakzent pro Zeile, und nichts loopt oder pulsiert.
• Die Spezifikation nennt die Frame-Nummern (Einblendung beginnt, Haltestart, Halteende, Ausblendung endet), sodass remotion-compose Sequences schreiben kann, ohne zu raten.

Nicht tun

• Liefern Sie keinen Text aus, der kürzer als das Lese-Budget hält – der häufigste Fehler bei kinetischer Typografie. Wenn nicht genug Platz zum Halten ist, kürzen Sie Wörter, nicht die Haltezeit.
• **Animieren Sie nicht font-size, width, letter-spacing oder etwas, das Glyphen neu anordnet; das Layout-Thrashing ist unlesbar. Skalieren Sie stattdessen über transform.
• **Animieren Sie nicht mehr als eine oder zwei Eigenschaften pro Zeile, und animieren Sie niemals eine dichte Caption wortweise – das Lesen wird ruckelig.
• **Loopen, pulsen, wiederholen Sie nicht mehrmals oder halten Sie Text nicht in kontinuierlicher Bewegung; Bewegung, die nicht aufhört, kann nicht gelesen werden.
• **Animieren Sie nicht jedes Element. Lower-Thirds, Wasserzeichen, persistente Labels und rechtliche Texte bekommen eine Einblendung und bleiben dann stehen. Animieren Sie Fließtext-/Caption-Text nicht mit aufwändigen Einblendungen – Fade ist korrekt.
• **Entscheiden Sie hier nicht über die zugrundeliegende Easing-Kurve oder den Szenenschnitt – das ist Aufgabe von motion-design-principles. Schreiben Sie hier nicht die Remotion-Komponente – übergeben Sie die gefüllte Spezifikation an remotion-compose.
• **Erfinden Sie nicht den Text. Animieren Sie die Wörter, die der Benutzer Ihnen gab; wenn eine Zeile zu lang zum Halten ist, bitten Sie ihn, sie zu kürzen.

Verwandte Fertigkeiten – übergeben, nicht übernehmen

Diese Fertigkeit besitzt Text-Timing und das Lesen. Angrenzende Entscheidungen gehören zu Geschwistern; ziehen Sie sie heran, wiederholen Sie nicht deren Arbeit hier.

• motion-design-principles – der Schnitt, das Tempo von Nicht-Text-Bewegung und die Easing-Kurve (die Beschleunigungsform). Nehmen Sie die Kurve von dort und wenden Sie sie hier auf den Text an.
• video-storyboard – welche Szenen und Einstellungen existieren und in welcher Reihenfolge. Holen Sie sich zuerst die Szenenliste; diese Fertigkeit timt nur den Text innerhalb einer Szene.
• motion-color-and-light – die Farbe, der Kontrast und die Lesbarkeit des Texts vor seinem Hintergrund. Wenn Text aufgrund von Farbe schwer lesbar ist, ist das Aufgabe dieser Fertigkeit, nicht einer Timing-Änderung hier.
• product-demo-director – die gesamte Erzählung und Schlaglist eines Produktdemos. Es entscheidet, was die Titel sagen und wann sie erscheinen; diese Fertigkeit timt wie jede animiert.
• sound-and-music-sync – Text-Einblendungen auf einen Beat oder Downbeat legen. Übergeben Sie die holdStart@ / Einblend-Frame-Nummern, sodass eine Einblendung an den Track gesnappt werden kann.
• social-video-formatter – Größenänderung und Zuschneiden der Caption-Spur für eine Plattform (9:16 TikTok, 1:1 Feed, Sicherheitsbereiche). Autoren Sie das Timing einmal hier; lassen Sie diese Fertigkeit es pro Plattform umfließen.

Rechner

In sich geschlossenes Node-Skript. Speichern als type_budget.js und ausführen mit node type_budget.js. Keine Abhängigkeiten. Bearbeiten Sie das lines-Array mit Ihrem tatsächlichen Text; es gibt das Frame-Budget für jede Zeile bei Ihrer fps zurück.

// Kinetic-type reading budget. Edit lines + fps, then: node type_budget.js
const fps = 30
const WORDS_PER_SEC = 3.5   // comfortable on-screen read (~200 wpm)
const FLOOR_SEC = 0.8       // minimum hold for any line, even one word
const TERM_TAX_SEC = 0.3    // per line containing a number/name/jargon term
const ENTRANCE_FRAMES = 12  // 0.4s entrance
const EXIT_FRAMES = 9       // exit <= entrance

const lines = [
  { text: 'Ship video in one prompt', hasUnfamiliarTerm: false }, // title card
  { text: 'Rendered headless in 4K',  hasUnfamiliarTerm: true  }, // caption: '4K'
  { text: 'Go',                       hasUnfamiliarTerm: false }, // hero word
]

const sec2frames = (s) => Math.ceil(s * fps)

function budget(line) {
  const words = line.text.trim().split(/\s+/).length
  const raw = words / WORDS_PER_SEC + (line.hasUnfamiliarTerm ? TERM_TAX_SEC : 0)
  const holdSec = Math.max(FLOOR_SEC, raw)
  const holdFrames = sec2frames(holdSec)
  const totalFrames = ENTRANCE_FRAMES + holdFrames + EXIT_FRAMES
  return { words, holdSec, holdFrames, totalFrames }
}

let cursor = 0
for (const line of lines) {
  const b = budget(line)
  const enterIn = cursor
  const holdStart = enterIn + ENTRANCE_FRAMES
  const holdEnd = holdStart + b.holdFrames
  const exitOut = holdEnd + EXIT_FRAMES
  console.log(`"${line.text}" (${b.words}w)`)
  console.log(`  hold:        ${b.holdSec.toFixed(2)}s = ${b.holdFrames} frames`)
  console.log(`  total slot:  ${b.totalFrames} frames (enter ${ENTRANCE_FRAMES} + hold ${b.holdFrames} + exit ${EXIT_FRAMES})`)
  console.log(`  Sequence:    enter@${enterIn}  holdStart@${holdStart}  holdEnd@${holdEnd}  exitOut@${exitOut}`)
  cursor = exitOut
}
console.log(`Total track length: ${cursor} frames (${(cursor / fps).toFixed(2)}s)`)

Beispiel-Ausgabe

"Ship video in one prompt" (5w)
  hold:        1.43s = 43 frames
  total slot:  64 frames (enter 12 + hold 43 + exit 9)
  Sequence:    enter@0  holdStart@12  holdEnd@55  exitOut@64
"Rendered headless in 4K" (4w)
  hold:        1.44s = 44 frames
  total slot:  65 frames (enter 12 + hold 44 + exit 9)
  Sequence:    enter@64  holdStart@76  holdEnd@120  exitOut@129
"Go" (1w)
  hold:        0.80s = 24 frames
  total slot:  45 frames (enter 12 + hold 24 + exit 9)
  Sequence:    enter@129  holdStart@141  holdEnd@165  exitOut@174
Total track length: 174 frames (5.80s)

Lesen Sie es: Die 5-Wort-Titel benötigt 43 Frames gehaltener, vollständig lesbarer Zeit – und das zusätzlich zu den 12 Frames Einblendung und 9 Frames Ausblendung, also beträgt ihr realer Slot 64 Frames. Die 4-Wort-Caption sieht kürzer aus, enthält aber eine Zahl (4K), daher drückt der Begriffs-Aufschlag die Haltezeit auf 44 Frames – etwas länger als der Titel trotz weniger Wörter. Das einzelne Wort Go erreicht die 0,8s-Untergrenze: Sogar ein Wort bekommt einen Moment. Diese enter@ / holdStart@ / holdEnd@ / exitOut@ Frame-Nummern fallen direkt in remotion-compose als <Sequence from={…} durationInFrames={…}>-Grenzen – keine Vermutung mehr, wie lange Text stehen bleiben soll.

Vorlage: motion-type-spec

Füllen Sie dies und übergeben Sie es an remotion-compose. Ein Block pro Textzeile.

MOTION TYPE SPEC. [FILL: composition name].  fps: [FILL]  canvas: [FILL: 1920x1080 / 1080x1920]

LINE 1
  Copy (verbatim):     [FILL]
  Hierarchy role:      [FILL: headline / subtitle / caption / lower-third / CTA / hero-word]
  Size:                [FILL]px        Weight: [FILL: 400 / 700 / variable axis]
  Reading budget:      [FILL]w -> hold [FILL]s = [FILL] frames   (from type_budget.js)
  Entrance:            [FILL: fade / rise+fade / word-by-word / pop / wipe]  over [FILL: 8-15] frames
  Exit:                [FILL: fade / cut-on-edit]  over [FILL: <=entrance] frames
  Property animated:   [FILL: opacity / opacity+translateY / scale]   (NO font-size/width)
  Accent (max one):    [FILL: none / weight 400->700 on word "X" / scale-up on "X"]
  Frame numbers:       enter@[FILL]

…

[truncated for translation]