Démo vers reel promo : démo web façon Screen Studio

webapp-screencast

Vous scénarisez la prise, webapp-screencast l'enregistre et la monte. Sortie : OUT/<nom>.mp4 (1920×1080, 60 ips) plus une affiche .jpg. Tout est un fichier que vous écrivez (scenario.py, plan.py) et une CLI. Appelez toujours la CLI avec --json (avant la sous-commande) : stdout est un objet JSON (ok, error, chemins, durées, avertissements) ; la progression va vers stderr. Code de sortie 0 ok, 1 étape échouée, 2 mauvaise entrée.

Clés API et plan : reference.md. Lisez-le avant d'écrire scenario.py / plan.py.

0. Configuration (une fois par machine)

webapp-screencast --json doctor

Si webapp-screencast est manquant : pip install git+https://github.com/dr-osmanovich/webapp-screencast.git (utilisez le venv du projet s'il en a un), puis python -m playwright install chromium. doctor liste chaque vérification échouée avec son fix. Node 22+ et ffmpeg sont nécessaires pour le rendu.

1. Comprendre l'application (avant tout enregistrement)

• Trouvez comment elle s'exécute localement (README, scripts package.json, Makefile, docker-compose) et son URL. Un simple dossier statique peut être servi par webapp-screencast lui-même (make --serve REPERTOIRE).
• Trouvez les données de démonstration/seed et comptes de test dans le dépôt (fixtures, scripts seed, .env.example). N'enregistrez jamais de données de production, réelles de clients ou patients, ni de véritables identifiants. S'il n'existe pas de données de démonstration sûres, arrêtez-vous et demandez à l'utilisateur.
• Trouvez comment réinitialiser l'état (script de seed/réinitialisation, effacement de localStorage). Chaque prise commence proprement.
• Choisissez 3 à 5 moments clés qui montrent la valeur : accroche → action → résultat → un détail → fin. 15–30 s de séquence.
• Lisez les composants réels pour obtenir des sélecteurs stables (ids, data-testid, rôles). Ne devinez pas.

2. Échafauder et scénariser

webapp-screencast --json init video/ --base-url http://127.0.0.1:3000 --title "Nom du produit"

Écrivez video/scenario.py : CONFIG, optionnellement login(page, cfg) et prepare(page, cfg), et run(take, page). Règles qui évitent les reprises :

• take.mark("nom") à chaque moment clé ; take.box("nom", selecteur) (ou click(..., name=)) pour tout ce que la caméra ou un cartouche doit encadrer. Marquez toujours hook en premier et end en dernier.
• Attendez l'application avec page.wait_for_selector(...) après les actions, puis take.hold(0.3–0.8).
• Éloignez le pointeur du texte avant take.type(...) ; tapez à cps 25–35.
• Dans prepare() masquez les toasts, bannières de cookies, superpositions de développement ; fermez les panneaux latéraux.
• Les infobulles natives title= ne s'affichent jamais en mode headless — utilisez plutôt un callout du plan.

3. Enregistrer et inspecter

webapp-screencast --json record video/scenario.py --out video/out/footage [--base-url URL]
webapp-screencast --json inspect video/out/footage

Vérifiez que peak_fps ≥ 50 sur les moments clés chargés (plus bas sur macOS → problème de flags GPU, voir reference) et que chaque marque que vous avez planifiée est présente. Un sélecteur échoué génère une erreur Playwright sur stderr : corrigez le scénario et enregistrez à nouveau — la séquence coûte peu (≈ durée de la prise + 10 s).

4. Planifier, composer, regarder

Écrivez video/plan.py en utilisant les marques et boîtes que inspect a affichées (ne codez jamais en dur des secondes) : segments de caméra qui suivent l'action (zoom 1.4–1.7 sur le moment clé, retour à 1.0 entre les scènes), un sous-titre court par moment clé (≥ 0,3 s par mot, pas de chevauchement), cartes d'intro/outro.

webapp-screencast --json compose video/plan.py --footage video/out/footage --out video/out/composition
webapp-screencast --json snapshot video/out/composition --at 1,5,9,14 --out video/out/stills

Corrigez chaque entrée de warnings. Regardez les images fixes (lisez les PNG / planche contact) : texte lisible, caméra sur l'action, rien de coupé, aucun sous-titre ne couvre ce qu'il décrit. Itérez sur plan.py avec compose + snapshot uniquement — pas besoin de réenregistrer.

5. Rendu et livraison

Le rendu prend environ 4–5 min pour 20 s sur un M1 — exécutez-le en arrière-plan avec un fichier journal.

webapp-screencast --json render video/out/composition --out video/out/video.mp4
webapp-screencast --json poster video/out/video.mp4 --at 9.0

Confirmez que le JSON montre fps: 60 et la durée attendue. Remettez les chemins du mp4 et de l'affiche. .gitignore le répertoire out/ ; commitez scenario.py + plan.py pour que la vidéo puisse être refaite après des modifications de l'interface utilisateur.

En une seule commande lorsque le scénario et le plan sont déjà bons : webapp-screencast --json make video/scenario.py video/plan.py --out video/out --base-url URL --poster-at 9 (--serve REPERTOIRE pour les sites statiques, --skip-render pour s'arrêter après la vérification).

Avec /brag (ou une autre compétence de vidéo de lancement)

Brag décide de l'histoire ; webapp-screencast fournit les séquences réelles.

1. Exécutez la propre planification de brag : concept, ton, moments clés, titre, copie. Arrêtez-vous avant qu'il ne construise les scènes de capture d'écran.
2. Transformez les moments clés de brag en marques scenario.py (une marque par moment clé) et enregistrez.
3. Mettez les lignes de brag dans plan.py : accroche → intro.title, légendes des moments clés → subtitles, ligne de clôture / CTA → outro ; mappez le ton de brag à look (poli → graphite/ocean, ludique → sunset/violet, accent = la couleur de marque de l'application depuis son CSS).
4. Composez, prenez un snapshot, faites le rendu comme ci-dessus dans le dossier de sortie de brag ; puis laissez brag écrire la copie de partage. Paysage 16:9 uniquement pour l'instant ; si brag a demandé du portrait, dites-le et faites le rendu en paysage.