product-motion

Product Motion

Crée des vidéos courtes qui montrent comment fonctionne une fonctionnalité : l'interface du produit est dans le cadre, le curseur clique, le texte s'affiche, des étiquettes se placent sous les fragments de saisie, les cartes apparaissent en cascade, la caméra suit le regard, une voix décrit les actions. Cette approche a été validée sur des vidéos pour plusieurs produits ; ici elle est décorrélée de toute marque spécifique.

Principes

1. L'image est fonction du temps. La vidéo est une page HTML où render(t) calcule l'état de l'image en fonction du temps, et scripts/render.py capture les images une par une et les transmet à ffmpeg. Pas d'animations CSS, de minuteurs ou d'enregistrement d'écran : pas de saccades ni de désynchronisation, chaque instant peut être vérifié par une image individuelle. Le moteur est templates/engine.js (references/engine.md).
2. On ne montre que ce qui existe dans le produit. Les écrans, les textes, les états proviennent du code, du prototype, de docs/ ou des captures d'écran du projet actuel. Aucune fonction inexistante n'apparaît dans la vidéo. Les données sont des noms courts fictifs. Les éléments inventés pour la scène (réponses, textes d'état) sont soumis à l'utilisateur pour vérification.
3. Le style est celui du produit, pas du skill. Les couleurs, l'accent, les polices, les logos proviennent du profil de marque du projet (motion/brand/), collecté à partir de son code (references/brand.md). Le profil neutre du skill n'est utilisé que pour le brouillon.
4. Nous ne synthétisons pas la voix nous-mêmes. Les TTS locaux sonnent robotiques. L'utilisateur reçoit le texte et le prompt pour Gemini TTS séparément (ou enregistre sa propre voix) et nous envoie le fichier ; align_vo.py le décompose mot par mot. Jusque-là, la vidéo vit avec des sous-titres et de la musique.
5. D'abord visuellement, ensuite rendu. Des planches contact des moments clés dans les formats choisis et verify_scene.py sont utilisés avant le rendu complet. Il est moins cher de détecter les erreurs de composition sur les images fixes.
6. Nous ne devinons pas les décisions de l'utilisateur. La langue, les formats, l'accélération, la musique, la publication proviennent du brief ou d'une question. Les valeurs par défaut ci-dessous ne s'appliquent que si l'utilisateur n'a pas précisé autre chose.

Processus

0. Environnement (une seule fois par machine)

python3 <skill>/scripts/check_env.py

Nécessite Python 3.9+, ffmpeg/ffprobe, pip install playwright numpy scipy pillow (+ faster-whisper pour la voix), python -m playwright install chromium ; pour la version accélérée, ffmpeg avec rubberband. De préférence dans un venv du projet ou à côté ; n'installe pas les dépendances toi-même sans l'accord de l'utilisateur — indique les commandes.

1. Brief

Fonctionnalité ; durée (si non précisée : 30–35 s pour une fonction, 60–75 s pour une section) ; public et objectif (formation, promotion, investisseur, landing) ; langue ; formats (si non précisés : 16:9, proposer 9:16 vertical). Pas plus de deux questions à la fois ; le reste, des valeurs par défaut raisonnables, nommées dans la réponse. Détails : references/brief.md.

2. Informations sur la fonctionnalité — issues du projet actuel

Lis le code et le prototype de la fonctionnalité, docs/, les captures d'écran : écrans, textes exacts, placeholders, boutons, états, ce qui existe et ce qui n'existe pas. Si ce que l'utilisateur voit après l'action principale n'est pas clair, demande-le.

3. Profil de marque — une fois par projet

Si le projet n'a pas de dossier motion/brand/ — collecte-le selon references/brand.md : brand.css (tokens à partir des variables CSS, thèmes, configuration Tailwind), polices locales avec droits vérifiés, logos. Montre une image d'exemple à l'utilisateur avant la première vidéo. Les vidéos suivantes utilisent le profil déjà préparé.

4. Script

Tableau « timecode · contenu du cadre · caméra/animation · réplique » (references/storyboard.md : squelettes par durée, densité de texte 1.3–1.6 mot par seconde, archétypes de scènes). Vidéo de plus de 30 s ou brief incomplet : montre le tableau et attends un « ok » ; court avec un brief clair : tu peux commencer à assembler immédiatement et montrer le tableau en même temps que les premières images.

5. Projet de la vidéo

Si le projet a déjà un emplacement pour les vidéos (promo/, design/motion/, etc.) — mets-la là ; sinon, motion/<slug>/.

python3 <skill>/scripts/new_project.py motion/<slug> --brand motion/brand --lang fr --title "Fonctionnalité · Produit"

À l'intérieur : video.html, plan.js, cues.js, tmap.js, engine.js, processing.js, base.css, brand/, build/, out/, README.md. build/ et les lourds out/*.mp4 — dans le .gitignore du projet, sauf décision contraire de l'utilisateur. Si le projet a un dossier docs/, ajoutes-y un court lien vers la vidéo et son README.

6. plan.js et scènes

plan.js — source unique : duration, fps, canvas, language, product, audience, hold, répliques vo[] (id, at, text, tts, subs), pronounce, emphasis, music. JSON strict après window.PLAN =.

Dans video.html, remplace le contenu de démonstration du template par les écrans de la fonctionnalité : build (éléments répétés), setup (mesures E.measureAt + E.rect, clés de caméra pour les deux formats, curseur, clics), scene(t). Les événements à l'écran — sur les mots des répliques (E.sync('p3:mot', backup)). Écrans sombres et modales — via E.dim() et dans #app2. Recettes de scènes — references/scenes.md, règles de mouvement et de caméra — references/motion.md. Aperçu avec curseur : video.html?preview=1 via python3 -m http.server depuis le dossier de la vidéo.

7. Vérification par images

python3 <skill>/scripts/verify_scene.py video.html --fmt both
python3 <skill>/scripts/render.py video.html stills --fmt both --times 1,6,9,12,15,19,23,27,31,34 --sheet

Ouvre build/stills/sheet_h.jpg et sheet_v.jpg : la caméra regarde l'action ; les étiquettes sont sous leurs fragments ; le texte ne se coupe pas et n'est pas tronqué ; l'accent est uniquement à ses emplacements ; à la transition « traitement → résultat », pas de flash blanc ; en 9:16, le texte est grand, les sous-titres sont au-dessus du panneau inférieur. Corrige jusqu'à ce que les images clés soient propres. Avant le premier rendu, consulte references/pitfalls.md.

8. Voix

python3 <skill>/scripts/vo_pack.py plan.js            # --model 3.8 pour Gemini 3.8 Flash TTS, --voice female

Donne out/voiceover/tts_text.txt et tts_prompt.txt en deux blocs de code séparés (texte dans le champ texte, prompt dans le champ style), la voix (pour le français féminin — recommander voix par défaut), la demande d'enregistrer en une seule prise complète et le tableau de timing.md. Un enregistrement personnel de l'utilisateur sur le même texte convient aussi. Règles — references/voiceover.md.

9. Fichier voix reçu → décomposition

python3 <skill>/scripts/align_vo.py plan.js voix.wav        # build/vo_aligned.wav, cues.js, out/subtitles.srt, rapport

Lis build/align_report.md : les mots « à vérifier à l'oreille » sont signalés à l'utilisateur avec le timecode ; les répliques décalées sont mieux corrigées dans plan.js. Le script s'arrête si la parole empiète sur l'image finale (hold).

Accélération — seulement une suggestion. Si la vidéo « traîne », propose retime.py (lecture +4,5 %, pauses plus courtes, une seule carte temporelle pour la vidéo, la voix, la musique et les sous-titres). Ne l'applique qu'avec l'accord de l'utilisateur.

10. Musique, mixage, rendu, assemblage

python3 <skill>/scripts/music.py plan.js --out build/music.wav                         # synthèse de brouillon selon la section music
python3 <skill>/scripts/prepare_music.py plan.js track.mp3 --end-align --out build/music.wav   # ou piste de l'utilisateur
python3 <skill>/scripts/mix.py build/music.wav build/vo_aligned.wav --out build/mix.wav
python3 <skill>/scripts/render.py video.html video --fmt h --out build/h_subs.mp4
python3 <skill>/scripts/render.py video.html video --fmt h --qs subs=0 --out build/h.mp4
python3 <skill>/scripts/assemble.py --video build/h.mp4 --audio build/mix.wav --out out/<slug>_16x9.mp4
python3 <skill>/scripts/assemble.py --video build/h_subs.mp4 --audio build/mix.wav --out out/<slug>_16x9_subs.mp4
#   … et pareil pour --fmt v (_9x16, _9x16_subs), si le format vertical est dans le brief
python3 <skill>/scripts/verify_media.py plan.js out/*.mp4 --sheet

Le rendu prend environ 2–5 minutes par minute de vidéo et par format — lance-le en arrière-plan ou par morceaux (--start/--end, assemblage assemble.py --video part1 part2 …). La musique synthétisée est temporaire ; pour une vidéo publique, propose une piste sous licence. Détails — references/audio.md. Sur demande — export_web.py (MP4 propre, WebVTT, affiche, image finale) pour un lecteur sur le site ; n'effectue pas la publication sans décision explicite de l'utilisateur.

Ce qu'il faut remettre à l'utilisateur

• Fichiers dans les formats choisis : <slug>_16x9.mp4, <slug>_16x9_subs.mp4 (+ _9x16), SRT, pack vocal (avant enregistrement), planche contact. Chemins des fichiers ; s'il existe un outil d'envoi de fichiers, envoie-les.
• Brièvement : durée, ce qui se passe dans chaque scène ; ce qui a été inventé et nécessite une vérification avec le produit ; que la musique est temporaire ; ce qui n'a pas été vérifié (par exemple, écoute à l'oreille).
• Mets à jour le README du dossier de la vidéo : statut, décisions du brief, comment reconstruire.
• Sans re-raconter le processus et sans publicité pour « l'IA révolutionnaire ».

Fichiers du skill

templates/engine.js	moteur d'images : caméra, curseur, clics, assombrissement et calque supérieur #app2, sous-titres (subs=0), carte temporelle tmap.js, aperçu preview=1, mesures, markup/grad/plural
templates/base.css	composants sur les tokens de la marque : en-tête, champ avec dégradé, étiquettes, infobulles, traitement sombre, résultat, popovers, chat, évaluation, finale
templates/brand/	profil de marque neutre : brand.css, Manrope (OFL), logo par défaut
templates/processing.js	animation de traitement neutre (anneaux, accent lumineux, cartes volantes)
templates/starter.html, plan.js	démo fonctionnelle d'environ 36 secondes « Recherche intelligente » dans un produit fictif Demo : accroche → saisie avec étiquettes → suggestions → traitement → résultat avec « pourquoi » → enregistrement → évaluation → finale
scripts/	check_env, new_project, verify_scene, render, vo_pack, align_vo, retime, music, prepare_music, mix, assemble, verify_media, export_web
references/	brief.md · brand.md · storyboard.md · scenes.md · motion.md · engine.md · voiceover.md · audio.md · pitfalls.md