Remotion Video Pro
Umfang
Diese Fertigkeit umfasst alles, was zur programmatischen Videoproduktion mit Remotion benötigt wird:
- Projekterstellung und Kompositionsarchitektur
- Frame-basierte Animationsmathematik (interpolate, spring, measureSpring)
- Temporales Design (Safe Areas, Hook Windows, Timing)
- Audio-Synchronisation (Voiceover, Untertitel, Beat-Erkennung)
- Visuelles Designsystem (Typografie, Farbe, Bewegungsprinzipien)
- Performance-Optimierung (Memoization, OffthreadVideo, Bundle-Größe)
- Rendering-Pipelines (Lambda, CloudRun, CI/CD)
- Webhook-gesteuerte Datenvideos (CRM → Queue → Lambda → S3)
- Stapelrendering in großem Maßstab (10.000+ personalisierte Videos)
- Kompositionsvalidierung (Pre-Commit-Hooks, CI-Gates)
Kurzreferenz
| Problem | Laderegel |
|---|---|
| Projekteinrichtung, Zod-Schemas, Kompositionsstruktur | 01-scaffolding.md |
| interpolate, spring, Übergänge, Timing | 02-animation-physics.md |
| Mobile Safe Areas, Frame-Timing, responsives Layout | 03-temporal-design.md |
| Voiceover-Sync, Untertitel, Beat-Erkennung, Spektrum | 04-audio-sync.md |
| Typografie, Farbe, verbotene Muster, Bewegungsprinzipien | 05-anti-slop-aesthetics.md |
| Langsame Renderings, Memoization, Bundle-Größe, Lambda | 06-performance.md |
| Fertige Prompts für Social Media, Demos, Erklärvideos | 07-prompt-templates.md |
| CI/CD, Lambda, CloudRun, Snapshot-Tests | 08-rendering-pipeline.md |
| CRM-Webhook → Lambda → S3 Pipeline | 09-webhook-integration.md |
| Stapelrendering Fan-Out, /api/render/batch | 10-batch-rendering.md |
| Pre-Commit-Hooks, CI-Gates, Kompositions-Linting | 11-validation-pipeline.md |
Goldene Regeln
- Frame ist König. Jede Animation leitet sich von
useCurrentFrame()ab. Keine CSS-Animationen, keine Timer. - Nur Determinsimus. Kein
Math.random(). Verwenderandom(seed)von Remotion. - Spring > Linear. Standardmäßig
spring()für Bewegungen verwenden. Linear wirkt roboterhaft. - OffthreadVideo für alle Eingangsvideos. Niemals
<Video>für MP4-Eingänge verwenden. - Asynchrone Daten müssen das Rendering steuern. Verwende
delayRender()/continueRender()für Schriftarten, Daten, externe Assets. - Zod für jede Komposition. Laufzeitvalidierung verhindert Rendering-Crashes durch ungültige Props.
- React.memo für jede Szene. Unnötige Neuberechnungen kosten Rechenzeit und Geld auf Lambda.
- Vor dem Commit validieren. Der Pre-Commit-Hook erfasst alle 7 Todsünden. Niemals deaktivieren.
- Vor dem Deployment testen. Die Test-Harness wird vor der Lambda-Site-Erstellung ausgeführt. Defekte Kompositionen erreichen nie Lambda.
- Video ist eine Datenbankzeile. Personalisierte Videos in großem Maßstab bedeuten, Renderings als Datenpipeline-Output zu betrachten.
- Anti-Slop oder gar nichts. Standard Inter, lila Verläufe und Emoji-Icons sind verboten. Punkt.
- Versioniere deine Kompositionen. Deploye v2, teste es, aktiviere es. Alte Webhooks rendern alte Versionen. Niemals die Produktion zerstören.
Entscheidungsbaum
Video erstellen?
├── Kurzform Social Media (TikTok/Reels) → Lade 03, 04, 05, 07
├── Produktdemo / Erklärvideo → Lade 02, 03, 04, 05
├── Personalisiert in großem Maßstab → Lade 06, 08, 09, 10
├── CI/CD Pipeline → Lade 08, 11
└── Nur Grundlagen benötigt → Lade 01, 02, 06, 11