Remotion Video Pro
Portée
Cette compétence possède tout ce qui est nécessaire pour produire des vidéos programmatiques avec Remotion :
- Scaffolding de projet et architecture des compositions
- Mathématiques d'animation basées sur les images (interpolate, spring, measureSpring)
- Conception temporelle (zones de sécurité, fenêtres de hook, timing)
- Synchronisation audio (voix off, sous-titres, détection de rythme)
- Système de design visuel (typographie, couleur, principes de mouvement)
- Optimisation des performances (memoization, OffthreadVideo, taille du bundle)
- Pipelines de rendu (Lambda, CloudRun, CI/CD)
- Vidéo de données pilotée par webhook (CRM → queue → Lambda → S3)
- Rendu par lots à grande échelle (10 000+ vidéos personnalisées)
- Validation des compositions (hooks pre-commit, portes CI)
Référence rapide
| Problème | Règle de chargement |
|---|---|
| Configuration du projet, schémas Zod, structure Composition | 01-scaffolding.md |
| interpolate, spring, transitions, timing | 02-animation-physics.md |
| Zones de sécurité mobiles, timing d'image, mise en page réactive | 03-temporal-design.md |
| Synchronisation voix off, sous-titres, détection de rythme, spectre | 04-audio-sync.md |
| Typographie, couleur, motifs interdits, principes de mouvement | 05-anti-slop-aesthetics.md |
| Rendu lent, memoization, taille du bundle, Lambda | 06-performance.md |
| Prompts prêts à l'emploi pour réseaux sociaux, démo, explicatif | 07-prompt-templates.md |
| CI/CD, Lambda, CloudRun, tests de capture d'écran | 08-rendering-pipeline.md |
| Pipeline webhook CRM → Lambda → S3 | 09-webhook-integration.md |
| Diffusion de rendu en masse, /api/render/batch | 10-batch-rendering.md |
| Hooks pre-commit, portes CI, linting de composition | 11-validation-pipeline.md |
Règles d'or
- L'Image est Reine. Chaque animation dérive de
useCurrentFrame(). Pas d'animations CSS, pas de minuteurs. - Déterminisme Seulement. Pas de
Math.random(). Utilisezrandom(seed)de Remotion. - Spring > Linéaire. Par défaut, utilisez
spring()pour le mouvement. Le linéaire semble robotique. - OffthreadVideo pour Toute Vidéo d'Entrée. N'utilisez jamais
<Video>pour les entrées MP4. - Les Données Asynchrones Doivent Bloquer le Rendu. Utilisez
delayRender()/continueRender()pour les polices, données, ressources externes. - Zod pour Chaque Composition. La validation à l'exécution empêche les crashes de rendu dus à de mauvaises props.
- React.memo pour Chaque Scène. Les ré-rendus inutiles coûtent du temps de rendu et de l'argent sur Lambda.
- Valider Avant de Commiter. Le hook pre-commit attrape tous les 7 péchés capitaux. Ne le désactivez jamais.
- Tester Avant de Déployer. Le harnais de test s'exécute avant la création du site Lambda. Les compositions cassées n'atteignent jamais Lambda.
- La Vidéo est une Ligne de Base de Données. La vidéo personnalisée à grande échelle signifie traiter les rendus comme la sortie d'un pipeline de données.
- Anti-Slop ou Rien. Inter par défaut, dégradés violets et icônes emoji sont interdits. Point final.
- Versionnez Vos Compositions. Déployez v2, testez-la, activez-la. Les anciens webhooks rendent les anciennes versions. Ne cassez jamais la production.
Arbre de décision
Construire une vidéo ?
├── Format court social (TikTok/Reels) → Charger 03, 04, 05, 07
├── Démo produit / explicatif → Charger 02, 03, 04, 05
├── Personnalisée à grande échelle → Charger 06, 08, 09, 10
├── Pipeline CI/CD → Charger 08, 11
└── Juste les bases → Charger 01, 02, 06, 11