Reels vectoriels (graphiques en code)
Un reel de ce kit est un mini-cartoon qui bouge sans s'arrêter :
- des scènes dessinées en code (SVG/HTML dans Remotion) : un lieu avec lumière et profondeur, un protagoniste qui agit, un plan subjectif quand le spectateur fait quelque chose et des diagrammes néon pour expliquer ;
- une voix IA (ElevenLabs) avec les temps de chaque mot ;
- des sous-titres grands mot à mot, avec le mot-clé dans une pilule de la même couleur que son graphique ;
- une accroche-question avec l'élément étrange déjà à l'écran à l'image 0, dont la réponse arrive à la fin ;
- un dernier plan qui revient au premier (boucle) ;
- du grain, du vignettage et des tremblements sur les impacts, pour que ça ne ressemble pas à un template.
Exemple public du format : Dato Rarito, sur YouTube. Exemple en code : la vidéo Demo01 fournie avec chaque nouveau compte (src/videos/Demo01.tsx) : accroche, ralenti, tampon barré, diagramme, personnage, téléphone de l'appel à l'action et boucle. En cas de doute sur la réalisation d'un élément, regardez-le là.
Chemins (le projet peut contenir des espaces : mettez toujours les chemins entre guillemets) :
<S>= le dossier de ce skill. Claude Code l'affiche au chargement (« Base directory for this skill »). Installé comme plugin, c'est${CLAUDE_PLUGIN_ROOT}/skills/reel-vectorial; copié à la main,~/.claude/skills/reel-vectorial. Si vous ne le voyez pas, cherchez-le :find ~/.claude -path "*reel-vectorial/scripts/nuevo-video.py".<P>= le projet : le dossier où l'utilisateur travaille avec Claude Code, celui qui contientcuentas/. Les scripts le trouvent seuls depuis le dossier courant (ou le premier dossier parent contenantcuentas/) ; on force avec--proyecto <chemin>ou avec la variableREELS_PROYECTO.<cuenta>= le nom du dossier du compte (curiosidades) oucuentas/curiosidades;<R>=<P>/cuentas/<cuenta>/produccion/remotion.- Les scripts du skill se lancent depuis
<P>:python3 "<S>/scripts/nuevo-video.py" … <cuenta> …. Ceux du compte (scripts/…), depuis<R>:cd "<R>" && …. - Avec les permissions Read, Write et Edit, chemins absolus.
0. Avant toute chose
-
Prérequis : Node 20+, Python 3.10+ et ffmpeg. Si c'est la première fois sur cette machine ou si une installation échoue, suivez
references/instalacion.md. Conçu pour macOS (testé sur Apple Silicon) ; fonctionne sous Linux avec les réserves expliquées dans ce fichier. -
Quel compte ? Regardez
<P>/cuentas/*/produccion/remotion/src/kit/index.ts. Si l'utilisateur ne le nomme pas et qu'il y en a plusieurs possibles, demandez. S'il n'y en a aucun, ou si le compte n'a pas le kit, suivezreferences/cuenta-nueva.md(créez le compte, le projet Remotion et la vidéo d'exemple). -
Lisez ce qui concerne le compte :
contexto.md,estilo.md,tono-de-voz.md,ideas.mdetreferencias/;produccion/ficha-reel.md: identité, protagoniste, monde, séries, voix, musique, appel à l'action et vérifications légales ;src/brand.tsx: palette et couleurs avec leur signification.
Si un élément de la fiche est « À DÉFINIR » et nécessaire, demandez avant d'inventer. Si le projet a un
CLAUDE.mdavec ses propres règles, celles-ci prévalent. -
Regardez ce qui existe déjà :
guiones/,videos/finales/(etPublicados/s'il existe) etsrc/Root.tsx. Ne répétez ni le sujet, ni l'accroche, ni le twist. -
Vérifiez la prémisse avec des sources primaires (études, organismes officiels, lois publiées). Les faits curieux viraux sont souvent à moitié faux, et dans ce format, la crédibilité est ce qui se joue : les commentaires du genre « ça n'est jamais arrivé » coulent un compte. Si la prémisse ne tient pas, reformulez-la avec le fait vérifiable le plus proche et expliquez-le en tête du script.
Ce qui n'est pas négociable (et pourquoi)
- **Scènes pleines qui bougent, jamais de « trucs moches statiques ». ** Les premiers essais de ce format ont échoué justement à cause de ça : des petites icônes sur le même fond, puis des scènes correctes mais plates face à une finition et une voix de meilleur niveau. Chaque plan est un lieu avec lumière et profondeur, avec un sujet qui occupe ≥ 40 % du cadre et quelque chose qui change au mot-clé. Avant de valider quoi que ce soit, regardez les images à taille réelle :
references/escenas.md. - **Voix IA de qualité dans ce qui est livré ; la voix simulée seulement pour le montage. ** La voix simulée (silence avec le rythme mesuré) sert à construire et réviser les scènes sans utiliser de crédits ; la file d'attente refuse de rendre avec elle sauf en prévisualisation muette. Ne remplacez pas la voix réelle par un TTS local médiocre : une voix pauvre fait échouer une vidéo même si les scènes sont bonnes.
- **Une seule tâche lourde à la fois. ** Un rendu, un modèle vocal local ou Whisper consomment la mémoire ; deux à la fois peuvent planter ou redémarrer l'ordinateur (c'est arrivé à l'équipe où ce kit est né). Images :
nuevo-video.py stills, qui passe parscripts/turno.sh. Rendu et couverture : par la file d'attente (scripts/noche.py). Le verrou (<P>/recursos/turno-mac.lock) est commun à tous les comptes du projet. Ne lancez jamais un rendu manuellement en arrière-plan. - **Son sans air ni brillance. ** Uniquement
impacto,impacto-grave,pop-grave,moneda-suaveetmonedas-suave, liés à un mot. Pas de whoosh, de montées ni de brillances : sous la voix, on les entend comme du vent collé au micro ou comme un grincement métallique. Le moteur rejette les sons interdits. - Plans de 2,5 s maximum (75 images ; le rendu échoue si un plan dépasse) et un changement visuel toutes les 1 à 2 s.
- Image 0 pleine : l'élément étrange de l'accroche et le premier bloc de sous-titres, sans fondu. Boucle : le dernier plan revient à l'état et à la caméra du premier.
- **Chaque compte, son identité. ** Palette, protagoniste, logo et signature proviennent de son
brand.tsx; on ne mélange pas les styles ni les protagonistes entre comptes. - Clés : elles vivent dans
<P>/.env(ou<R>/.envsi un compte en utilise d'autres). On ne les lit pas, on ne les imprime pas et on ne les demande pas dans le chat : l'utilisateur les colle lui-même dans le fichier. Si un compte ElevenLabs signale une « activité inhabituelle », arrêtez et prévenez. - Licences, à chaque livraison : la voix et les effets d'un plan gratuit ElevenLabs n'autorisent pas un usage commercial ; la musique CC BY exige une attribution dans la légende ; le reel est étiqueté comme « contenu IA ».
references/audio.md.
Noms d'une vidéo
Avec la série de ficha-reel.md et le numéro suivant le dernier de cette série dans src/Root.tsx :
| Quoi | Modèle | Exemple (série « DATO CURIOSO », #3) |
|---|---|---|
Dossier (voix dans public/vo/) | <préfixe><NN> | cafe03 |
| Texte de la voix | <R>/vo-<dossier>.txt | vo-cafe03.txt |
Composant (src/videos/) | <Préfixe><NN> | Cafe03 |
| Composition | <Composant>-<sujet> | Cafe03-cerebro |
| Couverture | Portada-<Composant> (la vidéo exporte Portada<Composant>) | Portada-Cafe03 |
| Script et vidéo | AAAA-MM-JJ_slug_sujet | 2026-11-10_dato-curioso_cafe-cerebro |
La date est celle de publication prévue : celle du calendrier si elle existe, sinon la prochaine libre.
Déroulement d'une vidéo
Suivez les phases avec un plan de tâches. Arrêts avec l'utilisateur : seulement deux. Le script, avant d'utiliser des crédits de voix, et le brouillon, avant de le passer en version finale. Le reste (scènes, images, audits) est à votre charge.
1. Script → references/guion.md
- Écrivez :
guiones/<nom>.md: tableau voix → scènes, avec ce qui est dessiné et ce qui se passe à chaque mot-clé, le monde de la vidéo, les couleurs avec leur signification, les sources et la légende ;<R>/vo-<dossier>.txt: une phrase par ligne.
- Passez le réviseur :
Il indique aussi ce qui sera lu à l'image 0.python3 "<S>/scripts/revisar-voz.py" "<R>/vo-<dossier>.txt" - Montrez le script et attendez l'approbation (la voix consomme environ 1 crédit ElevenLabs par caractère, environ 700 par vidéo).
2. Échafaudage et voix → references/produccion.md
python3 "<S>/scripts/nuevo-video.py" crear <cuenta> <dossier> <Composant> --serie "SÉRIE · #N"
python3 "<S>/scripts/nuevo-video.py" voz <cuenta> <dossier>
crearmet une voix simulée si la voix réelle n'existe pas encore et écritsrc/videos/<Composant>.tsx: plansPendiente(n)d'environ 2 s découpés en mots, configuration et couverture. Ainsi on peut monter et regarder dès la première minute.vozgénère la voix réelle (appel à l'API, ne charge pas l'ordinateur), vérifie qu'elle est complète et compacte les pauses. Ce n'est qu'ensuite qu'elle remplace la voix simulée.- Ensuite, Whisper avec
comprobar-voz.py, via le tour (la commande exacte est imprimée parvoz). - Sans clé ou sans solde : continuez avec la voix simulée jusqu'au rendu, prévenez l'utilisateur et ne livrez pas.
3. Scènes → references/escenas.md + references/kit.md
- Décidez du monde de la vidéo (un seul lieu cohérent) et de la signification de chaque couleur. Notez-le dans l'en-tête du
.tsx. - Remplacez chaque
Pendiente(n)par de vraies scènes avec le kit (import { … } from "../kit") : décor, sujet, lumière, profondeur et l'action liée à son mot avecA(phrase, "mot"). - Ce qui suit d'un plan à l'autre se calcule avec l'image absolue (
useF(t0)). Le dernier plan répète le premier.
4. Montage → references/motor.md
- Plans découpés au mot, caméra avec
cam(), transitions, sous-titres en haut, au milieu ou en bas selon l'emplacement du sujet, indications clés, effets et musique. - Auditez jusqu'à ce que ce soit propre, et répétez chaque fois que la voix change :
cd "<R>" && python3 scripts/auditar-escenas.py src/videos/<Composant>.tsx --frames - Enregistrez la composition et la couverture (valable avec voix simulée) :
python3 "<S>/scripts/nuevo-video.py" registrar <cuenta> <Composant> <Composant>-<sujet>
5. Révision avec les images
python3 "<S>/scripts/nuevo-video.py" stills <cuenta> <Composition> --salida <dossier temporaire>/<Composition>
- Extrayez l'image 0, le milieu de chaque plan et la dernière, plus la planche contact
hoja-<Composition>.jpg. La première fois, Remotion peut télécharger son navigateur. - Regardez la planche avec Read et ouvrez en taille réelle l'image 0, le twist, un graphique et la dernière. Utilisez la liste de
references/escenas.md(« Révision »). - Corrigez et répétez jusqu'à ce que chaque plan supporte une capture d'écran. Extrayez aussi la couverture (
stills <cuenta> Portada-<Composant> --frames 0). - Pour les transitions, les révélations et les changements de visage, extrayez une bande image par image :
stills <cuenta> <Composition> --tira <image>:10. Cherchez les sauts et les images vides.
6. Rendu
python3 "<S>/scripts/nuevo-video.py" cola <cuenta> render <Composition> <nom>
- Le refus se fait avec voix simulée ou si l'audit n'est pas propre.
- Si l'orchestrateur est arrêté, le script indique comment le lancer (sur macOS avec
caffeinatepour qu'il ne s'endorme pas). Lancez-le en arrière-plan depuis<R>: il se termine seul quand la file est vide. - À la fin, vérifiez dans
noche.logle master (≈ −14 LUFS, pic ≤ −1,5 dBTP) et regardez la vidéo à 1 ips.
7. Livraison
- Dites à l'utilisateur où se trouve la copie légère (
videos/borradores/movil/) et la couverture ; si l'environnement permet de joindre des fichiers, joignez-les. Rappelez-lui les licences. - Quand il approuve, déplacez-la dans
videos/finales/sans suffixe. L'ancienne va dans la corbeille du système, jamais avecrm. - Mettez à jour l'état du script,
ideas.mdet le calendrier si nécessaire. finales/Publicados/appartient à l'utilisateur : n'y touchez pas.
Modifications sur une vidéo existante
| Demande | Que faire |
|---|---|
| Changer une phrase de la voix | Modifier vo-<dossier>.txt → voz … --solo N → Whisper → audit (les coupes bougent) → stills → rendu (la file répète la ligne avec le suffixe r2 ; le rendu précédent va d'abord à la corbeille) |
| Refaire toute la voix | voz <cuenta> <dossier> : génère à part et conserve la précédente sous vo/<dossier>-anterior-… |
| Changer une scène | Modifier son composant → stills --frames de ce plan → rendu |
| Changer la couverture | Modifier Portada<Composant> dans la vidéo (titre, moment t0, align) → stills Portada-<Composant> --frames 0 → cola <cuenta> portada <Composant> <nom> |
| Adapter le format à un autre compte, ou mettre à jour le kit | references/cuenta-nueva.md |
Erreurs typiques
- Root.tsx importe une vidéo sans
tiempos.json: tous les rendus et couvertures de la file échouent, pas seulement celui-ci. C'est pourquoiregistrarl'empêche. - Un mot de
A(…)ou d'une coupe n'existe pas dans la voix réelle (la voix simulée utilisait le texte). Le rendu échoue dans la file : l'audit le détecte. - Scène qui ignore
t0: l'objet, le trait ou la lumière sautent à la coupe, et la boucle ne correspond pas. - Caméra avec zoom < 1 ou sans
cam(): bords noirs. - Éclat blanc vers une scène sombre : on le voit comme une image vide. Utilisez
zoomouwhip. - Texte petit ou à l'intérieur de la scène répétant le sous-titre. Un fait, un lieu : le chiffre va dans le sous-titre ou dans un graphique, pas dans les deux.
- Titre de couverture avec des lignes de plus de 18 caractères : il se casse mal à 100 px (l'audit prévient).
- Modifier
src/kit/,src/engine/Reel.tsxouscripts/dans un compte : ils appartiennent au skill etmontar-cuenta.py --actualizarles synchronise. Ce qui est propre à la vidéo va danssrc/videos/; une pièce utilisable pour tous s'ajoute au skill (assets/plantilla-proyecto/src/kit/). - Effets ou musique manquants : le moteur les ignore (et prévient dans la console du navigateur) ; la vidéo se voit pareil mais sans ce son.
references/audio.md.