AI-Video-Editor

Motion-Grafiken auf dem eigenen Video des Benutzers

Workspace-Ebene über den installierten HyperFrames-Skills. Für HTML/Timeline-Mechaniken lade hyperframes-core (Kompositionsvertrag) und hyperframes-animation (GSAP-Regeln); die nächstgelegene vorgelagerte Route ist talking-head-recut. Dieses Skill fügt die Hausregeln des Erstellers hinzu, die bei Konflikten Vorrang haben.

Schnellpfad (bewährt auf reel-sep30, 3:20 Urdu/Englisch Reel, Paper Cut)

1. powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name <n> -Video raw/<file> -Transcribe → Deepgram-Transkript in Sekunden.
2. transcript-words.txt ausgeben (index:text@start) → lesen, zusammenfassen, Momente auswählen.
3. Untertitel: captions-src.json (Roman Hinglish Blöcke nach Wortindex) → node tools/build-captions.mjs projects/<n>.
4. Stilvorlage: kit/templates/paper-cut-vertical.html kopieren → index.html; beide data-durations setzen; die BEISPIEL-Aufrufe durch die Momente dieses Videos ersetzen.
5. lint → snapshot --at ... (2 Batches von ~12 Frames) → Kontaktabzüge ansehen → korrigieren.
6. Sounds: sfx.json aus der Offset-Tabelle in mg-sound schreiben → node tools/sfx.mjs projects/<n> (VOR dem Rendern, damit ein Render sie enthält).
7. Dem Benutzer die Renderzeit im Voraus mitteilen (siehe mg-export: ~25–30 min pro Minute 1080x1920 Video auf einem 4-Kern-Laptop), dann einmal rendern, nach exports/ kopieren.
8. Spätere Anpassungen: Nur Audio → sfx.mjs --mix (Sekunden, kein Neu-Render). Visuelle Anpassungen → zuerst Snapshot, dann ein Neu-Render.

Nicht: Lokale Spracherkennungsmodelle installieren, abgebrochene Downloads fortsetzen, zum „Überprüfen“ rendern (Snapshots verwenden) oder im VS Code-Player Vorschau anzeigen (kein AAC-Audio — VLC verwenden).

1. Projekt einrichten

1. Wenn das Video nicht in raw/ liegt, kann es dort bleiben, wo es ist. Wähle einen kurzen Kebab-Case-Projektnamen aus dem Dateinamen.
2. Führe aus (vom Workspace-Root):

   powershell -NoProfile -ExecutionPolicy Bypass -File tools/new-project.ps1 -Name "<name>" -Video "<Pfad>" -Transcribe
   

   • Transkription verwendet Deepgram (nova-3, standardmäßig language=multi; beherrscht Urdu/Hindi + Englisch Code-Switching; Hindi/Urdu-Wörter können in Devanagari zurückkommen — in Hinglish romanisieren, Zeitangaben behalten). Benötigt die Umgebungsvariable DEEPGRAM_API_KEY des Benutzers; falls nicht vorhanden, den Benutzer bitten, powershell -NoProfile -ExecutionPolicy Bypass -File tools/set-deepgram-key.ps1 selbst auszuführen (niemals im Chat). Nur englisches Video: -Language en. Alleiniges erneutes Ausführen: powershell -NoProfile -ExecutionPolicy Bypass -File tools/transcribe-deepgram.ps1 -Project projects/<name>.
   • Verwende nicht npx hyperframes transcribe mit Whisper oder installiere es (zu laut/langsam); verwende Deepgram.
   • Erzeugt projects/<name>/ mit clip.mp4 (CFR H.264), audio.mp3, metadata.json, transcript.json, fonts/, sfx/, renders/.
   • Füge -Screenshots "<ordner>" hinzu, wenn der Benutzer Screenshots für einen Moment bereitstellt.
3. Arbeite ab hier innerhalb von projects/<name>/ (dorthin cd wechseln, bevor ein npx hyperframes Befehl ausgeführt wird).

2. Video wirklich analysieren

• Lese metadata.json (Breite, Höhe, fps = r_frame_rate, Dauer) und transcript.json (flach [{text,start,end}]).
• Korrigiere offensichtliche ASR-Fehler an Ort und Stelle, behalte Zeitstempel. Sprache-zu-Text kann ca. 1 s abweichen: Wenn ein Moment wichtig ist, mit ffmpeg -ss <t-0.5> -t 2 -i clip.mp4 ... oder Snapshots überprüfen, anstatt der Zahl zu vertrauen.
• Lange oder gemischtsprachige Transkripte: Gib eine indizierte Wortliste aus (index:text@start, ein Satz pro Zeile) als transcript-words.txt und lese diese.

Untertitel (wenn der Benutzer sie möchte)

• Schreibe captions-src.json: [[ersterWortIndex, letzterWortIndex, "Untertiteltext", ["Schlüssel","Wörter"]], ...], 3–7 Wörter pro Block, die jedes Wort abdecken. Urdu/Hindi/Hinglish Sprache → Text in Roman Hinglish schreiben (z.B. „ke 9 maah guzar gaye hain“), englische Wörter wie gesprochen lassen, Fehlhörer durch Kontext korrigieren („नौ मां“ → 9 maah, „New York“ → New Year).
• Erstellen: node tools/build-captions.mjs projects/<name> → captions.js (window.CAPTIONS = [{s,e,text,key}]), warnt vor nicht abgedeckten Wörtern. Laden mit <script src="captions.js">.
• Finde heraus, wo das Gesicht ist: npx hyperframes snapshot ist nicht verfügbar, bevor eine Komposition existiert, daher extrahiere Frames: ffmpeg -nostdin -v error -ss <t> -i clip.mp4 -frames:v 1 renders/_probe_<t>.png an 3–4 Stellen und sieh sie dir an.
• Schreibe eine ein-absätzige Zusammenfassung: Worum es im Video geht, und die 3–8 wichtigen Momente (Zahlen, Listen, Vorher/Nachher, Schlüsselaussage, CTA).
• Frage den Benutzer nach dem Stil, falls er keinen genannt hat (siehe mg-styles). Standard: saubere weiße, matte Karten (Liquid Glass).

3. Planen (dem Benutzer vor dem Bauen zeigen, wenn das Video > 30 s ist oder die Aufgabe vage ist)

Für jeden Moment: Triggerwort + dessen exakte start, Grafiktyp, Inhalt, Zone, Endzeit. Grafiktyp folgt dem Gesagten:

• Zahl → Count-up · Liste → Checkliste Haken · Vorher/Nachher → Vergleich · Schlüsselzeile → Punch-in oder großer Text
• Screenshots / Beweise → Pop-ups in Folge (PROMPT 12) · Neues Thema → Reframe (Video schrumpft zu einer Karte) Bewegungsvokabular und Stile leben im mg-styles Skill.

4. Hausregeln (nicht verhandelbar)

1. Das Video genau so lassen, wie es ist: gleiche Größe, fps, Audio, Schnitt. Komposition data-width/height = Videogröße, fps = Video-fps, Root data-duration = Videodauer (auf metadata.json begrenzen). Video ist <video id="a-roll" class="clip" src="clip.mp4" data-has-audio="true" data-start="0" ...> ohne muted, ohne crossorigin.
2. Jede Grafik beginnt mit dem exakten Wort (start dieses Wortes im Transkript).
3. Ein Stil über das gesamte Video hinweg.
4. Nichts in den ersten 3 Sekunden — das ist der Haken.
5. Grafiken weg vom Gesicht, aus dem unteren Drittel (Untertitel) und innerhalb der mittleren 80% der Breite (10% Rand links/rechts) halten.
6. Schriftarten nur aus dem fonts/ Ordner des Projekts via @font-face (niemals Google Fonts URLs); GSAP via <script src="vendor/gsap.min.js">.
7. Milchglas benötigt etwas dahinter; über Footage funktioniert es, für transparenten Export feste Karten verwenden.

5. Bauen, prüfen, überprüfen

1. index.html schreiben (eigenständige Komposition, eine pausierte GSAP-Timeline registriert bei window.__timelines["<id>"]). Paper Cut Stil: beginne mit kit/templates/paper-cut-vertical.html. Low-Res Handy-Footage (z.B. 480x864 WhatsApp): trotzdem auf einer 1080x1920 Leinwand erstellen, damit Grafiken/Untertitel scharf bleiben; das Video skaliert darunter hoch.
2. npx hyperframes lint dann npx hyperframes check — jeden Fehler beheben.
3. npx hyperframes snapshot --at <t1>,<t2>,... an jedem Grafik-Mittelpunkt und die PNGs ansehen — auf Gesichts-/Untertitel-Überlappung und Text-Beschneidung prüfen.
4. Einen Entwurf rendern: npx hyperframes render . -o renders/with-cards.mp4 (Rendervorgänge sind auf typischen PCs langsam; Snapshots zum Iterieren verwenden, nur rendern, wenn die Frames richtig aussehen).
5. Die genehmigte finale Version nach exports/<name>.mp4 kopieren.

6. Folgeaufgaben (gleiche Sitzung)

• Eine Stelle (PROMPT 12): „Wenn ich sage, zeige “. Finde den Satz im Transkript, ändere nur diesen Moment, behalte alles andere identisch, rendere erneut in dieselbe Datei.
• Sound: das mg-sound Skill verwenden. Exportvarianten / transparent: mg-export Skill.
• Anpassungen in Klartext (Oberfläche, Farbe, Typografie, Bewegung, Timing, Layout) → nur das bearbeiten, alles andere gleich lassen, erneut rendern.

Erst die Basis, dann eine Stelle nach der anderen. Nicht versuchen, alles in einem Durchgang zu erreichen.