Communitygithub.com

vibe-knowledge-film

Transforme un concept en court-métrage de style « Vibe » : vidéo sans narration, entièrement générée image par image avec du code Canvas, sur un fond sombre avec des formes géométriques lumineuses et des sous-titres synchronisés sur la musique.

Qu'est-ce que vibe-knowledge-film ?

Cette compétence permet de créer des vidéos courtes de type « Vibe », sans voix off, où chaque image est entièrement dessinée par du code Canvas – comme les séries « Vibe知识大赏 » ou « 比特新语 ». Le résultat est un fichier 1920×1080 à 30 ips, d’environ 2 minutes 40, avec un fond sombre, des formes géométriques lumineuses, une ligne de sous-titres en bas, le tout calé sur une musique fournie ou synthétisée. Le flux de travail complet est automatisé : choix du sujet → vérification des faits → rédaction des sous-titres et storyboard → écriture du fichier `film.js` (utilisant `renderFrame(t)` comme fonction pure) → repérage des drops musicaux → export image par image via Playwright → montage final avec ffmpeg → contrôle qualité automatique (vitesse des sous-titres, synchronisation audio/vidéo, faible mouvement, volume). L’utilisateur peut lancer une production simplement en disant « Fais-moi une vidéo Vibe » ou « Comme 比特新语 ». La compétence n’est pas faite pour les vidéos avec voix off, les présentateurs en direct ou les montages réels – ceux-ci utilisent d’autres outils comme `jia-kinetic-explainer` ou `hyperframes`.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/createsomethingq3k/vibe-knowledge-film/tree/HEAD

Demander à votre IA préférée

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

Documentation

Vibe 知识短片(代码逐帧版)

Format final : 1920×1080, 30 ips, environ 159 secondes (calé sur la musique) ou personnalisable, aucune voix, une phrase de sous-titre par écran, tout le visuel est dessiné par du code Canvas.
L’exemple « Demi-vie » (examples/halflife/) est entièrement assemblé à partir de composants ; la vérification montre qu’il est identique à l’original image par image (67 images) et échantillon par échantillon pour le mixage. examples/gallery/ est une démo des mêmes composants appliqués à d’autres sujets.

Ce que les spectateurs apprécient dans ce type de vidéo, ce sont trois choses : des faits réels (années, données brutes, articles scientifiques), une animation constante, et des révélations calées sur la musique. Chaque règle ci-dessous sert à garantir ces trois points.

Règles impératives (chacune a déjà causé un incident)

  • Chaque chiffre, nom, année, citation affiché à l’écran doit avoir une source écrite dans la table des faits ; si on ne trouve pas, on n’écrit pas, et on marque « illustration » sur l’image. L’IA invente souvent des citations qui « sonnent juste » – l’ancienne version de « Demi-vie » contenait une fausse citation anglaise de Rutherford.
  • Le filigrane ne doit contenir que le nom de l’utilisateur ou le titre de la vidéo. En copiant des images de référence, l’IA peut inclure le nom de l’auteur original (l’ancien démo avait « 比特新语 » dans le coin supérieur gauche), ce qui équivaut à une usurpation.
  • La musique de fond doit être fournie et sous licence par l’utilisateur ; on ne copie pas de pistes audio depuis d’autres vidéos, on ne télécharge pas depuis des sites douteux, et la compétence ne fournit aucune musique. Pour les publications sur Bilibili, ajoutez la musique via le processus de soumission de Bilibili.
  • Le générique de fin et le texte de publication doivent inclure une déclaration de création par IA.
  • renderFrame(t) ne dépend que de t : utilisez VF.rng(seed) pour l’aléatoire, pas de minuteur, pas d’état entre les images. Sinon l’export tremblerait et chaque rendu serait différent.

Préparation

SK=~/.claude/skills/vibe-knowledge-film
$SK/engine/setup.sh          # Vérifie node / ffmpeg(libx264) / numpy, installe le paquet Playwright, trouve le navigateur local

Flux de travail (trois points de validation, confirmez avant de continuer)

① Sujet et direction → Validation 1

Demandez avec AskUserQuestion (en recommandant la première option) :

  • Sujet : si l’utilisateur ne donne qu’une direction, proposez 3 candidats. Un bon sujet = concept pointu × point émotionnel qui touche « vous » (entropie → le sentiment d’impuissance de la vie ; demi-vie → l’oubli est-il une trahison ?), de préférence avec un rebondissement contre-intuitif. Voir references/story.md.
  • Musique : bgm (l’utilisateur fournit un fichier sous licence comme « 开智小曲 », la vidéo suit la musique, durée = durée de la musique) ou synth (synthétisée par code, durée personnalisable).
  • Attribution (que mettre dans le filigrane), durée (par défaut celle de la musique, 159 s).

② Vérification → Table des faits

Pour chaque fait affiché à l’écran : affirmation | source | fiabilité (T1 source originale / T2 source secondaire fiable / T3 uniquement « d’après ») | utilisé dans quelle phrase.
La vérification réécrit souvent l’histoire : pour « Demi-vie », la découverte que « l’oubli suit une loi de puissance, plus ancien plus stable » a renversé le sous-titre original et est devenue le rebondissement de la fin. Si vous trouvez un conflit, arrêtez-vous et informez l’utilisateur.

③ Sous-titres + Storyboard → Validation 2

Écrivez en six parties (accroche → titre → ancrage historique → démonstration du mécanisme → rebondissement contre-intuitif → retour au spectateur → dédicace et références), une phrase par écran, ≤ 6,5 caractères/s, mots-clés en {}, phrases nécessitant une source avec un petit texte en bas (élément 4).
Pour chaque partie du storyboard, décrivez : ce que montre l’image (une phrase de sous-titre correspond à une action à l’écran), ce qui « est vraiment calculé » (données réelles, formules réelles, simulation avec une graine fixe), et les effets sonores. Modèle : templates/事实表与字幕分镜.md. Montrez la table des faits + le storyboard à l’utilisateur ; ne codez qu’après approbation.

④ Créer le film, écrire film.js

$SK/engine/new_film.sh <répertoire> <nom_film>                 # Squelette en six parties
$SK/engine/new_film.sh <répertoire> <nom_film> --from halflife  # Départ / référence depuis « Demi-vie »

Sélectionnez d’abord les composants en fonction du contenu à montrer : references/components.md contient un tableau « quoi montrer → quoi utiliser », examples/gallery/组件图鉴.png est un aperçu de tous les composants. Le modèle squelette utilise déjà les composants pour assembler les six parties ; il suffit de remplacer les données et le texte ; si les composants ne suffisent pas, écrivez des fonctions locales dans film.js (API dans references/engine.md, exemple complet dans examples/halflife/film.js). Règles :

  • Faites d’abord la scène la plus difficile : générez une image fixe pour vérifier sa tenue, puis faites les autres.
  • Écrivez les sous-titres, scènes et effets sonores par rapport au « temps du storyboard » ; la synchronisation avec la musique sera gérée par warp (étape ⑤), ne modifiez pas les points temporels un par un.
  • Dans chaque scène, une nouvelle action toutes les 2–3 secondes ; pour les longues pauses, ajoutez des micro-mouvements (lueurs, balayages, zooms lents). La respiration automatique du moteur a une amplitude trop faible pour masquer l’immobilité.
  • Les nouveaux mots (dessinés dans la scène, absents des sous-titres) doivent être ajoutés à strings.

⑤ Musique et points de synchronisation

  • bgm : placez le fichier dans le répertoire du film, exécutez python3 $SK/engine/analyze_bgm.py <fichier> --json out/bgm.json. Si c’est « 开智小曲 », comparez d’abord le sha256 avec data/kaizhi-xiaoqu.json : s’il correspond, utilisez directement la grille de mesures et les points d’ancrage suggérés ; sinon (d’autres sources peuvent décaler de 0,1–0,3 s), utilisez les points d’attaque basse fréquence nouvellement détectés pour reconstruire la grille. Ensuite, écrivez les points d’ancrage dans meta.music.warp : titre en blanc → premier drop, question / silence → section calme, révélation du rebondissement → deuxième drop, conclusion et dédicace → début de phrase musicale. Détails dans references/music.md.
  • synth : dans meta.music.synth, écrivez les niveaux de chaque voix par section et l’enveloppe de silence (modifiez l’exemple SYNTH).

⑥ Auto-vérification (sans générer la vidéo complète)

node $SK/engine/export.mjs <répertoire> events          # Table des effets sonores + chronologie des sous-titres
node $SK/engine/export.mjs <répertoire> stills          # out/stills.png, aperçu 16 vignettes ; possibilité de spécifier des secondes 3,16.9,43.6
cd <répertoire> && python3 -m http.server 8765 --bind 127.0.0.1   # Ouvrir film.html dans le navigateur, glisser la timeline, écouter la musique

Inspectez image par image : le texte dépasse-t-il les bords ? La moitié de l’écran est-elle vide ? Les courbes suivent-elles les données ? Des éléments flottent-ils au mauvais endroit ? Les sous-titres correspondent-ils aux actions ? Le code ne génère pas d’erreur, seul l’œil les repère – pour « Demi-vie », 5 problèmes ont été trouvés à cette étape.

⑦ Rendu + Contrôle qualité

$SK/engine/build.sh <répertoire>        # Table des effets → musique → rendu image par image → mixage -14 LUFS → qa.py (arrière-plan, environ 5–12 min)
$SK/engine/build.sh <répertoire> --skip-render   # Seulement les changements audio

qa.py signale ✗ : doit être corrigé ; ! : soit à corriger, soit à expliquer comme volontaire lors de la livraison. La machine peut se tromper : si un « noir » est signalé, vérifiez quelques images – un fond sombre est souvent mal interprété. Voir references/qa.md pour la lecture.

⑧ Livraison → Validation 3

Donnez à l’utilisateur : chemin du fichier final, durée, résultat du contrôle qualité, points encore à améliorer. Complétez 制作日志.md (chaque incident : phénomène → cause → correction – servira de liste de plans pour les tutoriels). Si un texte de publication est nécessaire, voir references/publish.md.

Référence rapide des commandes

CommandeRôle
engine/setup.shVérification et installation de l’environnement
engine/new_film.sh <répertoire> <nom> [--from halflife]Crée un nouveau film (copie un instantané du moteur dans le répertoire, les mises à jour ultérieures du moteur n’affectent pas l’ancien film)
node engine/export.mjs <répertoire> events / stills [secondes,…] / render [début fin]Exporte la table des effets / l’aperçu / une vidéo (ne rend qu’un segment si début et fin sont donnés)
python3 engine/audio.py <répertoire>Musique + effets → out/mix.wav
python3 engine/analyze_bgm.py <fichier> [--json fichier]BPM, mesures, courbe d’énergie, points d’attaque basse fréquence
engine/build.sh <répertoire> [--skip-render]Génération complète en une commande + contrôle qualité
python3 engine/qa.py <répertoire> [fichier]Contrôle qualité indépendant

Fichiers de référence (à lire selon le besoin)

FichierQuand le lire
references/story.mdChoix du sujet, structure en six parties, règles des sous-titres, classification des faits
references/style.mdGuide visuel : couleurs, polices, cinq couches de l’image, coordonnées de mise en page, densité des animations
references/components.mdAvant d’écrire les scènes : 21 composants + 5 usines de données, tableau « quoi montrer → quoi utiliser », paramètres
references/engine.mdAPI de base du VF, champs meta, écriture des scènes
references/music.mdDeux modes de musique, structure de « 开智小曲 », détection des drops, points d’ancrage warp, table des effets sonores
references/qa.mdSignification de chaque test qualité, seuils et faux positifs courants
references/pitfalls.mdÀ parcourir avant de commencer : 30 pièges rencontrés en réalisant « Demi-vie » + pièges de projets similaires
references/publish.mdTexte de publication, déclaration IA, gestion de la musique et des citations
examples/halflife/Exemple complet : film.js (version composants), table des faits et storyboard, journal de production
examples/gallery/Galerie des composants : mêmes composants appliqués à différents sujets ; 组件图鉴.png pour un aperçu général
data/kaizhi-xiaoqu.jsonStructure mesurée et points d’ancrage suggérés pour « 开智小曲 »

Skills associés