adminosinthub-bit/Claude-Video-Skill

HTML → vidéo : plusieurs variantes, sélection de la meilleure, montage final

Claude excelle dans la conception HTML/CSS. C’est pourquoi nous réalisons les vidéos de cette façon : nous écrivons une animation en HTML, nous la rendons en vidéo, nous observons le résultat visuellement (images clés), nous comparons les variantes et nous les améliorons.

Prérequis

• node + playwright (avec Chromium), ffmpeg. Vérification : bash scripts/check-env.sh.

Démarrage rapide

cp references/template-scenes.html work/<nom>/v1.html     # modèle basé sur le moteur de scènes
node scripts/render.mjs work/<nom>/v1.html --preset vertical-preview --duration 20 --out work/<nom>/v1.mp4

• references/engine.js — moteur de scènes : arrière-plan, sous-titres avec surbrillance (*mot*), progression, transitions, easing (E.pop, E.type, E.set).
• references/parts.js — éléments : mascotte P.bot, icônes P.icon, fenêtre macOS P.win, bulles de chat.
• references/design-notes.md — ce qui rend une vidéo « vivante » (histoire, accroche, rythme, sous-titres). À lire avant de créer les variantes.
• Exemples de vidéos réalisées : examples/ (claude-ad — 16:9 ; chatgpt-ad — 9:16, 25 s ; duolingo-ad — 9:16, 40 s, 60 fps avec histoire et démonstrations ; claude-self-ad — 9:16, 39 s, 60 fps, publicité pour Claude lui-même avec un méta-retournement).
• Taille du fichier : une vidéo de 40 s / 60 fps ≈ 10 Mo ; si une limite plus petite est nécessaire — --fps 30 ou reconvertissez avec ffmpeg -i in.mp4 -crf 24 out.mp4.

Principaux principes de qualité

1. Montrer, ne pas raconter. Toute affirmation dans la vidéo est une scène de démonstration, pas un simple texte.

   Affirmation	Ce qu’il faut montrer
   « Écrit du code »	une requête s’affiche, puis le code apparaît ligne par ligne
   « Explique clairement »	une vraie erreur (she drink), surbrillance et règle « +s », hibou expliquant
   « Enseigne en pratique »	un doigt tape sur les mots, la phrase se construit, panneau vert « Correct ! »
   « Série de 346 jours »	compteur 1 → 346 avec une flamme, calendrier qui se remplit, notification, félicitations avec confettis
   « Jeu »	classement de la ligue où la ligne du héros monte en 1ère position, et +XP

2. Décrire ce qui se passe. Dans chaque scène, deux couches de texte : un petit titre-étiquette en haut (<div class="kick"> : « Leçon », « Ligue ») et un sous-titre en bas avec le mot clé en surbrillance (cap: 'Analyse les *erreurs* clairement'). Les phrases complètes sont meilleures que les slogans d’un seul mot.

3. Fluidité. Le montage final est rendu en 60 fps. Tout vit en continu : apparitions élastiques (E.spring, E.pop), léger zoom avant de la caméra (cam: [1, 1.05]), balancement de la mascotte, clignements (P.blink), touches de doigt avec ondulations (P.touch), compteurs (E.count), transitions circle/wipe/left. Ne laissez pas d’images statiques plus de ~0,5 s.

4. Histoire : accroche (douleur/humour) → démonstrations → « meilleures qualités » → point culminant (récompense/résultat) → appel à l’action. 30–45 s pour une publicité.

5. Trois variantes — trois idées différentes, pas trois coloris (par exemple : « compteur de série », « leçon en direct », « dialogue avec la mascotte »). Ensuite, le montage final est assemblé à partir des meilleures scènes de toutes les variantes.

Processus

1. Brief

Précisez (ou choisissez des valeurs par défaut raisonnables) : thème/texte, public cible, durée (publicité 20–30 s, histoire jusqu’à 60 s), format (par défaut vertical 1080×1920 pour Reels/Shorts/TikTok ; 1920×1080 et 1080×1080 sur demande), fps (30), style, couleurs/polices. Réalisez un storyboard court : accroche → problème → solution → démo → appel à l’action. Pour une publicité de marque, n’utilisez pas de logos officiels — dessinez votre propre mascotte.

2. Trois variantes ou plus, DIFFÉRENTES

Créez un dossier de travail work/<nom>/ et dans celui-ci v1.html, v2.html, v3.html (vous pouvez en avoir plus). Les variantes doivent différer par leur concept, pas par des détails mineurs. Par exemple : (a) histoire avec mascotte, (b) démo produit avec cartes, (c) enchaînements rapides avec grande typographie. Composition, palette, rythme différents. Chaque fichier est un HTML autonome (sans chargements externes ; les polices sont système ou intégrées). Règles d’animation dans references/animation-contract.md ; modèle de départ : references/template.html.

3. Rendu de chaque variante

Les variantes sont rendues en résolution d’aperçu (rapide), le final en résolution complète :

node scripts/render.mjs work/<nom>/v1.html --out work/<nom>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<nom>/final.html --out work/<nom>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]

Le rendu est déterministe et parallélisé (sur le nombre de cœurs) : le temps est défini manuellement pour chaque image, sans saccades ni sauts. --from 5 --to 9 rend uniquement un fragment. Une seule image sans vidéo : node scripts/frame.mjs v1.html 3.5,7 work/<nom>/frames --width 540 --height 960.

4. Analyse — obligatoirement visuelle

bash scripts/contact-sheet.sh work/<nom>/v1.mp4 work/<nom>/v1-sheet.png 12

Ouvrez *-sheet.png et les images individuelles via Read (les images sont lues visuellement). Évaluez selon references/rubric.md (somme de 8 critères sur 5 points chacun) : lisibilité, hiérarchie, rythme, fluidité, équilibre, cohérence, conformité au brief. Pour chaque variante, notez : les scores par critère, ce qui a le mieux réussi, ce qui a le moins bien réussi. N’évaluez pas le code — seulement ce qui est visible sur les images. Si quelque chose n’est pas clair — densifiez les images ou réalisez-les aux moments voulus : bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>.

5. Sélection du leader et synthèse

• Choisissez la meilleure variante selon le score total.
• Établissez une liste d’« emprunts » : les bonnes idées spécifiques des autres variantes (par exemple, « typographie de v2 », « animation d’apparition de v3 », « palette de v1 »).
• Créez final.html basé sur le leader et appliquez ces modifications. Corrigez les points faibles du leader.

6. Itération et vérification du montage final

Rendez final.mp4, refaites le contact sheet, comparez avec le leader. Si le final n’est pas meilleur que le leader selon la grille — corrigez et répétez (3 itérations maximum). Ensuite, présentez à l’utilisateur le résultat : chemin vers final.mp4, tableau récapitulatif des scores des variantes et liste de ce qui a été emprunté et d’où.

7. Audio (optionnel)

ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4

Règles

• Ne copiez pas les mascottes et logos déposés des marques : dessinez votre propre personnage, le nom de la marque uniquement en texte.
• Ne sautez pas l’étape 4 : la décision est prise en fonction des images vues, pas en fonction d’hypothèses.
• Rangez tous les artefacts dans work/ (dans .gitignore), ne commitez dans le dépôt que le skill et les exemples.
• Si Chromium/ffmpeg ne sont pas disponibles — dites-le clairement, ne simulez pas le résultat.