claude-motion-explainer

Boucle de révision (version HyperFrames)

Vous ne pouvez pas regarder une vidéo, mais vous pouvez voir des images. Ne déclarez jamais une vidéo terminée sans avoir visionné la planche-contact de la version actuelle.

Adapté de la compétence review-loop de whaleyxbt/claude-motion (MIT, voir le fichier LICENSE dans le même dossier). Les commandes npm run … originales ont été remplacées par l’outil HyperFrames de kinocut MCP ainsi que par le script scripts/sheet.py de ce dossier. Les paragraphes marqués « (nouveau dans cette version) » ne font pas partie du contenu original.

SHEET ci-dessous désigne python "<dossier de cette compétence>/scripts/sheet.py" (par exemple ~/.claude/skills/review-loop/scripts/sheet.py). Tous les chemins sont absolus.

Boucle

0. Passer d’abord la vérification automatique (nouveau dans cette version) : exécutez hyperframes check dans le dossier du projet. Cela exécute lint, vérification du rendu, des dépassements, des animations et du contraste (les anciennes commandes validate/inspect sont désormais obsolètes ; utilisez check). Corrigez les erreurs avant de continuer. Voir le hyperframes-cli skill officiel pour les détails.
   • Lors des révélations par masque en entrée, container_overflow est attendu et intentionnel ; ajoutez data-layout-allow-overflow au conteneur du masque. Cependant, si text_box_overflow survient après stabilisation, le conteneur est trop bas (notamment pour le chinois et les indices), il faut l’agrandir.
1. Brouillon : hyperframes_render, avec le paramètre quality: "draft", output_path défini sur <projet>/out/draft.mp4.
2. Planche-contact : SHEET --video <projet>/out/draft.mp4 --timeline <projet>/timeline.js --out <projet>/out/sheets Capture une image 0,3 seconde après chaque temps fort (l’animation étant stabilisée), assemble en grille 4×2 dans out/sheets/beats-N.png, chaque image étant étiquetée avec le nom du temps fort et le temps. Chaque image fait 360 px de large par défaut, soit la largeur réelle sur mobile.
3. Ouvrez chaque planche avec Read et vérifiez point par point avec la checklist ci-dessous.
4. Agrandissez les zones suspectes :
   • Balayer une transition : SHEET --video … --from 3 --to 5 --every 0.2 --name scrub
   • Voir un instant précis : SHEET --video … --at 3.7,3.75,3.8 --name exact
   • Voir une image en pleine résolution : hyperframes_still, frame = numéro d’image (secondes × fps)
   • Sans devoir réexporter la vidéo, utilisez hyperframes_snapshot avec at pour capturer directement depuis la composition, puis SHEET --images … --labels … pour assembler.
5. Corrigez et revenez à l’étape 0. Ne vous arrêtez que si un cycle complet ne révèle aucun problème.
6. Version finale : hyperframes_render avec quality: "high" pour générer la vidéo finale, puis exécutez l’étape 2 sur cette version finale, puis effectuez la vérification audio (voir ci-dessous).

Checklist

Composition

• Chaque image a un seul point focal. Si deux éléments se disputent l’attention, l’un doit attendre.
• Absence de collisions ou de chevauchements non intentionnels, en particulier lors des transitions où les éléments qui entrent et sortent partagent le même espace.
• Zone de sécurité : le contenu important ne doit pas être à moins d’environ 60 px des bords.
• La première image est réelle, pas noire (c’est la vignette sur les réseaux sociaux).

Texte

• Pas de coupure par un masque, un conteneur ou le bord de l’image (sauf intention).
• Lorsque la vidéo est réduite à la largeur du téléphone (taille des cellules de la planche), les informations clés restent lisibles.
• Le texte ne bouge pas au moment où il doit être lu.
• (Nouveau dans cette version) Chinois : pas de fautes ; tous les caractères en forme traditionnelle, pas de mélange avec des simplifiés ; ponctuation pleine largeur ; aucune police manquante (affichage de carrés ou polices visiblement différentes).

Rythme

• Chaque état destiné à être lu reste assez longtemps (voir section 4 du skill motion-design). Si le texte bouge encore dans les cellules intermédiaires du temps fort, c’est que la pause est trop courte.
• Les scènes se chevauchent lors des transitions, il n’y a pas de coupure vers un écran vide.
• La sortie est plus rapide que l’entrée.

Cohérence

• Seules les couleurs définies dans la palette :root sont utilisées ; la couleur d’accentuation correspond au point principal de l’image.
• Le même élément a la même apparence dans chaque scène où il apparaît.

Son (uniquement s’il y a du son)

• Forme d’onde : video_audio_waveform vérifie que les crêtes sonores correspondent aux temps forts de la timeline TL.
• Loudness (nouveau dans cette version, remplace npm run wave de l’original) : ffmpeg -hide_banner -nostats -i <vidéo finale> -af ebur128=peak=true -f null - Lisez le résumé final pour Integrated loudness et True peak. Objectif : −14 LUFS ±1, true peak ≤ −1 dBFS.
• L’accent et l’émotion de la narration en chinois (ou dans une autre langue) doivent être écoutés par l’utilisateur avec ses oreilles, sans se fier à des scores (nouveau dans cette version).

Rapport

À la fin, indiquez clairement : ce qui a été vérifié, ce qui a été corrigé, et quelle planche-contact montre les résultats. Ne prétendez pas avoir corrigé un problème sans avoir réexporté la vidéo et vérifié visuellement.