moizibnyousaf/marketing-cli

/marketing-demo — Produkt-Demo-Rekorder

Produkt-Demos für das Marketing aufnehmen. Zwei Produktionspfade: schnell (ply + ffmpeg) für grobe Demos, poliert (Remotion) für markenbezogene Marketing-Videos.

Lektüre

• brand/creative-kit.md — Farben, Schriften, Logopfade für markenbezogene Overlays
• brand/voice-profile.md — Tonrichtlinien für Textoverlays
• brand/stack.md — Verfügbare Tools (ply, ffmpeg, remotion)

Bei Aktivierung

1. brand/creative-kit.md auf Farben, Schriften, Logopfade lesen. Falls nicht vorhanden, nach Markenfarben und Logo fragen.
2. brand/voice-profile.md auf Tonrichtlinien für Textoverlays lesen. Falls nicht vorhanden, klaren/neutralen Ton verwenden.
3. brand/stack.md lesen, um verfügbare Tools zu bestätigen. Falls nicht vorhanden, Tools direkt erkennen.
4. Tool-Verfügbarkeit prüfen:

   command -v ply && echo "ply: bereit" || echo "ply: fehlt"
   command -v ffmpeg && echo "ffmpeg: bereit" || echo "ffmpeg: fehlt"
   command -v npx && echo "remotion: verfügbar" || echo "remotion: nicht verfügbar"
   

5. Wenn ply oder ffmpeg fehlt, warnen und Installation vorschlagen.

Shot-Dauer-Regeln

Demo-Typ	Dauer pro Shot	Anmerkungen
Schnellübersicht	0,5-1s	Schnelle Schnitte, Spannung aufbauen
Feature-Demo	2-3s	Zeit zum Lesen + Verstehen
Walkthrough	4-5s	Anleitendes Tempo
Social-Clip	1-2s	Aufmerksamkeitsstark, schnell

Demo-Storytelling-Prinzipien

Demos scheitern, wenn sie das Produkt mechanisch zeigen, statt eine Geschichte zu erzählen. Der Betrachter braucht einen Grund, weiterzusehen. Diese Prinzipien basieren auf dem, was auf Landing Pages und Social Media tatsächlich funktioniert:

1. Mit dem Ergebnis beginnen, nicht mit der Einrichtung. Die ersten 2 Sekunden entscheiden, ob jemand den Rest sieht. Zeige den „Nachher“-Zustand – das Dashboard mit Daten, das fertige Design, das Ergebnis. Einrichtung (Login, Ladebalken, Navigation) erhält null Aufmerksamkeit.
2. Ein Feature = eine Demo. Der Versuch, 5 Features in 30 Sekunden zu packen, macht alle vergesslich. Eine fokussierte Demo eines Features ist mehr wert als eine gehetzte Tour.
3. Zeige den magischen Moment. Jedes Produkt hat eine Interaktion, bei der Nutzer „oh wow“ sagen. Finde diesen Moment und baue die Demo darum herum – er ist der Grund, warum Leute auf „testen“ klicken.
4. Kontext mit Textoverlays hinzufügen. Social-Videos laufen automatisch und stumm. Ohne Text-Hinweise sehen Betrachter eine sich ändernde UI, ohne zu wissen, was passiert oder warum es wichtig ist. Jeder Shot braucht ein 3-6 Wörter langes Overlay, das den Wert erklärt.
5. Tempo: 2-3 Sekunden pro Konzept. Das fühlt sich schnell an, aber die Aufmerksamkeit der Betrachter ist gnadenlos. Wenn ein Shot keine neue Information liefert, schneide ihn.

Schritt 1: Demo-Typ bestimmen

Typ	Dauer	Auflösung	Format	Anwendungsfall
Helden-Demo	15-30s	1280x800	MP4	Landing Page „above-fold“
Feature-Highlight	5-15s	1280x800	GIF/MP4	Feature-Bereich, Doku
Kompletter Walkthrough	60-180s	1280x800	MP4	YouTube, Sales Deck
Social-Clip	5-15s	1080x1080	MP4	Instagram, Twitter/X
E-Mail-GIF	3-8s	600x400	GIF	E-Mail-Kampagnen
Anleitung	30-90s	1280x800	MP4	Hilfedokus, Onboarding

Den Benutzer nach dem Typ fragen oder aus dem Kontext ableiten.

Schritt 2: Shot-Liste planen

Vor der Aufnahme jeden Shot planen:

## Shot-Liste

1. [Aktion: Zur Landing Page navigieren]
   - URL: https://example.com
   - Warten: 1s für Ladezeit
   - Hervorheben: Hero-Bereich

2. [Aktion: „Get Started“-Button klicken]
   - Warten: Übergangsanimation
   - Hervorheben: Anmeldeformular

3. [Aktion: Demo-Daten eingeben]
   - Eingabe: [email protected]
   - Hervorheben: Erfolgszustand

Jeder Shot = ein ply-Screenshot oder eine Interaktionssequenz.

Schritt 3: Produktionsmodus wählen

Modus A: Schnelle Demo (ply + ffmpeg)

Schnelle, grobe Demos aus Screenshots zusammengesetzt.

Screenshots aufnehmen:

# Navigieren und jeden Shot screenshotten
ply navigate "https://example.com"
ply screenshot --output marketing/demos/shot-01.png
ply click "Get Started"
ply screenshot --output marketing/demos/shot-02.png

Mit ffmpeg zusammensetzen:

# MP4 aus Screenshots (2 Sekunden pro Bild)
ffmpeg -framerate 0.5 -i marketing/demos/shot-%02d.png \
  -c:v libx264 -pix_fmt yuv420p \
  -vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
  marketing/demos/demo.mp4

# Vorschau-GIF (niedrigere Qualität, kleinere Datei)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=10,scale=640:-1:flags=lanczos" \
  -c:v gif marketing/demos/demo-preview.gif

# E-Mail-GIF (600px breit, optimiert)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
  marketing/demos/demo-email.gif

# Quadratischer Zuschnitt für Social (1080x1080)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
  marketing/demos/demo-square.mp4

Modus B: Polierte Demo (Remotion)

Für Marketing-Assets mit Übergängen, Textoverlays, markenbezogenen Intros.

Remotion-Composition generieren:

# Initialisieren, falls nötig
npx remotion init marketing/demos/remotion-demo

# Endgültiges Video rendern
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
  --output marketing/demos/demo-polished.mp4

Composition-Struktur:

src/
├── index.tsx          # Wurzelcomposition
├── Intro.tsx          # Markenbezogenes Intro (Logo, Tagline)
├── DemoScene.tsx      # Screenshot mit Textoverlay
├── Transition.tsx     # Ein-/Ausblenden zwischen Szenen
└── Outro.tsx          # CTA + URL

Wichtige Remotion-Muster (siehe references/remotion-examples.md für vollständige Komponentencodes):

• <Img> für Screenshots verwenden, <AbsoluteFill> für Layout
• useCurrentFrame() + interpolate() für Animationen
• Markenfarben aus brand/creative-kit.md übernehmen
• 30fps für flüssige Wiedergabe, 1280x720 oder 1920x1080
• Textoverlays mit <Sequence> für Feature-Hervorhebungen hinzufügen

Intro-Szene (2-3s): Logo zentriert, Tagline blendet ein. Markenfarben als Hintergrundverlauf. Kurz halten – das Produkt ist der Star.

Demo-Szene (pro Shot): Screenshot füllt 80% des Rahmens. Textoverlay oben oder unten mit 1-zeiliger Feature-Hervorhebung. interpolate() für einen subtilen Zoom-In (1.0 → 1.05 über die Szenendauer) verwenden, um Leben hinzuzufügen.

Übergang zwischen Szenen: Einblenden + leichter Slide (200ms). Niemals ausgefallene Wipes verwenden – sie lenken vom Produkt ab.

Outro-Szene (3-4s): CTA-Text („Jetzt kostenlos testen auf [url]“), Logo und optional ein Social-Proof-Satz. Dies ist die einzige Slide, die verkauft – alle anderen Slides bleiben fokussiert auf das Zeigen.

Fehlerbehebung

ply-Fehler (Seite lädt nicht, Element nicht gefunden, Timeout): Zu Shot N+1 springen und den Fehler in der Shot-Liste dokumentieren. Nach Abschluss aller Shots die übersprungenen Shots erneut prüfen und einmal wiederholen. Wenn immer noch fehlschlagend, manuelle Screenshots als Fallback verwenden.

ffmpeg-Fehler (Codec nicht gefunden, Formatfehler): ffmpeg -codecs auf verfügbare Codecs prüfen. Wenn libx264 fehlt, -c:v h264 versuchen oder via brew install ffmpeg installieren. Bei GIF-Paletten-Problemen die Filterkette vereinfachen – split/palettegen/paletteuse weglassen und einfaches -vf "fps=10,scale=640:-1" verwenden.

Remotion-Fehler (Render-Abstürze, Composition-Fehler): Node-Version prüfen (node -v, benötigt 18+). Wenn npx remotion render fehlschlägt, npx remotion render --gl=angle oder --gl=swangle für GPU-Probleme versuchen. Bei Composition-Fehlern alle <Img>-src-Pfade überprüfen und sicherstellen, dass die Bilder existieren.

Schritt 4: Konvertieren & Ausgeben

Alle Ausgaben gehen nach marketing/demos/. Nach Typ benennen:

Ausgabe	Dateiname	Anmerkungen
MP4 (Desktop)	demo-hero.mp4	H.264, 1280x800
MP4 (Social)	demo-social-1080.mp4	Quadratisch, 1080x1080
GIF (Vorschau)	demo-preview.gif	640px breit, <5MB
GIF (E-Mail)	demo-email.gif	600px breit, <2MB
MP4 (poliert)	demo-polished.mp4	Remotion-Ausgabe

Schritt 5: Abschlusszusammenfassung

## Erstellte Demo-Assets

| Asset | Größe | Format | Empfohlene Verwendung |
|-------|-------|--------|----------------------|
| demo-hero.mp4 | 1.2MB | MP4 1280x800 | Landing Page Hero |
| demo-preview.gif | 3.4MB | GIF 640px | README, Doku |
| demo-email.gif | 1.1MB | GIF 600px | E-Mail-Kampagnen |
| demo-social-1080.mp4 | 800KB | MP4 1080x1080 | Instagram, X |

Alle Assets gespeichert unter `marketing/demos/`.

Viewport-Konfigurationen

Plattform	Breite	Höhe	Skalierung
Desktop	1280	800	1x
Desktop HD	1920	1080	1x
Mobil	390	844	2x
Instagram	1080	1080	1x
Twitter/X	1200	675	1x
E-Mail	600	400	1x

Anti-Patterns

Fehler	Warum es scheitert
Login-/Signup-Flows aufnehmen	Niemanden interessiert dein Auth-Bildschirm. Starte nach dem Login.
Lade-Spinner zeigen	Schneide sie raus oder springe zum geladenen Zustand. Spinner killen den Schwung.
Keine Textoverlays bei stumm startenden Videos	Social-Videos starten automatisch und stumm. Ohne Text haben Betrachter keine Ahnung, was sie sehen.
Demo länger als 60s ohne Kapitelunterbrechungen	Aufmerksamkeit sinkt nach 15s. Bei langen Demos klare Abschnittstitel einfügen.
Aufnehmen mit inkonsistenten Viewport-Größen	Shots, die zwischen Größen springen, wirken amateurhaft. Viewport vor Aufnahme festlegen.
Jedes Feature zeigen	Maximal 3-5 Features auswählen. Demos, die alles zeigen, verkaufen nichts.
Mauszeiger ziellos herumwandern	Jeden Klick planen. Der Cursor sollte zielgerichtet bewegt werden – gerade Linien zu Zielen.

Verwandte Fähigkeiten

• /creative — Anzeigenvisuals, Produktfotos (statische Assets, keine Demos)
• /content-atomizer — Demo in plattformspezifische Beiträge umwandeln
• /page-cro — Die Seite, die die Demo präsentiert, auditieren