Film de démo

Que fait Film de démo ?

scripts/demo filme une application web et écrit son corpus dans ~/demo-reels-out/<workspace>/ (DEMO_OUT_ROOT déplace le répertoire parent, DEMO_OUT nomme le répertoire d'une exécution) : par scène un mp4 avec voix off, un poster, des captures retina, plus full-tour.mp4, manifest.json et index.html. Tout en local. Le moteur s'exécute depuis cette compétence ; rien n'est installé dans l'application filmée.

Non-négociables

Chacun coûte une exécution ou la patience d'un utilisateur.

1. Une version figée, jamais un serveur de développement. Son graphe de modules appartient à celui qui édite les sources. Copiez-le quelque part de privé et vérifiez sa base API en lisant le bundle. Une URL sans dépôt derrière est le mode site ; une URL sur localhost est un serveur de développement et n'est jamais filmée.
2. En mode build, simulez chaque requête dans le processus et figez l'horloge. Un corpus est publié, et un compte réel publie les adresses de vraies personnes. Le mode site abandonne les deux en connaissance de cause : pages publiques uniquement.
3. Possédez votre port et votre répertoire de sortie. Le studio refuse d'adopter un serveur qu'il n'a pas démarré. Ne faites jamais de pkill par motif.
4. Vidéo 1080p60, captures 2x. Ce sont des réglages séparés. La vidéo 4K saccade car le débit est un budget fixe de pixels par seconde.
5. Faites le geste, puis narrez en zoomant sur le résultat. Un sujet par ligne. Ne narrez jamais avant que le sujet n'existe. Lorsque l'application a son propre minuteur — une fenêtre d'annulation, un toast — le geste se fait à l'intérieur et les mots après, sinon le film montre une fonctionnalité qui ne fonctionne pas.
6. Une scène, puis arrêtez et demandez (étape 8). Cela a détecté quatre défauts avant que vingt-six autres scènes soient filmées.
7. Lisez le PNG, à chaque fois. Une scène qui réussit tout en cadrant la mauvaise chose est un échec, et seul un œil sur la capture le détecte.
8. Rien n'est définitif tant qu'ils ne le disent pas. Toute remarque sur les mots, le cadrage, le rythme, ce qui est couvert ou la voix est une re-filmage, pas une négociation : changez-le et filmez-le à nouveau. Ils ne voient pas ce que vous voyez, donc "trop long", "zoome plus" et "arrête de zoomer autant" sont des instructions complètes, et une scène est peu coûteuse à filmer deux fois.

Flux de travail

1. Choisissez le mode en fonction de ce qui vous a été donné. Ne demandez pas. Une URL http(s) sur un hôte public est site, espace de travail ~/.shipdemo/<host>/. Une URL sur localhost ou une adresse privée est un serveur de développement : trouvez le dépôt derrière et traitez la requête comme ce dépôt. Pas d'URL signifie le dépôt où vous êtes, donc remontez et cherchez une application web (un package.json avec un script de build à côté d'une configuration Vite, React Router, Next, Astro, SvelteKit ou Remix). Exactement un est build ; plusieurs, demandez lequel ; aucun, demandez une URL ou un chemin. Un espace de travail dont .origin nomme déjà ce dépôt est réutilisé, pas reconstruit. Dites le mode et le chemin de l'espace de travail en une ligne et continuez.
2. scripts/doctor.sh, puis préparez-vous avant de demander quoi que ce soit d'autre à l'utilisateur. Ils ont installé une compétence ; ils ne se sont pas inscrits pour exécuter trois scripts. Dites ce qui manque en une ligne, dites ce que vous proposez d'installer et approximativement sa taille, et exécutez-le une fois qu'ils sont d'accord. scripts/install.sh couvre le moteur et Chromium (environ 250 Mo) et installe aussi ffmpeg lorsque le gestionnaire de paquets le permet ; scripts/install-voice.sh est la voix (~350 Mo), et filmer en silence est une bonne réponse s'ils préfèrent ne pas le faire. N'installez jamais rien sans demander, et ne leur donnez jamais un rapport de doctorat à interpréter. Deux choses qu'il ne fera pas, et vous non plus : mettre à jour leur Node, car savoir quel outil le possède est à eux de connaître, et exécuter sudo, car une invite de mot de passe dans un script que personne ne regarde se bloque simplement. Dans les deux cas, le script imprime la commande et vous la transmettez.
3. Découvrez, sans rien écrire. site : ouvrez l'URL et lisez-la, pour savoir à quoi sert la page, les trois choses qui valent la peine d'être montrées, et ce qui est assez stable pour être pointé. Si elle arrive sur une page de connexion, arrêtez : une application connectée est filmée depuis son dépôt, donc demandez-le ou une URL publique. build : la commande de build copiée textuellement de package.json ; le répertoire de sortie depuis la configuration du framework ; tout hôte API absolu dans .env* (il va dans build.forbid) ; la clé que le script de thème lit ; une fixture API existante ou des handlers MSW ; la densité des data-testid ; les routes sans identifiants.
4. scripts/scaffold.mjs <appRoot>, ou scripts/scaffold.mjs --site <url>. Aucun des deux n'écrit quoi que ce soit dans l'application.
5. Remplissez le demo.config.ts de l'espace de travail. Un champ obligatoire encore inconnu signifie que la découverte n'est pas terminée. config.md
6. build uniquement : écrivez mock.ts et seed/. Réutilisez les propres fixtures de données du dépôt là où il en a, mais jamais un fichier qui importe @playwright/test : deux copies dans une même exécution est une erreur que Playwright refuse, et cela fait échouer tout le corpus plutôt que la seule scène qui l'a fait. Ensuite, DEMO_VOICE=0 scripts/demo --grep smoke. Réutilisez l'API de fixture du dépôt s'il en a une (mocking.md). Lisez la capture : connecté, données ensemencées, bon thème, pas de page de connexion. Lisez la ligne de capture. Corrigez jusqu'à ce que les deux soient corrects, puis écrivez demo/ui.ts avec seulement ce que l'exécution smoke a prouvé.
7. Écrivez le script d'abord. Remplissez le profile.json de l'espace de travail (copiez template/profile.json ; produit, public, phrase de clôture, mots interdits), puis écrivez chaque ligne selon script.md : accroche, étapes, aboutissement, fermeture. L'accroche va aussi dans hooks.json pour les variantes. Filmez ce qu'ils ont demandé, à la portée qu'ils ont demandée. Une fonctionnalité nommée est une scène : écrivez-la, filmez-la, remettez-la. Ne répondez pas "enregistrez la recherche sur la page d'accueil" avec une proposition de dix scènes, et n'élargissez pas silencieusement la demande parce que le produit contient plus. Seulement lorsque la demande est le produit entier, proposez 6 à 10 scènes, chacune avec un titre et un résumé d'une ligne dans l'ordre de la visite, et demandez lesquelles filmer en premier.
8. STOP. Filmez cette scène avec voix. Vérifiez que le nombre de paroles correspond aux appels say, rien n'a dépassé, le débit a tenu. Lisez chaque capture. Donnez à l'utilisateur le chemin du mp4 et demandez-lui son avis sur le registre de l'écriture, l'échelle de zoom, le rythme et la voix. N'écrivez rien d'autre jusqu'à ce qu'il réponde.
9. Ensuite, par lots de trois ou quatre via --grep ; le manifeste fusionne. Lisez les captures après chaque lot. DEMO_BUILD=0 scripts/demo saute la reconstruction en itérant sur une scène — vingt secondes au lieu de quatre minutes ; retirez-le pour l'exécution qui produit le corpus.
10. Exécution complète avec DEMO_CAPTIONS=1 DEMO_TRACE_FRAMES=1, puis scripts/check.mjs <out> et ouvrez <out>/index.html. Signalez le tableau de capture, les clips lents et tous les drapeaux que les vérifications lèvent.
11. Variantes. Demandez lesquelles ils veulent, sauf s'ils l'ont dit : reel, wide-phone, wide-laptop, wide-laptop-zoom, web, ou all (scripts/variants.mjs --list décrit chacune). Ensuite, scripts/variants.mjs <out> --only <list>. Les préréglages téléphone prennent des enregistrements en portrait et ceux pour ordinateur portable en paysage, donc filmez les deux tailles quand ils veulent les deux. Lisez un poster par variante avant de les remettre.

Une scène

scene('tasks', { title: 'Vos tâches, à côté de votre calendrier', blurb: '...' },
  async ({ actor, page, shot }) => {
    await actor.click(page.getByRole('radio', { name: 'Aujourd\'hui' }));
    await actor.settle();
    await actor.spotlight(
      row('Envoyer le retour à Sam'),
      'Et celui-ci date d\'hier auquel je n\'ai jamais eu le temps, donc il est signalé.',
      { scale: 1.8, stay: true }
    );
    await shot('overdue');
    await actor.unfocus();
  });

spotlight prend la marque de narration, puis déplace la caméra et le curseur sur les mots d'ouverture de la ligne. Échelle par sujet : panneau ~1.4, ligne ~1.7, commande unique ~2. Une ligne sur tout l'écran obtient un simple say et pas de zoom. unfocus est un indice plutôt qu'un mouvement : la caméra ne sort que quand quelque chose a besoin d'être large, donc les séquences consécutives sur la même région glissent au lieu de rebondir. scenes.md · narration.md

Jamais

Synthèse vocale cloud (le film concerne des données privées). Le recordVideo de Playwright (pas de contrôle du débit, de la taille ou du démarrage ; l'enregistreur le remplace). 4K par défaut. Musique, cartes d'introduction ou fondus enchaînés. Scènes générées à partir d'un parcours de routes : une scène est une chorégraphie avec un but. Nouvelles tentatives : une scène relancée est un film différent.

Sous-titres, vérifications et variantes

Les sous-titres sont activés pour tout ce qui est destiné à être publié (DEMO_CAPTIONS=1) : .srt, .vtt, .lines.json et un .captioned.mp4, découpés à partir du script lui-même, donc ils correspondent mot pour mot à la voix. Les sous-titres incrustés sont en bas, surélevés pour ne pas chevaucher les contrôles du lecteur (DEMO_CAPTION_MARGIN permet de remplacer ; jamais en haut).

scripts/check.mjs exécute trois vérifications : voix (chaque ligne transcrite et comparée avec son script), écran (toutes les demi-secondes lues pour les mots jamaisÀLÉcran du profil, puis tout ce qui est dessiné en rouge) et images (écarts lents). Un outil manquant est ignoré avec la commande pour l'installer (scripts/install-checks.sh). Le rouge qui est normal, comme un badge de retard, est listé aussi : lisez la liste, ne le comptez pas.

scripts/variants.mjs lit variants/presets.json. Une nouvelle variante est une nouvelle entrée là-dedans : toile, où se trouve l'application, où vont l'accroche et les sous-titres, et zoom si elle doit zoomer sur les points forts. Rien n'est re-filmé ; les originaux ne sont jamais touchés.

Aussi

DEMO_VOICE_VARIANTS=am_michael,bf_emma mélange la même prise avec plus de voix (<scene>.<voice>.mp4), pour auditionner une voix sans re-filmer.

capture.md avant de changer un nombre de capture. runs.md pour les builds, l'isolement et le manifeste. troubleshooting.md quand une exécution échoue ou qu'une prise semble incorrecte. Le moteur s'exécute depuis cette compétence, donc une correction dans engine/ atteint chaque projet sur la machine en une fois : modifiez-le là, et rien n'a besoin d'être propagé.