hup-dev/promo-animation-skill

Produkt-Animation

Du produzierst eine fertige MP4-Animation für das Produkt des aktuellen Code-Repositories. Das Skill ist eine deterministische Animations-Engine + Methodik, kein starres Format – du entscheidest das Muster, das zum Wunsch des Benutzers passt (eine Chat-Demo, ein Brand-Intro, eine Statistik-Enthüllung, ein Workflow-Walkthrough, Vorher/Nachher usw.).

Was bei jedem Muster gleich bleibt:

• Echte Marken-Assets, die aus dem Repository geholt werden (Logo-SVG, Design-Tokens, Schriften).
• Lineares/Vercel/Stripe-Niveau an visueller Raffinesse (weiche Schatten, echte Typografie, einzelner Heldmoment).
• Deterministische __setTime(t)-Zeitleiste, damit Playwright bei jedem Rendern perfekte Frames aufnimmt.
• Spezifischer, namentlicher Inhalt, wo immer die Animation eine Behauptung aufstellt – keine allgemeinen „KI spart Geld“-Texte.

Die vollständige Referenz für das Funktionieren ist methodology.md – lies sie, bevor du irgendetwas anderes tust. Konkrete Details zu visuellem Stil, Timing, Kameramathematik, ffmpeg-Flags und den 10 Fallstricken, die Erstversuche heimsuchen.

Ausgabeziel

Standard: 1920×1080 @ 30fps, H.264 mit optionaler Musik + 1s Abblende am Ende. Länge abhängig vom Muster:

• Brand-Intro / Logo-Enthüllung: 5–8s
• Statistik-Enthüllung: 6–10s
• Produkt-Promo (Chat-Stil oder anders): 15–22s
• Workflow-Walkthrough: 20–40s

Bestätige Länge und Seitenverhältnis mit dem Benutzer, falls sie nicht angegeben wurden. Standard ist 16:9 1920×1080, es sei denn, der Benutzer wünscht Social/Vertikal.

Wenn zwei Schnitte sinnvoll sind (z. B. statische Kamera + kinematografische Kamera), liefere beide aus.

Preflight-Check

Überprüfe vor allem, ob die Umgebung dies unterstützt:

which ffmpeg && ffmpeg -version | head -1
which node && node --version
ls ~/Library/Caches/ms-playwright/ 2>/dev/null | head -3   # macOS playwright cache

Wenn Playwright Chromium nicht zwischengespeichert ist, führe npx playwright install chromium aus. ffmpeg wird benötigt.

Erstelle den Arbeitsbereich:

mkdir -p product-animation/frames
cd product-animation

Die 4-Phasen-Pipeline

Führe die Phasen 1–3 parallel als Subagenten (unabhängige Arbeit) aus, bevor du mit Phase 4 beginnst.

Phase 1 – Marken- & Asset-Erkundung (Subagent)

Starte den Brand-Extraktor mit dem Prompt in agents/01-brand-extractor.md. Übergib ihm:

• Den Root-Pfad des Repositories
• Ein paar Hinweise, was das Produkt tut

Er gibt ein JSON zurück mit: echtem Logo-SVG-Pfad, exakten Hex-Tokens, Schriftart-Stack, Held-UI-Konventionen (border-radius, padding, Primär-Button-Stil), Produktname + Slogan.

Kopiere das echte Wortmarken-SVG in den Arbeitsbereich (z. B. <produkt>-wordmark.svg). Verwende Inline-Marken-Assets, keine Rastergrafiken.

Phase 2 – Konzept + Drehbuch (Subagent)

Starte den Skriptschreiber mit dem Prompt in agents/02-script-writer.md. Übergib ihm die Markenzusammenfassung aus Phase 1, was das Produkt tut und welche Art von Animation der Benutzer wünscht (Promo, Brand-Intro, Statistik-Enthüllung usw.).

Er gibt zurück:

• Animationsmuster, das für dieses Produkt ausgewählt wurde (z. B. „chat-demo“, „stat-reveal“, „brand-intro“)
• Storyboard mit Szenen-Timings: Cold Open → Hauptinhalt → Outro
• Die genauen Texte/Zahlen/Visuals, die in jeder Szene gezeigt werden sollen

Wenn das Muster chat-demo ist, ist die Vorlage in templates/chat-demo.html ein vollständiger, funktionierender Startpunkt – fülle die Datenstruktur CASES.BIGGEST mit dem Inhalt des Drehbuchs. Für andere Muster erstelle das HTML von Grund auf mit der Animations-Engine, die in methodology.md § 2 beschrieben ist – gleicher __setTime(t)-Treiber, gleiches Easing-Toolkit, gleiche Playwright-Erfassung.

Phase 3 – Inhaltsrecherche (Subagent)

Starte den Fall-Rechercheur mit dem Prompt in agents/03-case-researcher.md. Übergib ihm die Produktdomäne und das Animationsmuster.

Was er zurückgibt, hängt vom Muster ab:

• Chat-Demo / Promo: EIN kanonisches, namentliches, dramatisches Vorher/Nachher mit echten Zahlen (der „Converse Chuck Taylor-Moment“ für die Domäne) + 3-4 sekundäre Fälle.
• Statistik-Enthüllung: EINE große öffentliche Metrik, die das Produkt glaubwürdig besitzen kann, mit Zitat.
• Brand-Intro / Logo-Enthüllung: die tatsächliche Schlagzeile des Unternehmens, echte Kundenzahl, echte Gründungsgeschichte – alles Verifizierbare, das auf den Bildschirm kann.
• Workflow-Walkthrough: die häufigste echte Benutzerreise, benannte Schritte aus dem Produkt selbst.

Spezifisch, namentlich, verifizierbar, wo immer die Animation eine Behauptung aufstellt.

Phase 4 – Bau & Rendern

Kombiniere die Ergebnisse in der gewählten HTML-Vorlage (oder einer eigenständig geschriebenen), rendere Frames mit Playwright, enkodiere mit ffmpeg.

Bauphase

Der Bau unterscheidet sich leicht pro Muster. Die gemeinsame Form:

1. Kopiere oder schreibe das Animations-HTML.

   • Wenn der Skriptschreiber chat-demo ausgewählt hat, kopiere templates/chat-demo.html in den Arbeitsbereich und bearbeite das Datenobjekt CASES.BIGGEST mit dem Inhalt aus Phase-2-Skript + Phase-3-Recherche. Tausche auch die Brand :root { --tokens }, Kopfzeilentext („Atlas Trade“, „Intelligence“, Badge), URL-Leiste, Wortmarken <img src> und Logo-Outro-Slogan + CTA aus.
   • Für andere Muster (Brand-Intro, Statistik-Enthüllung, Walkthrough, Vorher/Nachher) schreibe das HTML von Grund auf mit der Animations-Engine – methodology.md § 2 zeigt das deterministische Timeline-Muster. Verwende die Design-Regeln aus reference/design-rules.md, die Kameramathematik aus reference/camera-modes.md und denselben Playwright-Render-Vertrag.

2. Kopiere ein Render-Skript. Für chat-demo verwende templates/render-chat-demo.js (525 Frames, ~17,5s) oder render-chat-demo-zoom.js (585 Frames, ~19,5s, kinematografische Kamera). Für benutzerdefinierte Muster kopiere eines der Render-Skripte und aktualisiere die Konstante DURATION – der Rest funktioniert unverändert.

3. Überprüfe zuerst im Browser. Öffne das HTML direkt – die Animation läuft automatisch in einer Schleife. Überfliege jede Szene. 5 Minuten im Browser sparen 3 Minuten Renderzeit pro Iteration.

4. Smoke-Render – 6–8 Keyframes an Szenengrenzen, bevor du dich auf das vollständige Rendern festlegst. Siehe scripts/smoke.js für das Muster. Erkennt Layout-Überlappungen, Schriftarten-Fallback und außerhalb des Bildschirms liegende Elemente in 30s.

Render-Phase

Installiere Playwright im Arbeitsbereich:

npm install [email protected] --no-save --no-audit --no-fund --silent

Rendere die Frames:

node render-<muster>.js          # schreibt frames/f_*.png  (~3-5 Frames pro Sekunde Dauer × FPS)

Enkodiere mit ffmpeg. Passe -t an die Dauer deiner Animation an und afade=t=out:st=X, um die Abblende 1s vor dem Ende zu platzieren:

ffmpeg -y -framerate 30 -i frames/f_%05d.png \
  -i /pfad/zu/musik.mp3 \
  -c:v libx264 -pix_fmt yuv420p -crf 18 -preset medium -movflags +faststart \
  -c:a aac -b:a 192k -af "afade=t=out:st=<DAUER-1>:d=1.0" \
  -t <DAUER> -shortest animation.mp4

yuv420p wird für die Wiedergabe auf Slack/LinkedIn/Twitter benötigt. +faststart ermöglicht Streaming. crf 18 ist nahezu visuell verlustfrei.

Wenn kein Audio bereitgestellt wird, lasse -i music.mp3, -c:a aac -b:a 192k und -af-Flags weg. scripts/encode.sh kapselt dies mit sinnvollen Standardwerten.

Qualitätskontrolle – lies dies, bevor du die Arbeit als erledigt erklärst

Allgemein (jedes Muster):

• Echte Marken-Wortmarke inline (SVG <img>, nicht Inter Tight fett als Logo stilisiert).
• Alle Farben stammen aus den Tokens des Produkts – niemals erfundene Hex-Werte.
• Animation bezieht sich auf das Code-Repository – seine UI, Schriftarten, Ausdrucksweise sind erkennbar.
• Einziger Heldmoment. Eine Zahl, eine Enthüllung, ein CTA – nicht 12 konkurrierende Brennpunkte.
• Jede Zahl, die hochzählt, verwendet tabular-nums (kein horizontales Zittern).
• Animationen landen – kein Element erscheint im genau selben Moment, in dem ein anderes ausblendet; respektiere Eintritts-/Austrittsfenster.
• Logo hält am Ende lange genug (≥ 3s für markierte Outros).
• MP4 wird in QuickTime abgespielt, exakt die Zielauflösung × fps, Dateigröße angemessen (typisch 1–6 MB).
• Öffne die MP4 mit open <name>.mp4 für den Benutzer.

Für chat-demo spezifisch, zusätzliche Prüfungen (siehe reference/design-rules.md):

• Held-$-Zahl ist JetBrains Mono / Gewicht 800 / 6 Ziffern oder mehr.
• Toolchain hat ~8 Chips, Tempo ~3s – alles kürzere wirkt unecht.
• Benutzerblase erscheint NACHDEM die Leiste verschwunden ist, niemals gleichzeitig.
• Denkblase schiebt sich vor dem Einblenden des Ergebnisses nach oben und aus dem Bild – niemals beide gleichzeitig sichtbar.
• Cursor erscheint nur während des Tippens, niemals auf dem Platzhalter.

Räume auf, bevor du die Arbeit als erledigt erklärst:

rm -rf frames frames-zoom node_modules package.json package-lock.json smoke_*.png

Der endgültige Arbeitsbereich sollte enthalten: das HTML, Render-Skript(e), Wortmarken-SVG und die fertige(n) MP4-Datei(en).

Dateizuordnung

~/.claude/skills/promo-animation/
├── SKILL.md                  ← du bist hier
├── methodology.md            ← tiefgehende Referenz, ZUERST LESEN – die universelle Animations-Engine
├── agents/
│   ├── 01-brand-extractor.md   ← Phase-1-Subagent-Prompt
│   ├── 02-script-writer.md     ← Phase-2-Subagent-Prompt
│   └── 03-case-researcher.md   ← Phase-3-Subagent-Prompt
├── templates/
│   ├── chat-demo.html              ← kanonisches Chat-Demo-Muster (funktionierendes Beispiel)
│   ├── render-chat-demo.js         ← Playwright-Renderer im statischen Modus
│   ├── render-chat-demo-zoom.js    ← Renderer im Zoom-Modus
│   └── atlas-wordmark.svg          ← Platzhalter-SVG
├── scripts/
│   ├── smoke.js                ← Keyframe-Smoke-Test
│   └── encode.sh               ← ffmpeg-Wrapper
└── reference/
    ├── design-rules.md         ← visuelle Regeln komprimiert
    ├── camera-modes.md         ← Entscheidung statisch vs. Zoom
    └── timing-blueprint.md     ← Szenen-Timings

Wenn du unsicher bist, lies templates/chat-demo.html – es ist ein vollständiges, funktionierendes Beispiel, das du sofort rendern kannst (ein fiktives „Atlas Trade“ / Converse Chuck Taylor-ReKlassifikationsszenario). Es ist die kanonische Referenz für das Chat-Demo-Muster UND die deterministische Animations-Engine – jede visuelle Regel, jede Timing-Entscheidung und jeder Fallstrick aus methodology.md ist in dieser Datei kodiert.

Für andere Animationsmuster schreibst du das HTML von Grund auf – aber die Animations-Engine (§ 2 von methodology.md), der Rendervetrag (§ 5) und die Designregeln (reference/design-rules.md) übertragen sich unverändert.