Vidéo de démo produit, étape 2 : montage SaaS 20–45 s calé sur l

Vidéo de Démonstration SaaS

Workflow complet pour produire une vidéo produit SaaS calée sur le rythme dans Remotion. Couvre les films cinématiques silencieux, les démos horizontales calées sur le rythme, les reels verticaux, et les films avec calques d'images de couverture en collage.

Le skill est exigeant sur trois choses : assets, ambiance visuelle, rythme. En sauter un, vous obtenez un générique animé générique de style Canva, comme toutes les autres démos SaaS. La discipline fait la différence.

Ce sont des fortes recommandations plutôt que des règles absolues. La plupart des productions les suivent ; certaines les enfreinent délibérément (par exemple, les films avec voix-off où le calage sur le rythme entrerait en conflit avec la VO). Quand vous enfreignez une règle, faites-le en connaissance de cause.

---

Prérequis

Avant de commencer, vérifiez que ces éléments sont en place. Le premier est vraiment requis ; les autres sont de fortes recommandations avec des solutions de repli documentées.

1. Remotion installé (requis). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. Voir references/project-scaffold.md pour le package.json / tsconfig.json / remotion.config.ts minimal exact - ne lancez jamais npx create-video dans un dépôt git existant (il bloque sur une invite fléchée).

2. Plugin Super Powers (fortement recommandé, pas obligatoire). Quand il est disponible, ce skill orchestre superpowers:using-superpowers, superpowers:brainstorming (avec compagnon visuel), superpowers:writing-plans, et superpowers:subagent-driven-development. Ils vous donnent des maquettes HTML dans le navigateur pour les décisions de mise en page, des documents de plan formels, et la boucle d'implémenteur + relecteur.

   Si Super Powers n'est pas installé, le skill fonctionne quand même - le workflow devient plus conversationnel et un peu plus lent. Le brainstorming devient un dialogue en ligne (pas de compagnon navigateur) ; les plans sont écrits directement dans le chat ; les scènes sont implémentées en ligne plutôt que par des sous-agents dispatchés. Les trois piliers (assets / ambiance visuelle / rythme) ainsi que les images de couverture, l'UI schématique, le positionnement des clics, le style d'écriture et les scripts dans scripts/ fonctionnent tous pareil. Ne déclinez pas le travail à cause d'un plugin manquant - adaptez-vous et continuez.

3. Python 3 + librosa disponibles. La détection des beats lance scripts/detect-beats.py qui importe librosa. Si ce n'est pas installé, lancez pip install --break-system-packages librosa numpy soundfile et prévenez l'utilisateur - ne le faites pas en silence.

4. Pour l'analyse de vidéo de référence (Pilier 2) : le skill supporte trois chemins par ordre de priorité. Utilisez le plus élevé qui soit disponible - voir references/reference-video-vibe.md pour la logique de détection complète.

   1. gemini CLI dans le PATH (CLI Google officielle, ou wrappers communautaires comme gemini-yt). Lancez avec l'invite + l'URL YouTube comme arguments.
   2. GEMINI_API_KEY définie dans l'environnement ou .env. Utilisez le wrapper curl du skill à scripts/analyze-reference-video.sh.
   3. Aucun des deux ci-dessus - revenez au copier-coller manuel dans Google AI Studio. Pas idéal mais toujours fonctionnel ; la qualité est comparable.

Exécutez references/prereq-check.md comme première action dans une nouvelle session.

---

Les trois piliers

Ce sont les activités à fort impact. En sauter un pour "gagner du temps" coûte presque toujours plus de temps par la suite.

Pilier 1 - Collecte des assets

Avant toute chose, exécutez le questionnaire structuré dans assets/prompt-templates/asset-intake-questionnaire.md. Il demande :

• Format d'image (16:9 horizontal, 9:16 vertical, ou les deux en parallèle - voir references/vertical-port.md si les deux)
• Durée en secondes (recommandé 20-45s)
• Logo - SVG de préférence. Si PNG uniquement, capturez les dimensions natives pour éviter la pixelisation lors de l'agrandissement.
• Couleurs hexadécimales de la marque (accent principal + 3 à 6 pastels de support)
• Police de caractères (toutes doivent être sur Google Fonts)
• Texte / script - privilégiez un brouillon fourni par l'utilisateur plutôt que d'en générer un. S'il n'a pas de script, voir references/script-development.md.
• Voix-off (optionnelle)
• Fichier audio - requis pour le calage sur le rythme. Si l'utilisateur n'en a pas, choisissez-en un libre de droits.

Consultez references/asset-intake.md pour le flux de collecte complet, y compris l'ensemble minimum viable avec des assets partiels, les bonnes pratiques de nommage lors de la copie, et la vérification de pixelisation liée au redimensionnement.

Pilier 2 - Ambiance visuelle par vidéo de référence

Avant d'écrire les scènes, demandez à l'utilisateur 2 à 3 vidéos YouTube de référence dont il souhaite s'inspirer. Ensuite, produisez une analyse de réalisateur pour chacune.

Deux chemins possibles (voir references/reference-video-vibe.md) :

• Automatisé (préféré quand disponible) - si l'utilisateur a une GEMINI_API_KEY définie, lancez scripts/analyze-reference-video.sh <youtube-url> <slug> pour chaque vidéo. Utilise Gemini Pro Preview via curl. Prend ~30s par vidéo. Les résultats sont placés dans references/gemini-<slug>.md.
• Manuel (fonctionne toujours) - ouvrez aistudio.google.com, collez l'invite de scripts/reference-video-prompt.md avec l'URL YouTube, copiez le résultat dans un fichier. Pas idéal mais produit un résultat tout aussi utilisable. Utilisez ceci quand l'API n'est pas disponible.

Le vocabulaire des verbes de mise en scène (push-through, whip-pan, V-cut pull-back, ink-mask, match-cut zoom) est la sortie la plus précieuse - elle vous donne des primitives de mouvement spécifiques autour desquelles construire.

Pilier 3 - Calage sur le rythme de la bande-son

Les limites de scène doivent tomber sur des snares (la sensation de "coup de batterie" rhétorique). Les événements internes (clics, atterrissages de cartes, démarrages de compteurs) doivent tomber soit sur des kicks, soit sur des snares dans la scène.

Le pipeline :

1. Lancez scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Produit le BPM, l'image du premier kick, les timestamps des snares + les images.
2. Ingérez dans un objet unique de constantes de timing (voir assets/code-templates/theme-v2.ts). Chaque scène <Sequence from={...} durationInFrames={...}> en tire ses valeurs.
3. Après la Phase 6 (scènes construites), lancez scripts/align-internal-events.py contre beats.json + une liste d'événements intra-scène pour les déplacer sur les beats les plus proches dans une marge de ±6 images. C'est l'itération au deuxième plus fort impact après le rendu initial - le public ressent les événements internes décalés comme "un rythme parfois faux" sans pouvoir dire pourquoi.
4. Utilisez les helpers isSnare(n) / isKick(n) pour les assertions en mode développement.
5. Lancez scripts/check-typing-budget.py sur tout TypedText/TypedChars pour vérifier que ça tient dans la durée de la scène. Coupe le texte qui dépasse avant la diffusion.

Mathématiques complètes, helpers, alignement des événements internes et vérification du budget de frappe dans references/beat-sync.md.

---

Capacités adjacentes - quand les bases ne suffisent pas

Celles-ci couvrent des situations au-delà de la démo SaaS standard "tout motion-graphics, avec juste des captures d'écran". Lisez la référence correspondante quand la situation de l'utilisateur le nécessite.

Développement de script - quand l'utilisateur n'a pas de script

La plupart des utilisateurs arrivent avec une idée vague de produit, pas un écran par écran fini. references/script-development.md décrit un flux de dialogue structuré qui produit un plan en 4 actes + un écran par écran verrouillé + une page de référence avec le texte verrouillé, prêt à alimenter le document de spécification.

Intégration d'images de couverture - quand le film utilise des plans réels ou du collage

Si l'utilisateur a des séquences d'archives, des clips de collage, ou toute vidéo qu'il souhaite utiliser comme calque d'arrière-plan, utilisez references/b-roll-integration.md et le modèle BRollLayer. Les images de couverture peuvent être un arrière-plan pleine opacité ou une texture de faible opacité ; la primitive gère le rognage, les fondus, les modes de fusion et le timing correct en images par seconde.

(Les versions précédentes de ce skill recommandaient d'envoyer le travail avec des plans réels vers Premiere/DaVinci. C'est une erreur quand les images de couverture sont utilisées comme calque sous des graphiques animés - Remotion gère cela très bien et garder la production dans un seul outil est un gain de productivité.)

Fidélité de l'UI schématique - quand le produit n'a pas d'interface réelle à enregistrer

Si le produit est une extension Chrome, une API, ou en phase de démarrage et qu'il n'y a pas d'interface réelle à capturer, references/schematic-ui-fidelity.md explique comment inventer des UI schématiques qui semblent soignées sans enfreindre les plateformes réelles (LinkedIn, Gmail, Slack). Trois motifs de référence : carte de profil, composeur d'email, panneau API - modèles de code dans assets/code-templates/Schematic*.tsx.

Positionnement des clics - le problème de friction numéro 1

Les clics du curseur qui manquent les boutons est la plainte la plus courante des utilisateurs dans les productions. references/click-positioning.md couvre trois approches (refs, constantes de position calculée, superposition de débogage) - choisissez-en une dès le départ. Le coût d'une erreur ici est de multiples cycles de rendu complets par scène.

Style d'écriture - gardez les artefacts d'IA hors du texte visible

Les tirets cadratins, les guillemets courbes et certaines formulations crient "généré par IA". references/writing-style.md est le guide de style par défaut avec une vérification grep avant rendu qui les détecte. Si l'utilisateur a son propre guide de voix de marque, préférez celui-ci.

---

Séquence idéale

Le flux complet de bout en bout. Voir references/ideal-sequence.md pour la version annotée avec les justifications.

1. Rassemblez les entrées d'abord, écrivez le code en dernier. Exécutez le questionnaire de collecte des assets.
2. Développez le script si l'utilisateur n'en a pas - references/script-development.md.
3. Produisez les analyses des vidéos de référence - automatisé via scripts/analyze-reference-video.sh ou manuel via AI Studio.
4. Détectez les beats et écrivez l'objet de constantes de timing. scripts/detect-beats.py → theme-v2.ts. Chaque début de scène dérive des beats.
5. Scaffoldez Remotion manuellement. package.json / tsconfig.json / remotion.config.ts minimal. Ne lancez jamais npx create-video dans un dépôt git.
6. Enregistrez les compositions de débogage par scène dans Root.tsx. Accélération essentielle. Naviguer dans une scène de 5 secondes est 30 fois plus rapide que la composition maître complète.
7. Chargez toutes les polices au niveau supérieur de Root.tsx avec subsets: ["latin"].
8. Utilisez des traits d'union dans les IDs de composition (v2-Scene06, jamais v2_Scene06).
9. Invoquez superpowers:brainstorming avec compagnon visuel pour les décisions de style/mise en page. Les maquettes HTML surpassent le texte à chaque fois.
10. Écrivez le document de spécification. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Incluez une section sur la fidélité de l'UI schématique si nécessaire.
11. Relisez la spécification vous-même, puis faites-la approuver par l'utilisateur. Pas de code avant le feu vert.
12. Invoquez superpowers:writing-plans. Vérification des bonnes pratiques du modèle de plan avant d'envoyer (voir references/project-scaffold.md).
13. Construisez d'abord les primitives d'animation (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack si nécessaire). Ensuite les cartes d'UI schématiques. Puis les scènes. Puis la composition maître.
14. Invoquez superpowers:subagent-driven-development. Limitez les lots de sous-agents à 3-4 fichiers par envoi - des lots plus grands peuvent manquer de contexte en cours de tâche. Voir references/iteration-playbook.md.
15. Faites un rendu test de la scène 1 seule. Établissez le style. Obtenez l'approbation de l'utilisateur avant la suite.
16. Itérez par vagues. Limitez chaque vague à 5-8 corrections. Exécutez le passage d'alignement des événements internes une fois après le rendu de base - ce seul passage resserre sensiblement le rythme.
17. Faites le rendu maître en qualité publication. --crf=14 --image-format=png (HD) ou --crf=15 --image-format=png --scale=2 (4K). Voir references/render-export.md.
18. Vérifiez ponctuellement par rapport à la carte des beats à 0,5x de vitesse.

---

Index des références

Le répertoire references/ contient la profondeur. Chargez seulement ce dont vous avez besoin pour la phase en cours.

• ideal-sequence.md - le flux annoté complet, avec justifications
• prereq-check.md - quoi vérifier avant de commencer
• asset-intake.md - flux de collecte complet, solution de repli pour assets partiels, vérification de redimensionnement, bonnes pratiques de nommage
• script-development.md - méthodologie écran par écran quand l'utilisateur n'a pas de script
• reference-video-vibe.md - protocole d'analyse Gemini (chemins API / CLI / AI Studio)
• beat-sync.md - mathématiques de la grille de beats, règle des limites de scène, alignement des événements internes, vérification du budget de frappe
• project-scaffold.md - configuration minimale Remotion, checklist de commit, bonnes pratiques des modèles de plan, essentiels du .gitignore
• animation-patterns.md - TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, plus extensions
• b-roll-integration.md - motifs BRollLayer, traitements d'opacité/mode de fusion, performances de rendu
• schematic-ui-fidelity.md - conception d'UI factices qui semblent soignées
• click-positioning.md - trois approches pour que les clics du curseur atterrissent sur les bonnes cibles
• writing-style.md - tirets cadratins et autres artefacts d'IA à éviter dans le texte à l'écran
• cursor-math.md - décalage du point chaud, points clés, transformation du rapport d'échelle
• iteration-playbook.md - structure des vagues, relectures par lots, regroupement des sous-agents, redémarrages avec rechargement à chaud dans Studio
• render-export.md - commandes de rendu HD/4K, justification du CRF
• gotchas.md - underscores dans les IDs de composition, avertissements de polices, chargement des italiques, piège de l'échelle de MaskReveal
• vertical-port.md - discipline de portage de reel 9:16

Assets

• assets/prompt-templates/ - modèles à remplir pour la collecte des assets, documents de spécification, feuilles de beats
• assets/code-templates/ - composants éprouvés (constantes de thème, easings, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)

Scripts

• scripts/detect-beats.py - suivi des beats basé sur librosa. Produit BPM, premier kick, images snare/kick à la fréquence cible.
• scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - wrapper Gemini Pro pour les analyses de mise en scène YouTube.
• scripts/align-internal-events.py - aligne sur le rythme les événements intra-scène dans une marge de ±tolerance images.
• scripts/check-typing-budget.py - vérifie que TypedText/TypedChars tient dans la durée de la scène avant le rendu.

---

Quand le skill ne doit PAS être utilisé

• Itération profonde sur un projet Remotion existant. Si l'utilisateur a plus de 20 commits dans un film et demande des ajustements de vague N+1, ne relancez pas la collecte. Chargez references/iteration-playbook.md et references/beat-sync.md et allez-y.
• Démos non SaaS. Résumé d'événement, montage de témoignages, tutoriel en capture d'écran - les motifs de calage sur le rythme + cartes d'UI produit ne s'appliquent pas correctement.
• Séquences documentaires ou d'interviews comme sujet. Ce skill traite les images de couverture comme un calque sous les graphiques animés. Si les plans réels sont le sujet du film (interviews, déballage, visites guidées), utilisez un éditeur non linéaire comme Premiere, DaVinci, ou un autre outil approprié.