yuyurun73-dev/bw-song-ad

/bw-song-ad — Schwarz-Weiß-Cartoon-Song-Werbung bis zum fertigen Paket

2026-10-18, erstellt mit Ohisama-Pants H-OHI-023a. Referenz ist WhiteHat MRR auf X (Knochendichte, Schwarz-Weiß-Cartoon, ca. 4 Minuten). Die Reaktion des Kunden: „Der Song ist zu heiß, göttlich.“ Das Referenzvideo ist kein kurzer Jingle, sondern ein Long-Form-VSL-Skript, das fast eins zu eins gesungen wird.

Reihenfolge (nicht ändern)

Songtext → Song (Suno) → Frame-genaue Zeitanpassung (pro Zeichen) → Szenenaufteilung → Charaktertabelle → Keyframes → Animation → Hintergrund-Rendering → Remotion → Qualitätskontrolle. Der Song ist die Uhr. Wenn man die Bilder zuerst erstellt, passen sie nicht zum Timing des Songs – alles muss neu gemacht werden.

S=~/.agents/skills/bw-song-ad
AD=<Projektordner>/<Anzeigen-ID>        # lyrics.md / captions.txt / song/ / shots.py / keys/ / clips/ / remotion/
cp -R $S/remotion $AD/remotion && cd $AD/remotion && NODE_USE_ENV_PROXY=1 npm install

0. Zuerst das Inventar prüfen

Falls es bereits Bilder oder Videos derselben Marke gibt, diese zuerst verwenden (siehe Marken-Bestandstabelle ASSETS.md – nach neuen Erstellungen aktualisieren). Wenn eine Generierung nötig ist, vorher mitteilen: „Bild ◯ Stück, Video ◯ Stück, ca. ◯ Credits.“ Aktuelle Statistik: 61 Bilder ca. 15 Credits, 61 Grok-Videos ca. 265 Credits.

1. Songtext (lyrics.md) — Vorlage reference/lyrics.md

• Den VSL-Ablauf absatzweise singen. Keine Reime. Ablauf analog zur Referenz: Fachmann beginnt → Standard-Sätze „ist anders“ × 3 → Wichtigeres → Ursache ist nicht das, was man denkt → Verbündete und Gegner im Körper → Früher lief es gut → Jetzt gewinnt der Gegner → Das Problem: Vernachlässigungsspirale → Verkaufsfläche zeigt immer dasselbe → Aber Veränderung (Lösung) → Zum Artikel (keine Registrierung nötig) → Bestand → „Du musst nicht mehr …“ × 3 → „Keine Sorge. Tippe unten“
• Nur Hiragana. Auch Zahlen in Hiragana (Suno verpatzt Kanji und Zahlen).
• Produktname nicht mitsingen (wird im Bild eingeblendet). Keine Preise. Versprechen nur im Rahmen der Produktseite.
• Zeigen, dann komponieren.

2. Song (Suno, Playwright)

• Einloggen nur durch die Person. Danach suno.com/create?mode=CUSTOM aufrufen, Songtext, Style und Titel einfügen und Create drücken.
• Style (Treffer): 1930s vintage upbeat jazz, old cartoon soundtrack, swing, clarinet, muted trumpet, ragtime piano, brushed snare, upright bass, warm female vocal, Japanese, clear diction, storytelling sung melody
• Ein Durchlauf produziert 2 Songs. Beide mit Whisper transkribieren und mit dem Songtext abgleichen – den nehmen, der weniger verzerrt ist.
• Download: Auf der Song-Seite More options → Download → MP3 → „Unlock & Download“ (einmal kostenloses Kontingent nutzen). cdn1.suno.ai gibt 403, das M4A für die Wiedergabe ist verschlüsselt. Blob aus dem Browser extrahieren, um die Limite zu umgehen, wird nicht gemacht.
• Speichern unter song/song.mp3.

3. Untertiteltext (captions.txt)

• Ein Absatz des Songtexts = eine Zeile. Innerhalb der Zeile mit / trennen (ein Block = einmal auf dem Bildschirm erscheinender Text. Max. ca. 12 Zeichen).
• In lesbares Japanisch mit Kanji-Kana-Gemisch umwandeln (der Songtext ist in Hiragana, aber die Untertitel bekommen normale Schreibweise).
• Für zweizeilige Darstellung | verwenden (z. B. Unten auf den Button tippen|Artikel lesen).

4. Frame-genaue Zeitanpassung (pro Zeichen)

uv run --python 3.12 --with openai-whisper python $S/scripts/align.py $AD

→ Erzeugt $AD/cap_events.json (blockweise Start- und Endzeit) und $AD/line_starts.json (Startzeit jeder Zeile).

• Nicht die zeilenweisen Zeitstempel von whisper-cli verwenden. Dieses behandelt die Einleitung (einige Sekunden ohne Gesang am Anfang) als ab Sekunde 0 gesungen und teilt auch innerhalb einer Zeile gleichmäßig auf – die Untertitel würden „vorlaufen, obwohl nicht gesungen wird“.
• Bei Gesangspausen (≥0,8 Sekunden) Untertitel ausblenden.
• Wenn die Übereinstimmungsrate unter 80 % fällt, ist der Song entweder verzerrt oder captions.txt weicht vom Songtext ab.

5. Szenenaufteilung (shots.py)

• Enthält STYLE (Stilbeschreibung für alle Einstellungen) und SHOTS = [(Zeilennummer, wie vielte Einstellung dieser Zeile, Szene, Bewegung), …].
• Eine Einstellung 2–5 Sekunden. Lange Zeilen auf 2–3 Einstellungen aufteilen. Bei 3,5 Minuten ca. 60 Einstellungen.
• Nicht alle langen Szenen animieren: Wenn man zur Hälfte Standbilder mit langsamen Zooms mischt, halbiert sich der Generierungsaufwand.
• Charaktere: Lehrer (Bob, Schürze) / Mama (tiefer Dutt, Streifen) / Kind (Pagenkopf) / zwei Boten im Körper (gestreifter Overall, Mütze) / Bösewicht (schwarzer Kreis, Hörner, Schwamm und Strohhalm) / Produkt (Muster des echten Artikels).

6. Charaktertabelle und Keyframes (Higgsfield gpt_image_2_5, 9:16, 1 Bild 0,25 Credits)

• Zuerst ein Character-Sheet erstellen, dann für alle folgenden Einstellungen Character-Sheet + ein Referenz-Bild als zwei image_references übergeben.
• Am Anfang des Prompts STYLE: black and white 1930s rubber-horse cartoon, thick clean ink lines, cross-hatching, grayscale only, vintage Fleischer-era look, slightly grainy film, soft dark round vignette, no text.
• python3 $S/scripts/make_reqs.py $AD image → 12er-Batches generate_image_batch.
• Kindern Kleidung anziehen (Unterwäsche/Windel-Outfit wird als NSFW abgelehnt). Wenn ein Referenzbild Unterwäsche zeigt, reicht das bereits zur Ablehnung.
• Produktmuster im Prompt genau beschreiben (falls ein nicht existierendes Muster erscheint, neu generieren).
• Alle Bilder in einem Kontaktblatt prüfen: Stil, kein Text, Charaktere wie im Sheet.

7. Animation (Grok Imagine grok_video_v15_lite, 720p, nur start_image, 1 Sekunde ≈ 1 Credit)

• python3 $S/scripts/make_reqs.py $AD video → 12er-Batches generate_video_batch. Länge: zuständiger Abschnitt + 0,5 Sekunden (3–8 Sekunden).
• Prompt: „Dieses Bild animieren: . Gleicher Stil, gleiche Komposition, gleiche Charaktere, hüpfende Rubber-Horse-Bewegung, Filmflimmern, feste Kamera, kein Schnitt, keine neuen Texte.“
• Falls ein declined_preset_id zurückkommt, diesen in die Parameter aufnehmen und erneut ausgeben.
• Letzte Frames aller Clips nebeneinander anzeigen. Wenn das Produkt sich dreht oder zur Seite zeigt und das Muster verzerrt, nur bis zu der Sekunde vor der Verzerrung verwenden (SRC_MAX) oder den vorderen Teil hin- und herlaufen lassen.

8. Hintergrund rendern (ohne Text)

python3 $S/scripts/bg.py $AD          # → $AD/bg.mp4 (1080x1920, 30fps) und shot_starts.json

• Szenenschnitte an den Start der Gesangszeilen anpassen (laut line_starts.json). Erste Einstellung ab Sekunde 0.
• Für die Einleitung (Anfang ohne Gesang) kann man starke Szenen (Bösewicht, große Flut, mit Stempel zerdrücken etc.) schnell schneiden und einfügen, um die Lücke zu füllen.

9. Remotion ($AD/remotion)

• public/bg.mp4 (Hintergrund), public/song.mp3 und src/data.json ablegen: python3 $S/scripts/make_data.py $AD --hook-end 29.3 --cta 192.9 --brand 44,46,47,50 --hook-top „An Mamas im Töpfchentraining“ --hook-main „Windel geht nicht aus“ --hook-mark „Der wahre Grund“ --brand-name „<Produktname>“ --keys „<Schlüsselwort in Gelb,kommagetrennt>“
• Enthaltene Elemente (src/SongAd.tsx):
  • Oberer Haken: Papierkarte (dicker schwarzer Rand, versetzter Schatten, leicht geneigt) – in der ersten Sekunde wird klar: „An wen + worum geht es“. Beispiel: „An Mamas im Töpfchentraining / Windel geht nicht aus Der wahre Grund“.
  • Untertitel: Schwarze abgerundete Box mit weißem Fettdruck, springt hüpfend herein. Nur das Schlüsselwort ist gelb (einzige Farbe im Schwarz-Weiß).
  • Produktname-Label: Nur in Einstellungen, in denen das Produkt erscheint – klein oben.
  • CTA: Vom letzten „Tippe unten“ bis zum Ende: drei gelbe Pfeile, die nach unten fließen und hüpfen, plus „Unten auf den Button tippen | Artikel lesen“.
• Rendern (dieser Mac stürzt mit Headless Chrome allein ab → chrome-wrap.sh, außerhalb der Sandbox):

cd $AD/remotion && NODE_USE_ENV_PROXY=1 npx remotion render src/index.ts SongAd out/<Anzeigen-ID>.mp4 --browser-executable=./chrome-wrap.sh --concurrency=6 --crf=20

• Auslieferung mit -crf 23 -movflags +faststart neu encodieren (durch Schwarz-Weiß-Körnung schwer; 3,5 Minuten ca. 200 MB).

10. Qualitätskontrolle (unbedingt vor dem Öffnen)

• Kontaktblatt mit ca. 24 Bildern pro Sekunde lesen: Untertitel nicht vom Song versetzt / erscheinen nicht während Pausen / Produktmuster nicht verzerrt / CTA-Pfeile vollständig im Bild / keine überflüssigen Texte.
• Die ersten 3 Sekunden separat prüfen (ist der Haken sofort erkennbar).
• Eine HTML-Vorschauseite erstellen und öffnen. Dateiname: die von AdLab vergebene ID (H-XXX-000a).

Fehlerstellen (gemessen bei diesem Durchlauf)

• Untertitel von Anfang an versetzt: Der Gesang begann bei 4,9 Sekunden, aber whisper-cli ging von 0 Sekunden aus → gelöst mit align.py (nutzt word_timestamps von openai-whisper und difflib zum Zeichenabgleich).
• Keyframes NSFW: Kind in Unterwäsche / Referenzbild mit Unterwäsche → Kleidung anziehen / Referenz nur stilistisch beschreiben.
• Produkt dreht sich und verzerrt: Grok zeigt oft die Seite. Nur die Sekunden mit Vorderansicht verwenden.
• Zu viel erstellt: 61 Bilder + 61 Videos für ein einziges Video. Nächstes Mal Inventar und Standbild-Zooms nutzen, um die Menge zu halbieren.
• Letztes langes Zeichen fällt in die nächste Zeile → mit | die Zeile festlegen.

Verwandte: reference/lyrics.md (Songtext-Vorlage und Beispiele), /zackd-ad (3D-Animations-Typ), AdLab (Hypothese vor Erstellung registrieren).