rendydev404/product-motion-ad

Product Motion Ad (Remotion + ElevenLabs)

Endergebnis: MP4 1920×1080 30 fps, 30–45 Sekunden, starker Hook, Sprachausgabe in der Zielsprache die menschlich klingt, professionelle Soundeffekte (SFX), schnelle Übergänge im Stil der Referenzen, und Ablauf = echter Produkt-Flow. Wird dem Benutzer mit SendUserFile zugestellt.

Geprüfte Vorlagen befinden sich in template/ (diesem Skill-Ordner). Ein vollständiges Beispiel mit 13 Szenen aus einem realen Projekt befindet sich in references/example-scenes-threads-automation.tsx.txt und references/example-promo-threads-automation.tsx.txt. Lies references/script-and-storyboard.md vor dem Schreiben des Drehbuchs und references/elevenlabs.md vor der Erstellung des Audios.

Prinzipien, die nicht verletzt werden dürfen

1. Das Produkt muss innerhalb der ersten 8 Sekunden klar sein: Produktname + „macht was für wen“.
2. Szenenreihenfolge = Reihenfolge der Produktnutzung (Anmeldung/Login → Einrichtung → Kernprozess → Ergebnis → erweiterte Funktionen → Beweis des Ergebnisses → CTA). Nicht durcheinanderbringen.
3. Ein VO-Satz = eine Szene = ein Vorteil + dessen visueller Beweis (bewegte UI: Formular wird ausgefüllt, Button geklickt, Ergebniskarte erscheint, Zahl steigt). Nicht nur Text.
4. Fakten aus der Produktquelle, nicht erfunden: lies Code/Landing/Onboarding/Seite „So funktioniert es“. Beispielzahlen (Aufrufe, Bewertungen) dürfen illustrativ sein, aber weise den Benutzer darauf hin, dass es Illustrationen sind.
5. Schnelles Tempo wie in den Referenzen: Überblendungen von 10 Frames (T = 10), Animationen innerhalb der Szene mit speed 1,5–3 beschleunigt. Szene nicht verlangsamen, um langsame VO zu füllen – verbessere stattdessen die VO.
6. Menschliche VO: Ein ganzer Take, lockere Sprechweise, schnelles Tempo, ohne Emotions-Tags in jeder Zeile. Nicht Satz für Satz getrennt (das wirkt steif).
7. Leistungsregeln des Benutzers befolgen: Einmal Anfang & Ende messen, nicht ohne Grund mehrfach rendern.

Arbeitsablauf

1. Material sammeln (wenn möglich parallel)

• Produkt: Im Repository nach Landing-Text, Onboarding, Seite „So funktioniert es“/Funktionen, UI-Feature-Namen (Grep nach UI-Strings) suchen. Außerhalb des Repository: Beschreibung/URL anfordern. Tabelle Flow der Vorteile erstellen: Schritt | Benutzeraktion | Vorteil | Visueller Beweis (gezeigte UI).
• Marke: Farben & Schriftarten aus CSS (globals.css, Tailwind-Theme, Landing-CSS), Logo aus public/. template/src/theme.ts befüllen (C, GRADIENT, Schriftart, BRAND).
• Stil-Referenzen (falls Video vorhanden): Frames mit ffmpeg von Remotion extrahieren und Kontaktabzug betrachten: npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png (Filter fps=/tile NICHT im Remotion-ffmpeg verfügbar; -r und scripts/contact-sheet.cjs verwenden). Notieren: Hintergrund (verschwommener Blob/Punktgitter), Texteinblendung, harte Schnitte, 3D-UI, Mausklick, Leuchteffekte, Rhythmus.

2. Drehbuch & Storyboard

Befolge references/script-and-storyboard.md: Hook mit 3 Takten (Neugier-Lücke), 1 Zeile ≤ 10 Wörter pro Szene, lockere Sprechweise, erster Satz beginnt mit einem Füllwort („Ähm,“), damit das Schlüsselwort in Sekunde 0 nicht falsch ausgesprochen wird, kurzer CTA. Zeige Drehbuch + kurze Szenenabfolge dem Benutzer nur, wenn die Aufgabenstellung unklar ist; sonst direkt loslegen.

3. Remotion-Projekt

• template/ in einen neuen Ordner im Benutzer-Repository kopieren (z. B. promo-video/), npm install.
• Falls innerhalb eines anderen Next.js/TS-Repositorys: diesen Ordner in der root-tsconfig.json unter exclude und in den globalIgnores von ESLint hinzufügen. Der Ordner hat bereits eine .gitignore (node_modules, out).
• Logo in promo-video/public/ kopieren und BRAND.logo setzen.
• Szenen pro Produkt in src/scenes.tsx schreiben (die Muster aus den Beispielen verwenden: useFrame(), useRise/rise, glass/white, StepTag, Words, typed+Caret, Cursor, BlurFilter). Generische Szene makeFeature nur für Prototypen.
• DEFS in src/Promo.tsx befüllen: Szenenreihenfolge, cue (Eröffnungsphrase des VO-Satzes), beats (Hook), speed, Übergänge, dark, sfx.

4. ElevenLabs-Audio (siehe references/elevenlabs.md)

• VO als ein Take → public/vo/full.mp3; Scribe-Transkript pro Wort → public/vo/words.json. Transkript prüfen (Falsch ausgesprochene Wörter? Fehlende Zeilen?).
• SFX-Pack mit 10 Dateien → public/sfx/*.mp3.
• Automatische Zeitsteuerung: Szene beginnt 6 Frames bevor die cue-Phrase im VO gesprochen wird; SFX werden zum Zeitpunkt des Szene-Designs platziert (durch speed geteilt).

5. Rendern & verifizieren

• npm run typecheck dann npm run render (Port 3456 – Port 3000 wird oft vom Next-Dev-Server belegt, der Render schlägt dann fehl mit „not a valid Remotion project“).
• Render bei > 2 Minuten im Hintergrund ausführen.
• Visuelle Prüfung: node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk und das Blatt lesen. Für bestimmte Sekunden eine Liste von Sekunden angeben. (ffmpeg-Sample -r zeigt oft fake-leere Anfangsbilder – bei Zweifel gezielte Sekunden prüfen.)
• Prüfen: Text bleibt nicht unscharf, wird nicht abgeschnitten/umgebrochen, Schritt-Label wird nicht von Panel verdeckt, Schlüsselanimationen sind vor Szenenwechsel abgeschlossen, Bildschirmtext = VO-Wort.
• Mit SendUserFile senden (Anzeige render), Dauer, Größe melden und was noch nicht verifiziert wurde (z. B. Audiopegel nicht direkt gehört).

Bereits aufgetretene Fallstricke (vermeiden)

Problem	Ursache	Lösung
Hook-Text bleibt dauerhaft unscharf	Blur-Wert der vorherigen Phase (out1) bleibt 1	Blur pro Phase berechnen: nur Ein-/Ausgang
Video wird langsam	Szene wird an langsame VO angepasst	VO schneller & Drehbuch kürzer; speed beibehalten
VO klingt steif	Clip pro Satz + Tag [excited] in jeder Zeile + hochsprachlicher Stil	Ein Take, lockere Sprechweise, ohne wiederholte Tags
Erstes Wort falsch ausgesprochen („Konto“→„Kurto“)	v3 verhaspelt sich oft beim ersten Wort	Mit „Ähm,“ / „Naja,“ beginnen und Scribe-Transkript prüfen
Render scheitert mit „getStaticCompositions undefined“	Port 3000 von Next-Dev belegt	--port=3456 verwenden
fps=/tile Fehler	ffmpeg von Remotion ist eingeschränkt	-r + contact-sheet.cjs (sharp)
Satz auf 2 Zeilen umgebrochen & Avatar abgeschnitten	Flex-Item schrumpft	flexWrap: "nowrap", Schriftgröße verkleinern
Panel verdeckt Schritt-Label	Kamera-translateY zu groß	Kamerabewegung begrenzen, scale(0.92)
Chip/Karten kollidieren	Polare Positionen zu nah	Kontaktabzug prüfen, Winkel/Radius verschieben
useId() in url(#id) defekt	ID enthält :	useFilterId() (bereinigt)
MCP ElevenLabs nach Login nicht geladen	Neue Tools erscheinen erst in neuer Sitzung	Tool direkt verwenden, falls vorhanden; sonst claude -p headless (siehe Referenzen)
MCP scheitert mit „Protected resource ... does not match“	Host-Region	claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp