uttamongithb/editorial-reel-video

Konzept & Editorial Reel Video Skill

Diese Skill lehrt Agenten, wie man virale, hochverwertbare technische und educational Erklärvideos für JEDES Thema (z. B. Tor-Onion-Routing, Netzwerke, Datenbanken, Systemarchitektur, Git, KI) produziert, die strikt dem Ziel-Pacing (z. B. 60-Sekunden-Reels) mit reichhaltigen Szenenübergängen, Mapping der Stimmausdrücke, Presenter-Cutouts und kontinuierlichen technischen Animationen folgen.

---

1. Schlüsselprinzipien & Produktionsanforderungen

A. Strenges Pacing & Dauer-Einhaltung (Die 60-Sekunden-Regel)

• Wenn ein Skript Szenen-Zeitstempel vorgibt (z. B. 0–7 s, 7–16 s, 16–27 s, 27–42 s, 42–50 s, 50–60 s), MUSS der Agent die exakten Zieldauern DURCHSETZEN.
• Standard-TTS-Geschwindigkeiten sind oft zu langsam (~110 WPM). Der Generator muss die Audiowiedergabegeschwindigkeit mit FFmpeg atempo (tonhöhenerhaltend) skalieren, um die virale Reel-Geschwindigkeit (160–180 WPM) zu erreichen und auf die exakt vorgegebene 60‑Sekunden-Laufzeit zu fixieren.

B. Agent-TTS-Ausführung & Standards für Stimmausdrücke (Blueprint für virale Bindung)

Agenten mit integrierten TTS-Engines (z. B. Edge-TTS, ElevenLabs, Azure Speech, OpenAI) DÜRFEN NICHT die standardmäßig flachen/monotonen Einstellungen verwenden. Standard-TTS (110–120 WPM) verliert Kurzformat-Zuschauer innerhalb der ersten 2 Sekunden. Der Agent muss virale Pacing-Parameter einspritzen:

• Geschwindigkeit & Kadenz: Virale Reel-Geschwindigkeit erzwingen (160–180 WPM oder rate: +15% bis +20%).
• Tonhöhe & Intonation: Ausdrucksstarke Tonhöhen-Ausschläge (pitch: +4 Hz bis +8 Hz) bei Fragen und Hooks injizieren.
• Mikropausen: Taktische Pausen von 100–180 ms (<break time="180ms"/>) direkt vor Pointen-Wörtern einfügen (z. B. vor "teen envelopes!").
• Mapping der Ausdrucks-Tags:
  • [curious]: Schnell beginnen (170 WPM), fragender Terminal-Lift (pitch: +8%), konspirative Neugier.
  • [explaining]: Gemessen (155–165 WPM), klare Artikulation, 60 ms Pausen vor Fachbegriffen.
  • [dramatic]: Langsameres Tempo (145 WPM), Tonhöhe fällt in die Bruststimme (-5%), knackige stakkatoartige Betonung.
  • [confident]: Vorwärtstreibender Clip (165 WPM), resonanter Brustton, Anhebung am Ende.
  • [excited]: Hohe Geschwindigkeit (180 WPM), Tonhöhen-Anhebung (+10%), scharfer rhythmischer Schlag auf Nomen.
  • [playful] / [laughing]: Konversationeller Clip (165 WPM), hörbares Kichern / Lächeln im Atem, frecher Ton.
• Wortgenaue Untertitel: Wort-Zeitstempel aus TTS extrahieren, um tanzende Wort-für-Wort-Hervorhebungen (.word-active gelber Glanz #FFE600) auf dem unteren Chip zu ermöglichen.
• Master-Audio-Blueprint:
  • Voiceover auf -16 LUFS eingestellt mit loudnorm=I=-16:TP=-1.5:LRA=7.
  • Instrumental-Musikbett auf Lautstärke 0.15 (= -29 LUFS, exakt 13 LU unter der Stimme). Kein Sidechain-Ducking (die 13 LU-Lücke ist das Ducking).
  • Soundeffekte-Bus (0.20 gain): pop.wav bei jedem Szenenschnitt (0.50 gain), riser.wav 0,3 s vor großen Szenenwechseln (0.28 gain), click.wav bei UI-Element-Landungen (0.40 gain), chime.wav bei Enthüllungen (0.38 gain), notify.wav beim CTA (0.35 gain).
  • Master-Export: -14 LUFS integrated, True Peak <= -1.0 dBTP.
  • Konsultiere references/voice_audio_and_cutout_guide.md für vollständige SSML-Schnipsel und engine-spezifische Konfigurationen.

C. Presenter-Cutout-Architektur (Anker 5)

Jede Szene zeigt ein ausdrucksstarkes Presenter-Charakter-Cutout, das unten rechts verankert ist (top: 63,4%, x: 20,7% vom rechten Rand, auf Hüfthöhe vom Bildrand beschnitten, unterhalb des Chips sitzend). Posen sind direkt auf die Stimmausdrucks-Tags abgebildet:

• [curious] ➔ p1_shrug.png (erhobene Handflächen, große Augen, aufgeregtes Grinsen)
• [frustrated] ➔ p2_facepalm.png (Handfläche auf Stirn, Grimasse)
• [confident] ➔ p3_present.png (Arme weit geöffnet, Ta-da-Pose, stolzes Lächeln)
• [explaining] ➔ p4_chin.png (Kinn berühren, schelmisches halbes Lächeln, Lehrhaltung)
• [analogy] / [recalling] ➔ p5_memory.png (Kopf kratzen, kleiner Aha-Moment)
• [excited] / [numbers] ➔ p6_thumbs.png (große Daumen hoch, riesiges begeistertes Grinsen)
• [playful] / [laughing] / [cta] ➔ p7_cta.png (auf Zuschauer zeigen, freches Grinsen)
• [dramatic] / [look] ➔ p8_point.png (direkter Fingerzeig aus dem Bild)
• [revelation] ➔ p9_idea.png (Glühbirnen-Finger nach oben, große Augen)
• Konsultiere references/voice_audio_and_cutout_guide.md für vollständige Bildgenerierungs-Prompts und Alpha-Matting-Anleitungen.

D. Dynamische Szenenübergänge (Keine steifen Schnitte)

Jeder Szenenübergang muss einen aktiven Bewegungsübergang verwenden:

• Geneigter Dualband-Wipe (wipe.html): Signatur-Schrägstrich von -11° mit ankommendem Szenenhintergrund + 120 px Akzentkante, alternierende horizontale Richtung (flip: 0 vs. flip: 1).
• Kamera-Hineinzoomen: Zoom-Übergang in Netzwerkknoten oder Architekturschichten (scale: 0.85 -> 1.0).
• Terminal-Glitch-Flash: Kurzer chromatischer Flash beim Betreten von Code-/Terminal-Umgebungen.
• Konsultiere references/v7_layout_and_transitions_guide.md für vollständige Geometrie- und GSAP-Timeline-Spezifikationen.

E. Kontinuierliche themenspezifische Animationen

Zeige niemals statische Diagramme. Alle visuellen Komponenten müssen kontinuierliche, reaktive Bewegungen aufweisen:

• Paket-Routing & Layer-Stripping: In Tor- und Netzwerk-Erklärvideos animierte Pakete, die physisch durch Knoten reisen und beim Fortschritt Verschlüsselungsschichten (Green Guard-Hülle, Yellow Middle-Hülle, Red Exit-Hülle) abstreifen.
• Reaktive Knoten-Beleuchtung: Knoten leuchten, pulsieren und schalten Status-Badges um (WAITING → ACTIVE → DECRYPTED), während Pakete sie durchqueren.
• Interaktive Terminalfenster: Live-Tippen von Befehlsausführungen, Echtzeit-Circuit-Logs und blinkende Block-Cursor.

F. Schweizer Editorial-Typografie-System

• Streng linksbündig mit sauberen Rändern.
• 3-stufige Hierarchie: Weit gesperrter Kicker (#), massiver gestapelter Headline und kontrastreiche rechteckige Keyword-Badge-Pillen ([...]).
• Maskierte Slide-up-Animationen (overflow: hidden).
• Null florale Ornamente. Saubere, minimalistische technische Kopfzeile.

---

2. Schnellstart: Sprachskript zu Video

Immer wenn der Benutzer ein mit Ausdrücken formatiertes Skript bereitstellt:

[HOOK — 0–7 sec | Curious + mysterious]
[curious] "Bhai, kabhi socha hai Tor Browser tumhari identity hide kaise karta hai? Tum website open karte ho, lekin tumhari request seedha website tak nahi jaati!"

[ROUTE SELECTION — 7–16 sec | Excited + explanatory]
[explaining] "Instead, Tor apne network se teen computers select karta hai — Guard Node, Middle Node aur Exit Node. Aur in teeno se milkar banta hai tumhara secret route!"

Der Agent führt die Pipeline aus:

# 1. Abschnitte parsen, Ausdrücke extrahieren, Presenter-Posen zuordnen
python scripts/process_vo.py

# 2. Design anhand der 7 Gesetze validieren und Tokens schreiben
python scripts/prepare.py

# 3. Szenen zusammenbauen und master index.html kompilieren
python scripts/build_index.py

# 4. Determinierte Frames mit 30 FPS rendern
python scripts/render_video.py

# 5. VO (-16 LUFS) mit Bett (-29 LUFS) & SFX mischen und muxen
python scripts/mix_audio.py
python scripts/qc.py

---

3. Die V7-Produktionsarchitektur: Layouts & Übergänge

Die Skill übernimmt die produktionserprobte v7 Reel Pipeline (PARAMS.json -> prepare.py -> new_scene.py -> build_index.py -> mix_audio.py -> qc.py):

A. Die sieben Gesetze von Layout und Bewegung

1. Ein Ankergitter, unten fixiert:
   • Anker 1 (Kicker): Kategorie-/Kontext-Tag bei Y = 0,0667 mit Akzentstrich <i></i>.
   • Anker 2 (Hero): Hochwirkungsvolles komprimiertes Display-Wort (1–3 Wörter) in Anton bei Y = 0,1006.
   • Anker 3 (Proof Body): Dynamische Proof-Karte (A: card-led), Kilometerzähler (B: stat-led) oder 2-zeilige Aussage (C: type-led) bei Y = 0,3010.
   • Anker 4 (Der Chip): Gesprochener Satz in Kapsel bei Y = 0,5875 mit Akzentpunkt <b></b>. Bewegt sich nie zwischen Szenen.
   • Anker 5 (Der Presenter): Charakter, beschnitten vom Bildrand bei Y = 0,6340 mit adaptivem Halo-Glühen (#sX-glow). Bewegt sich nie zwischen Szenen.
2. Der Hero ist ein Wort, der Chip ist die Zeile, die Karte ist das Detail:
   • Hero: 1–3 Wörter (Anton, 17–25 % der Bildbreite, Zeilen-Höhe 0,88).
   • Chip: 3–6 Wörter (die Zeile, die ein stummer Mobilzuschauer liest).
   • Karte: Der konkrete Beweis (Dateiliste, Keyword-Diff, Terminal, Upload-Fortschritt, Score-Meter).
3. Sechsfeld-Farbzyklus:
   • accent → ground → ink → secondary → tertiary → quaternary. Keine zwei aufeinanderfolgenden Szenen dürfen denselben Hintergrund haben.
4. Beweis, nicht Dekoration:
   • Jede Karte muss einen echten Beweis anzeigen (4–6 Zeilen oder Mockup, das ≥ 55 % der Karte ausfüllt). Wenn es keinen Beweis gibt, type-led (Anker 3C) verwenden und die Karte weglassen.
5. Frame 0 ist ein Poster (data-cover="1") :
   • Szene 1 wird bei t = 0,0 s komponiert: Kicker, Hero, Karte und Presenter bereits sichtbar. Chip landet bei 0,65 s. Keine leeren Intro-Frames.
6. Nur-Transform-Bewegung mit früher Landung:
   • Eintritte landen im ersten Drittel jedes Beats (0,24 s – 0,34 s, power3.out). Niemals Text-Inhalt oder innerHTML tweenen.
   • Lange Szenen zeigen eine subtile kontinuierliche Drift (tl.to("#sX-hero", { y: -14, duration: 0.7 })), um visuelles Leben zu erhalten.
7. Sound als Satzzeichen:
   • Prozedurale SFX (pop bei jedem Schnitt, click/key bei UI-Zeilen, chime bei Enthüllungen, notify beim CTA). Auf -14 LUFS und <= -1 dBTP gemastert.

B. Der geneigte Dualband-Wipe-Übergang (wipe.html)

• Geometrie: Dualband-Schrägwisch, geneigt um -11° (transform: skewX(-11deg)).
• Struktur: #w-main (Hintergrundfarbe der ankommenden Szene) + #w-edge (120 px Akzentstreifen).
• Richtungswechsel: Wechselt horizontal bei jeder Szene (flip: 0 links-nach-rechts, flip: 1 rechts-nach-links).
• Zeitplanung: Wird automatisch 0,36 s vor jedem Schnitt von build_index.py ausgelöst, mit adaptiver Dauer (0,34 s – 0,62 s) passend zur Szenenlänge.

---

4. Referenzen & Dokumentation

• references/voice_audio_and_cutout_guide.md: Sprachregie für Ausdrücke, Master-LUFS-Ziele, Bettmischung und das 9-Posen-Presenter-Cutout-System.
• references/v7_layout_and_transitions_guide.md: Die vollständige mathematische Layout-Spezifikation, Token-Ableitungsformeln und Mechanik des geneigten Wipe-Übergangs.
• references/animation_and_transitions_guide.md: Katalog der Übergangsphysik, Rezepte zum Layer-Stripping von Paketen und Regeln zur Audio-Tempo-Skalierung.
• references/design_system.md: Exakte CSS-Farben, Schriftarten, Zeilen-Höhen und sichere Zonen.
• references/concept_animation_guide.md: Wie man Animationen für Tor, Datenbanken, KI, Git, Netzwerke und Systemdesign gestaltet.