JZnebel/AutoDemo

/demo — Pipeline de vidéo de démonstration automatisée

Vous créez une vidéo de démonstration narrée d'une application web. L'ensemble du flux — exploration, enregistrement, narration et rendu — se déroule en une seule commande.

Arguments

Analyser $ARGUMENTS :

• Premier argument positionnel : URL de la démo (obligatoire)
• --login <identifiants> : Identifiants de connexion au format email:password. Si fournis, se connecter avant l'enregistrement.
• --brief <"ce qu'il faut montrer"> : Description en langage naturel de ce que la démo doit couvrir. Peut être très court — "montrer le tableau de bord et créer un projet" suffit. Si omis, explorer librement.
• --name <nom> : Nom de sortie (par défaut : dérivé du nom d'hôte de l'URL)
• --duration <secondes> : Durée cible de la vidéo (par défaut : 60)
• --voice <voix> : Voix TTS (par défaut : en-US-GuyNeural)
• --preset <draft|production> : Préréglage qualité (par défaut : draft)

Les arguments peuvent également être passés en langage naturel après l'URL. Tous ces exemples sont équivalents :

/demo https://app.com --login [email protected]:pass123 --brief "afficher la page de facturation et ajouter un moyen de paiement"
/demo https://app.com — se connecter en tant qu'[email protected] / pass123, afficher la facturation et ajouter un moyen de paiement
/demo https://app.com connexion : [email protected] pass123. Afficher la page de facturation.

Analyser ce que vous pouvez. Si l'utilisateur vous donne des identifiants et des instructions en français, utilisez-les.

Pipeline

Phase 1 : Explorer l'application

Avant d'enregistrer, comprendre ce que vous manipulez :

1. Ouvrir l'URL via new_page ou navigate_page
2. Si des identifiants sont fournis (--login), trouver le formulaire de connexion et se connecter d'abord. Chercher les motifs courants : /login, /sign-in, un lien "Se connecter", etc. Utiliser fill pour les champs email/mot de passe, puis cliquer sur soumettre. Attendre que le tableau de bord ou la page d'accueil soit chargée avant de continuer.
3. Prendre une capture d'écran et un instantané pour comprendre l'application
4. Capturer la marque : identifier le logo et la couleur d'accentuation/de marque de l'application.
   • Essayer de télécharger l'image du logo dans le répertoire de sortie (résolu en Phase 2) sous le nom logo.png (ou .svg/.webp). Pendant l'exploration, le sauvegarder d'abord dans un emplacement temporaire, puis le déplacer dans le répertoire de sortie final une fois le nom unique résolu. Utiliser evaluate_script pour trouver l'URL src du logo <img>, puis utiliser Bash curl ou wget pour le sauvegarder. Le pipeline le détectera automatiquement et l'utilisera dans la carte d'introduction.
   • Choisir la couleur d'accentuation à partir de la couleur du bouton principal / de la marque de l'application et l'utiliser comme accentColor dans narration.json (format rgba).
5. Si un brief a été fourni (--brief), l'utiliser pour guider votre exploration. Le brief indique ce qui intéresse l'utilisateur — prioriser ces fonctionnalités. Si pas de brief, explorer librement.
6. Identifier les fonctionnalités clés, la navigation et les flux intéressants
7. Planifier 3 à 6 segments de démonstration qui présentent l'application en environ duration secondes de narration

Penser à ce qui fait une démo convaincante :

• S'il y a un brief, le suivre — l'utilisateur sait ce qu'il veut montrer
• Commencer par la fonctionnalité la plus impressionnante visuellement ou la plus unique
• Montrer de l'ampleur (naviguer dans différentes sections) pas de la profondeur (ne pas rester bloqué sur un formulaire)
• Terminer par quelque chose qui rassemble le tout (tableau de bord, paramètres, résultats)
• Ignorer les écrans de connexion, les spinners de chargement et les états d'erreur dans l'enregistrement — les gérer dans la configuration avant screencast_start

Phase 2 : Enregistrer

Configurer le répertoire de sortie et commencer l'enregistrement :

Répertoire de sortie : screencast-output/<name>/
Enregistrement : screencast-output/<name>/recording.mp4

1. Choisir un répertoire de sortie unique. Avant de créer le répertoire, vérifier si screencast-output/<name>/ existe déjà. Si c'est le cas, ajouter un suffixe incrémental : <name>-v2, <name>-v3, etc. Utiliser le premier nom disponible. Par exemple :

   # Vérifier et trouver le prochain nom disponible
   NAME="trafficstores"
   DIR="screencast-output/$NAME"
   if [ -d "$DIR" ]; then
     V=2; while [ -d "screencast-output/${NAME}-v${V}" ]; do V=$((V+1)); done
     NAME="${NAME}-v${V}"
     DIR="screencast-output/$NAME"
   fi
   mkdir -p "$DIR"
   

   Utiliser le <name> résolu (avec suffixe si nécessaire) pour TOUS les chemins suivants dans cette exécution — enregistrement, narration.json, composition, sortie de rendu, etc.
2. Créer le répertoire de sortie
3. Appeler screencast_start avec le chemin screencast-output/<name>/recording.mp4
4. Interagir avec l'application naturellement — cliquer sur les fonctionnalités que vous avez planifiées
   • Faire une pause brève (1 à 2 secondes) sur chaque écran important pour que les spectateurs puissent le lire
   • Cliquer sur les boutons, remplir les formulaires avec des données réalistes, naviguer entre les sections
   • La branche MCP gère automatiquement l'animation du curseur et la segmentation automatique
5. Appeler screencast_stop une fois terminé

Conseils d'enregistrement :

• Ne pas se précipiter — le pipeline accélérera automatiquement les parties ennuyeuses
• Faire une pause sur les écrans visuellement intéressants (le pipeline ralentit ceux-ci pour correspondre à la narration)
• Éviter de défiler dans les iframes cross-origin — naviguer directement à la place
• Si quelque chose prend du temps à charger, le segmentateur automatique coupera l'attente

Phase 3 : Écrire la narration

Écrire screencast-output/<name>/narration.json en fonction de ce que vous venez d'enregistrer. Vous savez exactement ce qui s'est passé parce que vous l'avez fait.

{
  "introTagline": "Titre accrocheur court",
  "introSubtitle": "Nom du produit ou de l'entreprise",
  "outroHeading": "Question d'appel à l'action",
  "outroUrl": "siteweb.com",
  "outroCtaText": "Commencer",
  "accentColor": "rgba(59, 130, 246, 1)",
  "captionStyle": "pop",
  "voice": "en-US-AndrewNeural",
  "introLogoSrc": "screencast-output/<name>/logo.png",
  "segments": [
    {
      "text": "Narration pour ce segment. Écrivez de manière conversationnelle, comme un humain qui présente.",
      "sceneIndex": 0,
      "sceneLabel": "Nom de la fonctionnalité"
    }
  ],
  "fullText": "Tous les textes des segments joints avec des espaces."
}

Directives de narration :

• Écrire comme si vous présentiez à quelqu'un par-dessus son épaule, pas en lisant une documentation
• Utiliser le présent : "Ici nous voyons..." pas "Ici nous avons vu..."
• Mentionner les éléments d'interface utilisateur spécifiques que le spectateur doit remarquer
• Garder la narration totale autour de la cible --duration
• Chaque segment doit durer 5 à 20 secondes de discours (~15 à 50 mots)
• Le accentColor doit correspondre à la couleur de la marque de l'application (choisir d'après ce que vous avez vu)
• Le sceneLabel de chaque segment devient un tiers inférieur animé dans la vidéo — les garder courts (2-3 mots max) : "Inscription", "Constructeur IA", "Site en direct"
• Définir introLogoSrc sur le fichier logo que vous avez téléchargé en Phase 1 — il apparaît avec une animation ressort dans la carte d'introduction
• Définir captionStyle pour correspondre à l'ambiance de l'application : "pop" (rebondissant, ludique), "clean" (verre dépoli, élégant), "bold" (grand, percutant), "minimal" (subtil), "karaoke" (sans fond), ou "outline" (ombre lumineuse)
• Choisir une voice qui correspond au ton de l'application :
  • en-US-AndrewNeural — Chaleureux, confiant (bon défaut)
  • en-US-BrianNeural — Accessible, décontracté (startups, applications conviviales)
  • en-US-ChristopherNeural — Fiable, autoritaire (entreprise, fintech)
  • en-US-AriaNeural — Positif, confiant (marketing, applications grand public)
  • en-US-EmmaNeural — Enjoué, clair (e-commerce, social)
  • en-US-AvaNeural — Expressif, attentionné (santé, bien-être, communauté)
  • en-US-JennyNeural — Amical, prévenant (éducation, support)
  • en-US-EricNeural — Rationnel (analytique, outils de données)
  • en-US-GuyNeural — Passionné (outils créatifs, médias)
  • en-GB-RyanNeural / en-GB-SoniaNeural — Britannique (international, luxe)

Phase 3.5 : Concevoir une composition vidéo personnalisée

Écrire une composition Remotion personnalisée pour cette vidéo spécifique. La sauvegarder sous screencast-output/<name>/composition.tsx. Le pipeline l'utilisera à la place du modèle MarketingDemo par défaut.

Charger d'abord les compétences Remotion : Lire les règles depuis demo-render/.agents/skills/remotion-best-practices/rules/ — en particulier animations.md, timing.md, text-animations.md, transitions.md et sequencing.md.

Votre composition doit :

1. Exporter VideoComposition (le composant React) et calculateMarketingDemoDuration (fonction de durée)
2. Exporter le type MarketingDemoProps (réexporter depuis ./MarketingDemo)
3. Accepter les mêmes props que MarketingDemo — le pipeline transmet le même JSON

Blocs de construction disponibles (importer depuis ./components/) :

• DeviceMockup — Enregistrement d'écran dans un navigateur chrome (videoSrc, accentColor, displayUrl, zoomRegions, layout)
• IntroCard / OutroCard — Modèles d'introduction/outro par défaut (tagline, subtitle, accentColor, logoSrc)
• WordHighlightCaptions — Légendes mot par mot (wordTimings, style, accentColor)
• LowerThird — Superposition d'étiquette de scène (label, accentColor, leftOffset)
• ProgressBar — Indicateur de progression (accentColor)
• AudioWaveform — Visualiseur audio-réactif (variant, accentColor, samples)
• FeatureCallout — Annotation d'appel (label, side, y, accentColor)
• ChapterCard — Carte de séparation de scène (chapterNumber, title, accentColor)
• Presenter — Personnage 2D avec synchronisation labiale (mouthCues, side)
• AvatarPip — Incrustation d'avatar
• SceneBreak — Flash visuel bref aux limites de scène

Vous pouvez également écrire des composants personnalisés en ligne dans le fichier de composition.

Décisions de conception à prendre par vidéo :

• Style d'intro : Écrire une intro personnalisée ou utiliser IntroCard. Correspondre à la personnalité de l'application — terreux/organique, techno/propre, chaleureux/accueillant, audacieux/impactant.
• Style d'outro : Écrire une outro personnalisée ou utiliser OutroCard. Même correspondance de personnalité.
• Quelles superpositions inclure : Toutes les vidéos n'ont pas besoin de toutes les superpositions. Ignorer AudioWaveform pour les démos SaaS propres. Ignorer ProgressBar pour les vidéos courtes. Ignorer LowerThird si les segments sont évidents.
• Positions des superpositions : LowerThird n'a pas besoin d'être en haut à gauche. Les légendes n'ont pas besoin d'être en bas au centre. Choisir des positions qui ne chevauchent pas les éléments d'interface utilisateur importants dans l'enregistrement.
• Variété d'animations : Ne pas toujours utiliser le même ressort entrant. Mélanger fondu, glissement, essuyage, machine à écrire, décalage. Les compétences Remotion montrent les motifs.
• Transition entre intro → contenu → outro : Fondu, glissement, essuyage ou fuite de lumière. Choisir ce qui convient.

Exemple de littéral template pour composition.tsx :

import React from "react";
import { AbsoluteFill, Audio, Sequence, interpolate, staticFile } from "remotion";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
// Importer les blocs de construction
import { DeviceMockup } from "./components/DeviceMockup";
import { WordHighlightCaptions } from "./components/WordHighlightCaptions";
import { ProgressBar } from "./components/ProgressBar";
// Importer votre intro/outro personnalisée (les écrire en ligne ou comme composants séparés)
// Importer les types
import type { MarketingDemoProps } from "./MarketingDemo";
export type { MarketingDemoProps };

export function calculateMarketingDemoDuration(props: MarketingDemoProps) {
  return props.introDurationFrames + props.videoDurationFrames + props.outroDurationFrames - 20;
}

// Votre composant d'intro personnalisé (en ligne)
const MyIntro: React.FC<{...}> = (...) => { ... };

export const VideoComposition: React.FC<MarketingDemoProps> = (props) => {
  // Votre disposition de composition unique ici
};

Règles Remotion à suivre :

• Toutes les animations pilotées par useCurrentFrame() — PAS d