david-d2c2/motion-promo-reels

Werbevideos mit Code-generierten Bewegungsgrafiken

15–30 Sekunden lange Videos, vollständig per Code generiert: 2D-Canvas → Einzelbilder → ffmpeg, mit Audio in numpy synthetisiert. Keine Videovorlagen, kein After Effects, keine Drittanbieter-Musik. Es deckt drei Fälle ab:

• eine Person oder persönliche Marke (16:9);
• eine Handvoll Produkte (9:16);
• den gesamten Katalog eines Shops (9:16, Dutzende oder Hunderte Videos).

Leitprinzip: nichts erfunden. Jede Zahl, jeder Preis, jede Farbe oder Funktion im Video stammt aus einer verifizierten Quelle: Website, Store-API, Produktseite oder Projektdokumenten. Wenn etwas nicht bestätigt werden kann, kennzeichne es als ausstehend und teile dies mit.

Dieses Paket enthält drei vollständige Vorlagen im Verzeichnis ${CLAUDE_SKILL_DIR}/templates/ (im Chat auf claude.ai: templates/, neben dieser Datei). Kopiere die passendste Vorlage in das Projekt des Benutzers und passe sie an, anstatt die Engine neu zu bauen (siehe Abschnitt 4). In templates/README.md ist aufgelistet, was in jeder Vorlage geändert werden muss.

Schreibe alle Bildschirmtexte in der Sprache der Zielgruppe der Marke und antworte dem Benutzer in seiner Sprache. Feste Oberflächenstrings („von“, „Farben“, „NICHT ER“ …) werden über den textos-Block der Vorlage überschrieben, niemals durch Bearbeiten der Engine. Passe das Geschlecht der Person in no_es an.

0. Den Fall auswählen

Fall	Vorlage	Format	Länge	Gag-Einheit
Person oder persönliche Marke	persona-16x9	1920×1080	27 s	Ein, handgeschrieben
Website oder Dienstleistung	persona-16x9, angepasst	16:9 oder 9:16	20–30 s	Ein, handgeschrieben
Einige Produkte (≤10)	producto-9x16	1080×1920	15,5 s	Einer pro Produkt, handgeschrieben
Katalog (Dutzende bis Hunderte)	catalogo-9x16	1080×1920	15,5 s	Einer pro Kategorie, mit Vorlagenphrasen, die aus den Daten jedes Produkts gefüllt werden

Wenn der Benutzer keine Angabe macht, verwende 9:16 für Produkte und teile dies in einem Satz mit.

1. Recherche (bevor eine einzige Zeile Skript geschrieben wird)

Quellen, in dieser Reihenfolge:

1. Der Projektordner, falls vorhanden. Lies CLAUDE.md, AGENTS.md, Entscheidungsprotokolle, Berichte und Social-Media-Pläne. Dort befinden sich Marken- und Textregeln (z. B. „keine Markennamen Dritter“, „lockerer Ton“, „keine leeren Superlative“), zusammen mit Design-Tokens, Moderationsregeln und rechtlichen Hinweisen (KI-Kennzeichnung). Diese Regeln überschreiben jede kreative Idee.
2. Die offizielle Website. Hero-Bereich, Dienstleistungen, Statistiken, Methode, Stack, Referenzen. Bei einer JS-lastigen Website verwende einen Browser und lese document.body.innerText abschnittsweise.
3. Onlineshops:
   • WooCommerce: /wp-json/wc/store/v1/products?per_page=100&page=N und /products/<id>. Preise sind in Cent. prices.price_range mit min ≠ max → „ab“; on_sale + regular_price → durchgestrichener Preis; attributes (Farben, Größen, Maße); description (oft mit strukturierten Aufzählungen); permalink.
   • Shopify: /products.json und /products/<handle>.json.
   • Errate niemals Slugs oder URLs: Lies sie aus permalink.
4. Websuche. Nützlich für Personen, aber gebräuchliche Namen liefern Namensvettern. Wenn das passiert, mache es zu Skriptmaterial (siehe Abschnitt 2), anstatt es zu verstecken.
5. Fotos: zuerst lokale Projektdateien. Cloud-Sandboxes können oft nicht aus dem Shop herunterladen; versuche es nicht immer wieder. Verwende entweder lokale Fotos oder zeichne das Produkt im Code (Streifen, Satinwellen und einfache Formen sehen besser aus, als man erwarten würde).

Notiere das Datum, an dem du die Daten gelesen hast: Preise werden veralten.

2. Konzept: der Gag

Ein Gag ist eine reale Eigenschaft des Produkts oder der Person, die in etwas umgewandelt wird, das das Video selbst tut. Es ist kein Witz, der einfach draufgesetzt wird. Beispielmechaniken, alle in den Vorlagen implementiert (Gag-IDs sind im Code auf Spanisch):

Mechanik	Reale Eigenschaft	Was das Video tut
invisible	Transparent, versteckt, dezent	Ein leerer Rahmen: „Hier ist eine Hülle. Kannst du sie nicht sehen? Natürlich nicht, sie ist transparent.“ Der Bildschirm öffnet sich dann wie ein Reißverschluss.
contador (Zähler)	Eine große Menge (Meter, Stunden, Einheiten)	„Dieser Beitrag dauert 15 s. Diese Rolle, 50 m. Du wirst keine Zeit haben, sie aufzubrauchen.“ Ein Zähler läuft.
diagonal	Schrägschnitt, Streifen oder ein diagonales Design	Der Text kippt um 45° und Streifen kreuzen den Bildschirm.
brillo (Glanz)	Glänzendes oder satiniertes Finish	„Dieser Text ist matt. / Dieser glänzt.“ (mit einem Glanz)
cortar (Schneiden)	Keine Schnürsenkel, keine Kabel, keine Bänder	Zwei Fäden halten den Text hoch, werden durchgeschnitten und der Text bleibt stehen.
elevar (Anheben)	Plattform, Push-up, Höhe	Der Text steigt auf einem „Kissen“ auf.
secuencia (Sequenz)	Viele Größen, Breiten oder Varianten	Die echten Varianten wechseln nacheinander: „Hier, von E bis H.“
quitar (Entfernen)	„Ohne X“	Zwei Ringe werden gezeichnet und fliegen weg: „Weg.“
ritmo (Rhythmus)	Sport, Bewegung	Wörter landen im Takt.
reordenar (Neu anordnen)	Multifunktional, umwandelbar	Zwei Zeilen wechseln die Position: parallel, gekreuzt, V-Form.
patron (Muster)	Stickerei, Druck, Spitze	Ein dekoratives Muster zeichnet sich selbst.
calma (Ruhe)	Sensible Kategorien (Gesundheit, nach OP, Mutterschutz…)	Kein Gag, keine Soundeffekte, keine Perkussion: ein ruhiger Ton.
homonimos (Namensvetter, Person)	Ein gebräuchlicher Name bei Google	investigar("Name") zeigt die Namensvetter mit „NICHT SIE“ durchgestrichen, dann „QUELLE GEFUNDEN“.

Regeln:

1. Eine echte, überprüfbare Eigenschaft.
2. Drei Zeilen: Aufbau, Wendung, Pointe (die Pointe kursiv oder in der Akzentfarbe).
3. Die Pointe darf nicht falsch sein. Wenn die Produktseite es nicht sagt, behaupte es nicht. Bedingte Phrasen (si/sino in der Konfiguration) erlauben es, dass eine Pointe nur erscheint, wenn die Beschreibung sie stützt.
4. Ein festes selbstreferenzielles Element im gesamten Video, das mit der Branche verbunden ist: ein HUD mit Zeitcode und Bildzähler (Technik), eine Nahtlinie mit Stichzähler (Handwerk, Textilien), ein Maßband, das den „Beitrag misst“ (Mode, Größen). Zahle es im Outro aus („Dieser Beitrag misst 15,5 s. Eine Größe für alle.“).
5. Mache niemals Witze über Körper. Sensible Kategorien verwenden calma. Überprüfe auch, dass keine abstrakte Zeichnung als Körperumriss gelesen werden könnte.
6. Keine leeren Superlative, keine Vergleiche mit Mitbewerbern.

3. Struktur

9:16 Produkt (15,5 s bei 30 fps = 465 Einzelbilder)

Szene	Zeit	Inhalt
Aufhänger	0–3,0	Der Gag
Produkt	3,0–5,6/5,8	Name + Foto mit einem Bounce (oder einer prozeduralen Zeichnung, oder einer Platzhalterkarte)
Range	~2,8 s	Echte Anzahl Farben, oder Range (Größen), Varianten und Farben mit ihren Namen
Fakten	~2,6 s	Drei Fakten von der Produktseite, mit animierten Häkchen
Preis	~1,8 s	Echter Preis, „ab“ oder Sale, Steuerhinweis falls zutreffend
Outro	13,2–15,5	Logo oder Marke, Website in einer Kapsel, Versand oder CTA, und der abschließende Augenzwinker

16:9 Person oder Marke (27 s): Terminal → Namensvetter mit einem Glitch durchgestrichen → Drop (Quelle gefunden + Überschrift) → Statistiken mit Zählern → Methode in Phasen → Tool-Stack-Laufband (bleibt auf einem selbstreferenziellen Element stehen: „↑ das bin ich“) → „DIESES VIDEO: 0 Vorlagen · N Zeilen Code“ (echte Anzahl) → Zitat der Person → Outro mit Monogramm, Namen und CTA.

4. Engine

<Projekt>/<Reels-Ordner>/
├── METODO.md        Methode, Regeln und Checkliste (für Menschen)
├── CLAUDE.md        Status und Aufgaben (für die nächste Sitzung)
├── config.json      (Katalog) Shop, Attribute, Labels, Palette und Kategorien → Gag + Phrasen
├── productos.json   Marke + ein Block pro Produkt
├── motor.html       1080×1920 oder 1920×1080 Canvas; window.renderFrame(f) ist DETERMINISTISCH
├── render.js        puppeteer-core → ein JPEG pro Einzelbild → ffmpeg image2pipe; dann Audio und Mux
├── audio.py         numpy/scipy Synthese unter Verwendung derselben Cue-Tabelle wie motor.html
├── catalogo.js      (Katalog) API → Produktblatt: Gag, Phrasen, Fakten, Markenbereinigung
├── extraer.js       (Katalog) lädt Katalog und Fotos mit einem Browser-UA und Pausen herunter; REVISAR.md
├── fonts/           lokale woff2 + deren Lizenz (fontsource: `npm pack @fontsource/<Familie>@<Version>`)
├── img/             lokale Fotos
└── out/             fertige Videos

Technische Schlüsselpunkte:

• Determinismus: Jedes Einzelbild wird aus t = f/FPS berechnet. Kein requestAnimationFrame, keine ungeseedete Zufälligkeit (verwende hash(n)).
• Hilfsfunktionen: clamp, P(t,a,b) (Fortschritt), Easing-Funktionen (eOC, eIOC, eOX, eIX, eOB mit Bounce), T_() für Text mit Buchstabenabstand und Alpha, fit() zum Verkleinern von Text, bis er passt, rr() für abgerundete Rechtecke.
• Szenen sind Funktionen, die die lokale Zeit u = t - T.scene erhalten. Übergänge sind ±0,16 s Hintergrundfarben-Wipe bei jedem Schnitt.
• render.js: page.evaluateOnNewDocument(spec => window.SPEC = spec), warte auf window.READY (Schriftarten und Bilder geladen), dann canvas.toDataURL('image/jpeg', .93) → stdin von ffmpeg -f image2pipe -c:v mjpeg -i - -c:v libx264 -preset veryfast -crf 18 -pix_fmt yuv420p.
  • Starte Chrome mit --allow-file-access-from-files; sonst „verschmutzen“ lokale Bilder die Canvas.
  • Suche nach Chrome oder Edge in deren Standardpfaden oder in CHROME_PATH.
  • Behalte einen --stills t1,t2,…-Modus zur Überprüfung bei.
• Mux: -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -movflags +faststart -shortest.
• Audio: Eine 4-Akkord-Progression passend zum Ton der Marke (Technik: 128 BPM mit Kick, Bass und Pluck; Handwerk: 112 BPM Pizzicato und Marimba; elegant: 96 BPM Klavier und Streicher).
  • Pro-Gag-Effekte: Reißverschluss = ein beschleunigter Klick-Burst; Maschine = ein Klick-Zug + Summen; Schere = zwei Schnappgeräusche; Glanz = ein hohes Arpeggio.
  • Geteilte Effekte: Whoosh bei Schnitten, Ticks bei Zählern, Glockenspiel beim Preis.
  • Leichtes Sidechain unter dem Kick, tanh zum Begrenzen, dann normalisieren.
• Unter Windows rufen die Skripte python auf; unter Linux und macOS python3.

5. Katalogdaten ohne etwas zu erfinden (catalogo.js + config.json)

• Anzeigename: Der Produktname ohne marcas_a_quitar (zu entfernende Marken, falls die Textregeln es erfordern) und ohne palabras_tipo (generische Typwörter wie „Sneaker“ oder „Stiefel“). Wenn nur ein Code übrig bleibt, verwende den Namen ohne die Marke.
• Fakten: Die Aufzählungspunkte unter titulo_datos in der Beschreibung, ohne Zusammensetzung. Wenn es keine gibt, nimm Phrasen aus der Kurzbeschreibung, aufgeteilt an „.“ und „:“. Die dritte Tatsache ist die Zusammensetzung aus dem Materialattribut, wobei Akronyme wie EVA beibehalten werden.
• Kürzen: Kürze Phrasen auf ~54 Zeichen. Schneide zuerst an einem Komma; ansonsten vor dem letzten Nebensatz („mit“, „für“, „das“, „und“). Beende niemals mit einer Präposition oder einem Artikel.
• Farben: Name → Hex-Tabelle in motor.html. Zweifarbige Farben („Schwarz/Weiß“) erhalten ein geteiltes Farbmuster. Unbekannte Farben werden mit neutralem Grau und ihrem echten Namen dargestellt.
• Manuelle Bearbeitungen: "manual": true bei einem Produkt schützt es vor Überschreiben bei der nächsten Extraktion.
• REVISAR.md (Überprüfungsliste): sensibler Ton, Seiten ohne Aufzählungen, Produkte ohne Foto oder Attribute.
• Teste die Transformation gegen den echten Katalog, indem du die Funktion in der Browserkonsole des Shops einfügst, bevor du dem Extraktor vertraust. Wenn der Downloadschritt nicht getestet werden konnte, teile dies mit.

6. Qualitätskontrolle (vor der Auslieferung obligatorisch)

1. Rendere Standbilder für jede Szene, erstelle ein Kontaktblatt mit PIL (nicht xstack mit vielen Eingaben: ffmpeg kann abstürzen) und schaue es dir an. Überprüfe auf:
   • überlappenden Text oder abgeschnittene Phrasen;
   • Akzente auf großen Überschriften, die mit der Zeile darüber kollidieren;
   • Elemente, die in eine andere Zeile eindringen;
   • Buchstaben, die unter einem zu hellen Glanz verschwinden;
   • leere „—“-Blöcke, wenn ein Attribut fehlt;
   • leere untere Hälften im Hochformat.
2. 9:16-Sicherheitszonen: nichts Wichtiges oberhalb von ~250 px (Reels-UI) oder in den letzten ~320 px (Untertitel). Nur das dekorative Element geht dort hinunter.
3. Daten: heutige Preise, „ab“ bei einer Preisspanne, Sonderangebote, die ablaufen können, unbestätigte Einheiten (markiere sie), überprüfte URLs.
4. Rechtliches und Moderation:
   • Fotos mit KI-generierten oder KI-modifizierten Personen → ein sichtbares Label im Video (EU AI Act, Art. 50; ia.mostrar_si_foto in der Konfiguration). Gib es auch bei der Veröffentlichung an.
   • Produkte, die am Körper gezeigt werden: vollständiges Foto, Katalogstil, keine aggressiven Ausschnitte, wenig Bildschirmzeit.
   • Versprich niemals Rückgaben oder Garantien, die nicht gelten.
5. Audio: ffmpeg -af ebur128 → etwa −14 LUFS. Überprüfe Dauer und Auflösung mit ffprobe.

7. Auslieferung

• Wenn du auf dem Rechner des Benutzers arbeitest, schreibe alles in einen Unterordner seines Projekts und behalte die Zeilenumbrüche aller Dateien bei, die du bearbeitest. Berühre keine vorhandenen CLAUDE.md-Dateien oder Dokumente: erstelle deine eigenen im Unterordner.
• METODO.md: Was vorhanden ist, wie man es ausführt, woher jedes Datenstück stammt, angewandte Markenregeln, wie man ein Produkt oder einen Gag hinzufügt, eine Checkliste vor der Veröffentlichung und bekannte Grenzen.
• CLAUDE.md des Unterordners: Status, Aufgaben und nicht verhandelbare Regeln, in wenigen Zeilen.
• Zeige die Videos und fasse zusammen: die Gags (einer pro Zeile), wo alles lebt, der Befehl zum Neuerstellen und alle noch zu bestätigenden Daten.

Häufige Fehler (vermeide sie)

• Erraten von Produkt-Slugs. Lies sie aus permalink.
• Ein rotierter Text-Gag, der über die folgenden Zeilen läuft: Positioniere die Zeilen neu, wenn sich der Text dreht.
• Ein zu heller Satinglanz frisst Buchstaben. Verwende einen hellen Markenton, nicht reines Weiß.
• Farbverlaufsmuster, deren Farbstopps zusammenfallen, hinterlassen diagonale Streifen. Verwende stattdessen eine separate, beschnittene Glanzschicht.
• Ein durchgestrichener Preis bei einem Produkt mit einer Preisspanne: Verwende „ab“ + einen Sale-Badge, ohne Durchstreichung.
• Fehlende Einheiten auf der Produktseite (z. B. Maße ohne „cm“): Lasse sie weg oder markiere sie zur Bestätigung.
• Abstrakte Formen, die zusammen einen Körperumriss andeuten: Ersetze sie durch eindeutige Figuren.