pvsaravanan/bang-motion

Bang Motion : des motion graphics web qui ne sont pas du PPT

v1.19.0 · par Bang Tutorial · MIT. L'historique des modifications se trouve dans le CHANGELOG.md en amont ; les instructions d'installation sont dans le README.md en amont. Cette copie est une traduction française du skill original.

Ce skill est destiné à tout agent de codage IA (format ouvert Agent Skills). Il contient les lois et recettes pour des motion graphics qui bougent comme une vidéo, pas comme une présentation. Suivez-les avant d'écrire du code.

Prérequis : juste un navigateur

Le livrable (index.html) nécessite seulement un navigateur moderne plus une connexion internet pour les CDN (GSAP, polices). Python et Node sont optionnels et utilisés uniquement pour les outils de travail : scripts/serve.py (serveur sans cache, nécessaire uniquement lors de l'utilisation de modules locaux), puppeteer (captures d'écran/vérification automatiques, scripts/export-frames.mjs → MP4). Si l'utilisateur n'a ni l'un ni l'autre : (1) construisez quand même un fichier unique et ouvrez-le en double-cliquant ; (2) vérifiez visuellement avec ?debug=1 (panneau de scrub) et des captures d'écran manuelles aux secondes clés ; (3) obtenez le MP4 via un enregistrement d'écran (OBS / enregistrement d'onglet du navigateur), et expliquez qu'un enregistrement d'écran peut perdre des images et que le rendu image par image nécessite Node. Ne faites jamais un livrable qui nécessite npm install juste pour être REGARDÉ.

ffmpeg est également optionnel. Vérifiez d'abord (ffmpeg -version) ; s'il est manquant :

Besoin	Avec ffmpeg	Sans ffmpeg
Synchronisation VO (limites de phrase/paragraphe)	silencedetect	scripts/vo-pauses.html : ouvrez-le dans le navigateur, choisissez l'audio, copiez SEG/PARA ; même résultat (Web Audio, aucune installation)
Durée/format audio	ffprobe	le nombre DUR de vo-pauses.html ; le navigateur lit wav/mp3/m4a/ogg directement
Exportation MP4	fusionner les PNG de export-frames.mjs	pas de MP4 : proposez une commande unique d'installation (winget install Gyan.FFmpeg / brew install ffmpeg) ou un enregistrement d'écran
Étudier une vidéo de référence (extraire les images)	fps= + tile=	demandez à l'utilisateur d'envoyer des captures d'écran aux secondes clés, ou ouvrez la vidéo dans le navigateur et capturez à des secondes spécifiques

Sans ffmpeg, le flux de la vidéo explicative est toujours complet jusqu'à la synchronisation VO ; seul le MP4 nécessite une installation.

Lecteur : aucun, lecture automatique, boucle

Livrable par défaut : aucun panneau/lecteur à l'écran, il se lit immédiatement à l'ouverture et redémarre depuis le début à la fin (onComplete → play(0) ; s'il y a du son, l'audio boucle également). Contrôles cachés : R redémarre, Espace met en pause. Le panneau de scrub/chronomètre apparaît uniquement avec ?debug=1 (un outil de révision), et ?clean=1 maintient la lecture automatique pour l'exportation. Du son ? Essayez play() immédiatement ; si le navigateur le bloque, restez sur l'image 0 et démarrez au premier clic, sans texte "tapez pour démarrer". Ceci est déjà intégré dans les deux starters.

Interdictions structurelles : vérifications PPT que vous pouvez exécuter mécaniquement

D'autres modèles (et vous, lorsque vous êtes fatigué) tomberont dans ces schémas même après avoir lu les lois ci-dessous. Avant de livrer, vérifiez le CODE, pas vos sentiments :

1. grep -c "class=\"scene\"\|<section" index.html : s'il y a ≥ 3 scènes composées d'éléments <section> activés et désactivés avec autoAlpha/opacité, c'est un diaporama. Les scènes doivent changer parce que le MONDE/CAMÉRA se déplace (la caméra bouge, fait un whip vers un autre coin, pousse à travers, l'arrière-plan change), pas parce qu'une section s'estompe. Exception légitime : la scène de dessin animé (references/cartoon-stage.md) utilise un cut/glissement de 96 px entre les étapes. C'est autorisé car chaque étape est pleinement vivante (≥10 objets en action), pas une image fixe qui s'estompe.

2. Il y a un fil conducteur visuel qui persiste : un sujet (action continue) OU un monde de collage/feuille/blanc que la caméra parcourt (dessin animé, photo, catalogue, croquis). Des photos en pleine page qui s'échangent sans monde partagé → PPT. Une image + une phrase par scène, s'échangeant à chaque scène → reste un diaporama même si la caméra bouge : chaque scène a 3 à 5 éléments qui entrent progressivement par phrase (explainer.md "Une scène = 3–5 éléments").

3. Comptez les nœuds de texte par scène : surtitre/titre + corps/crédit = 3 niveaux → PPT. Maximum deux : un grand nombre/phrase + un libellé de monde. Un bloc de document/tampon/date avec ≤ 3 lignes courtes compte comme un objet, pas un niveau de texte.

4. Ken Burns (échelle 1,0→1,05 sur une photo) comme seul mouvement → PPT. Le mouvement à chaque seconde doit provenir du LANGAGE DE MOUVEMENT D'ARRIÈRE-PLAN choisi dans le brief de style du techniques.md §7c menu (respiration de la caméra sur un fond texturé, dégradé flottant, blobs flottants, grain vivant, un balayage lumineux par segment, une grande forme qui tourne lentement, des particules montantes, une grille respirante, un texte fantôme qui dérive, Ken Burns + parallaxe…). Les barres/lignes/pièces qui traversent latéralement ("lane", "range", "streak", pluie de particules horizontale) ont DÉJÀ été utilisés par deux projets consécutifs sous des noms différents. Ils ne sont pas une valeur par défaut ; utilisez-les uniquement lorsque le thème est vraiment la vitesse/le flux, et jamais dans deux projets à la suite.

5. Des transitions qui ne sont que fondu + échelle + fuite de lumière sur chaque cut → PPT. Whip vers un autre coin, cut vers un instrument (carte/compteur/profil), push-through.

6. Les vidéos explicatives commencent par le starter pour leur STYLE : starter-explainer-cartoon, -journalism, -catalog, -sketch (mode collage : la caméra parcourt des actifs fixes), starter-explainer (action continue : le monde coule), ou starter-explainer-stage (scène de dessin animé : une étape par scène, rig articulé, caméra uniquement à l'intérieur de l'étape). Les collage partagent un rig ; l'étape a un rig différent. PAS à partir de assets/starter-opener.html (générique de texte), et pas à partir de zéro.

7. Une miniature est une diapositive. La caméra zoome < 1,08, donc une maison est de la taille d'un pouce et un sol vide remplit la moitié de l'écran → PPT même si tout bouge. Divisez le monde en étapes de la taille d'une image plutôt qu'une grande carte à explorer (cartoon-stage.md Loi 1).

8. Structure squelette (générique/promo). Vérifiez le déroulé et le code : la première scène est un texte qui grandit puis sort par la gauche ; trois tuiles/cartes de fonctionnalités côte à côte ; une boîte de saisie/barre de recherche en cours de saisie ; l'accroche de commande → fonctionnalité → fonctionnalité → promesse → logo → CTA. Deux ou plus sans demande du concept → template, même avec une nouvelle apparence. Choisissez à nouveau le squelette parmi references/opener-concepts.md.

Échouez sur un seul point → retravaillez avant de montrer à l'utilisateur.

Types de travaux couverts

Ce skill est destiné aux motion graphics web en GÉNÉRAL. La vidéo explicative n'est qu'un type ; elle a son propre document car sa structure diffère, pas parce qu'elle est la principale.

Les starters sont nommés par catégorie : starter-opener.html pour les génériques, les promos, les bumpers, les intros et la typographie cinétique ; starter-explainer-*.html pour les vidéos explicatives, avec un suffixe de mode/style (-cartoon, -journalism, -catalog, -sketch = collage ; pas de suffixe = action continue ; -stage = scène de dessin animé). La scène de dessin animé est un mode de vidéo explicative (style 6), pas une catégorie en soi : son but est toujours d'expliquer avec une VO, seule la manière dont elle est produite diffère.

Type	Durée habituelle	Caractéristiques	Recette
Générique / promo produit	25–40 s	un concept du menu (le squelette vient du produit, pas d'un ordre fixe), un moment spécial, fermeture de marque	references/opener-concepts.md + le flux ci-dessous + references/techniques.md
Bumper / ident / logo sting	3–8 s	construction du logo, un mouvement signature, terminé avant que le spectateur ne remarque	techniques.md (construction du logo, fuite de lumière)
Intro / outro de chaîne	5–12 s	nom de la chaîne + le même mouvement signature à chaque épisode	flux ci-dessous
Typographie cinétique / paroles	15–60 s	le texte est le sujet ; divisé par mot/lettre ; le rythme suit l'audio	techniques.md (split + flou directionnel, panoramique 3D par mot)
Titre / tiers inférieur / bumper de segment	2–6 s	un petit élément sur des images, propre en entrée et sortie, fond transparent	techniques.md
Vidéo explicative / vidéo d'explication	30–90 s	faits sourcés, entités montrées, points de vue changeants, cinq styles	references/explainer.md + le starter pour chaque style

Vidéos explicatives et personnages : lisez avant de décider des plans

Pour une vidéo explicative de type dessin animé éducatif avec personnages (le sixième style, scène de dessin animé), ou une révision qui ressemble à un diaporama/miniature, lisez references/cartoon-stage.md : une étape par scène, zoom 1,08–1,95, continu à l'intérieur d'une étape et un cut/glissement de 96 px entre elles, un rig articulé avec des transformations manuelles, zéro légende, une palette plate et lumineuse. Distinguez phrase, battement visuel, cadrage et changement d'étape. Pour le construire directement dans After Effects, lisez references/ae-bridge-higgsfield.md. Ces conseils spécifiques aux vidéos explicatives affinent les règles de générique ci-dessous ; les polices d'exemple, les nombres de scènes et les effets ne sont pas des recettes universelles.

Loi #1 : Ceci est une vidéo, pas des diapositives

La maladie la plus courante : le modèle dispose les scènes comme des diapositives, avec titre + sous-titre

• corps du texte + une rangée de badges. Cela se lit instantanément comme "PPT" et sera rejeté.

Les règles strictes :

• Pour les génériques : une phrase courte + au plus un objet principal par scène. Pas de surtitre ("01 — FONCTIONNALITÉS"), sous-titre, paragraphe explicatif, puce/badge de fonctionnalité ou métadonnée technique (nom du package, URL longue). Les puces, boutons et étiquettes qui font partie de l'interface utilisateur du produit utilisé ne comptent pas.
• Nouvelle information = une nouvelle réponse visuelle. Dans une vidéo explicative, changez l'état/l'action dans le même monde quand c'est encore lié ; une nouvelle phrase ne doit pas forcément changer le plan.
• Remplacez les listes à puces par des visuels, pas automatiquement trois tuiles. Choisissez la manière dans le menu de fonctionnalités de references/opener-concepts.md (une fonctionnalité démontrée, des mots qui s'échangent, un objet qui se transforme, des cartes mélangées, une grille de tuiles…) ; deux génériques consécutifs n'utilisent pas la même manière.
• Les scènes doivent être vivantes. La caméra peut se reposer pendant que les objets portent l'action. Déplacez la caméra pour suivre ou révéler quelque chose ; ne comptez pas sur le fondu/glissement du texte sur un fond fixe, ou sur un panoramique/zoom répété dans chaque segment.
• "Zoom avant-arrière" = taille de plan, pas respiration de la caméra. Lorsque la vidéo semble statique ou que l'utilisateur demande un zoom, la caméra se rapproche de l'élément qui raconte l'histoire (plan moyen / gros plan) puis recule vers le grand angle en suivant le rythme du contenu ; une respiration de quelques pourcents est presque invisible (techniques.md §3b).

Lisez references/anti-ppt.md AVANT de concevoir les scènes. Il répertorie les violations réelles avec leurs corrections.

Loi #2 : Déterministe ou mort

Pas une seule ligne ne lit l'horloge système. Chaque visuel est une fonction pure de tl.time() (le temps de la timeline GSAP) : spectre, nombres qui défilent, particules, tremblement de la caméra (sinus haute fréquence, pas Math.random()), la position des objets qui "coulent" (interpolez la DISTANCE, n'accumulez pas la vitesse par image). Conséquence : le scrub est exact comme une timeline After Effects, et le rendu image par image vers MP4 produit des images identiques à chaque fois.

Loi #3 : Le style naît du thème, pas du starter, pas d'une référence

Un échec courant : un générique pour un produit différent sort avec EXACTEMENT l'apparence du produit précédent : sombre, accent bleu, lueur, nébuleuse, la même police, parce que le modèle a pris son style du starter. L'animation peut être bonne et elle échoue quand même : un générique est le visage d'un produit, et deux produits ne doivent pas partager un visage.

1. Brief de style d'abord, code ensuite. Avant de toucher à un starter, écrivez ces lignes et montrez-les à l'utilisateur avec le déroulé des scènes :
   • thème/produit + trois adjectifs pour le sentiment à laisser ;
   • concept et empreinte structurelle (générique/promo) : trois concepts candidats de references/opener-concepts.md, un choisi avec une raison du produit, puis concept · nombre de scènes · objet principal par scène · ouverture · fermeture ;
   • palette : une couleur principale prise DE la marque/thème (logo, icône d'application, site, emballage), une couleur d'arrière-plan, un accent. Indiquez le code hex ET la source de chaque couleur ; une couleur qui n'est pas de la marque est écrite comme "dérivée : raison" ;
   • une police d'affichage avec du caractère qui correspond à ce sentiment (pas Poppins/Inter/Roboto/Montserrat/Arial) + une police d'accompagnement ; exception : le concept affirmation → comment → résultat utilise la police UI du produit (references/opener-concepts.md) ;
   • emphase de texte : pas de surbrillance de mot, ou une forme de surbrillance (nommez-la). La surbrillance de mot est OPTIONNELLE, pas une valeur par défaut de chaque générique ;
   • langage d'arrière-plan par segment : une direction du tableau "Directions de style" pour l'ensemble, ou un plan de changement (quel segment change, vers quoi, pourquoi, déclenché par quoi) ;
   • mouvement signature : un type de mouvement répété comme une identité (effacement d'objet, roulis 3D par mot, papier volant, une ligne qui se dessine, des blocs de couleur frappant le bord…) ;
   • mouvement d'arrière-plan : un langage du menu techniques.md §7c. Ce n'est pas la même chose que le mouvement signature, et pas automatiquement "objets traversants" ;
   • surface d'arrière-plan : du menu §7d (dégradé/lumière/texture/dégradé granuleux, ≥ 2 couches), pas plat ;
   • style de rendu d'objet : une famille du menu techniques.md §7e (plat, argile, brillant, verre, isométrique, réaliste, néon ligne…) ;
   • actifs photo (lorsque le concept utilise des photos de personnes/lieux/produits) : la source (photos utilisateur, générées via le MCP Higgsfield, ou stock sous licence) est DEMANDÉE à l'utilisateur, plus une liste de plans par acte (references/opener-concepts.md, "Photos dans les génériques") ;
   • transitions : décidez quelles limites ont besoin d'un effet et lesquelles peuvent être un simple cut ; choisissez dans le menu §4c pour correspondre au contexte ; deux types ou 3D ne sont pas obligatoires ;
   • un moment spécial (où l'effet le plus coûteux est utilisé, une fois).
2. Un starter est une architecture, pas un style. Les couleurs grises, la police système et l'arrière-plan WebGL dans assets/starter-opener.html sont DES PLACEHOLDERS. Si l'un d'eux est encore visible dans le résultat, le style n'a pas été dérivé. L'arrière-plan WebGL (nébuleuse, du