Démo produit SaaS (Remotion)

Vidéo de démonstration SaaS

Workflow de bout en bout pour produire un film SaaS synchronisé sur le rythme dans Remotion. Couvre les films cinématographiques silencieux, les démos horizontales verrouillées sur le rythme, les reels verticaux et les films avec des couches de b-roll en collage.

La compétence est directive sur trois éléments : assets, vibe, beats. Omettre l'un d'eux produit un motion graphique générique façon Canva qui ressemble à toutes les autres démos SaaS. La discipline fait toute la différence.

Ce sont des recommandations fortes plutôt que des règles strictes. La plupart des productions les suivent ; certaines les enfreignent délibérément (ex. films avec voix off où la synchronisation rythmique entrerait en conflit avec la VO). Lorsque 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 véritablement requis ; les autres sont des recommandations fortes avec des solutions de repli documentées.

1. Remotion installé (obligatoire). @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 - n'exécutez jamais npx create-video dans un dépôt git existant (cela bloque sur une invite avec les flèches).

2. Plugin Super Powers (fortement recommandé, pas obligatoire). Lorsqu'il est disponible, cette compétence orchestre superpowers:using-superpowers, superpowers:brainstorming (avec un compagnon visuel), superpowers:writing-plans et superpowers:subagent-driven-development. Ils vous fournissent 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 + réviseur sous-agent.

   Si superpowers n'est pas installé, la compétence fonctionne toujours - 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 / vibe / beats) plus le b-roll, l'interface utilisateur schématique, le positionnement des clics, le style d'écriture et les scripts dans scripts/ fonctionnent tous de la même manière. Ne refusez pas le travail à cause d'un plugin manquant - adaptez-vous et continuez.

3. Python 3 + librosa disponibles. La détection de rythme exécute scripts/detect-beats.py qui importe librosa. Si ce n'est pas installé, exécutez pip install --break-system-packages librosa numpy soundfile et informez l'utilisateur - ne le faites pas en silence.

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

   1. gemini CLI dans PATH (CLI officielle Google, ou wrappers communautaires comme gemini-yt). Exécutez avec l'invite + l'URL YouTube comme arguments.
   2. GEMINI_API_KEY définie dans l'environnement ou .env. Utilisez le wrapper curl de la compétence à scripts/analyze-reference-video.sh.
   3. Aucun des deux - revenez au copier-coller manuel dans Google AI Studio. Gênant 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 - Intégration des assets

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

• Ratio d'aspect (16:9 horizontal, 9:16 vertical, ou les deux en parallèle - voir references/vertical-port.md si les deux)
• Durée en secondes (20 à 45 s recommandée)
• Logo - SVG de préférence. Si PNG uniquement, capturez les dimensions natives pour éviter la pixellisation lors de l'agrandissement.
• Couleurs hex de la marque (accent primaire + 3 à 6 pastels de soutien)
• Police de caractères (toutes doivent être sur Google Fonts)
• Copie / script - préférez un brouillon fourni par l'utilisateur plutôt que d'en générer un. S'ils n'ont pas de script, voir references/script-development.md.
• Voix off (optionnelle)
• Fichier de bande sonore - requis pour la synchronisation rythmique. Si l'utilisateur n'en a pas, choisissez-en un parmi les stocks libres de droits.

Consultez references/asset-intake.md pour le flux d'intégration complet, y compris l'ensemble minimal d'assets partiels, l'hygiène de nommage lors de la copie et la vérification de pixellisation lors de l'agrandissement des assets.

Pilier 2 - Workflow d'ambiance par vidéo de référence

Avant d'écrire les scènes, demandez à l'utilisateur 2 à 3 vidéos de référence YouTube dont il souhaite l'ambiance. Produisez ensuite un breakdown de réalisateur pour chacune.

Deux chemins pris en charge (voir references/reference-video-vibe.md) :

• Automatisé (préféré lorsqu'il est disponible) - si l'utilisateur a défini une GEMINI_API_KEY, exécutez scripts/analyze-reference-video.sh <youtube-url> <slug> pour chaque vidéo. Utilise Gemini Pro Preview via curl. Prend environ 30 s par vidéo. Les résultats sont placés dans references/gemini-<slug>.md.
• Manuel (toujours fonctionnel) - ouvrez aistudio.google.com, collez l'invite de scripts/reference-video-prompt.md avec l'URL YouTube, copiez le résultat dans un fichier. Gênant mais produit une sortie tout aussi utilisable. Utilisez ceci lorsque 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 le résultat le plus porteur - il vous donne des primitives de mouvement spécifiques autour desquelles construire.

Pilier 3 - Synchronisation rythmique de la bande sonore

Les limites des scènes doivent tomber sur les caisses claires (la sensation rhétorique de "coup de batterie"). Les événements internes (clics, arrivée de cartes, démarrage de compteurs) doivent tomber soit sur les grosses caisses, soit sur les caisses claires dans la scène.

Le pipeline :

1. Exécutez scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Émet le BPM, la frame de la première grosse caisse, les timestamps et frames de caisses claires.
2. Intégrez dans un seul objet 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), exécutez scripts/align-internal-events.py sur beats.json + une liste d'événements dans les scènes pour les déplacer vers les rythmes les plus proches dans une fenêtre de ±6 frames. C'est la deuxième itération la plus impactante après le rendu initial - le public ressent les événements internes décalés comme un "rythme parfois faux" sans pouvoir en identifier la cause.
4. Utilisez les helpers isSnare(n) / isKick(n) pour les assertions en mode développement.
5. Exécutez scripts/check-typing-budget.py sur tout TypedText/TypedChars pour vérifier que cela tient dans la durée de la scène. Coupe le texte tapé à l'écran avant qu'il ne soit expédié.

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 les situations au-delà de la démo SaaS standard "tout motion graphics, juste une capture d'écran". Lisez la référence pertinente lorsque la situation de l'utilisateur l'exige.

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 de copie verrouillée, prêts à être intégrés dans le document de spécification.

Intégration de b-roll - quand le film utilise des couches live-action ou collage

Si l'utilisateur a des séquences stock, des clips collage ou toute vidéo qu'il souhaite utiliser comme couche d'arrière-plan, utilisez references/b-roll-integration.md et le template BRollLayer. Le b-roll peut être un arrière-plan en pleine opacité ou une texture à faible opacité ; la primitive gère le trim, le fondu, les modes de fusion et le timing correct en fps.

(Les versions précédentes de cette compétence recommandaient d'envoyer le travail live-action vers Premiere/DaVinci. C'est incorrect lorsque le b-roll est utilisé comme couche sous les motion graphics - Remotion gère bien cela et garder la production dans un seul outil est un gain de productivité.)

Fidélité de l'interface utilisateur schématique - quand le produit n'a pas de vraie interface à enregistrer

Si le produit est une extension Chrome, une API, ou en phase précoce et qu'il n'y a pas de véritable interface produit à capturer, references/schematic-ui-fidelity.md explique comment inventer des interfaces schématiques qui paraissent 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 - templates de code dans assets/code-templates/Schematic*.tsx.

Positionnement des clics - la source n°1 de problèmes d'itération

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

Style d'écriture - éliminer les marqueurs IA des copies destinées aux utilisateurs

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

---

Séquençage idéal

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

1. Rassemblez d'abord les entrées, écrivez le code en dernier. Exécutez le questionnaire d'intégration des assets.
2. Développez le script si l'utilisateur n'en a pas - references/script-development.md.
3. Produisez les breakdowns de vidéos de référence - automatisé via scripts/analyze-reference-video.sh ou manuel via AI Studio.
4. Détectez les rythmes et écrivez l'objet de constantes de timing. scripts/detect-beats.py → theme-v2.ts. Chaque début de scène dérive des rythmes.
5. Échafaudez Remotion manuellement. package.json / tsconfig.json / remotion.config.ts minimal. Ne jamais npx create-video dans un dépôt git.
6. Enregistrez des 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 le master complet.
7. Chargez toutes les polices au niveau supérieur de Root.tsx avec subsets: ["latin"].
8. Utilisez des traits d'union dans les identifiants 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 battent la prose à chaque fois.
10. Écrivez le document de spécification. docs/superpowers/specs/YYYY-MM-DD-<nom>-design.md. Incluez une section sur la fidélité de l'interface schématique si nécessaire.
11. Auto-révisez la spécification, puis faites-la approuver par l'utilisateur. Pas de code avant le feu vert.
12. Invoquez superpowers:writing-plans. Vérification d'hygiène du template de plan avant envoi (voir references/project-scaffold.md).
13. Construisez d'abord les primitives d'animation (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack selon besoin). Puis les cartes d'interface schématique. Puis les scènes. Puis le master.
14. Invoquez superpowers:subagent-driven-development. Limitez les lots de sous-agents à 3-4 fichiers par envoi - les lots plus importants peuvent manquer de contexte en cours de tâche. Voir references/iteration-playbook.md.
15. Faites un rendu ponctuel de la Scène 1 seule. Établissez le style. Obtenez l'approbation de l'utilisateur avant le reste.
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 notablement le rythme.
17. Rendu master 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 rythmique à vitesse 0.5x.

---

Index des références

Le dossier references/ contient la profondeur. Chargez uniquement ce dont vous avez besoin pour la phase actuelle.

• ideal-sequence.md - le flux complet annoté, avec la logique
• prereq-check.md - ce qu'il faut vérifier avant de commencer
• asset-intake.md - flux d'intégration complet, repli pour assets partiels, vérification d'agrandissement des assets, hygiène de nommage