MooT020/kinetische-typografie

Kinetische Typografie

Erstelle Videos, in denen die Wörter selbst das Bild sind. Ein Satz landet, füllt den Rahmen, wird weggeschleudert und durch den nächsten ersetzt – im Rhythmus. Es sollte kühn, schnell und musikalisch wirken, wie ein Poster, das sich bewegt.

Optionen

Option	Standard	Hinweise
Format	Hochformat 1080×1920	oder Querformat 1920×1080, Quadrat 1080×1080
Dauer	10–20 s	an die Sprachaufnahme oder den Songabschnitt anpassen
Ton	kraftvoll	calm (Folien und Überblendungen von 0,4 s, weniger Wechsel), punchy (Standard), chaotic (Großbuchstaben, Schläge, Erschütterungen, ein Wechsel bei jeder zweiten Phrase)
Rhythmus	festes Tempo	oder Sprach-Zeitmarken oder Musikbeats

Brief (vor der Planung beantworten)

1. Welcher Satz soll dem Betrachter im Gedächtnis bleiben?
2. Teile das Skript in Phrasen von 1–4 Wörtern auf; markiere ein Heldenwort pro Phrase.
3. Wo liegt der Energiehöhepunkt (die Phrase, die den Farbwechsel bekommt)?
4. Was ist der Abschluss-Lockup (Titel, Call-to-Action, Handle)?

Reads-Blatt (mit der Beat-Liste schreiben)

Schreibe für jeden Beat das Eine, das der Betrachter verstehen muss („der Roboter kann nicht fliegen“, „der Cache wurde nicht getroffen“) und wie lange es lesbar bleibt. Ein Read nach dem anderen. Textblöcke: Ein Label bleibt mindestens 0,8 s, ein Satz etwa 0,3 s pro Wort, sobald er vollständig auf dem Bildschirm ist. Wenn der Text nicht in die Zeit passt, schneide Wörter, anstatt zu beschleunigen.

Bewegungsdisziplin

• Bewegung ist ursächlich: Jede Bewegung hat einen Grund auf dem Bildschirm (ein Klick, ein Fall, ein eintreffendes Paket), und die nächste Bewegung folgt daraus.
• Wähle eine Hauptbewegungsrichtung für das gesamte Video und behalte sie bei. Verwende die anderen Richtungen für die Bedeutung: nach oben für Erfolg oder Schlussfolgerung, ein Herauszoomen für „hier ist das Gesamtbild“.
• Der Ausgang einer Szene bereitet den nächsten Eintritt vor: gleiche Achse, gleiche Richtung, ähnliche Geschwindigkeit. Trage ein Objekt über den Wechsel hinweg, anstatt zu überblenden.
• Keine leeren Füllbewegungen (Schweben, Atmen, Wackeln) bei Diagrammen, Grafiken oder Text. Wenn sich nichts bewegen soll, halte still; eine bewusste Kamerafahrt reicht.
• Easing: sanftes Ease-out für Eintritte (power2.out bis power4.out), schnelleres Ease-in für Austritte (etwa 75 % der Eintrittszeit). Eintritte maximal 0,8 s. Gesamt-Staffelung für eine Gruppe maximal 0,5 s. Überschwingen (back.out) nur für kleine Pops; kein elastisches oder springendes Easing.
• Es bewegt sich immer nur eine Sache auf einmal, wenn es darauf ankommt; das Auge kann nur einer folgen.
• Füge 0,3–0,75 s Stille kurz vor dem Höhepunkt ein.

Stilregeln (immer)

Diese machen diesen Stil aus; behalte sie bei, unabhängig von Farben oder Wörtern.

1. Typografie füllt 50–80 % der Rahmenbreite, weil kleiner Text wie Untertitel wirkt, nicht wie das visuelle Element.
2. Eine Idee pro Bildschirm: 1–4 Wörter, höchstens 3 Zeilen. Alles andere ist verschwunden.
3. Jedes Wort kommt mit einer Bewegung an (Schlag, Folie, Dehnung, Masken-Enthüllung, Flip). Nichts blendet einfach ein.
4. Änderungen landen im Rhythmus: ein neues Wort oder eine Bewegung alle 0,25–0,7 s, und Schlüsselwörter auf dem Beat oder der betonten Silbe.
5. Der Kontrast ist extrem: fast schwarz auf gebrochenem Weiß oder umgekehrt, plus eine Akzentfarbe nur für das Schlüsselwort.
6. Jede Phrase erhält ein Heldenwort: am größten, in Akzentfarbe oder anders bewegt als der Rest.

Standardwerte (frei änderbar)

Schriftarten, Farben, Wörter, Timing und Hintergrund. Wenn der Benutzer Markenschriften oder -farben angibt, haben diese Vorrang. Reihenfolge: Marke oder Vorgabe des Benutzers, dann die explizite Anfrage, dann diese Standardwerte.

• Hintergrund #111111, Text #f4f1ea, Akzent #ff4d2e. Wechsele pro Phrase zwischen hell-auf-dunkel und dunkel-auf-hell für Energie.
• Anzeigeschrift: eine schwere, schmale Grundschrift (Anton, Bebas Neue oder Archivo Black), Heldenwörter in Großbuchstaben. Unterstützungsschrift: eine schwere serifenlose Schrift (Inter 800) für kleine Verbindungswörter.
• Größe: Heldenwörter 180–320 px im 9:16-Format; kleine Wörter 60–90 px.

Einrichtung (einmalig)

node -v                      # benötigt 22+
ffmpeg -version
npx hyperframes init my-video --non-interactive --resolution portrait && cd my-video   # landscape für 16:9

In einem vorhandenen leeren Ordner verwende npx hyperframes init . --non-interactive --resolution portrait, ersetze dann die generierte index.html mit der Vorlage unten.

Vor dem Bauen entscheiden

Gib diese dem Benutzer in einer Zeile zurück, bevor du Code schreibst.

1. Seitenverhältnis: 9:16 (1080×1920) oder 16:9 (1920×1080). Standard ist 9:16.
2. Wörter und Timing: Teile das Skript in Phrasen von 1–4 Wörtern auf. Mit einer Sprachaufnahme nimm die Zeiten aus den Wort-Zeitstempeln (npx hyperframes transcribe voice.wav). Ohne eine gib jeder Phrase 0,6–1,4 s und gib Heldenwörtern mehr Zeit.
3. Rhythmusquelle: Stimme (lande auf betonten Silben), Musik (lande auf Beats; npx hyperframes beats music.mp3), oder ein festes Tempo (z. B. 120 BPM = ein Beat alle 0,5 s).
4. Heldenwort pro Phrase und welche Bewegung es bekommt.

Bedarf	HyperFrames + GSAP (Standard)	Remotion
Wort- und Buchstabenbewegungen, Masken, Dehnungen	ja	ja
Timing aus Sprach- oder Beatdaten	ja (Label)	ja (Frames)
Läuft nur mit Node und FFmpeg	ja	ja
Lizenz	kostenlos	kostenlos bis 3 Personen, darüber kostenpflichtig

Bewegungsvokabular

Bewegung	Wie (GSAP)	Verwende für
Slam	from {scale: 2.6, opacity: 0}, expo.out, 0.22 s, plus ein 6 px Bildschirmzittern für 0.1 s	Heldenwörter
Slide Stack	Zeilen from {yPercent: 110} innerhalb von overflow:hidden Masken, Staffelung 0.06 s, power4.out 0.35 s	Listen, zweizeilige Phrasen
Stretch	scaleY: 1.6 → 1, transformOrigin: bottom, back.out(3) 0.3 s	Betonung, Verben
Buchstabenkaskade	Buchstaben from {y: -120, rotation: -20, opacity: 0}, Staffelung 0.025 s, back.out(2)	Namen, Titel
Flip-Austausch	altes Wort rotationX: 90 raus (0.12 s), neues Wort rotationX: -90 → 0 rein (0.18 s)	X wird zu Y
Teilen	Worthälften gleiten auseinander x: ±140, um ein kleineres Wort dazwischen zu enthüllen	Kontraste
Ausgang	yPercent: -110 oder scale: 0.7, opacity: 0, 0.15 s, power2.in	jede Phrase, die geht

Ausgänge sind schnell (0.12–0.18 s) und Eingänge sind schneller als du denkst (0.18–0.35 s). Halte jede Phrase mindestens 0.35 s, nachdem sie gelandet ist, damit sie gelesen werden kann.

Gestalte es auffällig

• Fülle den Rahmen. Passe die Wortgröße an die Rahmenbreite an, nicht an eine Schriftgröße. Schmale Schriften bei 250+ px sind der Look.
• Farbwechsel: Der Hintergrund wechselt zwischen dunkel und hell (oder zur Akzentfarbe) bei 2–3 Schlüsselphrasen, als harter Schnitt auf den Beat.
• Textur und Tiefe: eine subtile Körnung-Überlagerung, ein weicher Schatten oder versetzter Duplikat hinter Heldenwörtern (Akzentfarbe, Versatz 10–14 px), und gelegentlich ein riesiges verblasstes Wort im Hintergrund.
• Kamera-Energie: eine langsame 2–4 % Skalendrift auf der gesamten Bühne, ein Punch-in (Skala 1,06 für 0,1 s) bei Helden-Treffern und ein 6–10 px Ruckeln bei Schlägen.
• Formen mit Wörtern: Unterstreichungsbalken, die sich einzeichnen, Kreise, die hinter einem Wort erscheinen, Pfeile. Akzentfarbe, flach.
• Ende mit einem Lockup: der Titel oder Call-to-Action, vollständig komponiert, 1–1,5 s gehalten, passend zum Startrahmen, damit es sich wiederholt.
• Qualitätskontrolle: Wenn ein Schnappschuss kleine zentrierte Texte auf einem einfachen Hintergrund zeigt, ist es nicht fertig.

Bauen: Vorlage

<!doctype html><html><head><meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@800&display=swap">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html,body{margin:0;width:1080px;height:1920px;overflow:hidden;background:#111}
#root{width:100%;height:100%;position:relative;overflow:hidden}
#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.phrase{position:absolute;left:60px;right:120px;top:270px;bottom:670px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}
.line{overflow:hidden;line-height:.92;padding:0 8px}
.w{display:inline-block;font-family:Anton,sans-serif;text-transform:uppercase;color:#f4f1ea;white-space:nowrap}
.hero{color:#ff4d2e}
.flip .w{color:#fff}.flip .hero{color:#111}
.small{font-family:Inter,system-ui,sans-serif;font-weight:800;text-transform:none}
#bg{position:absolute;inset:0;background:#111}
</style></head>
<body><div id="root" data-composition-id="main" data-start="0" data-duration="8" data-width="1080" data-height="1920">
<div id="bg"></div><div id="stage"></div></div>
<script>
// [zeit, zeilen, bewegungsName, heldWortIndex, hintergrundWechsel?]  -- bearbeite diese Liste; Zeiten in Sekunden
const PHRASES = [
  [0.2, ["WÖRTER"], "slam", 0],
  [1.0, ["können", "SICH", "BEWEGEN"], "stack", 2],
  [2.0, ["WIE", "MUSIK"], "stretch", 1, true],
  [3.2, ["eine", "Idee"], "stack", 1],
  [4.2, ["AUF", "EINMAL"], "slam", 1],
  [5.4, ["KINETISCHE", "TYPE"], "cascade", 1],
];
const ENDE = 8, W = 1080 - 180;
// Text erst messen, wenn die Webschriftarten geladen sind, dann Timeline erstellen und registrieren
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const stage = document.getElementById("stage");
PHRASES.forEach(([t, lines, move, hero, flip], i) => {
  const p = document.createElement("div"); p.className = "phrase" + (flip ? " flip" : ""); stage.appendChild(p);
  const words = lines.map((txt, k) => {
    const line = document.createElement("div"); line.className = "line";
    const w = document.createElement("span"); w.className = "w" + (k === hero ? " hero" : "") + (txt === txt.toLowerCase() && k !== hero ? " small" : "");
    w.textContent = txt; line.appendChild(w); p.appendChild(line);
    w.style.fontSize = "100px"; const fit = Math.min(420, (100 * W) / w.getBoundingClientRect().width); // Breite füllen
    w.style.fontSize = (w.classList.contains("small") ? Math.min(fit, 110) : fit) + "px";
    return w;
  });
  gsap.set(p, { autoAlpha: 0 });
  tl.set(p, { autoAlpha: 1 }, t);
  if (move === "slam") tl.from(words, { scale: 2.6, opacity: 0, duration: 0.22, ease: "expo.out", stagger: 0.08 }, t)
                         .fromTo("#stage", { x: -10 }, { x: 10, duration: 0.04, yoyo: true, repeat: 3, ease: "none" }, t + 0.18).set("#stage", { x: 0 }, t + 0.34);
  if (move === "stack") tl.from(words, { yPercent: 110, duration: 0.35, ease: "power4.out", stagger: 0.07 }, t);
  if (move === "stretch") tl.from(words, { scaleY: 1.7, opacity: 0, transformOrigin: "50% 100%", duration: 0.3, ease: "back.out(3)", stagger: 0.08 }, t);
  if (move === "cascade") words.forEach((w, k) => {
    const letters = Array.from(w.textContent); w.textContent = "";
    letters.forEach((c) => { const l = document.createElement("span"); l.style.display = "inline-block"; l.textContent = c; w.appendChild(l); });
    tl.from(w.children, { y: -140, rotation: -20, opacity: 0, duration: 0.4, ease: "back.out(2)", stagger: 0.03 }, t + k * 0.15); });
  const next = PHRASES[i + 1] ? PHRASES[i + 1][0] : null;
  if (flip) tl.set("#bg", { background: "#ff4d2e" }, t).set("#bg", { background: "#111" }, next || ENDE);   // Farbwechsel bei einer Schlüsselphrase
  if (next) tl.to(words, { yPercent: -110, opacity: 0, duration: 0.15, ease: "power2.in", stagger: 0.03 }, next - 0.17)
               .set(p, { autoAlpha: 0 }, next);
});
tl.fromTo("#root", { scale: 1 }, { scale: 1.04, duration: ENDE, ease: "none" }, 0);         // langsame Drift
tl.set({}, {}, ENDE);
window.__timelines["main"] = tl;
});
</script></body></html>

Bearbeite PHRASES, um die Wörter und Zeiten zu ändern. Füge Bewegungen hinzu, indem du einen if (move === ...)-Zweig aus dem Bewegungsvokabular hinzufügst. Bei einer Sprachaufnahme platziere das <audio>-Element im Root und nimm die Phrasenzeiten aus dem Transkript.

Parameter zum Freigeben für den Benutzer

aspect · phrases (Zeit, Zeilen, Bewegung, Held) · fontDisplay · fontSupport · colors (bg, text, accent) · tempo or audio · flipPhrases (wo der Hintergrund wechselt) · endLockup.

Vermeiden

• Einblendungen und langsame Drifts als Hauptbewegung. Das wirkt wie eine Diashow.
• Mehr als 4 Wörter oder 3 Zeilen gleichzeitig auf dem Bildschirm.
• Mehrere Akzentfarben. Eine Akzentfarbe, nur für Heldenwörter verwendet.
• Dünne oder helle Schriftstärken oder Schreibschriften für Heldenwörter.
• Text in den unteren 670 px oder oberen 270 px eines 9:16-Rahmens (Plattform-UI bedeckt sie).
• Zufällige oder rendervariierende Änderungen. Jeder Wert muss aus der Timeline stammen.

Fehlermodi

Sieht aus wie	Ursache	Behebung
Eine Diashow	Einblendungen, lange Halte, immer die gleiche Bewegung	Variiere Bewegungen aus dem Vokabular; Eingänge unter 0,35 s; Ausgänge 0,15 s
Untertitel, nicht Design	Wörter zu klein, zentriert in leerem Raum	Passe Wortgröße an Rahmenbreite an; schmale Schrift; 250+ px
Unordentlich, unlesbar	zu viele Wörter oder Bewegungen auf einmal	Eine Phrase auf dem Bildschirm; ein Heldenwort; 0,35 s nach Landung halten
Aus dem Takt	Phrasenzeiten geschätzt	Verwende Transkript- oder Beat-Zeiten; lande Hits 2–3 Frames früher
Wörter durch Masken abgeschnitten	Zeilenhöhe zu eng für die Schrift	line-height 0.92–1.0 mit Padding auf .line; überprüfe Schnappschüsse
Falsche Schriftart im Rendering	Schriftart nicht geladen	Google Fonts <link> im Kopf; überprüfe Schnappschuss auf schmale Schrift

Vor dem finalen Rendern validieren

npx hyperframes check
npx hyperframes snapshot --at <eine zeit pro phrase 0.3 s nach landung, plus eine mittendrin>
npx hyperframes render -o renders/<name>.mp4
ffprobe -v error -show_entries stream=width,height,r_frame_rate:format=duration -of csv=p=0 renders/<name>.mp4

Sieh dir jeden Schnappschuss und snapshots/contact-sheet.jpg an und bestätige:

• jede Phrase füllt 50–80 % der Breite und ist in Telefongröße lesbar
• ein Heldenwort pro Phrase, in der Akzentfarbe oder mit einer anderen Bewegung
• keine zwei Phrasen überlappen in einem Frame
• der gesamte Text innerhalb des sicheren Bereichs für das Seitenverhältnis
• der Abschluss-Lockup wird mindestens 1 s gehalten und passt zum Start
• Größe und Dauer entsprechen der Anfrage

Selbstkritik vor dem finalen Rendern

Bewerte das Schnappschussblatt 1–10 in: Haken (erste Sekunde), Lesbarkeit bei Telefonbreite, Bewegungsqualität, Komposition, Genauigkeit und dem „Stumm-Test“ (kann ein Betrachter es in einem Satz ohne Ton zusammenfassen?). Korrigiere nur, was 7 oder weniger erreicht, mache neue Schnappschüsse und wiederhole, bis alles 8 oder höher ist. Wenn möglich, lass einen separaten schreibgeschützten Durchlauf die Bewertung machen, damit du nicht deine eigene Arbeit benotest.

Nicht	Stattdessen
Überblenden zwischen zwei überladenen Layouts	verlasse den alten Inhalt, dann bringe den neuen herein, oder trage ein Objekt hinüber
Mehrere Dinge gleichzeitig bewegen	Staffeln, ein Fokus

…

[gekürzt für Übersetzung]