ccvideo — Claude-ähnliche Produkt-Promo-Videos (Remotion)

ccvideo — Claude-ähnliche Produkt-Promo-Videos

Du erstellst ein kurzes Promo-Video (20–45 s, 1920×1080 @ 30 fps) in der visuellen Sprache der Anthropic Claude-Launch-Videos: eine warme Terrakotta-Leinwand, ein einzelnes macOS-Terminalfenster mit einer laufenden Claude Code-Sitzung, Text, der sich eintippt und hereinströmt, kurze Kamerafahrten zwischen gesetzten Einstellungen, Serifen-Titelkarten.

Voraussetzungen

1. Ein Remotion-Projekt muss vorhanden sein. Falls nicht, erstelle eines: npx create-video@latest --yes --blank --no-tailwind . dann npm i.
2. Pakete (installieren mit npx remotion add <pkg>, damit die Versionen übereinstimmen): @remotion/google-fonts, @remotion/transitions, zod (deklariere zod explizit — die Bibliothek importiert es direkt; verlasse dich nicht darauf, dass es eine transitive Abhängigkeit ist).
3. Die Komponentenbibliothek muss unter src/ccvideo/ existieren. Falls nicht, kopiere jede Datei aus dem templates/-Verzeichnis dieses Skills in src/ccvideo/. Schreibe diese Komponenten nicht von Grund auf neu.
4. Die Capture-/Verify-Toolierung muss unter scripts/ im Projektstammverzeichnis existieren. Falls nicht, kopiere das scripts/-Verzeichnis dieses Skills (einschließlich scripts/lib/) dorthin. Alle Skripte lösen captures/ relativ zu dem Verzeichnis auf, von dem aus du sie ausführst, führe sie daher immer vom Projektstamm aus.

Ground Truth (nicht verhandelbare Inhaltsregeln)

Videoinhalte werden niemals von Hand in Szenenkomponenten geschrieben. Jede gezeigte Tatsache — Zahlen, Pfade, Endpunkte, Befehlsausgaben, Zeilenanzahlen — muss aus einer Aufnahme von etwas stammen, das wirklich ausgeführt wurde:

• Jedes Video hat ein Verzeichnis captures/<name>/, das die rohen Artefakte (API- Antworten, extrahierte Sitzungsereignisse) sowie eine daraus deterministisch erstellte props.json enthält. props.json ist die einzige Quelle der Wahrheit, die die Komposition rendert.
• Capture zuerst. Bevor du das Video erstellst, führe das echte Ding aus:
  • node scripts/capture-xapi-cli.mjs — Live-X-Daten über die xapi-CLI (npx xapi-to, Schlüssel in ~/.xapi/config.json; das xapi-Skill in .agents/skills/xapi/ dokumentiert alle seine Fähigkeiten).
  • node scripts/capture-x-user.mjs — Offizielle X-API-Variante (benötigt X_BEARER_TOKEN; --sample schreibt Platzhalterdaten mit raw-meta.json, markiert als sample: true — veröffentliche niemals eine Sample-Capture).
  • node scripts/transcript-to-props.mjs <session.jsonl> --prompt-match <str> --out captures/<name> — Spielt einen echten Claude Code-Sitzungsdurchlauf ab (Transkripte liegen in ~/.claude/projects/<project-slug>/*.jsonl).
  • Neue Datenquelle? Schreibe ein neues Capture-Skript, das dem gleichen Muster folgt: Realität abrufen → Rohdaten speichern → Props über einen gemeinsamen deterministischen Builder in scripts/lib/ erstellen.
• Überprüfen vor der Veröffentlichung: node scripts/verify-props.mjs captures/<name> erstellt die Props aus den rohen Artefakten neu und schlägt bei jeder manuellen Bearbeitung fehl. Behebe dies durch erneutes Capturing, niemals durch Bearbeiten von props.json.
• Ehrliche-Wiedergabe-Grenze: Das Tempo ist eine Performance (Tippgeschwindigkeit, Spinner-Zeit), aber die Fähigkeit muss real sein — das Video darf nur zeigen, was der aufgezeichnete Durchlauf tatsächlich getan hat. Dies gilt auch für das Chrome: Sitzungskopf-Fakten (Claude Code-Version, cwd) stammen aus dem Capture (claude --version, echte cwd) oder der Kopf wird weggelassen; der Token-Zähler des Spinners wird nur gerendert, wenn der Capture einen echten thinkingTokens-Wert liefert (ansonsten nur Sekunden). Sample-Captures scheitern bei verify-props grundsätzlich (--allow-sample existiert ausschließlich für Pipeline-Tests).
• Captures zielen darauf ab, commit-sicher zu sein, mit verteidigung in der Tiefe — keine Garantie: transcript-to-props speichert nur die Eingaben, die das Video tatsächlich verwendet (die angezeigten Zeilen + Zählungen der ausgewählten Ereignisse, eine abgeschnittene Befehlsausgabe, die Zusammenfassungs-Aufzählungspunkte), bereinigt geheimnisähnliche Zeichenfolgen (API-Schlüssel, Bearer-Token, URL-Anmeldeinformationen, env/JSON-Passwortfelder, private Schlüssel) und schreibt sowohl normale als auch Slug-geflachte Home-Pfade in ~ um — alles, bevor Props erstellt werden, sodass Props, Video und archivierte Rohdaten identische redigierte Inhalte sehen. Musterlisten können niemals vollständig sein: Überprüfe immer einen Capture vor dem Commit, und behandle jede Redaktionswarnung als Stoppschild.

Arbeitsablauf

1. Capture zuerst (siehe Ground Truth): Erstelle captures/<name>/props.json aus einem echten Durchlauf.
2. Beat-Sheet aus dem Capture. Präsentationstext (Kartentitel, Denkwort) befindet sich in den Konstanten/Flags des Capture-Skripts — wähle den einen Prompt, den Code-Beat, die Ausgabe des Durchlaufs, die Zusammenfassungs-Aufzählungspunkte. Ziel ist der klassische Bogen: Code → erstellt → ausgeführt+Ausgabe → Zusammenfassung.
3. Komponieren: Registriere eine <Composition> in src/Root.tsx mit GroundedVideo aus src/ccvideo mit schema={groundedVideoSchema}, defaultProps importiert aus der Capture-props.json, und calculateMetadata, das die Dauer über groundedVideoDuration ableitet — Dauern folgen automatisch dem Inhalt. Benutzerdefinierte Szenenarbeit über den Standardbogen hinaus: Erstelle sie mit den Bibliotheks-Primitiven, gleichen Regeln.
4. Überprüfen mit Standbildern, bevor du es für fertig erklärst. Rendere ein Standbild pro Beat: npx remotion still <CompId> --frame=<n> --scale=0.5 out.png und betrachte sie. Überprüfe: nichts wird vom Terminalfenster abgeschnitten (eine [ccvideo]-Überlaufwarnung in der Render-Ausgabe bedeutet, dass Beats beschnitten werden müssen), das Timing wirkt nicht gehetzt, die Farben passen zur Palette.
5. Führe node scripts/verify-props.mjs captures/<name> aus, dann Vorschau mit npx remotion studio --no-open; finaler Render mit npx remotion render <CompId> out/<CompId>.mp4 (füge --props=captures/<name>/props.json hinzu, um eine andere Capture zu rendern, ohne den Code zu berühren; füge --scale=2 für ein 4K-Master wie die offiziellen Demos hinzu — Kompositionen bleiben im Code bei 1920×1080 @ 30 fps).

Zwei Themen

Wähle pro Produkt, beide teilen die Marken-Terrakotta-Farbe #D97656/#D97757:

• Terrakotta (Standard) — warme Leinwand, Claude Code REPL-Sitzung. Für Agenten/KI-Workflow-Geschichten. Komponenten: GroundedVideo/DataSession.
• Dunkel (die ant-CLI-Demo-Grammatik) — fast schwarze Leinwand #0B0B0B, warm-schwarzes Terminal #181716 nur durch eine subtile Grenze getrennt, Shell-Eingabeaufforderung ▶ ~/dir > (Pfeil #8B92C9, Chevron #5FA97B), cremefarbene Serife #D6D4CF. Die Struktur ist kapitelartig: Pixel-Logo- Wortmarken-Karte → [Zwischenkarte (mono Kicker + dünner Trenner + Serifen- Behauptung) → frischer Shell-Beat (echten Befehl eingeben, echte Ausgabe blendet ein, inaktive Eingabeaufforderung kehrt zurück)] pro Kapitel → Wortmarken-Outro. Für CLI/Entwickler-Tool-Produkte. Komponenten: DarkVideo/ShellBeat/ InterstitialCard/WordmarkCard, Palette dark in theme.ts, Schema darkVideoSchema (erstellt aus Captures wie das helle Thema — z. B. props-dark.json geschrieben von capture-xapi-cli.mjs, verifiziert von verify-props.mjs).

Das Aussehen (nicht verhandelbare Stilregeln)

• Leinwand #CC7D5D, Terminal #2B2C36, Titelleiste #3A3634. Textkörper #E3E4EB, gedimmt #9899A1, Kommentare #6C6E6A, Zeilennummern #83848C. Akzente: Immergrün #B8B9F2 (Pfade, Inline-Code, Zeichenfolgen), Blaugrün #85BEC5 (Schlüsselwörter), Gold #F2C43D (Status-Pfeile). Alle definiert in src/ccvideo/theme.ts — importieren, niemals hartcodieren.
• Schriftarten: JetBrains Mono für alles Terminal, Source Serif 4 für Titelkarten. Geladen in theme.ts über @remotion/google-fonts, mit Noto Sans SC bereits als CJK-Fallback für beide Stapel angehängt — chinesische Eingabeaufforderungen werden sofort gerendert.
• Terminalfenster 1560×950 zentriert (985, wenn ein Sitzungskopf angezeigt wird; dunkles Thema 1860×1010), 14 px Radius, tiefer weicher Schatten, drei Verkehrsampeln, Mono-Titelleistentext, der die Aufgabe widerspiegelt, z. B. dev — · Implementiere X — claude — 106×31.
• Die Claude Code-Sitzung muss echt aussehen: >-Eingabezeile über einer goldenen ⏵⏵ auto mode on (shift+tab to cycle) · esc to interrupt-Statusleiste (beide immer sichtbar, unten fixiert); ein ✻ Cogitating…-Spinner in einem festen Höhenslot direkt über der Eingabezeile; ●-Werkzeug-Ergebnis-Aufzählungspunkte; ein nummerierter Codeblock, endend mit … +N lines (ctrl+o to expand); eine fette What it does-Zusammenfassung mit --Aufzählungspunkten.
• Kamera: Kein dauerhafter Zoom oder Schwenk auf Terminalszenen, jemals — langsame Bruchteile-Skalierung lässt kleinen Monotext sichtbar abdriften und schwimmen. Die einzig erlaubte Kamerabewegung ist <CutZoom>: kurze, stark erleichterte Bewegungen (~0,6 s) zwischen ansonsten gesetzten Einstellungen — in dichte Inhalte hineindrücken, halten, für den Höhepunkt zurückziehen. Text darf nur während einer bewussten schnellen Bewegung mittig skaliert sein, niemals über Sekunden. Behalte den gleichen origin beim Herauszoomen wie beim Hineinzoomen, damit es nicht wie ein seitliches Gleiten wirkt. DataSession wendet dies automatisch um den run-Beat herum an. <SlowZoom> bleibt Titelkarten vorbehalten.
• Chrome für Sitzungsauthentizität (alle schema-gesteuert, alle optional): header (Pixel-Logo + Claude Code vX + Modell/cwd-Zeile, immer sichtbar), windowTitleIdle → windowTitle-Wechsel bei Eingabeübermittlung, Eingabeaufforderungs-Echo als hervorgehobener Block, Spinner mit Live-(Ns · ↓ N tokens)- Zählern und einer optionalen ⎿ Tip:-Zeile, Statusleiste, die nur während der Arbeit esc to interrupt erhält. Zusätzliche Beat-Arten: answer (reicher Prosa-Block), alert (rot hervorgehobene Zeile), tool-Beats können ⎿- Kindzeilen enthalten.
• Kein Transkript-Drift. Terminaltext darf nur an Ort und Stelle einblenden: keine positionellen Eingangsanimationen innerhalb des Fensters, und niemals ein Element mounten/unmounten, das Zeilen darunter umfließen lässt — vergängliche Zeilen (Spinner, Fortschritt) befinden sich in festen Höhen-Slots, sodass ihr Verschwinden nichts verschiebt.
• Titelkarten: Serifen-Schlagzeile in fast schwarzem #1F1508 auf der Terrakotta, Mono-Untertitel bei 68 % Deckkraft, Aufblend-Eingang. Schlagzeile ≥ 132 px, Untertitel ≥ 52 px bei 1920 Breite.

Komponenten-API (src/ccvideo)

Datengesteuerte Schicht (bevorzugt für ganze Videos):

• <GroundedVideo {...props}> — Einführungskarte → Sitzung → Outro-Karte, vollständig aus einem groundedVideoSchema-Wert (einer Capture-props.json).
• <DataSession {...props.session}> — Rendert jeden sessionSchema-Wert: optionaler Kopf, Eingabeaufforderungstippen, Spinner, dann beats (diskriminierte Union: code, tool, run, summary, answer, alert). Wendet den Cut-Zoom des Run-Beats automatisch an; warnt zur Renderzeit, wenn der Inhalt überlaufen wird.
• sessionTiming(props, fps) / groundedVideoDuration(props, fps) — reine Timing-Ableitung; verwende in calculateMetadata.
• <Rich segments> — Rendert JSON-Segmente {t: 'plain'|'kw'|'code'| 'comment'|'dim'|'bold', s}; die Brücke von props.json zu stilisiertem Text.

Präsentations-Primitive:

• <TerminalWindow title width? height? variant?> — Fenster auf der Leinwand (variant="dark" für das dunkle Thema). Children sind eine Flex-Spalte; gib dem Transkript flex: 1, damit <InputBox> + <StatusBar> unten fixiert werden.
• <TypeText text from cps? cursor?> / <Cursor> — Schreibmaschine, 35–45 cps.
• <InputBox typedText? from? cps?> — >-Zeile; kein typedText = blinkender Cursor.
• <StatusBar mode? hint?>.
• <Thinking from? until? word? stats? tokens? tip?> — Spinner; stats zeigt Live-(Ns) — plus ↓ N tokens nur, wenn tokens eine echte aufgezeichnete Anzahl trägt; tip fügt eine ⎿ Tip:-Zeile hinzu. Platziere es in einem festen Höhenslot zwischen Transkript und Eingabe; until blendet es an Ort und Stelle aus.
• <Line from?> — eine Ausgabezeile, 8-Frame-Einblendung (nur Deckkraft).
• <ToolLine from> — ●-Aufzählungspunkte-Zeile.
• <CodeBlock from lines stagger? startLineNo? expandNote?> — nummerierte Zeilen.
• Token-Spannen: <K> Schlüsselwort, <C> Code/Pfad, <Cm> Kommentar, <Dim>, <B>.
• <SessionHeader version modelLine>, <PromptEcho>, <AlertLine from?>, <ToolChild from?> — Sitzungs-Chrome (siehe Stilregeln).
• <CutZoom cuts={[{from, scale?, origin?, ease?}]}> — kurze erleichterte Bewegungen zwischen gesetzten Einstellungen; die einzige Kamerabewegung, die auf Terminalszenen erlaubt ist.
• <SlowZoom from? to?> — nur für Titelkarten, niemals um ein Terminal herum.
• <TitleCard title subtitle? titleSize?>.

Alle Animationen sind Frame-gesteuert (useCurrentFrame + interpolate, begrenzt, inline in style). Verwende niemals CSS transition/animation — nur Frame-Interpolation.