Vidéo de démonstration SaaS (Remotion)

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

Le skill repose sur trois éléments clés : assets, ambiance, beats. En ignorer un seul et vous produirez un générique graphique générique de type Canva qui ressemblera à toutes les autres démos SaaS. La rigueur fait la différence.

Ce sont des recommandations fortes plutôt que des règles absolues. La plupart des productions les suivent ; certaines les transgressent intentionnellement (par exemple, les films avec voix-off où la synchronisation sur les beats 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 réellement obligatoire ; les autres sont de fortes recommandations avec des solutions de repli documentées.

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 — ne jamais exécuter npx create-video dans un dépôt git existant (cela bloque sur une invite avec les touches fléchées).
Plugin Super Powers (fortement recommandé, pas obligatoire). Lorsqu'il est disponible, ce skill orchestre superpowers:using-superpowers, superpowers:brainstorming (avec un 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 via sous-agent.

Si Super Powers n'est pas installé, le skill 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 rédigés directement dans le chat ; les scènes sont implémentées en ligne plutôt que par l'intermédiaire de sous-agents. Les trois piliers (assets / ambiance / beats) ainsi que 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.
Python 3 + librosa disponibles. La détection des beats 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 silencieusement.
Pour l'analyse des vidéos de référence (Pilier 2) : le skill 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 le PATH (CLI officiel de Google, ou wrappers communautaires comme gemini-yt). Exécutez avec la question + 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. Aucune des options ci-dessus — repli sur le copier-coller manuel depuis Google AI Studio. Fastidieux mais toujours efficace ; 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 à forte valeur ajoutée. En sauter une 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 :

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-45s recommandé)
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 principal + 3 à 6 pastels de support)
Polices (toutes doivent être sur Google Fonts)
Copie / script — préférez un brouillon fourni par l'utilisateur plutôt qu'une génération. S'il n'a pas de script, voir references/script-development.md.
Voix off (optionnelle)
Fichier de bande-son — nécessaire pour la synchronisation sur les beats. Si l'utilisateur n'en a pas, choisissez parmi les stock libres de droits.

Référez-vous à references/asset-intake.md pour le flux de collecte complet, y compris l'ensemble minimum viable d'assets partiels, les règles de nommage lors de la copie, et la vérification de pixellisation lors du redimensionnement.

Pilier 2 - Analyse de l'ambiance des vidéos 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. Produisez ensuite une analyse réalisateur pour chacune.

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

Automatisé (préféré lorsque 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 ~30s par vidéo. Les résultats atterrissent dans references/gemini-<slug>.md.
Manuel (fonctionne toujours) — ouvrez aistudio.google.com, collez la question de scripts/reference-video-prompt.md ainsi que l'URL YouTube, copiez le résultat dans un fichier. Fastidieux mais produit une sortie également 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 la sortie la plus importante — elle vous donne des primitives de mouvement spécifiques autour desquelles construire.

Pilier 3 - Synchronisation sur les beats de la bande-son

Les limites de scènes doivent tomber sur les casses (la sensation rhétorique du "coup de tambour"). Les événements internes (clics, arrivées de cartes, démarrages de compteurs) doivent tomber soit sur les kicks soit sur les casses à l'intérieur de la scène.

Le pipeline :

Exécutez scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Émet le BPM, l'image du premier kick, les horodatages et images des casses.
Ingérez dans un seul objet de constantes de temporisation (voir assets/code-templates/theme-v2.ts). Chaque scène <Sequence from={...} durationInFrames={...}> provient de celle-ci.
Après la Phase 6 (scènes construites), exécutez scripts/align-internal-events.py par rapport à beats.json + une liste d'événements intra-scène pour les ajuster sur les beats les plus proches dans une fenêtre de ±6 images. C'est la deuxième itération la plus importante après le rendu initial — le public ressent les événements internes décalés comme un "rythme parfois faux" sans pouvoir pointer la raison.
Utilisez les helpers isSnare(n) / isKick(n) pour les assertions en mode développement.
Exécutez scripts/check-typing-budget.py sur tout TypedText/TypedChars pour vérifier qu'il tient dans la durée de la scène. Coupe la frappe hors écran avant la livraison.

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 du script — quand l'utilisateur n'a pas de script

La plupart des utilisateurs arrivent avec une idée vague du produit, pas un écran par écran finalisé. references/script-development.md décrit un 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ête à alimenter 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 images libres de droits, des clips de collage ou toute vidéo qu'il souhaite utiliser comme couche de fond, utilisez references/b-roll-integration.md et le modèle BRollLayer. Le b-roll peut être un arrière-plan en pleine opacité ou une texture de faible opacité ; la primitive gère le recadrage, le fondu, les modes de fusion et la synchronisation fps correcte.

(Les versions précédentes de ce skill recommandaient d'envoyer le travail live-action à Premiere/DaVinci. C'est faux lorsque le b-roll est utilisé comme une couche sous les 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'interface utilisateur 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 précoce et qu'il n'y a pas d'interface utilisateur réelle à 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 modèles 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 numéro 1 des cycles d'itération

Les clics du curseur qui manquent les boutons sont la plainte la plus courante des utilisateurs dans toutes 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 nombreux cycles de rendu complets par scène.

Style d'écriture — éviter les signes de rédaction IA dans les textes visibles

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 avant rendu qui les détecte. Si l'utilisateur a son propre guide de voix de marque, préférez-le.

Séquence idéale

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

Recueillez d'abord les entrées, écrivez le code en dernier. Exécutez le questionnaire de collecte des assets.
Développez le script si l'utilisateur n'en a pas — references/script-development.md.
Produisez les analyses des vidéos de référence — automatisé via scripts/analyze-reference-video.sh ou manuel via AI Studio.
Détectez les beats et écrivez l'objet de constantes de temporisation. scripts/detect-beats.py → theme-v2.ts. Chaque début de scène dérive des beats.
Échafaudez Remotion manuellement. package.json / tsconfig.json / remotion.config.ts minimal. Jamais npx create-video dans un dépôt git.
Enregistrez les compositions de débogage par scène dans Root.tsx. Accélération essentielle. Parcourir une scène de 5 secondes est 30 fois plus rapide que le master complet.
Chargez chaque police au niveau supérieur de Root.tsx avec subsets: ["latin"].
Utilisez des traits d'union dans les IDs de composition (v2-Scene06, jamais v2_Scene06).
Invoquez superpowers:brainstorming avec le compagnon visuel pour les décisions de style/mise en page. Les maquettes HTML surpassent toujours le texte.
Rédigez le document de spécification. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Incluez une section sur la fidélité de l'interface schématique si nécessaire.
Auto-relisez la spécification, puis obtenez l'approbation de l'utilisateur. Pas de code avant le feu vert.
Invoquez superpowers:writing-plans. Vérification de l'hygiène du modèle de plan avant l'envoi (voir references/project-scaffold.md).
Construisez d'abord les primitives d'animation (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack si nécessaire). Ensuite les cartes d'interface schématique. Ensuite les scènes. Ensuite le master.
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.
Faites un rendu test de la Scène 1 seule. Établissez le style. Obtenez l'approbation de l'utilisateur avant le reste.
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 visiblement le rythme.
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.
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 uniquement ce dont vous avez besoin pour la phase en cours.

ideal-sequence.md — le flux annoté complet, avec justification
prereq-check.md — ce qu'il faut vérifier avant de commencer
asset-intake.md — flux de collecte complet, repli pour assets partiels, vérification du redimensionnement, règles de nommage
script-development.md — méthodologie écran par écran lorsque 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, hygiène du modèle de plan, éléments essentiels de .gitignore
animation-patterns.md — TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, plus extensions
b-roll-integration.md — modèles BRollLayer, traitements d'opacité/de fusion, performances de rendu
schematic-ui-fidelity.md — conception d'interfaces factices qui paraissent 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 marqueurs 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 Studio hot-reload
render-export.md — commandes de rendu HD/4K, justification du CRF
gotchas.md — underscores dans les IDs de composition, avertissements de police, chargement des italiques, piège MaskReveal scale
vertical-port.md — discipline d'adaptation pour les reels 9:16

Assets

assets/prompt-templates/ — modèles à remplir pour la collecte d'assets, les documents de spécification, les 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 piloté par librosa. Émet le BPM, le premier kick, les images de casses/kicks à la fréquence d'images 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 les beats les événements intra-scène dans une fenêtre de tolérance ± 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 est à 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écapitulatif d'événement, montage de témoignages, screencast de tutoriel — les modèles de synchronisation sur les beats + cartes d'interface produit ne s'appliquent pas proprement.
Sujet documentaire ou talking-head. Ce skill gère le b-roll comme une couche sous les graphiques animés. Si l'action en direct est le sujet du film (interviews, déballages, démonstrations), utilisez un éditeur non linéaire comme Premiere, DaVinci ou Final Cut.

noamdorr/vidéo-démo-produit-saas

Qu'est-ce que vidéo-démo-produit-saas ?

Demander à votre IA préférée

Documentation