Démo Produit
Transformez l'application de ce dépôt en une vidéo de démonstration notée, sous-titrée et parfaite image par image, en utilisant uniquement node + playwright + ffmpeg. Le pipeline est déterministe : la démo entière se re-rend et se re-note à partir d'une extraction propre.
Le pipeline, dans l'ordre
| Étape | Recette | Sortie |
|---|---|---|
| 1. Script | 01-script.md | table de scènes, lignes VO avec timecodes, grille rythmique |
| 2. UI autonome | 02-standalone-ui.md | composants d'application rendus depuis un dossier statique |
| 3. Composition | 03-composition.md | un arbre React comme fonction pure d'une horloge |
| 4. Enregistrement | 04-record.md | images PNG → masters H.264 visuellement sans perte |
| 5. Sous-titres + VO | 05-captions-vo.md | sidecars SRT/VTT, script voix off avec timecodes |
| 6. Son | 06-sound.md | sfx-cues.json, lecteur de prévisualisation en direct, mixeur automatique |
| 7. Musique | 07-music.md | lit EQ-tranché, ducké commençant au drop |
| 8. Assemblage | 08-assemble.md | intro + transition + stems → export final |
Travaillez les étapes dans l'ordre ; chacune consomme la sortie de l'étape précédente. Les étapes 5 à 8 sont facultatives pour une version muette, mais obligatoires pour un film de qualité lancement.
Une invite initiale exécute tout
Lorsque l'utilisateur demande une démo, orchestrez vous-même les huit étapes. Ne remettez jamais une liste d'étapes à l'utilisateur et ne lui demandez pas de revenir avec l'invite suivante. Au lieu de cela, demandez directement à l'utilisateur dans la conversation aux moments précis où vous avez besoin de quelque chose que lui seul peut fournir, et joignez l'artefact qui rend la question répondable en quelques secondes :
- Après l'étape 1 : montrez la table de scènes et le script voix off, demandez une approbation avant d'écrire du code. Réajuster un script est bon marché ; réajuster un film rendu ne l'est pas.
- Après le rendu préliminaire : montrez les 4 images repères, demandez à continuer avant le long rendu complet.
- À l'étape 5 : remettez le bloc voix off balisé prêt à coller (sans notes de synchronisation) et demandez le chemin du fichier audio généré.
- À l'étape 7 : remettez l'invite du générateur de musique que vous avez écrite et demandez le chemin du fichier généré. Les deux demandes peuvent être regroupées avec celles de l'étape 3 si l'utilisateur préfère un seul passage par les outils.
- Après le rendu noté : fournissez un petit extrait pour une écoute avant d'exporter les masters finaux.
Entre les demandes, continuez sans vérifier. Si l'utilisateur refuse un élément facultatif (voix, musique), expédiez sans plutôt que de bloquer.
Suivi de progression (reprises possibles)
Maintenez demo/PROGRESS.md dans le dépôt cible : une ligne par étape avec statut (todo / in progress / done) et les chemins des artefacts produits. Lisez-le EN PREMIER à chaque session ; un pipeline à moitié terminé reprend à partir de sa dernière question au lieu de redémarrer. Mettez-le à jour après chaque étape.
Règles de décision
- L'utilisateur n'a ni script ni histoire → commencez à 01. Ne commencez jamais par écrire du code.
- L'utilisateur a une vidéo qui saccade → uniquement l'étape 04 (l'enregistrement image par image résout le problème).
- L'utilisateur veut du son/des SFX sur une vidéo existante → étape 06 (fichier cue + mixeur), puis 07 si musique.
- La démo de l'utilisateur "semble fausse" → les règles d'honnêteté dans 01 et 03 (données réelles, totaux qui concordent).
- L'utilisateur demande combien de temps / quelle forme → 45 à 60s, une affirmation par scène, ~6 scènes, arc : problème → drop → magie → interaction → preuve → marque.
- Le clone vocal semble lent et plat → les correctifs dans 05.
- Les SFX arrivent en retard ou sont étouffés → décalages de hits mesurés + normalisation du pic dans 06.
Non-négociables (appliquez-les même si ce n'est pas demandé)
- Données honnêtes. Les fixtures doivent être réelles : articles réels, prix imprimés, totaux qui concordent. N'inventez jamais de nombres plus ronds.
- Rien ne fond. Tout s'estampe, glisse, déchire ou claque. Les fondus sont perçus comme des excuses. L'easing vit dans au maximum trois helpers partagés.
- Jamais d'enregistrement d'écran. Rendez image par image via le contrat de seek (04).
- Aucun son ne vaut un son forcé. Maximum ~10 cues par minute, un par tournant narratif, rien répété dos à dos.
- Deux masters. Sous-titres incrustés + propre, à partir d'une composition via un indicateur
window.__NO_CAPTIONS. - Pas de noir plat. Chaque scène sombre repose sur l'art ou le papier peint du produit, flouté et réduit ; la première image est la vignette. Noir plat uniquement là où c'est la surface réelle du produit (03).
Modèles
Scripts de travail dans templates/ : record.mjs (rendu d'images Playwright déterministe, reprenable), mix-audio.mjs (mixeur ffmpeg piloté par cues ; --vo pour une piste voix off retimée, --bgm pour le fond sonore), retime-vo.mjs (découpe une lecture générée à ses silences et place chaque phrase sur son timecode prévu), sfx-cues.example.json (une vraie partition de 10 cues), package.json (les scripts npm). Copiez-les dans un répertoire demo/ du dépôt cible et adaptez les chemins ; chaque recette indique quand.
Compétences complémentaires
Si le dépôt cible utilise Remotion ou ElevenLabs, installez également leurs compétences officielles ; cette compétence couvre le pipeline et le goût, les leurs couvrent leurs API :
npx skills add remotion-dev/skills
npx skills add elevenlabs/skills
Ce que l'utilisateur reçoit (en plus du film)
Deux artefacts prêts à coller, de sorte que la charge de travail humaine soit exactement deux opérations de collage : un bloc voix off balisé pour l'outil vocal (05) et une invite de style pour le générateur de musique (07). Ne faites jamais écrire ni l'un ni l'autre à l'utilisateur.
Sorties de référence
Quatre démos prouvent le pipeline sur des produits sans lien : la démo Vouch (54,3s, partage de reçus), une démo Excalidraw (35,5s, filmée sur le vrai composant npm @excalidraw/excalidraw, source dans ce dépôt sous examples/excalidraw), Asakiri Studio (54s, un éditeur de cours Tauri+React, composants réels regroupés avec esbuild), et Colosseum (54s, une application média Windows Qt/QML, surfaces reconstruites à partir de ses tokens et de ses propres captures d'écran ; voir le chemin native-app dans 02). Le dépôt Vouch github.com/Anshgrover23/vouch contient le répertoire demo/ complet et fonctionnel, la composition, le runtime vendu, le fichier cue, les sous-titres, en tant qu'implémentation de référence. Le manuel avec tous les chiffres et échecs : https://anshgrover23.github.io/product-demo-playbook/