Communitygithub.com

concept-reel : capsules explicatives sans voix off

Crée ou retouche des capsules conceptuelles 1080p sous-titrées sans voix off avec Canvas, Playwright et FFmpeg : storyboard guidé par le contenu, 15 styles de motion design, animation déterministe, planches de prévisualisation et effets sonores calés sur les événements.

Qu'est-ce que concept-reel : capsules explicatives sans voix off ?

Étape 3 de la recette Vidéo de démo produit (expliquer le pourquoi), issue de Jogzh/concept-reel (créé le 2026-10-13). Le README montre des aperçus de styles et des extraits WebP. Le spectateur doit reconnaître le sujet, voir le changement et comprendre la cause ; les chiffres sont calculés, les faits sourcés, et le rendu va de raw.mp4 aux effets sonores puis à final.mp4.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add Jogzh/concept-reel

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Concept Reel · 概念短片

Faire en sorte qu'une image explique une phrase : le spectateur doit reconnaître le sujet, voir le changement et comprendre la cause et l'effet. Livrer un projet exécutable, un storyboard, les sources des faits, ainsi qu'un aperçu ou le produit final dans la limite de la demande demandée.

Ce répertoire skill contient un moteur partagé ; les projets peuvent être créés dans le répertoire de l'utilisateur. Les chemins engine/ et scripts/ dans les commandes sont relatifs à ce répertoire skill ; utilisez les chemins réels lors de l'appel. Le format d'image actuel est fixé à 1920×1080 en paysage ; 30 ips par défaut, la fréquence d'images peut être définie lors de la création d'un nouveau projet.

Lecture par tâche

Principes de création

  • Décidez d'abord ce que le spectateur doit comprendre, puis choisissez le sujet et l'action. Les formes géométriques peuvent être utilisées pour les graphiques et les quantités abstraites ; décrivez les objets réels avec des formes reconnaissables.
  • Les changements dans les sous-titres doivent se produire à l'écran. Les chiffres proviennent de calculs ; indiquez clairement les schémas, les conditions d'application et les faits incertains ; enregistrez les faits importants avec des sources vérifiables.
  • Organisez un seul point focal visuel principal à la fois. Les sous-titres peuvent être stables ; les titres, mots-clés et étiquettes sont disposés en fonction du sujet et de l'espace blanc.
  • Maintenez une cohérence dans les polices, la signification des couleurs et le mouvement des gestes ; choisissez le centre de gravité du plan, l'échelle du plan et la densité d'informations en fonction du contenu. Le préréglage de style est un point de départ ; vous pouvez ajuster la palette de couleurs et les actions, combiner un style principal et un style auxiliaire.
  • Après que les sous-titres soient complètement affichés, calculez le temps de pause de lecture ; l'observation des images et le raisonnement nécessitent un temps supplémentaire. La conclusion s'arrête d'abord, puis quitte la scène.
  • L'animation est déterminée par t. Utilisez une graine fixe pour les nombres aléatoires ; ne décidez pas de l'image en fonction de l'horloge en temps réel, du minuteur ou de l'état cumulé entre les images.
  • Les exemples originaux sont destinés à l'apprentissage de la méthode de mise en œuvre ; les nouveaux films doivent être créés autour de leur propre thème, texte et storyboard. Voir AVIS pour les limites des sources et du matériel.

Flux de travail

Déterminez la portée de la livraison. Identifiez le sujet, le texte existant, les plans défectueux actuels, la durée, le style, la musique et la nécessité d'une exportation complète. Les choix qui peuvent être déduits du contexte sont directement avancés ; seules les exigences manquantes qui affectent le résultat sont clarifiées. Lorsque l'utilisateur a autorisé une production complète, continuez à la terminer sans demander d'approbation par étapes.

Organisez les faits et le storyboard. Écrivez une question centrale et une table des faits (fait, source, condition d'application, degré de certitude). Enregistrez pour chaque plan le temps, la tâche narrative, le sujet et le centre de gravité, le texte et l'ordre de lecture, l'action, le temps de pause de lecture complet et le son. Résolvez d'abord les phrases qu'il est difficile d'illustrer, puis organisez le temps. Conservez le sens original du texte existant ; expliquez les raisons des modifications nécessaires des faits ou de la structure.

Appliquez le style à la méthode de dessin. En l'absence de style clair, considérez 2 à 3 directions en fonction du sujet, de la relation spatiale, de la densité d'informations, du ton du mouvement et du coût de mise en œuvre, puis choisissez le plan adapté au contenu. Le storyboard enregistre les raisons du choix, les caractéristiques reconnaissables et les limites de mise en œuvre. Utilisez la galerie de styles pour explorer les actions ; créez toujours vos propres films en fonction des faits et du storyboard. Les préréglages 3D, verre et liquide sont adaptés au Canvas ; les rendus réalistes complexes nécessitent une mise en œuvre supplémentaire ; les sous-titres de divertissement restent en paysage.

Validez d'abord les plans clés. Vérifiez l'environnement, créez le projet, puis mettez en œuvre le segment le plus difficile ou le plus représentatif du style. Le squelette n'a pas d'image de production ; il faut remplir SUBS et les fonctions de scène. Le storyboard existant sera conservé ; le code source existant ne sera pas écrasé par défaut.

python scripts/check_env.py
python scripts/new_film.py --list-styles
python scripts/new_film.py --describe-style isometric
python scripts/new_film.py <répertoire_projet> --style isometric --title "Titre du film" --duration 60 --fps 30
python engine/render.py <répertoire_projet> --serve
python engine/render.py <répertoire_projet> --stills 2.5 8 15
python engine/render.py <répertoire_projet> --motion 8 10 12

Si l'environnement manque de dépendances, installez-les selon le README ; si des polices manquent, exécutez python engine/get_fonts.py. Par défaut, utilisez Chromium intégré ; si l'utilisateur a besoin de Chrome natif, transmettez --browser chrome.

--style ID et --world B/C s'excluent mutuellement ; si non spécifié, conservez C par défaut. Les nouveaux projets de style intègrent une recette STYLE ajustable, utilisant VStyles partagé ; motion.fps fait référence à la fréquence d'échantillonnage suggérée pour l'action du style, la fréquence d'images de sortie réelle est déterminée par --fps. Le squelette ne génère pas automatiquement le contenu du sujet.

Après vérification, étendez. Consultez les captures d'écran réelles, jugez si le sujet est reconnaissable, si l'action assume l'explication, si le texte est lisible ; vérifiez les obstructions à la taille de visualisation cible. Corrigez les problèmes découverts et réexaminez les moments concernés, puis étendez à l'ensemble du film. Une fonction par scène, les sous-titres sont dessinés à la couche la plus externe du draw. Les chapitres complexes peuvent être séparés en fichiers, déclarés dans index.html.

python engine/render.py <répertoire_projet> --sheet 16
python engine/render.py <répertoire_projet> --det
python engine/render.py <répertoire_projet> --clip 0 5 preview

--sheet avec une seule valeur indique le nombre d'images à prendre ; plusieurs valeurs indiquent des moments spécifiques. En cas d'échec de --det, vérifiez l'état du Canvas, la graine aléatoire et le cache inter-image ; ne qualifiez pas un échec de réussite.

Exportez et ajoutez le son selon l'autorisation. Lorsque le produit final est demandé, effectuez le rendu complet, l'exportation des événements et la synthèse audio ; si seul le code source/l'aperçu est nécessaire, livrez après l'achèvement des résultats correspondants.

python engine/render.py <répertoire_projet> --jobs 4
python engine/render.py <répertoire_projet> --events
python engine/audio.py <répertoire_projet>
# En présence d'une musique externe disponible
python engine/audio.py <répertoire_projet> --bgm music.mp3 --bgm-db -8

Les noms d'événements dans fr.sfx sont tick, soft, chord, bloom (compatible flash), rise, thud, tock, stamp, shimmer, hush. Même sans musique externe, il est possible de synthétiser la bande sonore de base et les sons d'événement ; expliquez clairement les résultats spécifiques. --wav-only ne produit que la piste audio synthétisée, sans superposer la BGM externe.

Vérification et livraison. Regardez les extraits/le film complet exportés en continu, et vérifiez par échantillonnage l'entrée en scène, la lecture stable, les actions clés et le milieu des transitions. Confirmez la conformité avec les faits et le storyboard, la synchronisation audio-vidéo, la cohérence des chiffres, l'absence de polices manquantes. Corrigez les problèmes découverts, réexaminez les plans concernés. Livrez le chemin du code source, l'aperçu ou renders/final.mp4, résumez les résultats de la vérification et les limitations réelles ; pour les parties non visionnées intégralement, expliquez-le clairement.

Projet et artefacts

index.html référence les ressources partagées de /engine/ et le fichier film.js local ; storyboard.md conserve le storyboard et les faits. review/ contient les images clés, audio/ contient les événements et la piste audio synthétisée, renders/ contient les extraits et le produit final. Les artefacts générés ne sont pas soumis par défaut, le code source re-rendable est conservé.

Skills associés