hup-dev/promo-animation-skill

Animation Produit

Vous produisez une animation MP4 finale pour le produit du codebase actuel. Cette compétence est un moteur d'animation déterministe + méthodologie, pas un format fixe — vous décidez du motif qui correspond à la demande de l'utilisateur (une démo de chat, une intro de marque, une révélation de statistique, une visite guidée du flux de travail, avant/après, etc.).

Ce qui reste constant pour chaque motif :

• Des assets de marque réels extraits du dépôt (logo SVG, tokens de design, polices).
• Un polissage visuel de niveau Linear/Vercel/Stripe (ombres douces, typographie réelle, un seul moment héroïque).
• Une timeline déterministe __setTime(t) pour que Playwright capture des images parfaites à chaque rendu.
• Un contenu spécifique et nommé partout où l'animation fait une affirmation — pas de copie générique du style « L'IA fait économiser de l'argent ».

La référence complète pour que cela fonctionne est methodology.md — lisez-la avant de faire quoi que ce soit d'autre. Détails concrets sur le style visuel, le timing, les mathématiques de la caméra, les flags ffmpeg et les 10 pièges qui piègent les premières tentatives.

Cible de sortie

Par défaut : 1920×1080 @ 30fps, H.264 avec musique optionnelle + fondu de queue de 1s. La durée dépend du motif :

• Introduction de marque / révélation de logo : 5–8s
• Révélation de statistique : 6–10s
• Promo produit (type chat ou autre) : 15–22s
• Visite guidée du flux de travail : 20–40s

Confirmez la durée et le ratio d'aspect avec l'utilisateur s'il ne les a pas spécifiés. Par défaut, utilisez 16:9 1920×1080 sauf s'il a demandé un format social/vertical.

Quand deux types de plans sont pertinents (par exemple caméra fixe + caméra cinématique), livrez les deux.

Vérification pré-vol

Avant de commencer, confirmez que l'environnement le permet :

which ffmpeg && ffmpeg -version | head -1
which node && node --version
ls ~/Library/Caches/ms-playwright/ 2>/dev/null | head -3   # cache playwright macOS

Si Playwright chromium n'est pas en cache, exécutez npx playwright install chromium. ffmpeg est requis.

Créez l'espace de travail :

mkdir -p product-animation/frames
cd product-animation

Le pipeline en 4 phases

Exécutez les phases 1 à 3 en parallèle en tant que sous-agents (travail indépendant) avant de commencer la phase 4.

Phase 1 — Découverte de la marque et des assets (sous-agent)

Lancez l'extracteur de marque avec le prompt dans agents/01-brand-extractor.md. Passez-lui :

• Le chemin racine du dépôt
• Quelques indices sur ce que fait le produit

Il renvoie un JSON avec : le chemin réel du logo SVG, les tokens hexadécimaux exacts, la pile de polices, les conventions UI héroïques (border-radius, padding, style du bouton principal), le nom du produit + son slogan.

Copiez le wordmark SVG réel dans l'espace de travail (ex. <produit>-wordmark.svg). Assets de marque en ligne, pas de rasters.

Phase 2 — Concept + script (sous-agent)

Lancez le scripteur avec le prompt dans agents/02-script-writer.md. Passez-lui le résumé de marque de la phase 1, ce que fait le produit, et le type d'animation demandé par l'utilisateur (promo, intro de marque, révélation de stat, etc.).

Il renvoie :

• Le motif d'animation choisi pour ce produit (ex. « chat-demo », « stat-reveal », « brand-intro »)
• Un storyboard avec les timings des scènes : ouverture à froid → contenu principal → outro
• Le texte/les chiffres/les visuels exacts à mettre en avant dans chaque scène

Si le motif est chat-demo, le template dans templates/chat-demo.html est un point de départ complet et fonctionnel — remplissez la structure de données CASES.BIGGEST avec le contenu du script. Pour les autres motifs, construisez le HTML à partir de zéro en utilisant le moteur d'animation décrit dans methodology.md § 2 — même pilote __setTime(t), même boîte à outils d'easing, même capture Playwright.

Phase 3 — Recherche de contenu (sous-agent)

Lancez le chercheur de cas avec le prompt dans agents/03-case-researcher.md. Passez-lui le domaine du produit et le motif d'animation.

Ce qu'il renvoie dépend du motif :

• Démo de chat / promo : UN cas avant/après canonique, nommé et dramatique avec des chiffres réels (le « moment Converse Chuck Taylor » pour le domaine) + 3–4 cas secondaires.
• Révélation de stat : UNE grande métrique publique que le produit peut légitimement revendiquer, avec citation.
• Introduction de marque / révélation de logo : le titre réel de l'entreprise, le nombre réel de clients, l'histoire réelle du lancement — tout ce qui est vérifiable pour être affiché à l'écran.
• Visite guidée du flux de travail : le parcours utilisateur réel le plus courant, étapes nommées issues du produit lui-même.

Spécifique, nommé, vérifiable partout où l'animation fait une affirmation.

Phase 4 — Construction et rendu

Combinez les sorties dans le modèle HTML choisi (ou un que vous avez écrit à partir de zéro), effectuez le rendu des images avec Playwright, encodez avec ffmpeg.

Phase de construction

La construction diffère légèrement selon le motif. La structure commune :

1. Copiez ou écrivez le HTML d'animation.

   • Si le scripteur a choisi chat-demo, copiez templates/chat-demo.html dans l'espace de travail et modifiez l'objet de données CASES.BIGGEST avec le contenu du script de la phase 2 + les recherches de la phase 3. Remplacez également les :root { --tokens } de la marque, le texte d'en-tête (« Atlas Trade », « Intelligence », badge), la barre d'URL, le <img src> du wordmark, et le slogan + CTA de l'outro du logo.
   • Pour les autres motifs (intro de marque, révélation de stat, visite guidée, avant/après), écrivez le HTML à partir de zéro en utilisant le moteur d'animation — methodology.md § 2 montre le modèle de timeline déterministe. Réutilisez les règles de conception de reference/design-rules.md, les mathématiques de caméra de reference/camera-modes.md, et le même contrat de rendu Playwright.

2. Copiez un script de rendu. Pour chat-demo, utilisez templates/render-chat-demo.js (525 images, ~17,5 s) ou render-chat-demo-zoom.js (585 images, ~19,5 s, caméra cinématique). Pour les motifs personnalisés, copiez l'un des scripts de rendu et mettez à jour la constante DURATION — le reste fonctionne tel quel.

3. Vérifiez d'abord dans le navigateur. Ouvrez le HTML directement — l'animation se joue automatiquement en boucle. Examinez chaque scène visuellement. 5 min dans un navigateur économisent 3 min de rendu par itération.

4. Rendu de test — 6 à 8 images clés aux limites des scènes avant de vous lancer dans le rendu complet. Voir scripts/smoke.js pour le modèle. Détecte les chevauchements de mise en page, les polices de secours, les éléments hors écran en 30 s.

Phase de rendu

Installez Playwright dans l'espace de travail :

npm install [email protected] --no-save --no-audit --no-fund --silent

Effectuez le rendu des images :

node render-<motif>.js          # écrit frames/f_*.png  (~3-5 images par seconde de durée × FPS)

Encodez avec ffmpeg. Ajustez -t à la durée de votre animation et afade=t=out:st=X pour placer le fondu 1 s avant la fin :

ffmpeg -y -framerate 30 -i frames/f_%05d.png \
  -i /chemin/vers/musique.mp3 \
  -c:v libx264 -pix_fmt yuv420p -crf 18 -preset medium -movflags +faststart \
  -c:a aac -b:a 192k -af "afade=t=out:st=<DURÉE-1>:d=1.0" \
  -t <DURÉE> -shortest animation.mp4

yuv420p est requis pour la lecture sur Slack/LinkedIn/Twitter. +faststart permet le streaming. crf 18 est quasi visuellement sans perte.

Si aucun audio n'est fourni, supprimez -i music.mp3, -c:a aac -b:a 192k et les flags -af. scripts/encode.sh encapsule cela avec des valeurs par défaut raisonnables.

Contrôle qualité — lisez avant de déclarer terminé

Universel (chaque motif) :

• Wordmark de marque réel en ligne (SVG <img>, pas Inter Tight en gras stylisé en logo).
• Toutes les couleurs proviennent des tokens du produit — jamais de hexadécimal inventé.
• L'animation fait référence au codebase — son UI, ses polices, ses expressions familières reconnaissables.
• Un seul moment héroïque. Un chiffre, une révélation, un CTA — pas 12 points focaux concurrents.
• Tout nombre qui défile utilise tabular-nums (pas de sautillement horizontal).
• Les animations atterrissent — aucun élément n'apparaît exactement au même instant qu'un autre ne disparaît ; respectez les fenêtres d'entrée/sortie.
• Le logo reste assez longtemps à la fin (≥ 3 s pour les outros de marque).
• Le MP4 se lit dans QuickTime, exactement la résolution cible × fps, taille de fichier raisonnable (1–6 Mo typique).
• Ouvrez le MP4 avec open <nom>.mp4 pour l'utilisateur.

Pour chat-demo spécifiquement, vérifications supplémentaires (voir reference/design-rules.md) :

• Le chiffre héroïque $ est en JetBrains Mono / poids 800 / 6 chiffres ou plus.
• La chaîne d'outils a environ 8 puces, rythme ~3 s — tout ce qui est plus court semble faux.
• La bulle utilisateur apparaît APRÈS que la barre se soit effacée, jamais simultanément.
• La bulle de réflexion glisse vers le haut et disparaît avant que le résultat n'apparaisse — jamais les deux opaques.
• Le curseur n'apparaît que pendant la frappe, jamais sur l'espace réservé.

Nettoyez avant de déclarer terminé :

rm -rf frames frames-zoom node_modules package.json package-lock.json smoke_*.png

L'espace de travail final doit contenir : le HTML, le(s) script(s) de rendu, le wordmark SVG et le(s) MP4 terminé(s).

Arborescence des fichiers

~/.claude/skills/promo-animation/
├── SKILL.md                  ← vous êtes ici
├── methodology.md            ← référence approfondie, LISEZ D'ABORD — le moteur d'animation universel
├── agents/
│   ├── 01-brand-extractor.md   ← prompt du sous-agent phase 1
│   ├── 02-script-writer.md     ← prompt du sous-agent phase 2
│   └── 03-case-researcher.md   ← prompt du sous-agent phase 3
├── templates/
│   ├── chat-demo.html              ← motif canonique de démo de chat (exemple fonctionnel)
│   ├── render-chat-demo.js         ← moteur de rendu Playwright en mode statique
│   ├── render-chat-demo-zoom.js    ← moteur de rendu en mode zoom
│   └── atlas-wordmark.svg          ← SVG de remplacement
├── scripts/
│   ├── smoke.js                ← test de fumée sur les images clés
│   └── encode.sh               ← wrapper ffmpeg
└── reference/
    ├── design-rules.md         ← règles visuelles condensées
    ├── camera-modes.md         ← décision statique vs zoom
    └── timing-blueprint.md     ← timings des scènes

En cas de doute, lisez templates/chat-demo.html — c'est un exemple fonctionnel complet que vous pouvez rendre dès maintenant (un scénario fictif de reclassification « Atlas Trade » / Converse Chuck Taylor). C'est la référence canonique pour le motif de démo de chat ET le moteur d'animation déterministe — chaque règle visuelle, décision de timing et piège de methodology.md est codé dans ce fichier.

Pour les autres motifs d'animation, vous écrivez le HTML à partir de zéro — mais le moteur d'animation (§ 2 de methodology.md), le contrat de rendu (§ 5) et les règles de conception (reference/design-rules.md) s'appliquent tous sans changement.