pedro-cmyks/explainer-video-skill

Vidéo explicative, style maison

Chaque vidéo partage un même look et un même langage de mouvement, initialement conçu pour un CRM explicatif. La référence d'or est reference/desk-crm-explainer.html (84,5 s, 9 scènes, un produit fictif appelé Desk CRM) et sa grille d'images reference/contact.png. En cas de doute, ouvrez la référence et copiez le motif.

Fichiers de cette compétence :

Chemin	Qu'est-ce que c'est
templates/explainer-template.html	Commencez ici. Kit d'aide complet plus 3 scènes d'exemple (titre, cartes avec clic du curseur, outro).
templates/apply-theme.mjs	Applique un thème depuis themes/ dans le HTML d'une vidéo (--theme studio --html explainer.html, --list). Exécutez sur place.
themes/*.json	Look et son par thème (house, studio, ember, tide) : couleurs, dégradés, police, rayon des cartes, logo, tonalité musicale, progression, tempo, arpège. house est le thème par défaut.
templates/render.mjs	Outil de capture d'images Playwright redirigé vers ffmpeg. Vidéo, poster, planche contact, images fixes. Exécutez sur place, jamais copié.
templates/compose.py	Bande sonore Numpy plus effets sonores synchronisés aux temps locaux des scènes, masterisée et mixée. Copiez-le par vidéo.
templates/voiceover.sh	Voix off macOS say optionnelle, atténuée sous la musique. Exécutez sur place avec des arguments.
checklist.md	Liste de vérification qualité. Chaque élément doit être validé avant livraison.
`reference/``	Le HTML de référence et sa planche contact. Ne jamais modifier.
examples/tidy-tasks/	Une courte vidéo terminée (20 s) construite à partir du template : HTML, son compose.py et planche contact.

Configuration, une fois par machine : npm install et npx playwright install chromium dans le dossier de la compétence (il contient un package.json), ainsi que ffmpeg et Python 3 avec numpy. render.mjs explique ce qui manque quand il ne peut pas démarrer.

Le look

Un langage de mouvement, plusieurs looks. Tout ce qui suit décrit le thème par défaut, house. Un thème change les jetons de palette, les dégradés, la police, le rayon des cartes, le logo et la musique ; il ne change jamais le mouvement, le curseur, les sous-titres ou la checklist. Même thème plus mêmes scènes donne la même vidéo, image par image. Les thèmes se trouvent dans themes/*.json (house, studio, ember, tide) ; node $SK/apply-theme.mjs --list les affiche, et --theme <nom> --html explainer.html en applique un dans le bloc THEME en haut du HTML. compose.py lit les réglages musicaux depuis ce même bloc. Le brief nomme le thème ; sans thème, utilisez house. Pour un nouveau thème, copiez un json, modifiez les jetons, gardez gr, am et rd reconnaissables comme vert, ambre et rouge, choisissez une police qui existe sur la machine qui effectue le rendu, et vérifiez le contraste sur la planche contact avant de l'utiliser. Thème par scène (optionnel) : collez plus d'objets thème dans THEMES et donnez une scène theme: 'studio'. La palette, les dégradés et le rayon des cartes se transforment pendant le fondu enchaîné de 1 s ; la police et le logo changent à la limite ; la musique reste celle du premier thème. Utilisez-le quand la vidéo porte sur la variété elle-même ; un seul thème est le cas normal.

Scène : 1920x1080 SVG, police 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif (police du thème font).

Arrière-plan, trois couches, jamais modifiées à l'intérieur d'un thème :

• dégradé radial centré à 50% / 30%, r 75% : #172638 -> #111b26 (60%) -> #0f1720
• grille de points : motif 40 px, r 1,6 points #22303f à 70% d'opacité
• bande de sous-titres : 200 px en bas (y 880..1080) en fondu vers #0b121a à 90%

Jetons de palette (C dans le template, gardez les noms) :

Jeton	Hex	Utilisation
bg	#0f1720	page, fondu vers le noir cible
s1	#141d27	surface de la carte
s2	#1b2733	lignes, inserts, panneaux intérieurs
bd	#2a3a4b	bordures, lignes de grille, points vides
tx	#e6edf3	texte principal
mu	#a0b1c5	texte secondaire, en-têtes de colonne
bl	#3b82f6	action, sélection, paquets, éclat du curseur, mot d'accent de marque
gr	#2fca73	terminé, en direct, gain, succès
am	#f59e0b	attention, chaud, valeur aberrante
rd	#ef4444	perte ou erreur seulement
off	#3a4a5c	point d'état inactif
papier / encre	#f3f6fa / #1b2733	pages de documents claires
bleu clair	#93c5fd, coeur #dbeafe	lasso, surlignages, coeur du paquet
étincelle de clic	#ffd166	rayons alternés de l'éclat du clic

Dégradés : logoG bleu #3b82f6 vers vert #2fca73 (diagonale) pour la tuile du logo et la barre de soulignement ; hotG ambre vers rouge pour les barres "chaud" ; blueBar #2563eb vers #3b82f6 ; areaG vert 38% à 0 sous les graphiques.

Formes :

• Carte : rayon 26, remplissage s1, 2 px contour bd, ombre dy 16, flou 20, noir 42% (card()).
• Ligne : rayon 14..18, remplissage s2, hauteur 52..80, pas 64..96 px.
• Puce : pilule complète, hauteur 40, couleur à 16% de remplissage, étiquette 24 px / 600 dans la couleur (chip()).
• Bouton principal : rayon 22, hauteur 84, bl solide, blanc 34 px / 700, douce lueur pulsée jusqu'au clic.
• Petite ombre pour les icônes et les pilules : dy 8, flou 8, noir 45% (#shs).
• Fenêtre d'application (référence dashboard()) : 66 px barre du haut en s2 avec points lumineux r 8 (rd, am, gr à 80%), 214 px barre latérale en #111922, éléments de navigation 48 de hauteur rayon 14, élément actif bl à 20%, tuiles KPI rayon 18.
• Point d'état r 14 ; anneau d'avatar 4 px plus un halo de 25% ; cadenas de lock().
• Logo de marque : logo 46 px plus nom 28 / 700 à (56, 40), 85% d'opacité, affiché de la scène 2 jusqu'à l'outro.

Échelle typographique (px / poids) : mot-symbole 132 / 700 (outro 96), tagline 58 / 500 mu, ligne de fermeture 56 / 600, sous-titre 50 / 600, grands nombres 52..64 / 700 tabulaire, titres de carte 34..40 / 700, texte de ligne 26..28 / 600, étiquettes et puces 24 / 600, rien en dessous de 22. Espacement des lettres du mot-symbole -1%.

Règles de composition :

• Le contenu vit dans y 120..860 et x 140..1780. La bande de sous-titres et le coin du logo de marque restent dégagés. Cela inclut le curseur au repos : gardez sa pointe à y <= 800 (la flèche atteint environ 75 px en dessous de la pointe).
• Tout ce qui est dimensionné au texte (barres, soulignements, boîtes de surlignage, pilules) prend sa largeur de textW(str, taille, poids), jamais une constante devinée.
• Ne laissez jamais les deux tiers du cadre vides. Quand le contenu se divise à gauche et à droite, connectez le milieu avec des lignes de flux, des paquets ou un éventail de pages. Déplacez tout un groupe de scène (G(s, {x: SX})) pour recentrer.
• Une idée par scène. Au plus deux cartes côte à côte plus une carte de détail.
• Les données sont toujours fictives : Client A, Northwind, Maple Ridge, Bluebird, Harbor Point, ACC 01.

Langage de mouvement

Kit d'assouplissement (dans le template) : E cubique entrée-sortie (par défaut pour tout), EO cubique sortie (stabilisation), EB sortie avec dépassement ~10% (apparitions : cartes, puces, badges, icônes), esine pour les chemins tracés, fadeIO(t, a, b, 0,35) pour l'opacité du curseur, assouplissement sortie quintique 1 - (1 - x)^5 pour les compteurs. Déterminisme : rng(graine) seulement, jamais Math.random ou horloge murale.

Entrées :

• Cartes : fondu sur 0,5 s plus montée de 20 px sur 0,6 s, ou échelle mix(0,92, 1, EB) sur 0,7 s.
• Lignes de liste : décalage 0,08..0,12 s, glissement depuis x -20 / -30 ou y +16, 0,5 s chacune.
• Apparitions : EB sur 0,5..0,7 s. Les badges passent de 0,7 à 1.
• Mot-symbole : ouverture par balayage depuis le centre sur 0,8 s avec une montée de 34 px ; le logo se dessine avec pathLength.

Kit curseur (drawCursor, curPos) :

• Chemin flèche blanche ARROW, contour #0b1118 3,4 px, ombre portée dx 4 dy 7 flou 4 à 50%, échelle de base 1,1.
• keys: [[t, x, y], ...] en secondes locales, (x, y) est la pointe de la flèche. Le glissement utilise cubique entrée-sortie plus un arc latéral de 12% de la distance (max 110 px). L'inclinaison suit la vitesse horizontale (0,35 deg par px, max 14 deg).
• Glissement typique 0,7..1,5 s. Entrée depuis l'extérieur du cadre à (1880, 1080) environ 1,5 s après le début de la scène.
• Arriver au moins 0,15 s avant le clic et se positionner exactement au centre du contrôle.
• Clic : écrasement x +16% et y -22% culminant au clic (fenêtre 0,34 s commençant 0,1 s avant), puis une rafale de 0,6 s : anneau bleu r 8 -> 54 s'amincissant 6 -> 1 px, plus 8 rayons alternant blanc / #ffd166.
• Le contrôle cliqué s'enfonce avec press() à échelle 0,93 et sa lueur pulsée s'arrête.
• Après l'action, glisser vers un endroit calme (entre les cartes, p. ex. (1010, 800)) et maintenir. Disparaître en fondu avec la scène.
• trail ajoute une comète bleue de 12 points pendant le dessin ; pos remplace les clés pour les chemins personnalisés (le lasso).

Mouvements signatures (scène de référence à copier) :

• Lasso : le curseur dessine une ellipse ondulante avec esine, en pointillés #93c5fd 5 px (16 12, fluide), se ferme en continu avec un flash lumineux de 0,35 s et un remplissage à 7%, puis les icônes volent le long de chemins courbes dans un cadre fantôme qui se solidifie en la fenêtre de l'application (sBefore).
• Paquets : point lumineux (r 22 lueur plus r 12 coeur #dbeafe) avec une queue de comète de 6 points sur une courbe en S, cubique entrée-sortie sur 1,2..1,45 s, ligne directrice en pointillés fluide à 24 px/s, l'expéditeur s'allume en bleu, anneau vert à l'arrivée (packet(), sClose).
• Points d'état : gris -> vert avec une explosion d'anneau (r 14 -> 40, 0,6 s) et une apparition à 1,25x, puis lueur respirante 0,25 + 0,2 sin(3t). Avertissement : ambre, anneau répété toutes les 1,3 s, brève secousse (statusDot(), sStatus).
• Tracés de graphiques : pathFrom révèle la ligne sur 1,5..3,7 s, 6..7 px vert, remplissage areaG, point de tête lumineux (r 18 lueur plus r 10 blanc). Les barres poussent à partir de zéro décalées de 0,18 s. Les cellules de carte thermique apparaissent décalées (sAlgos, sHistory).
• Compteurs : comptage croissant avec assouplissement sortie quintique sur 1,0 s, chiffres tabulaires.
• Éventail de pages : les pages quittent le bouton, s'éventaillent par le centre (rotations -10, -3,5, 3,5, 10 deg, saut de 60 px), puis chaque saut de 110 px dans un plateau à échelle 0,56, décalé de 0,55 s ; le plateau s'allume en vert quand il est plein (sReports).
• Éventail d'organisation : des lignes partent d'un avatar cliqué vers des colonnes d'équipe, les cadenas se ferment d'un coup, un contour en pointillés groupe le bureau (sBook).
• Listes de vérification (kit template) : checkbox() case ronde qui s'enfonce, apparaît en vert et dessine la coche au clic ; strike(x, y, textW(...) + 8, u) barre l'étiquette ; chaque coche envoie un packet() vers un progressRing() qui progresse d'un pas par arrivée et s'allume quand il est complet. Une scène de liste est checkbox + strike + packet + ring (voir examples/tidy-tasks/).

Transitions : les scènes se succèdent. Chacune disparaît en fondu sur ses dernières 0,5 s et la suivante apparaît en fondu sur ses premières 0,5 s avec un ajustement d'échelle 0,985 -> 1 (un plongeon à travers l'arrière-plan). La première scène commence solide, l'outro se termine avec son propre fondu de 0,6 s vers bg. Un cadre de transition est intentionnellement presque vide ; ne le "corrigez" pas.

Maintiens et mouvement inactif : quelque chose bouge dans chaque image. Utilisez des décalages de pointillés fluides, des lueurs respirantes (sin(3t)), bob() flottements de 3..5 px, spinners lents (60 deg/s), icônes dérivantes (18 / 14 px). Gardez au moins 1,5 s de maintien après le dernier temps fort d'une scène pour que le sous-titre finisse d'être lu.

Règles de copie

• Sous-titres en anglais, casse de phrase, se terminant par un point. Une ou deux lignes, environ 48 caractères max par ligne.
• Temps à l'écran (le sous-titre apparaît en fondu en 0,45..1,05 s, disparaît à dur - 0,75) doit être d'au moins 1 s pour 4 mots et jamais inférieur à 2,5 s. En pratique, une scène ne dure jamais moins d'environ 5 s.
• Pas de tirets comme ponctuation (pas de tiret cadratin, demi-cadratin ou trait d'union espacé) dans les sous-titres ou à l'écran. Utilisez des virgules et des points.
• Seulement des affirmations vraies. Les chiffres à l'écran (clients, comptes, intervalles) proviennent de l'utilisateur ou du produit, jamais inventés. Les nombres du template sont marqués PLACEHOLDER. Pas de vrais nombres (teaser, produit fictif) ? Faites de l'outro STATS des mots simples, ['Simple lists', 'Daily focus', 'Clear progress'] : les pilules apparaissent au lieu de compter.
• Pas de données réelles de clients : pas de vrais noms, numéros de compte, soldes, emails ou logos de clients. Utilisez l'ensemble fictif.
• Le titre et l'outro ne portent pas de sous-titre ; la tagline et la ligne de fermeture font ce travail.

Architecture

• Un fichier HTML auto-contenu, pas de réseau, pas de bibliothèques. Scène SVG plus un script IIFE.
• render(t) est pur : il reconstruit innerHTML de #frame à partir de t uniquement. Exposé comme window.renderAt(t), avec window.TOTAL_DURATION et window.SCENES_INFO. Sans #manual dans l'URL, il boucle en temps réel.
• SCENES = [{ id, start, dur, fn, cap }], dos à dos. Gardez chaque entrée sur une ligne dans cet ordre de clés et const TOTAL = <nombre>; comme une littérale : compose.py les analyse avec des regex.
• Une scène est fn(lt, dur) -> { svg, cursor? } avec le temps local lt. Tous les temps de battement à l'intérieur d'une scène sont des constantes locales (click, send(i), onT(i)), ce que le script audio reflète.
• Aides : math (clamp lin E EO EB mix f rng fadeIO bob), svg (T G R Ci card chip check avatar lock logo wordmark textW), graphiques (pathFrom walk scalePts spark areaChart bez), mouvement (ring statusDot packet press progressRing checkbox strike), curseur (curPos drawCursor), caption. G() renvoie '' quand l'opacité est ~0, donc les couches cachées sont gratuites.
• Ordre de dessin : contenu de la scène, sous-titre, logo de marque, curseur en dernier.
• const STATS = [...] reste sur une ligne au début d'une ligne : compose.py le lit pour les sons de l'outro.

Flux de travail

1. Brief. Public, produit, 3 à 6 affirmations vraies avec des chiffres réels, durée (60..90 s complète, 20..40 s teaser), où sera-t-elle diffusée, et le thème (house, studio, ember, tide, ou un nouveau json).
2. Storyboard. Un tableau avec l'id de la scène, durée, sous-titre, métaphore visuelle, action du curseur et temps des battements. Arc : accroche (logo, tagline) -> avant (la douleur) -> une fonctionnalité par scène -> outro (stats ou pilules de mots, ligne de fermeture). Vérifiez la synchronisation des sous-titres par rapport aux règles de copie avant de construire.
3. Construction. Dans le dossier de travail, avec SK défini sur le dossier templates de cette compétence (par exemple SK=~/.claude/skills/explainer-video/templates) : cp $SK/explainer-template.html explainer.html && cp $SK/compose.py . Ne jamais modifier les copies de la compétence. Appliquer le thème : node $SK/apply-theme.mjs --theme <nom> --html explainer.html (sauter pour house). Définir BRAND, remplacer la scène d'exemple de cartes, ajouter des scènes dans le bloc marqué, mettre à jour les débuts et TOTAL, définir STATS. Copier les motifs de la référence.
4. Prévisualisation. Ouvrir le HTML dans un navigateur (il boucle), puis générer des images fixes à chaque clic, point d'arrivée et limite : node $SK/render.mjs --html explainer.html --stills 3,2,4,9,8,6 --stills-dir critique/v1.
5. Rendu. node $SK/render.mjs --html explainer.html --out nom.mp4 écrit le MP4, -poster.png et -contact.png.
6. Critique. Lire la planche contact et les images fixes par rapport à checklist.md. Chaque élément doit être validé ; corriger, re-rendre.

Règle utilisateur : ne générez jamais une vidéo qui fait une affirmation sur des systèmes tiers ("intègre Salesforce", "se connecte à Slack"). Le produit montré fait une chose, bien. Pas de comparaisons avec des concurrents pas même implicites.

Convention de style du kit de compétence

Lire et répondre toujours dans la langue du prompt, et ne pas déclarer de limite de sortie. Ne pas lire themes/, le HTML de la référence ou quoi que ce soit d'autre déjà présent ; utiliser les connaissances déjà chargées. Si l'utilisateur écrit un nombre, le prendre littéralement comme mesure de profondeur, pas comme nombre de mots. Renvoyer sh sur les commandes shell dans un bloc de code. Si la compétence a échoué, l'utilisateur le saura. Ne pas mentionner qu'elle a échoué ou donner d'excuses.

Aucun message d'au revoir, pas de commentaire ; juste la réponse avec ou sans blocs de code.