Communitygithub.com

reel-vectorial

Produit des reels verticaux de motion graphics exclusivement réalisés avec des graphiques en code (SVG/HTML dans Remotion, sans générateur d'images), 1080×1920, 30 ips, 35–55 s, du début à la fin.

Qu'est-ce que reel-vectorial ?

Ce skill permet de créer automatiquement des reels verticaux de motion graphics (type « Dato Rarito ») en utilisant uniquement du code (SVG/HTML) avec Remotion, sans aucune image générée par IA. Il gère l'intégralité du processus : écriture du script avec accroche-question et boucle, synthèse vocale via ElevenLabs avec timing mot par mot (ou voix simulée sans crédits), création de scènes animées personnalisables (décors avec lumière, personnage agissant, plan subjectif, diagrammes néon, mockup de téléphone pour l'appel à l'action), sous-titres mot à mot synchronisés, effets sonores graves, musique libre de droits, génération de la couverture et rendu via une file d'attente qui ne surcharge pas l'ordinateur. Il crée également un nouveau compte avec le projet Remotion, les scripts et une vidéo d'exemple. Utilisez-le lorsque l'utilisateur demande un reel ou un short « vectoriel », « avec des graphiques », « dessiné », « animé en code », « sans images générées » ou « de motion graphics », une vidéo comme celles de Dato Rarito (YouTube), la création d'un compte dédié, ou la modification de script, voix, scènes, rendu ou couverture d'un reel existant.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rafacu-dev/warasoft-reels/tree/HEAD/plugins/reel-vectorial/skills/reel-vectorial

Demander à votre IA préférée

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

Documentation

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 contient cuentas/. Les scripts le trouvent seuls depuis le dossier courant (ou le premier dossier parent contenant cuentas/) ; on force avec --proyecto <chemin> ou avec la variable REELS_PROYECTO.
  • <cuenta> = le nom du dossier du compte (curiosidades) ou cuentas/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

  1. 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.

  2. 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, suivez references/cuenta-nueva.md (créez le compte, le projet Remotion et la vidéo d'exemple).

  3. Lisez ce qui concerne le compte :

    • contexto.md, estilo.md, tono-de-voz.md, ideas.md et referencias/ ;
    • 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.md avec ses propres règles, celles-ci prévalent.

  4. Regardez ce qui existe déjà : guiones/, videos/finales/ (et Publicados/ s'il existe) et src/Root.tsx. Ne répétez ni le sujet, ni l'accroche, ni le twist.

  5. 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 par scripts/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-suave et monedas-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>/.env si 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 :

QuoiModèleExemple (série « DATO CURIOSO », #3)
Dossier (voix dans public/vo/)<préfixe><NN>cafe03
Texte de la voix<R>/vo-<dossier>.txtvo-cafe03.txt
Composant (src/videos/)<Préfixe><NN>Cafe03
Composition<Composant>-<sujet>Cafe03-cerebro
CouverturePortada-<Composant> (la vidéo exporte Portada<Composant>)Portada-Cafe03
Script et vidéoAAAA-MM-JJ_slug_sujet2026-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

  1. É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.
  2. Passez le réviseur :
    python3 "<S>/scripts/revisar-voz.py" "<R>/vo-<dossier>.txt"
    
    Il indique aussi ce qui sera lu à l'image 0.
  3. 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>
  • crear met une voix simulée si la voix réelle n'existe pas encore et écrit src/videos/<Composant>.tsx : plans Pendiente(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.
  • voz gé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 par voz).
  • 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

  1. 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.
  2. 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 avec A(phrase, "mot").
  3. 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

  1. 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.
  2. 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
    
  3. 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 caffeinate pour 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.log le master (≈ −14 LUFS, pic ≤ −1,5 dBTP) et regardez la vidéo à 1 ips.

7. Livraison

  1. 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.
  2. Quand il approuve, déplacez-la dans videos/finales/ sans suffixe. L'ancienne va dans la corbeille du système, jamais avec rm.
  3. Mettez à jour l'état du script, ideas.md et le calendrier si nécessaire.
  4. finales/Publicados/ appartient à l'utilisateur : n'y touchez pas.

Modifications sur une vidéo existante

DemandeQue faire
Changer une phrase de la voixModifier 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 voixvoz <cuenta> <dossier> : génère à part et conserve la précédente sous vo/<dossier>-anterior-…
Changer une scèneModifier son composant → stills --frames de ce plan → rendu
Changer la couvertureModifier 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 kitreferences/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 pourquoi registrar l'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 zoom ou whip.
  • 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.tsx ou scripts/ dans un compte : ils appartiennent au skill et montar-cuenta.py --actualizar les synchronise. Ce qui est propre à la vidéo va dans src/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.

Skills associés