vibe-video — Générateur de vidéos courtes piloté par IA (Code → MP4)
Transformez n'importe quelle idée en une vidéo courte et atmosphérique en utilisant uniquement du code. L'IA écrit des animations Canvas/JS, les rend image par image et les compose en MP4 avec une bande-son optionnelle.
Quand utiliser
Utilisez cette compétence lorsque l'utilisateur souhaite créer une vidéo courte (15s–60s) qui est :
- Explication de connaissances — faits Nobel, principes scientifiques, perspectives psychologiques
- Métaphore émotionnelle — attachement, anxiété, lâcher-prise, mémoire
- Promotion de produit — fonctionnalités d'application, histoire de marque, annonce de lancement
- Observation sociale — schémas comportementaux, phénomènes culturels
- Art conceptuel abstrait — pure poésie visuelle, animations en boucle
Flux de travail (5 étapes, à ne pas sauter)
Étape 1 : Clarifier (poser maximum 3 questions)
Confirmez avec l'utilisateur :
- Durée — 15s / 30s / 45s / 60s (par défaut 30s)
- Ratio d'aspect — 9:16 (portrait) / 16:9 (paysage) / 1:1 (carré) (par défaut 9:16)
- Style — voir les préréglages de style dans
style-presets.md - Sujet et arc émotionnel — quel est le message principal ? Quel sentiment doit-il laisser ?
Étape 2 : Produire le storyboard
Produisez un tableau de storyboard avant d'écrire du code :
| Temps | Description visuelle | Légende (≤20 car.) | Indice visuel/audio |
|-------|----------------------|--------------------|---------------------|
| 0-3s | ... | ... | ... |
Règles :
- Chaque légende reste ≥2s ; la conclusion clé ≥3s
- Accroche dans les 3 premières secondes (fait contre-intuitif / ouverture émotionnelle / point de douleur principal)
- 5 à 8 plans au total, rythme lent→rapide→lent
- Les descriptions visuelles doivent spécifier : forme, couleur, direction du mouvement, mouvement de la caméra
ATTENDEZ la confirmation de l'utilisateur avant de continuer. Si l'utilisateur demande des changements, modifiez uniquement les plans spécifiés. Si plus de 3 plans changent, reproduisez le storyboard complet.
Étape 3 : Écrire le code de rendu
Copiez assets/templates/animation.js + animation.html comme point de départ — ils implémentent le système de couches, les fondus de légendes, un arrière-plan PRNG avec graine et le contrat window.seek(t), avec un aperçu en direct dans le navigateur inclus. Modifiez STORYBOARD et les fonctions draw*().
Voir rendering-guide.md pour la spécification technique complète. Référence rapide :
// Animation pilotée par le temps — chaque visuel est une fonction pure de t
// (pas de Math.random(), pas de Date.now() — utilisez un PRNG avec graine si nécessaire,
// pour que toute image soit rendue de manière identique pour les images fixes et les rendus repris)
function seek(t) {
// t = temps actuel (secondes)
// Retourne l'état visuel pour cette image
// Utilisez l'interpolation linéaire pour la position/opacité/échelle
}
// Système de couches
// Couche 0 : Arrière-plan (dégradé / particules)
// Couche 1 : Sujet principal
// Couche 2 : Décoration dynamique (fils lumineux / particules / lignes)
// Couche 3 : Superposition de légende
// Export
// Playwright headless → capture d'écran de chaque image → composition ffmpeg
Étape 3.5 : Storyboard → prompt H3 (pré-vol)
Insérez cette étape entre le storyboard confirmé et la première ligne de code de rendu. Les storyboards sont écrits pour les humains ; H3 nécessite une grammaire différente. Traduire en amont empêche la seule erreur irréparable de ce pipeline — un plan IA qui redessine un personnage que vous deviez garder fidèle.
# lint d'abord : écarts de chronologie, fenêtre H3 (4–15s), affectation du moteur, estimation du crédit
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
Ensuite, pour chaque plan H3, émettez un bloc de prompt en six sections et copiez ses numéros de caméra et ses marques de coupe dans le code d'animation, afin que les deux couches bougent ensemble.
Procédure complète, règles de champ, liste de contrôle et tableau de lint : storyboard-to-h3.md.
Étape 4 : Rendre et composer
Prévisualisez d'abord les images fixes — vérifier une image prend ~1s, un rendu complet prend des minutes :
# vérification rapide à t=0 / 4 / 10s (utilise automatiquement Edge ou Chrome installé)
node assets/templates/still.js --html animation.html --times 0,4,10
# rendu des images (12–15fps est généralement suffisant ; un mouvement fluide bénéficie de 24–30)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# composition (définissez FFMPEG=/path/to/ffmpeg si absent du PATH)
bash assets/templates/composite.sh ./frames output.mp4 30
# avec BGM
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# hybride : calque Canvas superposé à une plaque d'atmosphère IA (images transparentes, pas de keying)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Problème Windows : si bash composite.sh se comporte mal (shim Git Bash / PATH réduit), lancez ffmpeg depuis Node avec child_process.spawn directement — voir rendering-guide.md Dépannage.
Commandes manuelles héritées :
# Rendu des images
node render.js # produit frames/frame_0001.png ...
# Composition avec ffmpeg
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# Avec BGM
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
Étape 5 : Livrer
Livrer : fichier MP4 + storyboard + code source. Taille de fichier cible : <50 Mo pour 30s.
Fichiers de cette compétence
| Fichier | Objectif |
|---|---|
SKILL.md | Ce fichier — définition principale de la compétence |
style-presets.md | 6 préréglages de style visuel avec palettes de couleurs et conseils de rendu |
rendering-guide.md | Spécification technique : rendu Canvas, easing, règles de déterminisme, dépannage |
metaphor-library.md | Mappages de métaphores visuelles pour des concepts abstraits |
caption-guide.md | Typographie des légendes, synchronisation et règles de ton |
bgm-guide.md | Guide de sélection BGM par type de vidéo |
storyboard-to-h3.md | Pré-vol : lint du storyboard + blocs de prompts H6 en six sections avant d'écrire du code |
../assets/templates/lint-storyboard.js | Linter de storyboard : écarts de chronologie, fenêtre H3 4–15s, affectation du moteur, estimation du crédit |
../assets/templates/animation.js + animation.html | Échafaudage prêt à éditer (couches, légendes, arrière-plan avec graine, aperçu en direct) |
../assets/templates/render-playwright.js | Rendu d'images : détection automatique du navigateur (Edge/Chrome/chromium), captures d'écran synchronisées avec le rendu |
../assets/templates/still.js | Rendu d'image fixe unique pour des vérifications rapides peu coûteuses |
../assets/templates/composite.sh | Compositeur ffmpeg (vidéo / vidéo+BGM, remplacement FFMPEG=) |
../assets/templates/render-template.js | Variante Node-canvas (pas de navigateur nécessaire ; CSS/polices limités) |
Exemples de prompts
Explication de connaissances
Fais une vidéo de connaissances de 30s en 16:9 expliquant pourquoi couper des oignons fait pleurer.
Style : tech-blueprint. Arc : phénomène → mécanisme → solution.
Métaphore émotionnelle
Fais une vidéo émotionnelle de 30s en 9:16 sur la possessivité.
Style : soft-glow. Métaphore visuelle : fils lumineux qui enveloppent → se desserrent → lucioles.
Promotion de produit
Fais une promo de produit de 15s en 9:16 pour une application de concentration.
Style : minimal-line. Arc : point de douleur → solution → résultat.
Licence
MIT — voir le fichier LICENSE. Gratuit pour usage personnel et commercial.