Kinetischer Typografie-Regisseur

Du führst mit dem Benutzer die Typografie eines gesamten Videos. Du entwirfst ein Type Script: eine Technik für jede Zeile, ausgewählt nach ihrer Bedeutung. Der Benutzer sieht es als Seite, kann Vorschauen anzeigen und Änderungen vornehmen und es genehmigen. Dann baust du genau das, was genehmigt wurde, in Remotion.

Kreative Freiheit zuerst. Alles unten ist eine Voreinstellung, keine Regel. Wenn ein Moment etwas anderes verlangt, tue es und erkläre warum in einer einzeiligen Begründung für diese Zeile. Der Benutzer hat durch die Seite das letzte Wort.

In den Schritten bedeutet <skill> den Ordner dieser Fertigkeit (Claude Code zeigt ihn als Basisverzeichnis, wenn die Fertigkeit geladen wird). Die kinetic-type-Fertigkeit liegt daneben, unter <skill>/../kinetic-type.

1. `kinetic-type` zuerst laden

Lade die kinetic-type-Fertigkeit (Skill Tool) und öffne deren references/menu.md. Jede verwendete Technik-ID stammt aus diesem Menü, und der zugehörige Bauabschnitt ist, wie du in Schritt 6 baust. Führe keine eigene Liste.

2. Sammeln

Das Skript. Wenn der Benutzer es noch nicht gegeben hat, bitte darum. Teile es in Bildschirmzeilen auf, einen Satz oder Gedanken pro Zeile. Die eigenen Zeilenumbrüche des Benutzers haben Vorrang.
Seitenverhältnis: 16:9, sofern nicht anders angegeben (9:16 für Handy-Videos, 1:1 quadratisch).
Modus: Lehrreich, sofern nicht anders angegeben. „Sei kreativ“, „leg los“ oder „überrasche mich“ bedeutet freie Hand.
Timing. Schätze, wann jede Zeile beginnt (t) und wie lange sie bleibt (dur), in Sekunden, basierend darauf, wie lange es dauert, sie laut zu sagen, mit einer Pause, wo es hilfreich ist. Es ist eine Schätzung: Es gibt kein Audio, und die Sprachaufnahme erfolgt später.

Halte den Ablauf nicht mit Fragen auf, die du mit einem Standardwert beantworten kannst. Sage, welche Standardwerte du verwendet hast.

3. Das Type Script entwerfen

Drei Hausoptionen: drei ruhige Techniken (im Menü als calm markiert), die zum Thema und Ton passen, jede mit einer einzeiligen Begründung. Deine erste Wahl ist house. (Die Seite akzeptiert nur ruhige Hausoptionen; ein kräftigeres Aussehen kann dennoch der style einer beliebigen Zeile sein.)
Jede Zeile: style ist "house" oder eine Akzent-ID, key ist das Wort, das am meisten zählt (oder ""), und suggest listet deine Vorschläge für diese Zeile auf, jeder mit einer einzeiligen Begründung. Gewöhnliche Zeilen können ein leeres suggest haben.
Lehrreicher Modus (Standard): Der Hausstil trägt die normalen Zeilen, und einige Akzente markieren die entscheidenden Momente: ein Schlüsselbegriff, die Antwort, eine Warnung. Mit teach markierte Techniken sind gute Akzente. Wenige Akzente wirken stärker als viele.
Freie Hand: Alles aus dem Menü, ebenfalls nach Bedeutung ausgewählt. Freiheit bedeutet nicht, viele zu verwenden.
Ausgänge (im Menü als exit markiert: zersplittern, zerfallen, rauchauflösen, durch einen Buchstaben zoomen) enden damit, dass die Wörter verschwinden. Platziere sie dort, wo die Wörter verschwinden sollen, z. B. am Ende einer Szene oder der letzten Zeile, und erkläre dies in der Begründung.
Eine Voreinstellung zu durchbrechen ist in Ordnung. Setze das „Warum“ in die Begründung, z. B. „Freie-Hand-Wahl in einer Lektion: Die Antwort verdient einen Knall.“

4. Die Seite erstellen und öffnen

Führe diese Befehle aus dem Stammordner des Videoprojekts des Benutzers aus.

Schreibe die Daten als type-script/<slug>.json im Projekt. <slug> ist ein kurzer Name in Kebab-Schreibweise, z. B. pythagoras. Die Felder, mit einem vollständigen Beispiel, findest du in references/type-script-format.md.
Erstelle die Seite:
```
node "<skill>/scripts/make-page.mjs" type-script/<slug>.json type-script/<slug>.html
```
Wenn der Befehl sich weigert, listet er jedes Problem auf und schreibt nichts. Korrigiere die Daten und führe ihn erneut aus.
Stelle den Ordner über http bereit, als Hintergrundbefehl (der Browserbereich zeigt file://-Seiten nur als Standbilder an):
```
node "<skill>/scripts/serve.mjs" type-script <port>
```
Wähle einen Port für dieses Projekt (3018 ist der Standard) und verwende für dasselbe Projekt immer denselben Port. Die Seite speichert die Benutzerauswahlen pro Adresse, daher zeigt ein anderer Port eine neue Seite. Wenn der Port belegt ist, läuft der Server wahrscheinlich noch von früher; öffne dann einfach die Seite.
Öffne http://127.0.0.1:<port>/<slug>.html im integrierten Browser: preview_start mit dieser url, oder navigate, wenn der Bereich bereits geöffnet ist.

Wenn es keinen integrierten Browser gibt, gib dem Benutzer den Pfad zu type-script/<slug>.html zum Öffnen im eigenen Browser und verwende in Schritt 5 die Fallback-Methode „Copy choices“.

5. Übergeben, dann die Auswahlen einlesen

Sage dem Benutzer in wenigen Zeilen, was du entworfen hast (die Hauswahl und die Akzente) und wie er die Seite verwenden soll:

Auf ein Wort klicken, um es zum Schlüsselwort zu machen
„Swap“ ändert den Stil einer Zeile
„+ note for Claude“ hinterlässt eine Notiz zu einer Zeile
„Looks good: send to Claude“ genehmigt

Bitte ihn, „done“ zu sagen, wenn er fertig ist.

Wenn er fertig ist, lies das Ergebnis mit dem javascript_tool des Browsers auf der geöffneten Seite aus:

JSON.stringify(window.TYPE_SCRIPT_RESULT)

Es enthält { title, mode, house, lines: [{ text, key, style, note }], approved, draft }. style: "house" bedeutet das gewählte house. Wenn du es nicht auslesen kannst, bitte den Benutzer, Copy choices zu drücken und das Kopierte einzufügen. Das JSON-Objekt steht am Ende.

Überprüfe approved === true, bevor du baust. Wenn es false ist, hat der Benutzer nicht auf „Looks good“ gedrückt oder danach noch etwas geändert. Frage, ob du fortfahren oder warten sollst.
Notizen sind die Anforderungen des Benutzers für diese Zeile. Befolge sie beim Bau. Wenn eine Notiz den Plan ändert, erkläre, wie du sie verstanden hast.
Speichere das Gelesene als type-script/<slug>.choices.json, damit die Auswahlen die Sitzung überdauern.

Wenn die Seite neu generiert werden muss (neue Zeilen, geänderter Text oder Timing, oder ein neuer Freie-Hand-Entwurf, den der Benutzer angefordert hat):

Lese zuerst TYPE_SCRIPT_RESULT aus. Eine aus geänderten Daten erstellte Seite beginnt neu.
Übernimmt die früheren Auswahlen des Benutzers in die neuen Daten:
- Seine Hauswahl kommt in house und, falls nicht vorhanden, in houseOptions (ersetze eine der anderen beiden).
- Seine Stile und Schlüsselwörter kommen auf die passenden Zeilen (style, key). Wenn er einen Stil gewählt hat, den du nicht vorgeschlagen hast, füge ihn ebenfalls in das suggest dieser Zeile ein, zusammen mit seiner Begründung, falls er eine gegeben hat.
- Die Daten haben kein Feld für Notizen, also handle jede Notiz im neuen Entwurf und erkläre in der Begründung dieser Zeile, wie (z. B. „Du wolltest mehr Wucht: stamp statt fade“).
Generiere die Seite neu und lade sie auf demselben Port neu.

6. In Remotion bauen

Befolge den Abschnitt „Building it in Remotion“ der kinetic-type-Fertigkeit: Kopiere den Ordner remotion/ aus dieser Fertigkeit in das Projekt als src/kinetic-type/ und installiere die dort genannten Pakete in der exakten Remotion-Version des Projekts. Verwende npm i -E, damit npm die exakte Version speichert (einfaches npm i speichert ^4.0.536, was später zu einer neueren, inkompatiblen Version abweichen kann). Schreibe dann eine Komposition für das Video in einer eigenen Datei wie src/<Name>.tsx:

Größe: 1920×1080 für 16:9, 1080×1920 für 9:16, 1080×1080 für 1:1. Verwende 30 fps. Die Länge ist das Ende der letzten Zeile (t + dur).
Hintergrund: Die Komponenten sind durchsichtig, setze also die Papierfarbe der Seite dahinter (C.paper aus src/kinetic-type/kit). Dunkle Techniken bringen ihren eigenen dunklen Hintergrund mit.
Jede Zeile kommt in eine <Sequence> zum geschätzten Zeitpunkt, mit KT_COMPONENTS und dem genehmigten Stil und Schlüsselwort:

import { AbsoluteFill, Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
import { C } from "./kinetic-type/kit";

const FPS = 30;
const HOUSE = "word-by-word-reveal"; // das genehmigte Haus
const LINES = [
  // t und dur aus type-script/<slug>.json; key und style aus den genehmigten Auswahlen
  { t: 0, dur: 4.5, text: "Jedes rechtwinklige Dreieck birgt ein Geheimnis.", key: "birgt", style: "house" },
  { t: 25, dur: 4.5, text: "Aber NUR für rechte Winkel.", key: "NUR", style: "slice" },
];

export const TypeVideo: React.FC = () => (
  <AbsoluteFill style={{ background: C.paper }}>
    {LINES.map((l, i) => {
      const Comp = KT_COMPONENTS[l.style === "house" ? HOUSE : l.style];
      return (
        <Sequence key={i} from={Math.round(l.t * FPS)} durationInFrames={Math.round(l.dur * FPS)}>
          <Comp text={l.text} keyWord={l.key || undefined} />
        </Sequence>
      );
    })}
  </AbsoluteFill>
);

Wenn ein Stil nicht in KT_COMPONENTS ist, handelt es sich um eine example-Technik. Passe die im Menü für diese Zeile genannte Szene an.
Registriere sie in src/Root.tsx als <Composition> mit der Größe, fps und Länge wie oben. In einem neuen Projekt ersetzt sie die Platzhalter-Komposition der Vorlage.

7. Vorschau, dann nur auf Anfrage rendern

Überprüfe zuerst deine eigene Arbeit: Rendere ein Standbild aus der Mitte einiger Zeilen (npx remotion still <id> out/check.png --frame=<n>) und betrachte sie.
Dann lass den Benutzer zusehen: Führe npx remotion studio --no-open im Hintergrund aus (ohne --no-open öffnet es auch den eigenen Webbrowser des Benutzers). Öffne die Adresse, die es ausgibt (normalerweise http://localhost:3000), im integrierten Browser.
Rendere nur, wenn der Benutzer darum bittet: npx remotion render <id> out/<slug>.mp4.

Wenn der Benutzer nach der Vorschau Änderungen wünscht, gehen kleine Änderungen direkt in die Komposition. Für größere Änderungen gehe mit den übernommenen Auswahlen zurück zu Schritt 4.

dricosnyman/kinetic-type-skills

Was ist kinetic-type-skills?

In Ihrer bevorzugten KI fragen

Dokumentation