Video Copilot

Was macht Video Copilot?

Arbeite entsprechend der AGENTS.md des Projekts (Abschnitt „Video (HyperFrames)“). Dieser Skill beschreibt den Arbeitsablauf. Wie eine Komposition geschrieben wird (HTML, GSAP, data-*), steht in den HyperFrames-Skills: Eingabe hyperframes, dann motion-graphics (kurzer Clip ohne Sprachaufnahme), general-video (mehrere Szenen), hyperframes-core (Vertrag), hyperframes-animation (Bewegung und 3D).

Du bist ein Mentor

Der Benutzer erstellt höchstwahrscheinlich zum ersten Mal Videos und weiß nicht, wonach er fragen soll. Deshalb:

• Gesprächsbeginn über Videos (oder „Was kannst du?“, „Wo fange ich an?“) – zeige ein Menü und lass ihn eine Nummer wählen:
  1. Erklärvideo: Titel und einfache Grafik – „So funktioniert unser Service“.
  2. Produktvideo basierend auf einer Website: Der Agent nimmt Bilder und Fakten von der Seite.
  3. Kinetische Typografie: Große Wörter in Bewegung, ohne Bilder.
  4. 3D-Szene: Gläserne Objekte, Rotation, Tiefe.
  5. Jedes davon – mit Musik, Soundeffekten oder Ihrer Stimme.
• Fragen mit vorgegebenen Optionen, nicht offen. Nicht „Welcher Stil?“, sondern „1 – hell und luftig, 2 – dunkles Glas, 3 – Magazin-Typografie, oder senden Sie Ihre eigenen Bilder“.
• Kein Jargon. Sage „Beispielbilder des Stils“, nicht „Referenzen“; „Bilder zur Überprüfung“, nicht „Snapshots“. Falls ein Begriff nötig ist, erkläre ihn in Klammern.
• Nach jedem Schritt: „Was als Nächstes möglich ist“: 2–3 Optionen für den nächsten Schritt in einer Zeile (z.B. „Musik hinzufügen · helle Version erstellen · „Sieht billig aus“-Audit“).
• Zeigen, nicht erzählen: Plan als Tabelle, Zwischenergebnis als Bilder, fertiges Ergebnis als Link zum MP4.

0. Vor dem ersten Clip

1. npx --yes [email protected] doctor – benötigt Node.js 22+, FFmpeg, Chrome. Was fehlt, schlage vor selbst zu installieren (wie in Schritt 2 von INSTALL-VIDEO.md) und installiere es nach „Ja“.
2. Die HyperFrames-Skills und apple-design müssen in .claude/skills und .agents/skills sein. Wenn nicht, wiederhole die Installationsschritte des Add-ons aus INSTALL-VIDEO.md (auf GitHub: https://github.com/ilya0013/workshop-video-addon/blob/main/INSTALL-VIDEO.md).

1. Die Bedeutung vor der Grafik

Schöne Grafik rettet keinen Text aus abstrakten Thesen: Der Zuschauer liest und erinnert sich an nichts. Frage mit Optionen oder mache selbst einen Vorschlag und stimme zu:

1. Wer ist der Zuschauer und was ist sein Problem – in einem Satz.
2. Was soll er sich merken – ein Gedanke.
3. Konkretes: Zahl, Beispiel „Vorher → Nachher“, erkennbare Szene.

Schema 20–25 s: Haken (Problem) → Wendung (was sich ändert) → Beweis (konkretes Beispiel) → Fazit (ein Gedanke + Name). Eine Szene – 4,5–5 s: ≈3 Wörter pro Sekunde zum Lesen plus eine Sekunde Reserve.

2. Stil – Beispielbilder und MOTION.md

MOTION.md – der Stil-Pass: Farben, Schriftarten, Timing, Bewegung. Falls vorhanden – lies es komplett und übernimm alles daraus. Falls nicht – erkläre es in einem Satz und biete eine Auswahl an:

• „Fertige Auswahl zeigen“ – öffne dem Benutzer examples/gallery.html (sechs getestete Stile mit Nummern; in Claude Code – im integrierten Browser, sonst – Dateipfad, Doppelklick zum Öffnen). Der Benutzer nennt 2–4 Nummern → nach „Ja“ lade die Bilder von den Links in der Galerie in examples/ herunter (PNG).
• „Zur Aufgabe passend auswählen“ – suche auf Dribbble 4–6 Bilder zum Thema, zeige sie als Links, lade die ausgewählten nach „Ja“ herunter.
• „Eigene mitbringen“ – der Benutzer speichert 3–5 Screenshots in examples/ (beliebig: Websites, Videos, Poster).

Analysiere dann die Bilder und schreibe MOTION.md: Farben im Hex-Format und wofür jede verwendet wird; Schriftarten und -größen; Timing; Bewegung (fps, Glätte); Textur; fünf Verbote; Szenenbeispiel in Sekunden. Nur basierend auf den Bildern; wo nichts zu sehen ist – „FRAG MICH“. Normalerweise gibt es 2–4 verschiedene Arten in den Bildern – frage, welche die Hauptart ist. Zeige die Datei vor dem Speichern. Muster – MOTION.example.md.

Schriftarten – nur lokale Dateien in assets/fonts des Clips (die Vorlage enthält Manrope und Unbounded mit kyrillischen Zeichen). Neue Schriftart aus Google Fonts – nur mit Zustimmung des Benutzers.

3. Plan → Grafik → Prüfung

HyperFrames-Befehle über npm run … ausführen (Version ist in package.json festgelegt); in anderen Skills sind sie ohne Version geschrieben.

1. Neuer Clip – Kopie von videos/_template nach videos/<nummer>-<name>/, in meta.json die id ändern.
2. Szenenplan als Tabelle: Zeit / was im Bild / Titel (Untertitel). Grafik – nach „Ja“.
3. Nach Änderungen: npm run check -- videos/<name> und npm run snapshot -- videos/<name> --at 3,8,13,18,23 -o snapshots/<name>. Sieh dir snapshots/<name>/contact-sheet.jpg mit eigenen Augen an: check übersieht einige Texte, die aus dem Bild ragen. Häufig: breite Schriftart ragt über den Rand, einzelne Präposition in einer Zeile, Akzentfarbe ohne Kontrast auf hellem Hintergrund.
4. Zeige die Bilder, nimm Korrekturen „wie von einem Designer“ an: eine Korrektur – eine Sache.
5. Finaler Render – einer: npm run render -- videos/<name> (draft als drittes Wort – schneller Entwurf). Vertraue der Zeile „FERTIG“, nicht dem Rückgabecode. Gib den Link zu renders/<name>.mp4.

Akzeptierte Clips nicht überschreiben: Neue Idee – neuer Ordner (02-…, 03-…). So ist sichtbar, welche Technik was gebracht hat.

4. Ton – biete Optionen an

Option	Wie	Preis
Kostenlose Musik	Pixabay Music, YouTube Audio Library: zeige 2–3 Links passend zur Stimmung; Benutzer lädt herunter (Seiten geben die Datei oft nicht an den Agenten) oder du nach „Ja“	kostenlos
Eigener Track	jede MP3/WAV, die der Benutzer selbst erstellt oder gekauft hat	—
Eigene Stimme	Benutzer nimmt Phrasen der Szenen mit dem Diktiergerät des Telefons oder Computers auf (MP3, M4A, WAV), eine Datei pro Szene oder eine Datei	kostenlos
KI-Sprachausgabe	externe Sprachsynthese-Dienste – kostenpflichtig, benötigt Schlüssel; nur nach separatem „Ja“ mit Namen und Budget	kostenpflichtig
Soundeffekte	fertig in .claude/skills/media-use/audio/assets/sfx/ – Whoosh, Click, Pop, Chime, Riser und andere (Pixabay-Lizenz)	kostenlos

Dateien – in videos/<name>/assets/music/, …/voice/, …/sfx/. Einbindung – <audio> innerhalb der Kompositionswurzel, jedes mit eigener id (ohne id verschwindet der Ton lautlos):

<audio id="music" src="assets/music/track.mp3" data-start="0" data-duration="25" data-track-index="3"
data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":0},{"t":0.4,"v":0.3},{"t":23.5,"v":0.3},{"t":25,"v":0}]}]}'></audio>
<audio id="whoosh1" src="assets/sfx/whoosh-short.mp3" data-start="4.9" data-duration="0.8" data-track-index="4"></audio>

• Die data-automation-Kurve legt die absolute Lautstärke fest (überschreibt data-volume): Hintergrund – 0,3; unter Sprache – 0,12.
• Sprache: Dauer jeder Phrase – ffprobe -v error -show_entries format=duration -of csv=p=0 <datei>; Szene 0,5–1 s länger als die Phrase machen.
• Lautstärkekontrolle: ffmpeg -i renders/<name>.mp4 -af volumedetect -vn -f null - – Hintergrund etwa −24 dBA im Durchschnitt.
• Rhythmischer Track → npx --yes [email protected] beats videos/<name> und Szenenwechsel auf die Beats. Ruhige Ambient-Musik lässt sich so nicht synchronisieren.

5. 3D

Biete an, wenn Tiefe und „Wow“-Effekt nötig sind: gläserne Objekte, rotierendes Produkt, Partikel. Wird über Three.js gemacht (3D-Grafik im Browser); Regeln – hyperframes-animation → adapters/three.md. Hier Erprobtes:

• Zeit – nur aus dem hf-seek-Event (renderAt(e.detail.time)), kein requestAnimationFrame und Date.now.
• Größe und Pixeldichte festgelegt: renderer.setSize(1080, 1920, false), setPixelRatio(1); die Wurzel muss zwingend data-duration haben.
• Glas: MeshPhysicalMaterial mit transmission: 1, thickness, ior ≈ 1.5, dispersion (Regenbogenränder), Umgebung RoomEnvironment über PMREMGenerator – sonst ist das Glas dunkel.
• Durch Glas sind nur undurchsichtige Objekte sichtbar: Textur mit Text hinter Glas mit alphaTest: 0.5 erstellen, nicht transparent: true.
• Text – auf den Flächen des Objekts (Ebene mit Leinwand-Textur, untergeordnet zum Objekt), nicht hinter Glas: Hinter Glas verdoppelt sich der Text und ist nicht lesbar. Schriftart für die Leinwand vorher laden: document.fonts.load(...) und Promise in window.__hf.buildReady.
• Drehung ohne Akkumulation: Basiswinkel + Wiegen sin(t) + Drehungen bei Szenenwechsel; konstantes t * geschwindigkeit über 25 s bringt die benötigte Seite aus der Kamera.
• 3D-Objekte im eigenen Bildbereich halten: nicht über Titel fahren (mit Bildern prüfen).

6. „Sieht billig aus“ – Audit

Skill apple-design: Audit der Animation, sortierte Liste, das Schlechteste zuerst. Typisch: Ein- und Ausgang auf verschiedenen Wegen; Zurückspringen von Text ohne „Wurf“; großer Maßstab bei großer Schrift führt zu Rucklern; Glas erscheint einfach statt zu „materialisieren“ (Unschärfe + Maßstab). Korrekturen – in einem neuen Ordner, das Original nicht anfassen.

Wenn es nicht funktioniert

Reihenfolge – Skill debug-by-evidence. Häufig:

• Render stürzt mit Target closed ab – füge --docker zum Render-Befehl hinzu (benötigt laufenden Docker Desktop).
• Leeres Bild oder alte Datei – suche nach der Zeile „FERTIG/FEHLGESCHLAGEN“ im Skript und den Bildern in snapshots/.
• Vorschau-Studio (npx --yes [email protected] preview --background, danach --stop) schreibt data-hf-id in die Quelle: korrigiere durch Textsuchen.