Studio Vidéo Démo

Que fait Studio Vidéo Démo ?

Transformez une application web en cours d'exécution en un film démo soigné : interaction réelle enregistrée (pas de diaporama, pas de maquette) + narration TTS locale + sous-titres synchronisés mot-à-mot + une piste musicale discrète, composée de manière déterministe avec HyperFrames.

Quand l'utiliser

Pour toute vidéo de démo / démonstration / produit / lancement / hackathon d'une application web, surtout lorsqu'elle doit montrer le produit réel en fonctionnement avec narration et sous-titres. Enregistre une URL déployée ou un serveur de développement local.

Pipeline

① enregistrer   un des trois moteurs (ci-dessous)             → out/*.mp4|webm
② narrer        écrire VO par scène → Kokoro TTS (local)      → narration/*.wav
③ transcrire    Whisper horodatage mot-à-mot                  → *.transcript.json
④ sous-titrer   regrouper en phrases + corriger les erreurs   → captions.js
⑤ musique       ffmpeg ambient (mixé bas sous la voix)        → music/bed.wav
⑥ composer      HyperFrames HTML une timeline : clips+voix+sous-titres+musique → MP4

① dispose de trois moteurs — choisir selon la cible (references/screen-studio-look.md) :

Cible	Moteur	Rendu
Appli web/desktop, macOS	Cap CLI — scripts/record-cap.mjs	Screen Studio natif : zoom auto à partir des clics réels, curseur ressort + flou de mouvement, fond d'écran / arrondi / ombre, rendu GPU
Outil en ligne de commande	VHS bande → mp4	terminal stylisé (marge, remplissage, coins arrondis, barre de fenêtre), déterministe
Headless / CI / Linux	Playwright — scripts/record.mjs	curseur synthétique + ondulations ; écrit <scene>.events.json (horodatages + coordonnées) pour tout compositing de zoom ultérieur

Quel que soit le moteur d'enregistrement, sa sortie n'est que le clip alimentant les étapes ②–⑥ — l'enregistrement et la composition restent indépendants : ré-enregistrer une scène, ou relancer la narration, sans refaire l'autre. Une piste GIF générée par code (scènes HTML rendues directement en MP4, sans enregistrement) est un chemin optionnel pour les pages de documentation.

Flux de travail

0. Choisir le moteur AVEC l'utilisateur — jamais en silence. Regarder le projet réel (application web ? CLI ? desktop ? cette machine a-t-elle une session graphique ? doit-elle fonctionner en CI ?), puis présenter les options de moteur avec avantages/inconvénients pour ce projet spécifique et laisser l'utilisateur choisir. Par exemple, pour une application web sur Mac : « Cap CLI donne le rendu Screen Studio nativement mais nécessite une autorisation d'enregistrement d'écran et un calibrage initial ; Playwright fonctionne partout et ré-enregistre les scènes individuellement rapidement mais n'a pas de zoom automatique ; VHS ne s'applique pas ici. » Détails des moteurs : references/screen-studio-look.md.
1. Comprendre d'abord le produit. Lire son README / documentation de démo. Écrire un Flux de Démo avant de toucher aux outils : problème → démonstration produit → preuve → conclusion. Choisir le chemin de clic recommandé et le résultat visible que chaque scène doit atteindre. Voir references/templates.md.
2. Enregistrer. Copier scripts/record.mjs, définir APP et SIZE, remplacer scenes par votre chorégraphie (glissement → pause → action → attente). Enregistrer à l'échelle 1:1. node scripts/record.mjs [scene]. Moteur + exemple travaillé : references/recording.md.
3. Narrer → sous-titrer. Écrire un fichier assets/narration/NN-*.txt par scène en voix off (vous parlez à un spectateur, pas lisez un README — c'est un métier différent du texte marketing ; la compétence marketing fournit le sujet/accroche/storyboard, celle-ci écrit les mots parlés). Ensuite : bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs. Modifier PHRASE_FIX dans build-captions.mjs pour vos noms de marque. La voix est interchangeable par contrat : la narration est un wav par scène (narration/NN-*.wav) — remplacez n'importe quel wav par une prise humaine, un doublage 剪映, ou un autre TTS, relancez la transcription et les sous-titres, recomposez ; rien d'autre ne change. Kokoro (local, Apache-2.0) est le défaut et propose des voix en mandarin ; edge-tts est une alternative en ligne gratuite. Guide : references/narration-and-captions.md.
4. Composer & rendre. Démarrer à partir de references/composition-skeleton.html (un clip + piste de sous-titres + audio), développer la timeline, puis npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high. Rendre en 1:1 (1080p créé → 1080p sortie) — ne jamais monter à 4K, cela ramollit l'interface. references/composition.md.
5. Contrôle qualité avant de livrer. ffprobe la durée/l'audio, échantillonner 1–2 images (pas noires, pas vides), sous-titres dans le cadre, narration pas coupée, la page de résultat clé effectivement visible. Corriger le flux/timing, puis re-rendre.

Démarrage rapide

# dépendances système
brew install node ffmpeg
npx playwright install chromium

# environnement Python pour TTS local + transcription (une fois)
python3 -m venv .ttsvenv && .ttsvenv/bin/pip install kokoro-onnx soundfile
export PATH="$(pwd)/.ttsvenv/bin:$PATH"

# 1) enregistrer  2) narrer  3) sous-titrer  4) composer+rendre
node scripts/record.mjs
bash scripts/tts.sh && bash scripts/transcribe.sh && node scripts/build-captions.mjs
npx hyperframes render . --resolution landscape --fps 30 --crf 17 --quality high --output out/demo.mp4

Le premier TTS télécharge ~340 Mo (Kokoro), la première transcription ~466 Mo (Whisper small.en) ; les deux sont mis en cache dans ~/.cache/hyperframes/.

Règles durement acquises

• L'interaction réelle bat les diapositives — enregistrer le produit réellement en fonctionnement.
• 1:1, jamais de suréchantillonnage 2× — enregistrer à 2× DPR et rendre en 4K ramollit tous les clips d'interface. Créer et rendre en 1080p.
• Composition déterministe — pas de Date.now(), Math.random(), ou réseau dans le HTML ; HyperFrames cherche les images, le mouvement doit donc être reproductible.
• Curseur visible + attente sur les résultats — glisser délibérément, faire une pause sur le résultat final.
• VO, pas documentation — la narration suit l'image ; ce n'est pas le README lu à voix haute.
• Vidéo ≥ narration — ajouter du temps aux clips pour que les visuels ne se terminent jamais avant la voix.

Dépendances

Node 22+, FFmpeg, Playwright (Chromium), et la CLI HyperFrames (npx hyperframes, installer ses compétences avec npx skills add heygen-com/hyperframes). Le TTS/Whisper local nécessite Python + kokoro-onnx. Par moteur (optionnel) : la route Cap nécessite cap (curl -fsSL https://cap.so/install-cli.sh | sh) + cliclick (brew install cliclick) + autorisation d'enregistrement d'écran ; la route terminal nécessite vhs (brew install vhs). Tout est gratuit — tableau des licences dans references/screen-studio-look.md. Voir references/composition.md pour la configuration HyperFrames.

Références

• references/pipeline.md — les six étapes et le flux de données
• references/screen-studio-look.md — les trois moteurs d'enregistrement ; cycle de vie Cap CLI, regroupement de zoom, bandes VHS, ce qu'il ne faut pas construire
• references/recording.md — Moteur Director + exemple travaillé + pièges d'enregistrement
• references/narration-and-captions.md — écriture VO, TTS, Whisper, corrections de sous-titres
• references/composition.md — timeline HyperFrames, fondus, 1080p, rendu
• references/composition-skeleton.html — composition minimale rendable à copier comme index.html
• references/templates.md — structures de hackathon + démo produit et squelettes VO
• references/troubleshooting.md — sous-titres, écran blanc, audio, polices