altacrest/motion-how-to-video

Vidéo tutorielle narrée avec Claude Motion

Voici comment l'équipe marketing de Novacrest crée ses vidéos tutorielle et de documentation : les écrans réels de l'application, un curseur qui glisse, une légende courte par étape, une voix anglaise qui lit chaque légende, le tout en un seul MP4. Cela a commencé avec les films de démarrage rapide d'OmniOrders (octobre 2026).

Tout ce dont le film a besoin est fourni avec cette compétence (les chemins sont relatifs à ce fichier) :

• engine/shared.js et engine/base.css : le moteur de capture d'écran (SS) et son apparence. Ne jamais les reconstruire de mémoire.
• examples/how-to-film/ : chaque module de scène du film de référence, « Créer une vidéo tutorielle avec Claude Motion » (27 octobre 2026), avec ses lines.json, scenes.json et shots.json. Lisez-les avant d'écrire des scènes : ils montrent chaque option de SS.def en action.
• scripts/voice.py : la narration. API ElevenLabs, un MP3 par légende, vérifié avec Whisper lorsqu'il est installé. Il s'exécute dans le terminal de l'utilisateur.
• scripts/mix.py : place chaque clip sous sa légende et écrit le MP4 final (nécessite ffmpeg).

Règles impératives

• Uniquement des écrans réels, capturés depuis l'application. Ne jamais redessiner l'interface de l'application : les écrans dessinés ont été détectés dans les premiers films de démarrage rapide. Une simple carte affichant une commande est acceptable ; une copie dessinée d'une application ou d'une fenêtre de terminal ne l'est pas.
• Utiliser le compte de test. Pas de données clients réelles, de clés, de jetons ou de mots de passe à l'écran : les masquer avec un cache ou utiliser les valeurs fictives du compte de test. Ne jamais connecter l'utilisateur ; lui demander de se connecter.
• La narration est en anglais (États-Unis), et les légendes sont le script : une par étape, en mots simples que n'importe qui pourrait comprendre, moins de 12 mots environ, pas de tirets longs. La voix lit chaque légende mot pour mot. Lorsque la voix prononce un mot de manière incorrecte, placer une réécriture phonétique dans say.json ; la légende reste telle qu'écrite.
• Ne jamais étirer la vidéo pour correspondre à la voix. Les légendes sont synchronisées avec leurs clips (étape 4). Un clip qui dure encore trop longtemps est légèrement accéléré (mix.py autorise au maximum 1,15x), ou sa ligne est raccourcie et prononcée à nouveau.
• Piloter d'abord : prononcer les lignes de la première scène et les vérifier avant le reste, et à nouveau après tout changement de voix ou de script.
• Aucun LLM ne juge la voix. voice.py note chaque clip avec Whisper (taux d'erreur word) lorsque faster-whisper est installé ; sinon, l'utilisateur écoute.
• Ne jamais demander, imprimer ou coller de clé API dans le chat. La clé ElevenLabs réside uniquement dans un fichier sur l'ordinateur de l'utilisateur.
• Demander avant de télécharger des fichiers, de les nommer et de préciser d'où ils viennent.

Pourquoi la voix s'exécute dans le terminal de l'utilisateur : l'espace de travail Claude et le shell Claude sur l'ordinateur de l'utilisateur ne peuvent pas atteindre ElevenLabs (la liste blanche réseau de Novacrest bloque api.elevenlabs.io et elevenlabsusercontent.com ; vérifié le 12 novembre 2026), et les clés ne passent jamais par le chat. Claude prépare tout et l'utilisateur colle une commande. Le connecteur ElevenLabs (connecteur personnalisé, https://api.elevenlabs.io/v1/mcp) produit de la parole sans clé, mais son audio revient sous forme de liens elevenlabsusercontent.com que l'espace de travail ne peut pas télécharger, donc il n'est pas utilisé ici. Si un administrateur autorise ces deux domaines, revenez sur ce point.

Étape 1 : périmètre et légendes

Obtenez ces éléments, en ne demandant que ce qui manque en un seul tour : le flux (par exemple « créer un transfert dans OmniOrders »), l'application et son compte de test, où va la vidéo (une page de documentation, le démarrage rapide, YouTube) et les couleurs du produit. Écrivez la liste des étapes et une légende par étape, plus une ligne de titre et une ligne de fin, sous forme de lines.json ({"id": "légende"}, dans l'ordre du film ; des identifiants comme open, ask-a, ask-b, end). Ajoutez say.json ({"id": "texte prononcé"}) uniquement pour les lignes contenant un mot que la voix pourrait mal prononcer (OmniOrders comme « Omni Orders », un nom de dépôt avec des tirets). Affichez les légendes dans le chat à l'utilisateur et continuez sauf s'il les modifie.

Étape 2 : démarrer la narration

Démarrez-la dès que les légendes sont fixées ; capturez et construisez pendant qu'elle s'exécute.

1. Créez un dossier de film sur l'ordinateur de l'utilisateur, ~/Downloads/<slug-du-film>/, avec lines.json, say.json (le cas échéant) et une copie de scripts/voice.py. Avec un dossier lié, écrivez-les avec device_bash. Sans lien, envoyez les fichiers avec SendUserFile et demandez à l'utilisateur de les placer dans un même dossier.
2. La première fois, l'utilisateur a besoin d'une clé API ElevenLabs avec accès à Text to Speech (README, « ElevenLabs »). Vérifiez si ~/.config/elevenlabs/env existe (testez l'existence du fichier ; ne le lisez jamais). Si ce n'est pas le cas, commencez le bloc ci-dessous avec la ligne de configuration.
3. Donnez à l'utilisateur un bloc prêt à coller dans le terminal :

   cd ~/Downloads/<slug-du-film>
   python3 voice.py setup        # première fois uniquement : collez la clé quand demandé (la saisie est masquée)
   python3 voice.py check        # la clé fonctionne, crédits restants
   python3 voice.py --only open,<identifiants de la première scène>
   

   Lorsque le pilote semble correct (voice.json n'affiche aucun indicateur, ou l'utilisateur a écouté), le reste est python3 voice.py.
4. La voix par défaut : Matilda (XrExE9yKIg1WjnnlVkGX), eleven_multilingual_v2, stabilité 0,5, similarité 0,75, vitesse 1,0, MP3 44,1 kHz 128 kbps ; chaque ligne est lue avec les légendes avant et après comme contexte, afin que la lecture soit fluide. Modifiez la voix ou la vitesse uniquement si l'utilisateur le demande. voice.py affiche les caractères à utiliser (environ un crédit chacun) ; si check montre moins de crédits restants, arrêtez-vous et demandez.
5. Les clips arrivent dans voice/<id>.mp3 ; voice/voice.json répertorie la longueur de chaque clip et, avec Whisper, ce qui a été entendu et le taux d'erreur word. Une ligne au-dessus de 0,05 nécessite une écoute, une réécriture dans say.json ou un nouveau libellé, puis python3 voice.py --only <id> --redo.

Étape 3 : capturer les écrans

1. Chargez la compétence claude-in-chrome. Ouvrez l'application dans un nouvel onglet du Chrome connecté de l'utilisateur. Redimensionnez la fenêtre jusqu'à ce que la zone d'affichage de la page soit de 1512 x 745 (vérifiez innerWidth et innerHeight) : c'est la taille du monde du moteur, et les captures d'écran reviennent alors en 2x, 3024 x 1490.
2. Parcourez le flux dans le compte de test. Capturez chaque état nécessaire au film avec une capture d'écran computer et save_to_disk: true : avant et après chaque clic ; pour la saisie, le champ vide et le champ rempli (le film révèle les lignes tapées sous forme de patches découpés de la capture remplie).
3. Dans l'espace de travail, convertissez en webp (qualité environ 90), nommé <flux>_<étape>.webp, ainsi que les recadrages 2x de chaque ligne tapée. Enregistrez le chemin URL de chaque prise dans shots.json et le rectangle de chaque patch en pixels de la vue (l'espace 1512 x 745).
4. Ne soumettez rien qui modifie des données en dehors du compte de test. Arrêtez-vous et demandez si une étape le ferait.

Étape 4 : construire le film

1. Créez le film à partir du type d'artefact Motion (trouvez-le dans la liste des types de l'outil Artefact), title = le nom de la vidéo, et lisez les instructions du type qui reviennent : elles régissent le film. Répondez à ses questions dans la demande afin qu'aucun formulaire ne soit nécessaire. Style : curseur guidé sur des captures d'écran réelles, l'apparence du film de référence. Couleurs : la palette du produit (OmniOrders : #16213E, #11ACE4, #F4F7FB, #2FD193). Durée : définie par la voix (ci-dessous), plus une carte titre de 5 secondes et une carte de fin de 7 secondes.
2. Écrivez engine/shared.js dans le film en tant que modules/shared.js inchangé, et engine/base.css en tant que modules/base.css, en modifiant uniquement les quatre couleurs sur sa première ligne. Téléchargez les captures d'écran et les recadrages de ce film comme ses propres ressources ; ne copiez jamais les références _blob d'un autre film.
3. Écrivez lines.json (le fichier de l'étape 1), shots.json (le chemin URL de chaque prise ; "host" est le domaine que la barre du navigateur affiche avant un chemin commençant par /), un module de scène par étape construit avec SS.def (la carte titre utilise SS.open ; SS.end prend mark, next et url), et scenes.json avec dur et desc de chaque scène. Déclarez les légendes comme caps: [['<id>', tin, tout], ...] afin que mix.py puisse les trouver ; une ligne prononcée sans légende (celle de la carte titre) est déclarée de la même manière dans son module, par exemple const voiceOnly = [['open', 0.4, 4.6]];. Suivez les exemples : le curseur glisse vers le contrôle, un anneau et une ondulation de clic le marquent, la caméra effectue un zoom avant, la légende se place sur la plaque sombre.
4. Synchronisez les légendes avec les clips dans voice/voice.json : dans chaque scène, la première légende apparaît à 0,3 s, chaque légende reste affichée pendant la durée de son clip plus 0,45 s, et la suivante apparaît 0,35 s après cela. La dur d'une scène est le temps de sortie de sa dernière légende plus environ 0,4 s, ou plus longtemps si l'action à l'écran le nécessite. Ajustez le curseur, les anneaux et la caméra à l'intérieur de ces fenêtres. Si la voix n'est pas encore revenue, donnez à chaque légende environ 5 s et resynchronisez quand elle sera disponible.
5. Gardez la musique de fond discrète et moderne : les premières musiques de démarrage rapide ont été qualifiées de « orgue d'église des années 80 ».
6. L'utilisateur lit le film et demande des modifications ; appliquez-les (une légende modifiée est prononcée à nouveau). Lorsqu'il est satisfait, le MP4 est exporté avec la flèche de téléchargement sous le lecteur sur la page du film : l'utilisateur clique dessus, ou Claude dans Chrome le fait une fois qu'il dit oui. Le fichier arrive dans son dossier Téléchargements.

Étape 5 : mixage

1. Placez le MP4 exporté, le dossier voice/, scenes.json et les modules de scène au même endroit : le dossier du film sur l'ordinateur de l'utilisateur (exécutez mix.py avec device_bash si ffmpeg est installé), ou l'espace de travail cloud (préparez-les). Les documents enregistrés depuis le film avec ArtifactData (out_dir) fonctionnent tels quels.
2. python3 mix.py cues --scenes scenes.json --modules <dossier avec scene-*.js> --lines lines.json écrit cues.json : le début et la fin de chaque légende dans le film (le début de la scène, la somme des dur des scènes précédentes, plus les temps de la légende).
3. python3 mix.py mix --film <exporté>.mp4 --voice voice --cues cues.json --out <produit>-<flux>.mp4 --web démarre chaque clip à sa légende, maintient la musique de fond du film à 25 % sous la voix lorsque l'exportation a du son, nivelle la voix à -16 LUFS et copie l'image. Il s'arrête sur un clip nécessitant plus de 1,15x ; raccourcissez cette ligne, prononcez-la à nouveau et mixez à nouveau.
4. python3 mix.py frames --film <produit>-<flux>.mp4 --cues cues.json --out frames enregistre une image au milieu de chaque légende. Regardez chacune d'elles : légende visible, bon écran, rien de privé. Ensuite, lisez les premières secondes : la voix commence avec sa légende. Suivez les règles ffmpeg de la compétence de création vidéo pour tout le reste.

Étape 6 : livraison

• Envoyez le MP4 final avec SendUserFile et enregistrez-le dans le dossier connecté de l'utilisateur sous <produit>-<flux>.mp4.
• Pour un site web : la copie -web.mp4 va dans une PR vers le dépôt du site. Donnez le lien à l'utilisateur ; il fusionne la PR.
• Terminez par une courte liste de ce que l'utilisateur doit encore faire : la commande dans le terminal, l'exportation, la fusion de la PR.

Configuration, une fois par personne (le README du plugin contient les détails)

1. Installez depuis GitHub : Claude > Personnaliser > Plugins > Ajouter > Ajouter depuis le marketplace, tapez altacrest/novacrest-skills et choisissez Utiliser, laissez Synchronisation automatique activée, Synchronisez, puis installez How-to video.
2. ElevenLabs : une clé API avec accès Text to Speech, sauvegardée avec python3 voice.py setup dans n'importe quel dossier de film.
3. Claude dans Chrome, connecté au compte de test de l'application.