Communitygithub.com

CrissAlvarezH/animated-video

Créez des vidéos animées en code avec Remotion (React, SVG, three.js) : vidéos explicatives, histoires de personnages, motion design, typographie cinétique, collage papier et infographies animées en 2D ou 3D, à partir d'un script ou d'une voix off, dans n'importe quel rapport hauteur/largeur. Utilisez cette compétence lorsqu'on vous demande d'animer un script, de créer une vidéo animée ou un Reel, ou du motion design. Ne convient pas pour le montage de séquences caméra (video-edit) ou les clips générés par IA (higgsfield-*).

Qu'est-ce que animated-video ?

Cette compétence transforme un brief en une vidéo animée finie où chaque image est générée par code, en utilisant Remotion (React, SVG, three.js). L'approche privilégie l'invention visuelle : pour chaque concept, elle cherche l'image la plus surprenante qui reste compréhensible, en utilisant des métaphores visuelles que la voix off ancre. Elle supporte un flux de travail structuré en six étapes : 1) Brainstorming et approbation du concept, 2) Choix du format et du style, 3) Construction de la trame audio (synchronisée sur la narration), 4) Création d'un squelette et d'un storyboard, 5) Construction des assets et des plans, 6) Révision et livraison. La compétence est conçue pour fonctionner avec Claude Code et des agents similaires, en mettant l'accent sur la production reproductible et déterministe. Elle inclut des directives précises sur la composition visuelle, la gestion des couleurs, le feedback itératif, et la parallélisation du travail pour les productions plus longues. Des références détaillées couvrent le travail avec la caméra en direct, le compositing, la gestion des personnages, et les tests de révision comme le test muet (mute test).

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/CrissAlvarezH/ai-reel-gen-app/tree/HEAD/.claude/skills/animated-video

Demander à votre IA préférée

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

Documentation

Vidéo animée

Dans un espace de travail Reel Studio : chargez d'abord la compétence reel-studio (.claude/skills/reel-studio/SKILL.md) et la compétence de style de la vidéo (styles/<id>/SKILL.md). Elles priment sur les valeurs par défaut ci-dessous : le style est déjà choisi par vidéo (ne proposez pas d'autres looks ou une série de frames de style), la narration est via ElevenLabs (voix depuis Reel Studio → Ajustes → Voz) avec des timings provenant de tools/el_words.py (pas Whisper), les nouveaux projets démarrent à partir du modèle du style (pas de templates/remotion-film/). La recherche d'images est libre sur le web ; Ajustes → Imágenes ne contrôle que les intégrations API optionnelles et la génération d'images. Utilisez cette compétence pour la méthode : brainstorming d'images, approbation du concept, storyboard, test muet, révision.

Transformez un brief en une vidéo animée finie dans laquelle chaque image est réalisée en code : dessinée procéduralement, ou construite à partir d'actifs sourcés approuvés rendus de manière déterministe. Les séquences provenant de générateurs d'images ou de vidéos constituent une voie séparée (étape 2). Lisez d'abord ~/.animated-video/profile.md s'il existe : les préférences déclarées par l'utilisateur priment sur les valeurs par défaut ici.

Ce qui fait le film

Soyez aussi inventif que l'idée le permet. Pour chaque concept que le film montre, cherchez l'image la plus surprenante qui le rende néanmoins compréhensible. Les idées farfelues, impossibles, drôles ou magnifiques sont les bienvenues, et chacune est jugée par un seul test : le spectateur comprend-il le mécanisme plus vite, ou s'en souvient-il plus longtemps, qu'avec l'image littérale ? L'image littérale est la solution de repli qui ne gagne que lorsque rien ne la surpasse. La précision vérifie une idée ; une métaphore que la narration ancre reste.

L'image explique ; la voix confirme. Son coupé, un spectateur apprend chaque étape à partir de ce qui se passe à l'écran : le mécanisme est exécuté sous forme de cause à effet (couper, envoyer, frapper, copier), l'idée de chaque ligne est visible par son mot, avec des étiquettes soutenant l'événement plutôt que le remplaçant (motion).

L'image porte la question. Un script maintient une question ouverte et y répond par étapes. La première image soulève cette question, et aucune image, étiquette ou titre ne montre la réponse avant que la narration ne l'atteigne : un spectateur qui a vu la réponse a une raison de partir.

La couleur guide le regard. Décidez tôt de ce que chaque couleur signifie : la chose que le spectateur suit porte l'accent et est l'élément le plus lumineux et le plus saturé du cadre, et une couleur conserve sa signification pendant tout le film. Attribuez à chaque autre rôle sa propre couleur et laissez tout ce qui ne porte aucun message rester discret. Pour correspondre à un look de référence, échantillonnez ses couleurs à partir de ses images et donnez les chiffres aux animateurs : lumières, brouillard et étalonnage font dériver une couleur nommée vers le gris.

Concevez du neuf pour chaque brief. Les packs de style, les parties et les films passés sont des points de départ. Un film passé que l'utilisateur a aimé fixe le niveau de finition et le rythme, jamais les idées, les dispositifs ou le look.

Le feedback affine une image, jamais l'imagination. Lorsque l'utilisateur rejette une idée, notez ce qui n'allait pas dans cette idée (elle a dérouté, semblait forcée, paraissait bon marché) et trouvez-en une meilleure de n'importe quel type. Cela ne devient une règle sur une catégorie entière que lorsque l'utilisateur la formule comme telle, et les briefs que vous écrivez pour d'autres agents ne portent que les règles que l'utilisateur a énoncées.

Demandez avec une recommandation, de sorte que « oui » soit une réponse complète. Dites une fois au début que la compétence fonctionne mieux avec le modèle le plus fort disponible à effort élevé.

Adaptez la production à la pièce

  • Court ou simple : un seul agent peut le porter, en vérifiant les images fixes. Le brainstorming va toujours à un agent frais et le test muet s'exécute toujours.
  • Plus long, ou plusieurs actes : gardez les images, le concept et le look avec un agent jusqu'à ce que l'utilisateur les approuve, puis parallélisez la construction comme cela convient. Le storyboard fixe l'idée de chaque battement ; celui qui anime possède la façon dont il bouge et propose une meilleure image lorsqu'il en voit une. Gardez une seule feuille de repère pour tout le film afin que le son reste intentionnel. Pour les longues productions, envoyez l'état avec une image fixe et le temps restant global ; faites en sorte que les agents horodatent les lignes d'état avec l'horloge de la machine, car les temps auto-déclarés peuvent dériver de plusieurs heures.
  • Une révision d'un film terminé : demandez quelles sections reconstruire, en recommandant les plus faibles ; conservez le reste et assemblez les nouvelles parties.
  • Un insert pour le montage de quelqu'un d'autre (un plan animé à l'intérieur d'un montage caméra, dont video-edit est propriétaire) : inserts. Lorsqu'il n'est pas clair qui possède le montage, demandez une fois.
  • Un présentateur à l'écran dans le film : compositing avant que ces plans ne soient planifiés.

1. Trouvez les images et le concept

Choisissez l'épine dorsale dans la réalisation : une histoire (quelqu'un qui veut quelque chose) ou une explication (comment quelque chose fonctionne, pourquoi, ce que signifie un nombre). Les images proviennent d'un agent de brainstorming frais qui ne voit aucune règle de production, jugées par un sélecteur séparé (trouvez les images) ; puis des concepts qui diffèrent véritablement, votre recommandation, et celui choisi sous forme de feuille de battements chronométrée avec l'image de chaque battement. Un script terminé fixe les mots, pas les images. Avec la compétence video-script installée, vérifiez la narration par rapport à sa liste de contrôle.

Obtenez l'approbation de l'utilisateur pour le concept et ses images avant de construire, y compris pour les pièces courtes.

2. Verrouillez le format et le style

  • Lorsque la demande nomme le format et le style, confirmez-le en une ligne. Sinon, montrez des styles qui diffèrent véritablement sous forme d'images de style du même battement (styles) et obtenez un choix ; lisez le pack du style choisi s'il en a un.
  • Renseignez-vous sur la voie et son coût : fabriqué en code est gratuit par plan et cohérent ; la vidéo IA coûte par clip et dérive.
  • Recherchez des photos des objets, lieux et interfaces réels que le film montre. Si une personne réelle apparaît, demandez où se trouve sa séquence et extrayez-en des images.

3. Construisez la trame audio

Chaque battement est chronométré par rapport à la narration (sans celle-ci, par rapport au fond musical, choisi en premier). Préférez l'enregistrement de l'utilisateur ; avant qu'il n'existe, construisez sur des timings de mots de remplacement, étiquetés. templates/remotion-film/align.py donne des horodatages de mots et une enveloppe de volume ; dérivez chaque repère à partir de mots avec cue("phrase"), de sorte qu'une nouvelle VO rechronomètre le film. Les sous-titres sont des unités de sens écrites à la main et vérifiées par rapport à la transcription. La musique et les effets sont livrés avec le premier montage : les fichiers de l'utilisateur, la bibliothèque d'actifs ou des échantillons sur disque avant la synthèse (templates/parts/audio/designed.py), et tout ce qui est synthétique est étiqueté.

4. Squelette et storyboard

Copiez templates/remotion-film/, câblez les actes, les sous-titres et l'audio, et rendez des images fixes sur la timeline (pipeline). Les faits non vérifiés restent en dehors du film.

Montrez à l'utilisateur un storyboard d'images clés avant l'animation complète : une image fixe par battement dans le style choisi, construite dans les fichiers de scène réels afin qu'elle se transforme en plans finis. Les images fixes approuvées ne montrent pas si quoi que ce soit se produit entre elles ; lorsque le sens réside dans le mouvement, un animatique (formes approximatives exécutant les battements sur la VO) le montre à moindre coût.

5. Construisez les actifs et les plans

Recherchez d'abord la bibliothèque d'actifs lorsqu'elle est installée. Les pièces récurrentes tiennent à chaque échelle dont l'histoire a besoin : les personnages dessinés selon personnages ; parts contient un globe, un iPhone iMessage, des sons conçus, un kit de réalisme et un kit de mouvement pour un mouvement dense en three.js. Restylez ce que vous prenez.

Lorsque plusieurs agents animent, donnez-leur un look et une barre écrits, tirés du pack de style et des images de référence (l'image du film de référence pour chaque battement, ou le storyboard). Dans chaque style, un objet, une interface, une entreprise ou un lieu réel est reconnaissable en tant que tel, et un substitut reçoit le même soin. Dérivez les événements sonores de chaque acte à partir des constantes qui le dessinent, de sorte que déplacer un battement déplace son son.

6. Révisez et livrez

Les agents voient des images, pas la lecture : vérifiez le mouvement sous forme de bandes d'images consécutives (vérifications temporelles) et l'audio par mesure, et dites ce qui a seulement été mesuré. Lorsque vous ne pouvez pas faire confiance à votre propre œil, faites juger par des agents frais indépendants (révision) ; arrêtez d'itérer lorsqu'un cycle gagne peu ou que le problème principal nécessite l'utilisateur.

Avant que le premier montage complet n'aille à l'utilisateur, un juge frais exécute le test muet dessus ; corrigez ce qu'il ne peut pas suivre. Un montage complet rejeté redémarre à partir des images (redémarrage).

Rendez la version finale (render.sh normalise le volume ; les films longs en morceaux) et vérifiez la première image, la dernière seconde et le volume. Signalez le chemin, les problèmes ouverts, les vérifications ignorées, les images sourcées, et tout ce qui est synthétique ou inventé. Validez chaque version dans le dépôt git du projet. Avec la bibliothèque d'actifs installée, fermez son catalogue.

Sur demande, faites une rétrospective avec le protocole de rétrospective.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

CrissAlvarezH/new-style

Create a new visual style for the creator's videos in a Reel Studio workspace (styles/<id>/style.json): interview him for its name, feel, colours and what each one means, fonts, motion, where pictures come from, reference links and images, then write the style so it shows in Estilos and new videos can use it. Use when he asks for a new style or presses "Nuevo estilo" on the Estilos page.

CrissAlvarezH/persona-hablando

The "Persona hablando + animaciones" format of a Reel Studio video — the creator talks to camera in his own recording; you transcribe it, agree the cuts with him (pauses, flubs, retakes), cut it, and lay the video's style animations over or between his shots. Use for any video whose format.txt says persona-hablando.

CrissAlvarezH/reel-studio

How a narrated explainer video is made in a Reel Studio workspace, in any visual style — script, pictures, voice, images, build, board, sound, mute test, render — following the creator's settings from the studio (profile, format, voice, image sources). Use for any new or revised video in a project's videos/ (projects/<id>/videos/). The video's style adds its own skill (styles/<id>/SKILL.md) for the look and the Remotion kit; LESSONS.md has what past videos taught.

CrissAlvarezH/video-script

Write short-form video scripts that hold viewers, using the creator's own video analytics. Use when choosing the hook of a chosen idea, writing or tightening a script before filming (talking-head or narrated explainer), or turning a posted video's insights into lessons. Coming up with ideas is content-ideas'.

Skills associés