SaaS Product Demo Video (Remotion)

SaaS-Produkt-Demo-Video

End-to-End-Workflow für die Erstellung eines beat-synchronisierten SaaS-Produktfilms mit Remotion. Deckt stille Kinofilme, beat-locked horizontale Demos, vertikale Reels und Filme mit Collage-B-Roll-Ebenen ab.

Die Skill ist in drei Dingen eigenwillig: Assets, Vibe, Beats. Wenn du auch nur eines auslässt, entsteht ein generischer Canva-artiger Bewegtgrafik-Reel, der wie jede andere SaaS-Demo aussieht. Die Disziplin macht den Unterschied.

Dies sind starke Empfehlungen, keine harten Regeln. Die meisten Produktionen folgen ihnen; einige brechen sie bewusst (z. B. bei voice-over-gesteuerten Filmen, bei denen Beat-Sync mit dem VO kollidieren würde). Wenn du eine Regel brichst, tue es wissentlich.

---

Voraussetzungen

Überprüfe vor dem Start, ob Folgendes vorhanden ist. Das Erste ist zwingend erforderlich; die anderen sind starke Empfehlungen mit dokumentierten Alternativen.

1. Remotion installiert (erforderlich). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. Die genaue minimale package.json / tsconfig.json / remotion.config.ts findest du in references/project-scaffold.md. Führe niemals npx create-video innerhalb eines bestehenden Git-Repositorys aus (es blockiert bei einer Pfeiltasten-Eingabeaufforderung).

2. Super Powers Plugin (stark empfohlen, nicht erforderlich). Wenn verfügbar, orchestriert dieser Skill superpowers:using-superpowers, superpowers:brainstorming (mit visuellem Begleiter), superpowers:writing-plans und superpowers:subagent-driven-development. Sie liefern HTML-Mockups im Browser für Layout-Entscheidungen, formelle Pläne und den Implementierer + Reviewer-Subagenten-Loop.

   Wenn Super Powers nicht installiert ist, funktioniert der Skill trotzdem – der Workflow wird etwas gesprächsorientierter und langsamer. Brainstorming wird zu Inline-Dialogen (ohne Browser-Begleiter); Pläne werden direkt im Chat geschrieben; Szenen werden inline implementiert statt über versendete Subagenten. Die drei Säulen (Assets / Vibe / Beats) plus B-Roll, schematisches UI, Klickpositionierung, Schreibstil und die Skripte in scripts/ funktionieren alle gleich. Lehne die Arbeit nicht wegen eines fehlenden Plugins ab – passe dich an und fahre fort.

3. Python 3 + librosa verfügbar. Die Beat-Erkennung führt scripts/detect-beats.py aus, das librosa importiert. Falls nicht installiert, führe pip install --break-system-packages librosa numpy soundfile aus und informiere den Benutzer – tue es nicht stillschweigend.

4. Für Referenzvideo-Analyse (Säule 2): Der Skill unterstützt drei Pfade in Prioritätsreihenfolge. Verwende den höchsten verfügbaren – siehe references/reference-video-vibe.md für die vollständige Erkennungslogik.

   1. gemini CLI im Pfad (offizielles Google CLI, oder Community-Wrapper wie gemini-yt). Ausführen mit dem Prompt + YouTube-URL als Argumente.
   2. GEMINI_API_KEY gesetzt in env oder .env. Verwende den curl-Wrapper des Skills unter scripts/analyze-reference-video.sh.
   3. Keines der oben genannten – zurückfallen auf manuelles Google AI Studio Copy-Paste. Unbequem, aber immer funktionsfähig; die Qualität ist vergleichbar.

Führe references/prereq-check.md als ersten Schritt in einer neuen Sitzung aus.

---

Die drei Säulen

Dies sind die Aktivitäten mit hohem Hebel. Eine auszulassen, um "Zeit zu sparen", kostet fast immer mehr Zeit im weiteren Verlauf.

Säule 1 – Asset-Intake-Onboarding

Führe vor allem anderen den strukturierten Fragebogen in assets/prompt-templates/asset-intake-questionnaire.md aus. Er fragt nach:

• Seitenverhältnis (16:9 horizontal, 9:16 vertikal, oder beide parallel – siehe references/vertical-port.md, falls beide)
• Dauer in Sekunden (20–45s empfohlen)
• Logo – SVG bevorzugt. Bei PNG-Only die nativen Abmessungen erfassen, um Pixelung beim Hochskalieren zu vermeiden.
• Marken-Hex-Farben (primärer Akzent + 3–6 unterstützende Pastelle)
• Schriftstapel (alle müssen auf Google Fonts verfügbar sein)
• Text / Skript – bevorzuge einen benutzergestellten Entwurf gegenüber einem generierten. Wenn der Benutzer kein Skript hat, siehe references/script-development.md.
• Voiceover (optional)
• Soundtrack-Datei – erforderlich für Beat-Sync. Wenn der Benutzer keine hat, wähle aus lizenzfreiem Stock.

Siehe references/asset-intake.md für den vollständigen Intake-Flow inklusive des minimalen Teilsatz-Assets, Namenshygiene bei Copy-Import und der Asset-Upscaling-Pixel-Prüfung.

Säule 2 – Referenzvideo-Vibe-Workflow

Bevor du Szenen schreibst, frage den Benutzer nach 2–3 YouTube-Referenzvideos, deren Vibe er haben möchte. Erstelle dann für jedes eine Director's Breakdown.

Zwei unterstützte Pfade (siehe references/reference-video-vibe.md):

• Automatisiert (bevorzugt, wenn verfügbar) – wenn der Benutzer einen GEMINI_API_KEY gesetzt hat, führe scripts/analyze-reference-video.sh <youtube-url> <slug> für jedes Video aus. Nutzt Gemini Pro Preview via curl. Dauert ~30s pro Video. Ausgabe landen in references/gemini-<slug>.md.
• Manuell (funktioniert immer) – Öffne aistudio.google.com, füge den Prompt aus scripts/reference-video-prompt.md zusammen mit der YouTube-URL ein, kopiere das Ergebnis zurück in eine Datei. Unbequem, aber liefert gleichwertig nutzbare Ausgabe. Verwende dies, wenn die API nicht verfügbar ist.

Das Vokabular der Regieverben (Push-Through, Whip-Pan, V-Cut Pull-Back, Ink-Mask, Match-Cut Zoom) ist die wichtigste Ausgabe – es liefert spezifische Bewegungsprimitive, um die herum du bauen kannst.

Säule 3 – Soundtrack-Beat-Sync

Szenengrenzen sollten auf Snares (dem rhetorischen "Drum-Hit"-Gefühl) landen. Interne Ereignisse (Klicks, Kartenplatzierungen, Zählerstarts) sollten entweder auf Kicks oder Snares innerhalb der Szene landen.

Die Pipeline:

1. Führe scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json aus. Liefert BPM, Frame des ersten Kicks, Snare-Timestamps + -Frames.
2. Integriere in ein einzelnes Timing-Konstanten-Objekt (siehe assets/code-templates/theme-v2.ts). Jede Szene <Sequence from={...} durationInFrames={...}> bezieht sich darauf.
3. Führe nach Phase 6 (erstellte Szenen) scripts/align-internal-events.py gegen beats.json + eine Liste von szeneninternen Ereignissen aus, um sie auf die nächsten Beats innerhalb von ±6 Frames zu verschieben. Dies ist die Iteration mit dem zweithöchsten Hebel nach dem ersten Render – das Publikum fühlt nicht-beat-genaue interne Ereignisse als "Rhythmus manchmal daneben", ohne sagen zu können, warum.
4. Verwende isSnare(n) / isKick(n) Helfer, um im Dev-Modus zu überprüfen.
5. Führe scripts/check-typing-budget.py gegen jedes TypedText/TypedChars aus, um zu überprüfen, dass es in die Szenendauer passt. Schneidet Off-Screen-Tippen ab, bevor es ausgeliefert wird.

Vollständige Mathematik, Helfer, interne Ereignisausrichtung und die Tipp-Budget-Prüfung in references/beat-sync.md.

---

Angrenzende Fähigkeiten – wenn die Grundlagen nicht ausreichen

Diese decken Situationen jenseits der Standard-"All-Motion-Graphics, einfach Screenshot aufnehmen"-SaaS-Demo ab. Lies die entsprechende Referenz, wenn die Situation des Benutzers es erfordert.

Skriptentwicklung – wenn der Benutzer kein Skript hat

Die meisten Benutzer kommen mit einer vagen Produktidee, nicht mit einem fertigen Screen-by-Screen. references/script-development.md führt durch einen strukturierten Dialog-Flow, der eine 4-Akt-Gliederung + einen verriegelten Screen-by-Screen + eine verriegelte Copy-Referenzseite erzeugt, bereit zur Einspeisung in das Spezifikationsdokument.

B-Roll-Integration – wenn der Film Live-Action- oder Collage-Ebenen verwendet

Wenn der Benutzer Stock-Footage, Collage-Clips oder ein Video hat, das er als Hintergrundebene verwenden möchte, verwende references/b-roll-integration.md und die BRollLayer-Vorlage. B-Roll kann eine voll deckende Hintergrund- oder eine schwach deckende Textur sein; das Primitiv handhabt Trimmen, Einblendungen, Mischmodi und fps-korrekte Zeitsteuerung.

(Frühere Versionen dieses Skills empfahlen, Live-Action-Arbeiten an Premiere/DaVinci zu senden. Das ist falsch, wenn die B-Roll als Ebene unter Motion Graphics verwendet wird – Remotion handhabt dies gut und die Produktion in einem Tool zu halten, ist ein Produktivitätsgewinn.)

Schematische UI-Treue – wenn das Produkt keine echte UI zum Aufnehmen hat

Wenn das Produkt eine Chrome-Erweiterung, eine API oder in einer frühen Phase ist und es keine echte Produkt-UI zum Screenshotten gibt, deckt references/schematic-ui-fidelity.md ab, wie schematische UIs erfunden werden, die als poliert gelten, ohne echte Plattformen (LinkedIn, Gmail, Slack) zu verletzen. Drei Referenzmuster: Profilkarte, E-Mail-Composer, API-Panel – Codevorlagen in assets/code-templates/Schematic*.tsx.

Klickpositionierung – der #1 Iterations-Churn-Schmerzpunkt

Mausklicks, die Schaltflächen verfehlen, ist die häufigste Benutzerbeschwerde in Produktionen. references/click-positioning.md deckt drei Ansätze ab (Refs, berechnete Positionskonstanten, Debug-Overlay) – wähle einen im Voraus. Die Kosten, dies falsch zu machen, sind mehrere vollständige Neu-Render-Zyklen pro Szene.

Schreibstil – halte KI-Anzeichen aus benutzerseitigem Text fern

Gedankenstriche, geschweifte Anführungszeichen und bestimmte Formulierungs-Ticks schreien "KI-generiert." references/writing-style.md ist der Standard-Styleguide mit einem Pre-Render-grep-check, der diese erfasst. Wenn der Benutzer einen eigenen Brand-Voice-Guide hat, bevorzuge diesen.

---

Ideale Reihenfolge

Der vollständige End-to-End-Flow. Siehe references/ideal-sequence.md für die kommentierte Version mit Begründung.

1. Sammle zuerst Eingaben, schreibe Code zuletzt. Führe den Asset-Intake-Fragebogen aus.
2. Entwickle das Skript wenn der Benutzer keines hat – references/script-development.md.
3. Erstelle Referenzvideo-Breakdowns – automatisiert via scripts/analyze-reference-video.sh oder manuell via AI Studio.
4. Erkenne Beats und schreibe das Timing-Konstanten-Objekt. scripts/detect-beats.py → theme-v2.ts. Jeder Szenenstart leitet sich von Beats ab.
5. Richte Remotion manuell ein. Minimale package.json / tsconfig.json / remotion.config.ts. Niemals npx create-video innerhalb eines Git-Repos.
6. Registriere szenenweise Debug-Kompositionen in Root.tsx. Wesentliche Beschleunigung. Das Durchkämmen einer 5-Sekunden-Szene ist 30x schneller als der vollständige Master.
7. Lade jede Schriftart auf Root.tsx-Ebene mit subsets: ["latin"].
8. Verwende Bindestriche in Kompositions-IDs (v2-Scene06, niemals v2_Scene06).
9. Rufe superpowers:brainstorming mit visuellem Begleiter für Stil-/Layout-Entscheidungen auf. HTML-Mockups schlagen Prosa jedes Mal.
10. Schreibe das Spezifikationsdokument. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Füge einen Abschnitt zur schematischen UI-Treue ein, falls erforderlich.
11. Überprüfe das Spezifikationsdokument selbst, dann lässt der Benutzer es genehmigen. Kein Code bis zur grünen Ampel.
12. Rufe superpowers:writing-plans auf. Plan-Vorlagen-Hygiene-Check vor dem Versenden (siehe references/project-scaffold.md).
13. Baue zuerst Animationsprimitiva (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack nach Bedarf). Dann schematische UI-Karten. Dann Szenen. Dann Master.
14. Rufe superpowers:subagent-driven-development auf. Begrenze Subagenten-Batches auf 3–4 Dateien pro Versand – größere Batches laufen manchmal mitten in der Aufgabe aus dem Kontext. Siehe references/iteration-playbook.md.
15. Rendere Szene 1 einzeln als Spot. Etabliere den Stil. Hol dir die Zustimmung des Benutzers, bevor es weitergeht.
16. Iteriere in Wellen. Begrenze jede Welle auf 5–8 Korrekturen. Führe den internen Ereignisausrichtungspass einmal nach dem Basis-Render durch – dieser einzelne Pass strafft den Rhythmus merklich.
17. Master-Render in Veröffentlichungsqualität. --crf=14 --image-format=png (HD) oder --crf=15 --image-format=png --scale=2 (4K). Siehe references/render-export.md.
18. Überprüfe gegen die Beat-Karte bei 0,5x Geschwindigkeit.

---

Referenzindex

Das Verzeichnis references/ enthält die Tiefe. Lade nur das, was du für die aktuelle Phase benötigst.

• ideal-sequence.md – der vollständige kommentierte Flow mit Begründung
• prereq-check.md – was vor dem Start zu überprüfen ist
• asset-intake.md – vollständiger Intake-Flow, Teilsatz-Asset-Fallback, Asset-Upscaling-Prüfung, Namenshygiene