dricosnyman/kinetic-type-skills

Kinetische Typografie

Wenn Wörter auf dem Bildschirm in einem Video erscheinen, sind die ersten Bewegungen, die einem in den Sinn kommen, Einblenden, Schieben und Aufpoppen. Sie sind in Ordnung, aber sie sind die Standardeinstellung, keine Wahl. Diese Fähigkeit legt die gesamte Bandbreite vor dich hin, etwa 80 Techniken in 18 Familien, sodass die Wahl eine echte ist.

Sie erinnert; sie dirigiert nicht. Sie fügt dem Auftrag, den du erledigen sollst, keine Schritte, Seiten oder Genehmigungen hinzu.

Kreative Freiheit zuerst

Alles hier ist eine Vorgabe oder ein Vorschlag, niemals eine Regel. Wenn ein Moment etwas anderes verlangt, brich die Vorgabe und erkläre in einem Satz, warum (in deinem Plan, einem Codekommentar oder deiner Antwort). Auch Techniken, die nicht im Menü stehen, sind erlaubt. Das Menü dient dazu, deine Möglichkeiten zu erweitern, nicht, dich einzuschränken.

Wähle pro Moment, nach Bedeutung

Lies die Wörter, bevor du entscheidest, wie sie sich bewegen. Frage, was die Zeile tut, und wähle dann die Technik, deren Bedeutung dazu passt:

Die Wörter ...	Greife zu
teilen, brechen oder zerteilen etwas	slice, shatter
lösen eine Antwort oder enthüllen ein Geheimnis	scramble
landen mit Wucht oder zählen herunter	stomp
definieren oder schreiben einen Begriff zum ersten Mal	stroke-write-on, marker-highlight
zeigen eine sich ändernde Zahl	odometer
beschreiben etwas, das verschwindet	disintegrate, smoke-dissolve
folgen einem Graphen oder einer Gleichung	text-on-a-path, sine-wave-type

Die Spalte „Greife zu, wenn“ im Menü ist genau für diese Frage geschrieben.

Wie viel Abwechslung

• Lehrmodus (Standard für Lektionen und Erklärvideos, und wenn die Anfrage nichts anderes sagt): ein Hausstil für jede normale Zeile, ausgewählt aus den Techniken, die mit calm gekennzeichnet sind, plus ein paar Akzente, die für die Momente aufgespart werden, die zählen: ein Schlüsselbegriff, die Antwort, eine Warnung. Techniken, die mit teach gekennzeichnet sind, eignen sich gut als Akzente. Wenige Akzente wirken stärker als viele.
• Freie Hand, wenn die Person danach fragt („sei kreativ“, „leg los“, „überrasch mich“): alles im Menü ist erlaubt, immer noch nach Bedeutung ausgewählt. Freiheit bedeutet nicht, viele zu verwenden. Eine mutige, gut gewählte Technik kann besser sein als zehn.
• Wenn das Video offensichtlich kein Lehrvideo ist (Musikvideo, Trailer) und kein Modus genannt wird, wähle, was passt, und sag, welchen Weg du gewählt hast.

Letzte Handgriffe und Prüfungen

• Bewegungsunschärfe bei schnellen Bewegungen. Computeranimationen sind vollkommen scharf, daher kann schnelle Schrift ruckelig wirken. Etwas Unschärfe in Bewegungsrichtung lässt es wie gefilmt aussehen. Remotion hat Bewegungsunschärfe-Werkzeuge (@remotion/motion-blur); installiere es in genau der Remotion-Version des Projekts, genauso wie die Pakete unter „Erstellung in Remotion“ (npm i -E @remotion/motion-blur@<Version>). Verwende es als letzten Schliff bei schnellen Bewegungen; bei langsamen Drifts wirkt es nur unscharf.
• Verbundene Schriften brechen Buchstabenebenen-Effekte. In Arabisch, Persisch und anderen Schriften, in denen die Form eines Buchstabens von seinen Nachbarn abhängt, zerbricht das Aufteilen eines Wortes in Buchstaben (Cascade, Scramble, Anagram, Random-Order Pop-on, 3D Flip-in) die Buchstabenformen. Animiere stattdessen ganze Wörter oder Zeilen.
• Überprüfe, ob die Schriftart deine Akzente hat. Für Afrikaans und andere lateinische Texte mit Akzenten stelle sicher, dass die Schriftart die benötigten Buchstaben (ê, ë, ô, ï ...) enthält, bevor du sie animierst.

Das Menü verwenden

Öffne references/menu.md (im Ordner dieser Fähigkeit), bevor du wählst. Es listet jede Technik auf, gruppiert in Familien, mit:

• ihrem Namen und ihrer ID (dem Schlüssel in KT_COMPONENTS)
• einem einzeiligen Look und einem Hinweis „Greife zu, wenn“
• Tags: calm (ein guter Hausstil), teach (ein guter Lehrakzent), exit (endet mit verschwundenen Wörtern, geeignet für das Ende einer Zeile oder Szene), ✚ neu
• wie es erstellt ist: component (fertig) oder example (eine kommentierte Szene zum Anpassen, Pfad angegeben)

Überfliege die Familienüberschriften, dann lies die Zeilen in den Familien, die zum Moment passen.

references/catalogue.md ist Hintergrundlektüre: die Forschung hinter dem Menü, mit Quellen, Geschichte und wie schwer jede Technik zu erstellen ist. Öffne es nur, wenn du in die Tiefe gehen willst.

Erstellung in Remotion

1. Kopiere den Ordner remotion/ aus dem Ordner dieser Fähigkeit in das Projekt als src/kinetic-type/.
2. Stelle sicher, dass das Projekt remotion, @remotion/google-fonts und @remotion/layout-utils enthält, alle in genau der Remotion-Version des Projekts (Remotion erwartet alle Pakete in einer Version). Zum Beispiel für 4.0.536: npm i -E @remotion/[email protected] (-E speichert die genaue Version statt ^4.0.536).
3. Suche eine Komponente über ihre Menü-ID und rendere sie innerhalb eines <Sequence>:

import { Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";

const House = KT_COMPONENTS["tracking-in"];
const Accent = KT_COMPONENTS["slice"];

export const Intro: React.FC = () => (
  <>
    <Sequence durationInFrames={75}>
      <House text="Every whole can be shared" />
    </Sequence>
    <Sequence from={75} durationInFrames={60}>
      <Accent text="Split it in half" keyWord="half" />
    </Sequence>
  </>
);

• Props (KTProps): text (erforderlich), keyWord (erhält die Akzentbehandlung), fontFamily (Standard Poppins), color, accent, fontSize (Standard passt zur Rahmenbreite).
• Jede Komponente beginnt bei Frame 0 ihres <Sequence> und beruhigt sich innerhalb von etwa einer Sekunde, sodass die Länge des Sequence bestimmt, wie lange die Wörter bleiben. Zwei Arten verhalten sich anders: exit-Techniken enden mit verschwundenen Wörtern am letzten Frame des Sequence, und die tonangebenden (Familie 15) verteilen die Wörter über das gesamte Sequence, dessen Länge ihr Tempo bestimmt.
• Für example-Techniken öffne die Datei, die im Menü genannt ist, und passe die Szene an.
• Andere Videotools: Das Menü und die Art der Auswahl gelten weiterhin; die fertigen Komponenten sind nur für Remotion.

Sieh sie dir an oder dirigiere ein ganzes Video

• Galerie: Jede Technik mit einer Live-Vorschau unter https://dricosnyman.github.io/kinetic-type-skills/
• Ein ganzes Video oder zeilenweise Regie: Wenn die Aufgabe ein ganzes kinetisches Typografie-Video aus einem Skript ist oder die Person die Typografie jeder Zeile planen, überprüfen und genehmigen möchte, bevor etwas erstellt wird, verwende die Fähigkeit kinetic-type-director. Sie führt den gesamten Prozess aus und baut auf dieser Fähigkeit auf: Sie entwirft ein Typografie-Skript, zeigt es auf einer Seite, die die Person bearbeiten kann, und erstellt dann die genehmigte Version mit diesen Komponenten.