贴纸科普讲解视频 (Sticker Explainer)

Vidéo Explicative Sticker (Sticker Explainer)

Transformez un script oral et une voix en une vidéo explicative de type « tableau d'enquête ». L'ossature visuelle : un grand fond bleu-gris foncé, chaque scène est une zone (panel) sur ce tableau, la caméra glisse d'une zone à la suivante le long d'une ligne pointillée orange. Les personnages sont des stickers détourés avec bord blanc, les lieux et objets sont des photos autocollantes, les informations sont des fiches cartonnées et des étiquettes avec icônes. À chaque nouveau chapitre, la vidéo marque une pause, un mind map apparaît et éclaire le prochain élément.

Ce skill repose sur motion-showreel (ConardLi/garden-skills) : ce dernier fournit la convention de page render(t), le rendu frame par frame, la synthèse sonore et la vérification du produit fini. Assurez-vous qu'il est installé (npx skills add ConardLi/garden-skills ou copiez dans ~/.claude/skills/motion-showreel). Ce skill n'ajoute que le style, le flux de travail et les outils de longs-métrages en chinois ; il ne copie pas le code de motion-showreel.

Exemple complet : examples/huang-resignation/ (vidéo de 13 min 43 s, voir les Releases du dépôt). Les commandes étape par étape se trouvent dans references/workflow.md ; les fonctions de dessin sont dans references/engine-api.md ; les règles visuelles sont dans references/style.md.

Avant de commencer : questions à poser (une seule fois, maximum 4 questions)

1. Voix : l'utilisateur génère-t-il la voix lui-même avec ElevenLabs (recommandé ; les balises [serious] [short pause] dans le script sont celles de la v3) ou préfère-t-il une version sans son ? Si plusieurs fichiers audio, demandez comment les assembler (ex. «Commence par le court, puis enchaîne avec le long selon les sous-titres»).
2. Format : par défaut 16:9, 1920×1080.
3. Personnages : par défaut, utiliser uniquement des photos détourées sous licence publique ou CC (les photos officielles des responsables gouvernementaux américains sont dans le domaine public). Sans photo autorisée, utiliser uniquement des cartes nominatives.
4. Sous-titres : par défaut, chinois, une seule ligne, chaque ligne ≤ 14 caractères.

Si l'utilisateur dit « Posez-moi toutes les questions si vous avez un doute », demandez ce qui peut vraiment modifier le résultat final ; ne posez pas de questions auxquelles vous pouvez répondre par le script, le code ou le bon sens.

Flux de travail

L'audio fait foi, pas le script écrit. L'audio est souvent différent du script fourni (phrases manquantes, mots changés, ordre modifié). Les sous-titres et les visuels suivent l'audio. Listez les différences dans le brief et informez l'utilisateur. Si une position de chapitre ne correspond à aucune phrase dans le script, choisissez la position la plus proche dans l'audio et expliquez l'ajustement.

1. Créer le projet : export MOTION_SHOWREEL=$(realpath <répertoire motion-showreel>), puis sh scripts/new_project.sh <rép> , placez l'audio dans audio/src/, remplissez video.config.json. Utilisez toujours le chemin absolu du projet pour toutes les commandes.
2. Assembler l'audio (multi-fichiers) : utilisez transcribe.py <rép> --take <fichier> pour voir les phrases et les temps de chaque segment, choisissez les points de coupure dans les pauses entre phrases, écrivez dans voice.splice, puis splice.py.
3. Transcription et alignement : transcribe.py, puis align.py. whisper.cpp dérive après quelques minutes pour les longs segments, donc les scripts coupent en segments d'environ 40 s pour une meilleure précision. whisper produit parfois des caractères traditionnels ; les scripts les convertissent en simplifiés via opencc. Lisez timeline/segments.json, ajoutez les noms mal entendus, les pronoms, etc., dans fixes, relancez.
4. Montage rythmique : voedit.py. Les pauses de chapitre (7,5 s avant le premier chapitre pour la vue d'ensemble, 4 s pour les autres) et les changements de vitesse (ex. 1,1× au début) sont effectués ici. Ce script n'ajoute que du silence et change la vitesse ; il ne supprime ni ne réordonne jamais les phrases. Il produit vomap.json : tous les temps ultérieurs sont convertis via ce mapping, donc modifier le rythme ne décalera pas les visuels.
5. Sous-titres et timeline : timeline.py génère timeline.js. Les sous-titres sont affichés en une seule phrase par écran, ≤ 14 caractères (les lettres latines comptent pour 0,55 caractère). Ils ne changent qu'entre deux mots ; les noms propres, les institutions, les montants, les titres entre guillemets sont protégés par subtitles.protect et ne seront pas coupés.
6. Images clés : créez d'abord 3 images clés pour faire valider le style par l'utilisateur, puis écrivez la vidéo complète.
7. Écrire les scènes : dans episode.js, écrivez PANELS. Les temps d'apparition des éléments sont écrits sous forme V(numéro_phrase, décalage). Après chaque lot de scènes, générez une planche contact (render.mjs --still … --sheet) pour vérifier le chevauchement.
8. Son : events.mjs lit les temps des effets sonores enregistrés dans la page ; utilisez audio.mjs build score.mjs --raw --out audio/sfx.wav (de motion-showreel) pour synthétiser les effets ; mix.py fait le mixage final.
9. Rendu : build.sh effectue successivement une vérification de déterministe, le rendu frame par frame et la vérification du produit fini (13 min 1080p prend environ 10 min). Après le rendu, vérifiez quelques images des mind maps, sous-titres et photos pour éviter les chevauchements.

Exigences récurrentes des utilisateurs (à faire par défaut)

• Transitions fluides : toutes les scènes se trouvent sur un même tableau, la caméra se déplace le long de la ligne pointillée ; le sticker du personnage principal suit le mouvement en tant qu'acteur actors, il ne coupe pas net.
• Mind map des chapitres : à la frontière des chapitres, la voix marque une pause, le fond s'assombrit, des lignes se dessinent, les nœuds deviennent orange avec un cadre de balayage, les nœuds déjà visités sont cochés. La première fois, une vue d'ensemble apparaît : chaque branche s'affiche une par une, puis le premier chapitre s'illumine avant que le contenu du chapitre suivant n'apparaisse.
• Barre de progression placée sous les sous-titres, chaque segment entre les chapitres affiche le nom du chapitre.
• Utilisez beaucoup d'icônes et d'images : les étiquettes et cartes portent des icônes linéaires ; les lieux et institutions utilisent des photos autocollantes. Les photos illustratives sont marquées « illustration ».
• Les éléments ne doivent pas masquer les sous-titres ni le titre du chapitre en haut à gauche : la zone d'environ 200 px en bas de l'écran est réservée aux sous-titres, la zone en haut à gauche (environ x < 700, y < 120) est réservée au titre ; même les grands caractères ne doivent pas entrer dans ces zones.
• Les effets sonores ne doivent pas couvrir la voix ni la musique. Les mind maps utilisent un son doux de marimba « panneau » (chaque branche de la vue d'ensemble avec une note de la gamme pentatonique), et un seul clic à l'illumination. N'utilisez pas de riser, glitch ou autres effets « technologiques ».
• Musique : choisissez un morceau qui a une fin naturelle, de sorte que la fin tombe exactement sur le générique ; le début apparaît en fondu à une pause de chapitre. La musique baisse de 6 dB pendant les pauses de chapitre.
• Volume : utilisez uniquement du gain linéaire. Par défaut, voix à −15 LUFS, musique à −26 LUFS (voix environ 11 dB au-dessus de la musique), effets sonores à environ 12 dB en dessous de la voix, limite de crête à −1,5 dBFS. L'ensemble doit passer une vérification de loudness à −14 ± 1,5. Si l'utilisateur demande « baisse la voix / monte la musique », modifiez les levels et music.lufs en dB ; si le résultat global tombe en dessous du seuil, prévenez que c'est attendu (l'exemple était à −19,3 / −30 selon la demande de l'auteur).

Faits, droits d'auteur et sécurité

• Les événements d'actualité souvent postérieurs à la date de connaissance du modèle : vérifiez en ligne, ajoutez les sources dans le générique ; si les chiffres ne sont pas vérifiés, listez-les dans le brief sous « À vérifier » et remettez-les à l'utilisateur.
• Les accusations non confirmées doivent être signalées visuellement (« Enquête en cours », « Le département nie », « Illustration »). L'association n'est pas une preuve. N'étiquetez jamais « espion » à côté d'une photo de personne.
• Utilisez uniquement des photos sous licence publique ou CC, les informations de licence sont enregistrées dans assets/credits.json et incluses dans le générique. Les musiques libres de droits (Pixabay, etc.) peuvent être utilisées dans la vidéo finale, mais le fichier de musique ne peut pas être redistribué.
• Disque : le rendu, les fichiers audio intermédiaires et le produit final prennent environ 1 Go. Vérifiez l'espace disque ; s'il manque, supprimez uniquement les fichiers intermédiaires qui peuvent être reconstruits. Demandez avant de supprimer les fichiers de l'utilisateur ou les modèles téléchargés.

Fichiers

sticker-explainer-video/
├── SKILL.md
├── scripts/
│   ├── new_project.sh       Crée un nouveau projet (scaffold motion-showreel + ce template)
│   ├── cfg.py               Fonctions communes (lecture de video.config.json, ffmpeg, loudness, détection de pause)
│   ├── splice.py            Assemblage de plusieurs fichiers audio
│   ├── transcribe.py        Deux passes whisper.cpp → texte des phrases + temps par mot + pauses
│   ├── align.py             Alignement → timeline/sentences.json
│   ├── voedit.py            Pauses de chapitre, changements de vitesse → audio/vo-edit.wav + vomap.json
│   ├── timeline.py          Mapping temporel + découpage des sous-titres → timeline.js
│   ├── events.mjs           Lit les temps des effets sonores depuis la page
│   ├── mix.py               Voix + musique + effets → audio/final.wav
│   └── cutout.swift         Détourage Apple Vision (macOS)
├── assets/template/         index.html, engine.js, episode.js (scènes d'exemple), score.mjs, video.config.json, fonts
├── references/
│   ├── workflow.md          Commandes et points de vérification pour chaque étape
│   ├── engine-api.md        Fonctions de dessin de engine.js et paramètres de start()
│   └── style.md             Règles de couleurs, mise en page, transitions et son
└── examples/huang-resignation/    Exemple complet (code, configuration, timeline, photos, audio)