Ein Produktdemo-Video klingt einfach. Produkt zeigen, fertig. In der Praxis: 17 Videos produziert, eine Woche verbraten, und am Ende waren alle unbrauchbar.
Das hier ist die ehrliche Retrospektive — was schiefgelaufen ist, wie wir den Durchbruch gefunden haben, und was wir beim nächsten Mal sofort anders machen würden.
Das Setup
- Produkt: AgencyFlow CRM (React 18 + Supabase + Tailwind)
- Video-Engine: Remotion 4.0 — programmatische Videos in React
- TTS: Voxtral 4B von Mistral, lokal via MLX
- Ziel: Demo-Videos, die sich bei Produktänderungen neu rendern lassen
Phase 1: "Einfach die UI nachbauen" — Der naive Ansatz
Was wir gemacht haben: Remotion-Projekt im CRM-Repo erstellt, eigene React-Komponenten gebaut, die das CRM imitieren sollten — Sidebar, Metric Cards, Tabellen, Charts.
Was passiert ist: 17 Videos produziert. 6 Demo-Varianten, 5 "Banger Concepts", 6 Workflow Stories. Keine einzige hat gut ausgesehen.
Das nachgebastelte UI sah immer wie eine Fälschung aus. Mehr Varianten eines schlechten Ansatzes ergeben mehr schlechte Videos.
Lektion: Nachgebaute UI wirkt immer "falsch". Mehr Iterationen helfen nicht.
Phase 2: Tailwind-Klassen studieren — Iteration Hell
Was wir gemacht haben: Den echten CRM-Quellcode analysiert — exakte Tailwind-Klassen, Tabellen-Header (bg-slate-800/50 text-xs uppercase tracking-wider), Status-Badge-Styles, das PDF-Layout aus pdfGeneratorV2.js.
Was passiert ist: Näher dran, aber mit stark abnehmendem Ertrag. Jeder Fix deckte einen neuen Mismatch auf. 80% Genauigkeit war das Maximum.
Dann: Kamera-Zoom auf Aktionsbereiche (1,6x), damit die UI den Frame füllt. Hat die Lesbarkeit verbessert, aber das Kernproblem nicht gelöst.
Lektion: Zoom hilft, ersetzt aber keine echte Genauigkeit.
Phase 3: Echte Komponenten importieren — Webpack Mocking
Was wir gemacht haben: Remotion's Webpack konfiguriert, um CRM-Imports abzufangen und durch Mocks zu ersetzen:
NormalModuleReplacementPluginfürsupabaseClient,AuthContext, Service-Dateien- React Query Cache mit Demo-Daten vorbelegt
delayRenderfür lazy-geladene Charts
Was passiert ist: Die echte DashboardPage.js renderte in Remotion — pixel-perfect, weil es die reale Komponente ist. Revenue-Chart, Metric-Cards, alles.
// Webpack-Config in remotion.config.ts config.overrideWebpackConfig((currentConfig) => { currentConfig.plugins?.push( new NormalModuleReplacementPlugin( /supabaseClient/, path.resolve(__dirname, 'mocks/supabaseClient.js') ) ) return currentConfig })
Lektion: Das funktioniert — aber jede neue Service-Abhängigkeit braucht einen eigenen Mock. Gut als Fundament, zu langsam für schnelle Iteration.
Phase 4: Wie machen das die Profis? — Der Durchbruch
Das war der Game Changer.
Was wir gemacht haben: 10 Videos vom Anthropic YouTube-Kanal heruntergeladen, mit yt-dlp + ffmpeg alle 0,5 Sekunden einen Frame extrahiert, und dann analysiert, welche visuellen Muster sich wiederholen.
yt-dlp https://youtube.com/@anthropic -x --format mp4 -o "%(title)s.%(ext)s" ffmpeg -i video.mp4 -vf fps=2 frames/frame_%04d.jpg
Was wir gefunden haben — Anthropics Design-System:
| Element | Detail |
|---|---|
| Hintergrund | Warmes Beige — kein Dark Mode |
| Typografie | Serif-Font für Hooks |
| Device Frames | Floating Phone + Browser mit weichem Shadow |
| Transitionen | Nur Fades — keine Slides, keine Zooms |
| Cursor | Kein Cursor sichtbar |
| Labels | Keine Feature-Labels |
| Text | Tippt sich selbst ein, Content scrollt im Device |
| Abschluss | Logo-Endcard |
Lektion: Die besten Produktvideos zeigen nicht die ganze App. Sie zeigen fokussierte Momente in sauberen Device-Frames auf neutralem Hintergrund.
Phase 5: Ihr Stil, unsere Identität
Was wir gemacht haben: Erst eine Anthropic-ähnliche Demo gebaut — Beige-Hintergrund, Serif-Font, Floating Frames.
Problem: Sah aus wie Claude, nicht wie AgencyFlow.
Fix: Auf das CRM-eigene Design-System gewechselt:
| Anthropic | AgencyFlow |
|---|---|
Warmes Beige (#f5f0e8) | Cinematic Dark (#0c1222) |
| Serif-Font | Inter |
| Neutrale Akzente | Blue/Purple Gradient |
| Light UI | Dunkle CRM-Oberfläche |
Lektion: Layout und Struktur von den Besten borgen — aber die eigene Identität behalten.
Die Fehlversuche — zur Dokumentation
Bevor das finale Video entstand, sah es so aus:
Phase 6: Die finale Formel — Effortless Storytelling
Keine Feature-Labels. Keine erklärenden Texte. Nur: Formular füllt sich aus → grünes Häkchen. Kanban-Karte zieht sich rüber → landet in "Erledigt".
Die 8 Szenen der finalen 30-Sekunden-Demo:
- "Papierkram?" — ein Wort, groß, auf dunklem Hintergrund
- Formularfelder tippen sich ein: Name, Kontakt, E-Mail → "Kunde angelegt ✓"
- Services mit Preisen einblenden → Summe berechnet → "Angebot senden"
- Grüne Notification "Angenommen!" → Pfeil → Rechnungskarte erscheint
- Kanban-Karte zieht von "In Arbeit" nach "Erledigt"
- Timer 02:34:13 läuft, roter Puls-Punkt
- Revenue-Counter steigt auf € 127.450, Chart zeichnet sich
- Logo + "Kostenlos testen →"
Lektion: Nicht Features erklären — den Workflow zeigen. Das Gehirn des Zuschauers füllt den Wert selbst aus.
Phase 7: Lokaler TTS — Voxtral 4B
Was wir gemacht haben: Mistrals Voxtral 4B TTS-Modell lokal auf dem Mac via MLX laufen lassen (mlx-community/Voxtral-4B-TTS-2603-mlx-4bit).
Der Iterations-Prozess:
| Versuch | Problem | Ergebnis |
|---|---|---|
casual_male auf Deutsch | Englisches Voice-Preset — klingt wie Muttersprache Englisch | ✗ |
cheerful_female | Gleiches Problem | ✗ |
| Alle 7 Stimmen getestet | de_male und de_female sind die einzigen nativen deutschen Stimmen | — |
de_female festgelegt | Klingt natürlich | ✓ |
| Szenen-weise Clips | Klingt gehackt und roboterhaft | ✗ |
| Eine durchgehende Narration | Flüssiger, natürlicher Flow | ✓ |
Finale Parameter:
temperature=0.4, top_k=30, top_p=0.9
Lektion: Sprachspezifisches Voice-Preset nutzen (nicht generisch). Als eine durchgehende Aufnahme generieren, nicht in Stücken. Und: Das Skript VORHER schreiben — Copy-Qualität schlägt Voice-Qualität.
Phase 8: Alles zusammenfügen — Der Feinschliff
Was wir gemacht haben: Voiceover-Länge gemessen (29,36 Sekunden), Video von 35s auf 30s getrimmt, Szenen-Dauern angepasst, um auf Audio-Beats zu treffen, Hook-Text auf Narration abgestimmt ("Papierkram?" statt "Noch Excel-Tabellen?").
Lektion: Audio bestimmt das Timing. Zuerst Audio rendern, dann Visuals anpassen.
Der komplette Tech-Stack
| Layer | Tool | Zweck |
|---|---|---|
| Video-Engine | Remotion 4.0.443 | React → MP4 |
| Styling | Tailwind CSS | CRM-Design matchen |
| Font | @remotion/google-fonts (Inter) | Brand-Konsistenz |
| Transitionen | @remotion/transitions (nur Fade) | Szenenwechsel |
| Animation | spring() + interpolate() | Alle Bewegungen |
| TTS | Voxtral 4B via mlx-audio | Lokaler Voiceover |
| Copywriting | Claude Code copy-editing skill | Script-Iteration |
| Video-Analyse | yt-dlp + ffmpeg | Konkurrenz-Deconstruction |
| CI/CD | Remotion CLI | npx remotion render CleanDemo |
Key Remotion Patterns
// Floating Browser Frame <Browser delay={5} url="agencyflow.at/clients/new"> {/* CRM-Inhalt */} </Browser> // Tipp-Animation (kein Cursor) <Type text="Alpine Lodge Resort GmbH" start={15} speed={0.9} /> // Spring-Eingang (Premium Float) spring({ frame, fps, delay, config: { damping: 28, stiffness: 60 } }) // Durchgehender Voiceover <Audio src={staticFile('voiceover/vb-storytelling.wav')} volume={0.9} />
Was wir beim nächsten Mal sofort anders machen
- Mit Video-Analyse starten — 5-10 Best-in-Class-Videos studieren, BEVOR auch nur eine Zeile Code geschrieben wird
- Audio zuerst — Voiceover-Skript schreiben und generieren, dann Visuals dazu bauen
- Ein Video, 8 Iterationen — statt 17 Varianten eines mittelmäßigen Ansatzes
- UI nicht nachbauen — entweder echte Komponenten per Webpack-Mocking oder Floating Device Frames mit vereinfachtem Inhalt
- Copy schlägt Animation — "Papierkram?" war effektiver als 500 Zeilen Spring-Animation-Code
Bonus: Square-Version für Social Media
Aus dem gleichen Remotion-Projekt lässt sich mit einer Auflösungsänderung eine 1:1-Version für Instagram und LinkedIn rendern. Hier die 25s-Square-Variante — damit bin ich eigentlich ganz zufrieden:
Ehrlich gesagt: Ich bin noch nicht zufrieden
Das finale Video funktioniert — aber es ist noch kein "Wow". Das Szenen-Timing stimmt, der Voiceover sitzt, die Design-Sprache ist konsistent. Aber es fehlt noch der letzte Funke: die eine Szene, bei der man wirklich aufhört zu scrollen.
Das ist Work in Progress. Ich iteriere weiter — nächste Schritte sind ein besserer Einstieg-Hook, schärfere Micro-Animationen und eine zweite Voiceover-Version mit einem anderen Skript-Ansatz.
Das hier ist also kein "so geht's perfekt" Post. Es ist ein ehrlicher Zwischenstand.
Fazit
Programmatische Videos mit Remotion sind mächtig — aber der Workflow ist nicht intuitiv. Der größte Zeitverlust war nicht die Technik, sondern die fehlende Strategie am Anfang.
Der Durchbruch kam nicht durch besseres Coding. Er kam durch das Analysieren von Videos, die nachweislich funktionieren, und das Verstehen, warum sie funktionieren.
Das Ergebnis ist ein Video, das wir jederzeit neu rendern können, wenn sich das Produkt ändert. Keine Neu-Shootings, kein Videoschneider — einfach npx remotion render und fertig.
Du willst programmatische Demo-Videos für dein Produkt bauen? Ich helfe beim Setup — von Remotion über TTS bis zur automatisierten Render-Pipeline. Lass uns sprechen →
