skill-motion

skill-motion : films animés avec du code

Un film de ce type est un fichier JavaScript qui dessine chaque seconde sur un <canvas> (seek(t)), une bande sonore (banda.mp3 : voix + musique + effets) et un MP4 rendu des deux. Il sort en environ deux heures de travail, coûte quelques centimes d'ElevenLabs, peut être corrigé image par image et s'exécute en direct dans une présentation sans internet.

Deux modes. Histoires (personnages, bande dessinée ou doux, pour émouvoir) et Commercial (produit réel, rythme, promesse, pour donner envie d'acheter). Avant tout, décidez lequel : s'ils disent « marketeur », « commercial », « pro », « démo » ou « à montrer au client », lisez references/promo.md et utilisez assets/motor-promo.js.

Demande	Moteur	Lecture
Anniversaire, famille, invitation, histoire avec personnages	motor-base.js (bande dessinée) ou motor-suave.js	guion.md, chispa.md
Commercial, démo de site web ou d'app, vidéo pour un acheteur, Reels	motor-promo.js + filmar_web.py	promo.md
Marque ou lancement avec look technique, caméra documentaire	motor-tech.js	motor-visual.md section 9
Cartes inclinées, caméra volante sans site réel	motor-3d.js	chispa.md
Expliquer des chiffres ou mécanismes : cotes, étiquettes, lectures, plan technique	motor-acotaciones.js (avec n'importe quel moteur)	motor-visual.md section 12
Prise de vue orbitant ou parcourant une scène 3D	Orbita3D à la fin de motor-3d.js	motor-visual.md section 13

Ce qui le fait fonctionner n'est pas la technique mais trois habitudes : tout ce qu'il dit est vrai, on l'écoute avec Deepgram au lieu de supposer et on le regarde avec des planches d'images avant de rendre. Claude ne voit pas la vidéo ni ne l'entend pendant son exécution ; ces deux contrôles sont ses yeux et ses oreilles.

Ce dont il a besoin

Node 18 ou plus, Python 3, ffmpeg et Chrome. Pour la voix et la musique, un compte ElevenLabs (ELEVENLABS_API_KEY). Pour « écouter » le résultat, un compte Deepgram (DEEPGRAM_API_KEY, facultatif). Voir INSTALAR.md.

Où se trouve chaque chose

J'ai besoin de	Fichier
L'étincelle : liste de contrôle pour que ça sorte « waouh » et pas seulement « bien » (à lire avant le scénario)	references/chispa.md
Concept, styles testés, phrases, distribution des voix, feuille de temps	references/guion.md
Voix, musique, effets, mixage, écouter avec Deepgram	references/sonido.md
Le moteur de dessin, personnages et poses, style bande dessinée, règles de composition	references/motor-visual.md
Rendu, version légère, présentation, publication, git	references/entrega.md
Point de départ du .js : style bande dessinée ou style doux	assets/motor-base.js (bande dessinée), assets/motor-suave.js (doux, avec personnages qui vieillissent)
Page pour la voir et planche d'images	assets/pelicula.html, assets/hoja.html
Film dans une présentation (diapo + contrôleur) et constructeur	assets/pelicula-en-presentacion.html, assets/construir.py
Scripts	scripts/ (clés, voix, musique, narration, effets, mixage, Deepgram, rendu, léger)
Effets sonores CC0 inclus	sfx/ (crédits dans sfx/LICENSES.md)
3D faux sur canvas (cartes inclinées, caméra volante, sol néon)	assets/motor-3d.js
Style « tech et pro » pour marques et lancements : caméra documentaire (HUD), cadre de mise au point, alertes, scan, cartes d'interface, tableau de bord, sol en grille	assets/motor-tech.js et references/motor-visual.md section 9
Commercial pro, démo produit, formats 16:9, 9:16 et 1:1	references/promo.md, assets/motor-promo.js
Filmer un site réel image par image avec GPU	assets/filmar_web.py
Brief client et storyboard fixe avec plages d'images (avant de dessiner un commercial)	assets/brief-cliente.md, assets/storyboard-plantilla.md, references/promo.md
Curseur en arc avec clic, frappe, entrées avec rebond, décalage, dérive et poussée de caméra. Tout trajet du pointeur dans un commercial va en arc avec une pause avant le clic (cursorPro) ; le mouvement rectiligne est interdit	motor-promo.js (cursorPro, cursor, tecleo, entra, escalonar, deriva, empuje), references/motor-visual.md section 11
Zones de sécurité, interface vectorielle, liste « À vérifier avant de rendre » et banque de retouches	references/promo.md
Chiffres du scénario dans un bloc DATOS pour révisions d'une ligne ; rendu sans audio	references/entrega.md section 11
Annotations du scénario ([VISUAL], pauses), chaque nombre à l'écran avec son mot	references/guion.md section 8
Vocabulaire des prises avec proportions et le gel du temps	references/chispa.md
Mesurer le BPM et réorganiser la musique par mesures	scripts/pulso.py, scripts/cortar_musica.py, references/sonido.md section 13
Tronçon test, montage par parties et nouvel audio sans re-rendre	references/entrega.md section 8
Corriger un film déjà livré parce que le produit a changé	references/entrega.md section 10
Salutation avec la voix de la personne et invitation avec flyer	references/sonido.md section 9, references/entrega.md section 7

Le processus

Suivez les étapes dans l'ordre ; chacune a son contrôle avant de passer à la suivante.

0. Est-ce qu'une vidéo est appropriée maintenant ? Si le film va donner des chiffres d'une affaire (bénéfice, prix, clients, délais), avant d'écrire le scénario, il doit exister une source déclarée officielle de ces chiffres. S'il y a deux modèles qui donnent des chiffres différents, ou si le nombre est en discussion, la vidéo n'est pas faite : on le dit à la personne et on propose de montrer le tableau ouvert et de discuter. Une vidéo coûte deux heures et fige un nombre dans la tête de celui qui la voit. Détails dans references/guion.md section 9.

1. Concept (avec la personne). Décidez du mode (ci-dessus). D'abord references/chispa.md : format avec des règles qui se brisent, un rebondissement, les personnes par leur nom, un personnage qui revient et un moment « waouh ». Pour qui, ce qu'il doit ressentir, combien de temps ça dure, où ça va être montré. Proposez trois concepts, chacun en deux ou trois phrases et avec un aperçu en texte, et le ton (les styles testés sont dans references/guion.md). Si la personne a donné une idée, suivez-la à la lettre : chaque élément de sa demande est une scène.

2. Vérifier ce qu'on va affirmer. Chaque chose que le film dit du produit est recherchée dans son code. Ce qui n'est pas là, on ne le dit pas ; ce qui est là mais désactivé, on le dit et on en avertit la personne. C'est valable aussi pour une entreprise ou un projet qui n'existe pas encore : chaque chiffre est noté dans GUION.md avec sa source et comme fait, hypothèse ou proposition, et les mots qui engagent (« garantie », « existe déjà », « en secondes », « respecte la loi », un prix) ne vont que s'ils sont décidés et écrits quelque part (references/guion.md section 9).

3. Scénario. GUION.md dans le dossier du film : demande textuelle de la personne, voix, musique, un tableau avec seconde, qui parle, la phrase et ce qu'on voit. Phrases courtes, une par piste, français neutre, sans tiret long.

4. Voix. source scripts/llaves.sh et scripts/voces.py frases.json. Écoutez-les avec Deepgram ; refaites celles qui sont ratées avec --solo. Si la narration est une note vocale de la personne, il n'y a pas de phrases : references/sonido.md sections 9 et 10.

5. Temps. scripts/armar_narracion.py <inicios> --total <s> : laissez de l'air entre les phrases et des blancs où l'image raconte seule. Avec Deepgram, sortez palabras.json (seconde de chaque mot) pour synchroniser.

6. Musique. Plan par sections qui suivent les scènes (scripts/musica.py) ; mesurez le pouls et le volume avec scripts/pulso.py. Si les sections sont tombées ailleurs, réorganisez-la avec scripts/cortar_musica.py.

7. Mixage. Effets de la bibliothèque CC0 incluse (sfx/) et synthétisés (scripts/efectos_sinteticos.py), scripts/mezclar.py efectos.json à -16 LUFS. Contrôle : oir_con_deepgram.py --comparar entre la narration seule et la bande : aucun mot n'est perdu. Si un mot se perd, baissez l'effet qui sonne à cette seconde ou ouvrez un blanc dans la musique.

8. Dessin. En commercial, d'abord brief et storyboard fixe (assets/brief-cliente.md), et filmez le produit (references/promo.md). Copiez le moteur du style (assets/motor-base.js bande dessinée, assets/motor-suave.js doux ou assets/motor-promo.js commercial) comme mi-pelicula/pelicula.js, changez le nom global, écrivez une fonction par scène en suivant la feuille de temps. Page pelicula.html et hoja.html depuis assets/ (changez le nom du .js et du global ; ajoutez des polices si vous en utilisez d'autres). Personnages génériques, jamais la personne réelle.

9. Planches d'images. source scripts/preparar_render.sh et node $R/render.mjs pelicula.html fotos.png --stills ... avec 9 instants par planche, tout le film. Regardez-les, corrigez ce qui est masqué, coupé, petit, mal assemblé ou illisible (liste des erreurs typiques dans references/motor-visual.md) et regardez à nouveau. En commercial, SEGURAS=1 dessine les zones de sécurité et promo.md apporte la liste « À vérifier avant de rendre ».

10. Rendu. node $R/render.mjs pelicula.html <ruta>.mp4 30 1 6 en arrière-plan ; copiez le MP4 dans le dossier du film ; scripts/liviano.sh pour l'envoyer par messagerie. Regardez une image de la version légère. Si le changement de style est important, refaites d'abord un tronçon et ne rendez que ce tronçon pour que la personne le voie en mouvement (references/entrega.md section 8). Si seul l'audio a changé, ne rendez pas : assemblez la nouvelle bande à la vidéo muette.

10.b Lire la vidéo. scripts/revisar_texto.sh <ruta>.mp4 "mot1|mot2" : OCR à 1 image par seconde sur le MP4 final, chaque mot retiré du produit (nécessite tesseract). Le texte d'un bouton est sauvegardé dans les fichiers du film : si le vocabulaire du produit a changé, on redemande et on refilme (references/entrega.md section 10).

11. Livrer. MP4 avec résumé scène par scène, ce qui a été vérifié et ce que la personne décide. Un flyer sort du même film (references/entrega.md sections 6 et 7). S'il va dans une présentation : diapo data-peli, contrôleur, polices, construir.py et test dans le navigateur.

12. Sauvegarder. GUION, .js, pages, audio mp3 et json dans git (wav et mp4 dehors) ; section dans le LISEZMOI du dossier.

Règles qui ne se négocient pas

• Vérité : rien d'inventé sur le produit ni sur les personnes réelles. Ce qui est délicat (chutes, santé) est sobre et avec des petits caractères honnêtes.
• Clés : elles sont lues depuis des variables d'environnement avec llaves.sh et jamais imprimées ni écrites dans des fichiers.
• Ne pas copier d'œuvres : on peut demander le ton d'un film célèbre (« comme Up », « bande-annonce de super-héros »), jamais ses personnages, scènes, musique ou noms.
• Pur temporel : seek(t) sans état, sans Math.random() (utilisez rng), sans setTimeout. Si une image dépend de la précédente, le rendu sortira différent de ce qu'on voit en direct.
• Une vidéo fige un nombre : sans source officielle des chiffres, pas de vidéo. Chaque film porte son état (brouillon, approuvé, qui l'a vu et quelle version) dans le LISEZMOI du dossier, et s'il est refait après qu'un tiers l'a vu, on avertit la personne du chiffre qui a changé (references/entrega.md section 12).
• Mesurer, ne pas supposer : « ça sonne bien » et « ça a l'air bien » seulement après Deepgram et après les planches d'images.

Temps de référence (film d'une minute)

Scénario et voix 20 min ; temps, musique et mixage 20 min ; dessin 40 à 60 min ; planches d'images et corrections 20 min ; rendu et version légère 5 min ; présentation et publication 15 min. Les corrections visuelles sont normales : chaque film en comporte entre 5 et 10. Un commercial de 97 s filmé du site web : 48 s de rendu, 3 min avec flou de mouvement. Si une correction arrive après le rendu, refaites le rendu.

Si l'application se ferme en cours de route

Ce qui importe est déjà dans le dossier du film (audio, .js, GUION) et le rendeur se reconstruit seul avec preparar_render.sh dans ~/.cache/skill-motion-render. Notez à quelle étape vous en étiez avant chaque tâche longue.