Vidéo de démonstration d'application

Idée centrale

Le style réside dans l'application. Construisez une interface utilisateur sombre et cinématographique qui compte, pulse et annonce des résultats réels ; puis enregistrez cette interface ; puis ajoutez une barre de légende discrète, des incrustations, ainsi que des cartes de titre et de fin typographiques lors du montage.

Si le contenu n'est pas encore une application — un pipeline, un ensemble de données noté, un modèle de coût, un CLI — mettez-le d'abord en place sous la forme d'un petit frontend prêt pour la caméra (voir FRONTEND_STYLE.md et theme.css). Ne passez pas directement à des diapositives typographiques ou à un modèle vidéo.

Ne générez pas la démonstration avec un modèle de génération vidéo, un modèle de génération d'images ou un système de synthèse vocale (TTS). Les cartes de titre et de fin sont typographiques. L'image par défaut est silencieuse ; n'ajoutez pas de musique libre de droits ou de voix off, sauf si le brief demande du son.

Un exemple complet, anonymisé, de trois versions (légendes superposées vs. diaporama vs. barre dédiée sur une session en direct) se trouve dans REFERENCE_CASE.md.

Ressources

Tous les chemins sont relatifs à ce dossier de compétence.

FRONTEND_STYLE.md — jetons de design, motifs de composants, voix rédactionnelle, spécifications d'animation, liste de vérification pré-enregistrement
theme.css — variables CSS prêtes à l'emploi, aurora / verre / lueur, keyframes
tailwind-theme.css — extrait @theme pour Tailwind v4
./record_demo_template.py — enregistreur Playwright paramétrable
./edit_demo.py / ./edit_demo.sh — titre, légendes, incrustations, carte de fin, encodage
example_timeline.json — liste des séquences que le monteur lit
REFERENCE_CASE.md — exemple complet anonymisé et leçons tirées de trois versions

Style visuel (référence rapide)

Thème dans l'application (également dans FRONTEND_STYLE.md et theme.css) :

Rôle	Hex
Fond d'écran	`#05060A` / `#0A0C14` / `#11131F` / `#1A1D2E`
Texte principal	`#E5E7F0`
Cyan (dans le champ / actif)	`#22D3EE` / `#67E8F9`
Violet (moteur lourd ou payant)	`#A855F7` / `#A78BFA`
Fuchsia (fin de dégradé)	`#F0ABFC`
Émeraude (correspondance / achèvement / totaux)	`#10B981`
Rose (menace / arrêt brutal)	`#F43F5E`
Ambre (écart, hypothèse, non approuvé)	`#F59E0B`
Or (éclat de réussite)	`#FBBF24`

Nappe aurora, grille de 48px en fondu, cartes en verre, lueurs codées par couleur. Inter pour l'interface, JetBrains Mono pour les horloges et les flux, chiffres tabulaires. Chargez les polices ; les nommer dans un thème ne suffit pas (theme.css inclut l'importation). Le héros est en font-black tracking-tight à environ 48–60px, avec un mot dans un dégradé de texte #67E8F9 → #A78BFA → #F0ABFC. Les accroches sont en majuscules de 11–13px avec un espacement de 0.14–0.25em.

Thème de la barre de légende / carte de titre (la couche de montage, pas l'application) :

Rôle	Hex
Fond	`#08070C`
Règle / accroche or	`#E1A01D`
Titre	`#F3ECE3`
Sous-texte	`#9A958C`

La police du titre dans le monteur est un grotesque italique gras. ./edit_demo.py utilisera ./fonts, ou APP_DEMO_FONT / APP_DEMO_FONT_ITALIC, ou une police système DejaVu / Liberation. Geist Italic 900 est un bon substitut si vous l'avez.

Animations

Easing partagé : cubic-bezier(0.16, 1, 0.3, 1). Les compteurs défilent depuis la valeur précédente (1.1s par défaut, 1.6s sur les tuiles KPI, 1.8s sur les projections). Les étapes actives pulsent (1.4s) avec un anneau en expansion (1.3s). L'achèvement est un check ressort suivi d'une explosion de particules. Un toast de réussite reste environ 1.7s. L'appel à l'action (CTA) et l'étape active scintillent (boucle de 1.6s).

Rythmez les événements entrants pour que chaque passage soit lisible (environ 1.5s après la fin d'une étape). Les horaires et comptes du serveur restent réels ; seul leur affichage est retardé. Une fois l'exécution terminée, attendez environ 900ms, puis faites défiler en douceur vers un héros de résultats avec animation d'entrée.

Voix rédactionnelle

Écrivez comme une bande-annonce, puis prouvez-le avec des chiffres.

Héros : une courte métaphore, un mot en dégradé. Le sous-titre indique ce que le spectateur verra se déverrouiller, puis qu'il atterrira sur un affichage de coût et de confiance.
CTA en direct : un verbe d'ignition. CTA de relecture : un verbe de lecture.
Chaque étape a un titre concret et une réalisation en Titre Majuscule de 2–3 mots, toastée à la fin et marquée d'une étoile sur la ligne.
Les écarts sont du travail, pas des échecs. Les menaces ont un bouclier nommé. La sortie non approuvée est étiquetée dans l'interface. Une ligne de sécurité / lecture seule reste dans l'en-tête.
Les coûts sont exacts (suffisamment de décimales pour qu'un chiffre inférieur au centime ne devienne pas 0,00 $) et étiquetés mesurés vs estimés. Les hypothèses sont nommées sur la tuile.
La comparaison des coûts ou de la valeur du flux de travail complet, et ses mises en garde, se trouvent dans le produit afin que la caméra puisse y défiler.

UX de la démonstration

?replay=<id> (optionnel ?speed=) démarre automatiquement une exécution précédemment mesurée avec ses timings réels, et l'interface indique qu'il s'agit d'une relecture.
?run=<id> (optionnel ?backend=) rouvre une exécution terminée pour des reprises de tableau de bord sans refacturation.
Chemin en direct : télécharger ou connecter des données réelles → confirmer un moteur payant si nécessaire → allumer → chronologie rythmée + flux de requêtes → tableau de bord, projections, panneau de coûts, mises en garde.

Flux de travail

Styliser le frontend pour la caméra. S'il n'y a pas encore d'interface utilisateur, créez-en une. Appliquez theme.css (et tailwind-theme.css si l'application utilise Tailwind v4). Suivez la liste de vérification dans FRONTEND_STYLE.md.
Verrouiller les données réelles. Utilisez une exécution en direct ou un accessoire de relecture fidèle. Chaque légende ultérieure doit pouvoir citer un chiffre qui apparaît à l'écran ou dans les métriques de l'exécution.
Enregistrer avec Playwright en 1920×900. Pas de pastilles de légende sur la page — celles-ci couvrent l'interface. Scénarisez une prise continue (page d'accueil → flux de travail → résultats) avec des pauses de 2–4s et un défilement lent. Utilisez ./record_demo_template.py. Conservez la fréquence d'images native de Playwright (souvent 25 fps).
Monter avec ./edit_demo.sh. Le canevas est 1920×1080 : un volet application de 1920×900 au-dessus d'une barre réservée de 180px (#08070C / #E1A01D / #F3ECE3 / #9A958C). Une carte titre d'environ 2s, des coupures nettes (pas de fondus enchaînés d'1s), des incrustations d'environ 0.4s à 1.3× sur le volet application uniquement (la barre reste fixe). Terminez sur la comparaison des coûts ou de la valeur dans l'application , puis une carte de mises en garde d'environ 3s. Visez 60–70s. Silencieux par défaut (une piste AAC silencieuse est acceptable pour la compatibilité du lecteur).
Vérifier les images. Confirmez que la barre ne couvre jamais l'interface, que les incrustations ne recadrent pas la barre et que chaque chiffre légendé est à l'écran ou étiqueté comme hypothèse.
Les procédures pas à pas appartiennent à un deck séparé. L'architecture, le fonctionnement et les cartes de conclusion ne remplacent pas la session dans cette vidéo.

Voix des légendes

Accroche : quelques mots en majuscules espacées (SESSION EN DIRECT, MISSION ACCOMPLIE, LE PIÈGE).
Titre : une ou deux phrases courtes. Point, pas de points de suspension.
Mettez en premier le fait mesuré surprenant : comptes, temps, coût, ce qui a été détecté.
Pointez ce qui est à l'écran maintenant, puis ajoutez la conclusion. Ne faites pas de tutoriel.
Lorsque vous coupez vers un panneau de coûts dans l'application, dites qu'il s'agit du panneau propre de l'application, pas d'une diapositive.

Modes d'échec

Erreur	Correction
Superposition de légendes HTML/CSS dans la page	Barre réservée sous l'application, toujours
Collage de captures d'écran ou diapositives typographiques de "processus" comme corps	Enregistrer la session ; déplacer les cartes de processus vers un deck
Fondus enchaînés entre chaque séquence	Coupures nettes ; réserver les animations pour les incrustations et l'application elle-même
Chiffres inventés ou arrondis sans étiquette	Copier les chiffres de l'exécution ; étiqueter les hypothèses
L'incrustation zoome sur tout le cadre 1080p et recadre la barre	Zoomer uniquement sur le volet 1920×900
Fin sur l'architecture ou un graphique de fonctionnement	Terminer sur la comparaison coût/valeur du produit, puis les mises en garde
Générer une "démo" avec un modèle vidéo	Playwright + ffmpeg uniquement
Voix off ou musique ajoutée "pour la rendre cinématographique"	Par défaut silencieux ; l'image et les légendes portent le tout
Interface plate, chiffres qui apparaissent soudainement, pas de panneau de coûts dans l'application	Styliser l'application d'abord (`FRONTEND_STYLE.md`) ; ne pas essayer de corriger uniquement au montage
Héros ou CTA rédigé comme une page de paramètres	Métaphore + mot en dégradé ; verbe d'ignition pour le direct, verbe de lecture pour la relecture
Polices nommées dans le CSS mais jamais chargées	Ajouter l'import Inter + JetBrains Mono depuis `theme.css`
Ensemble de données ou CLI enregistrés comme diapositives parce qu'"il n'y a pas d'application"	Créer d'abord un petit frontend pour le style, puis l'enregistrer

Démarrage rapide

Nécessite ffmpeg et Python 3.

python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium

# 1. Styliser l'application (theme.css / FRONTEND_STYLE.md) pour qu'elle performe devant la caméra.
# 2. Une fois l'application en cours d'exécution et actions() dans l'enregistreur remplies :
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4

Optionnel : mettez Geist (ou un autre grotesque italique gras) dans ./fonts, ou définissez APP_DEMO_FONT et APP_DEMO_FONT_ITALIC.

Objectif

Créer une vidéo de démonstration, promotion ou lancement dramatique d'une application fonctionnelle à partir d'une session réelle. Styliser un frontend prêt pour la caméra, l'enregistrer avec Playwright, et composer une barre de légende réservée, des incrustations et des cartes de titre et de fin typographiques avec ffmpeg. Un pipeline, un ensemble de données, un modèle de coût ou un CLI est mis en place comme ce frontend d'abord.

Entrées

Une application en cours d'exécution à l'URL de base de l'enregistreur (--base, par défaut http://127.0.0.1:8765 dans record_demo_template.py), ou un petit frontend construit pour l'enregistrement.
Des données réelles, ou une relecture fidèle d'une exécution précédemment mesurée. Les chiffres légendés proviennent de l'écran ou des métriques de l'exécution, ou sont étiquetés comme hypothèses.
actions() remplies dans record_demo_template.py.
Un JSON de chronologie structuré comme example_timeline.json.
ffmpeg, Python 3, playwright et pillow. Grotesque italique optionnel dans ./fonts, ou APP_DEMO_FONT et APP_DEMO_FONT_ITALIC.
theme.css, tailwind-theme.css lorsque l'application utilise Tailwind v4, et la liste de vérification dans FRONTEND_STYLE.md.

Sorties

Prise brute de record_demo_template.py (.webm, ou .mp4 avec --transcode).
Fichier monté de edit_demo.sh : 1920×1080 H.264, généralement 60–70s, AAC silencieux. Un volet application de 1920×900 se trouve au-dessus d'une barre de légende de 180px, avec une carte titre d'environ 2s, des coupures nettes, des incrustations d'environ 0.4s à 1.3× sur le volet application, et une carte de fin de mises en garde d'environ 3s.

Non-objectifs

Modèles de génération vidéo, modèles de génération d'images et TTS.
Musique libre de droits ou voix off, sauf si le brief demande du son.
Superpositions de légendes dans la page, collages de captures d'écran et diapositives de processus en fondu comme corps.
Chiffres inventés, ou chiffres arrondis non étiquetés.
Utilisation d'un deck d'architecture ou de fonctionnement à la place de la session.

Vérifications

La liste de vérification pré-enregistrement de FRONTEND_STYLE.md est satisfaite, y compris le chargement d'Inter et JetBrains Mono et un cadre 1920×900 lisible.
La barre réservée ne couvre jamais l'interface. Les incrustations ne déplacent que le volet 1920×900, donc la barre reste pleine largeur et non recadrée.
Chaque chiffre légendé est à l'écran ou dans les métriques de l'exécution, ou bien la légende et la carte de fin l'appellent une hypothèse ou une projection.
Les coupures sont nettes, la durée est d'environ 60–70s, et la piste est silencieuse à l'exception de l'AAC silencieux que le monteur intègre.
bash -n edit_demo.sh et python3 -m py_compile sur edit_demo.py et record_demo_template.py réussissent tous les deux.

Modes d'échec et récupération

Utilisez le tableau des Modes d'échec ci-dessus. Récupération :

Ce que vous voyez	Que faire
Les légendes couvrent les boutons ou graphiques	Supprimez la superposition dans la page. Mettez la ligne dans la chronologie et relancez `./edit_demo.sh`.
Le corps est des images fixes, un collage ou des fondus	Enregistrez la session avec `./record_demo_template.py` et faites des coupures nettes entre les séquences.
Une incrustation recadre la barre	Gardez le `zoom` sur la séquence. `edit_demo.py` ne met à l'échelle que le volet application.
Un numéro de légende n'est pas à l'écran	Copiez le chiffre du tableau de bord ou de la métrique de l'exécution, ou étiquetez l'hypothèse sur la tuile et la carte de fin.
Interface plate, chiffres qui apparaissent soudainement, ou pas de panneau de coûts	Restylisez à partir de `theme.css` et `FRONTEND_STYLE.md`, puis enregistrez à nouveau.
Le monteur se ferme parce qu'il ne trouve pas une police	Ajoutez un `.ttf` dans `./fonts`, ou définissez `APP_DEMO_FONT` et `APP_DEMO_FONT_ITALIC`, puis relancez `./edit_demo.sh`.
La source est un notebook, un CLI ou un tableur	Construisez le petit frontend dans `FRONTEND_STYLE.md` autour des données réelles, puis enregistrez-le.

Vel-Labs/app-demo-video

Qu'est-ce que app-demo-video ?

Demander à votre IA préférée

Documentation