100 animations avec Claude, partie 4 : reaction-diffusion, aquarelle, produit 3D… (skill gratuit)

Tu viens de TikTok et tu as commenté ANIMATION ? Bienvenue ! 👋

Moi c'est Ty, développeuse full stack web2 et web3. Ici, je te partage tous mes tips, gratuitement. Aujourd'hui, partie 4 sur 5 de ma série : un skill Claude qui connaît 100 styles d'animation, et tout ce qu'il te faut pour l'utiliser, même si tu n'as jamais codé.

⬇️ Télécharger le skill (animation.zip), gratuit

100 animations Claude, partie 4/5

C'est quoi, un skill Claude ?

Un skill, c'est un petit dossier d'instructions que tu donnes à Claude pour qu'il devienne expert d'un sujet précis. Celui-ci contient 100 fiches techniques que j'ai préparées : pour chaque style, la technique exacte, les bonnes valeurs (couleurs, durées, courbes d'animation) et un exemple de code qui fonctionne.

Résultat : tu écris /animation glitch "Mon texte", et Claude sait exactement quoi faire.

Ce qu'il te faut (vraiment)

Pour voir et tester les animations

• Abonnement : gratuit possible, Pro conseillé
• Logiciel : claude.ai ou Claude Desktop
• À installer : rien

Pour exporter de vraies vidéos MP4 (TikTok, Reels)

• Abonnement : Pro minimum
• Logiciel : Claude Desktop, onglet Code
• À installer : Node.js (gratuit)

Prix (octobre 2026, tarifs US hors taxes) :

• Free : 0 €, pour découvrir. Les limites arrivent vite avec du code d'animation.
• Pro : ~20 $/mois (~17 $/mois en annuel). ✅ Le bon choix : chat + Claude Code + export vidéo.
• Max : 100 $/mois, si tu produis beaucoup de vidéos chaque semaine.
• Ultra : 200 $/mois, pour un usage intensif.

Mac ou PC ? Les deux ! Claude Desktop existe sur Mac et Windows.

Le moteur vidéo, Remotion, est gratuit pour les particuliers et les structures jusqu'à 3 personnes. Au-delà, il faut une licence entreprise Remotion.

🧩 Et les installations « npm » ? Tu n'as aucune commande à taper.

• Sur claude.ai : rien à installer du tout, Claude exécute le code dans son propre environnement.
• Pour exporter en MP4 (Claude Desktop, onglet Code) : il te faut Node.js. C'est le moteur qui permet à ton ordinateur de faire tourner du code JavaScript, et donc de fabriquer la vidéo. Gratuit, il s'installe comme n'importe quelle app. Pas besoin de savoir comment : écris simplement à Claude « Installe Node.js pour moi », il s'en occupe ou te guide pas à pas.
• Ensuite, Claude installe tout seul Remotion et les paquets npm dont il a besoin (npm install) ; il te demande juste l'autorisation, tu cliques sur « Autoriser ».

Tuto vidéo : installer le skill en 1 minute

Tuto : installer le skill animation en 1 minute

Méthode 1 — Sans coder, sur claude.ai (aperçus)

1. Télécharge animation.zip. Ne le décompresse pas.
2. Sur claude.ai, ouvre Paramètres → Capacités et active « Créer et modifier des fichiers » (l'exécution de code). Les skills en ont besoin.
3. Va dans Personnaliser → Skills, clique sur + → Créer un skill → Importer un skill et choisis animation.zip.
4. Vérifie que animation est activé dans la liste.
5. Nouvelle conversation : /animation glitch "BTHA SYSTEM". Claude te montre l'aperçu.

Méthode 2 — Tout en langage naturel avec Claude Desktop (vidéos MP4)

C'est ma méthode préférée : je conçois, je décris, Claude exécute. Pas une seule commande à retenir.

1. Installe Claude Desktop et connecte-toi avec ton compte Pro.
2. Ouvre l'onglet Code. C'est Claude Code, déjà inclus dans l'app.
3. Choisis un dossier vide, par exemple Documents/mes-animations.
4. Écris, tout simplement :

« Installe le skill animation depuis github.com/Ty-HA/claude-animations dans mes skills personnels. »

« Vérifie que Node.js est installé, sinon installe-le pour moi. »

« Crée un projet Remotion et fais-moi une vidéo TikTok de 5 secondes style synthwave avec le texte "Mon business", puis exporte-la en MP4. »

1. Claude te demande ton accord avant chaque action. Tu valides, et ta vidéo arrive dans le dossier out/.

Ensuite, tu ajustes comme tu parlerais à un monteur : « plus rapide », « mets mes couleurs », « ajoute mon logo », « fais la même en version néon ».

Partie 4 : les styles 61 à 80

1. Reaction-diffusion — /animation reaction-diffusion
2. Kinetic stacking — /animation stacking
3. Écriture manuscrite — /animation handwriting
4. Liquid morphing — /animation liquid-morph
5. Low poly — /animation low-poly
6. Produit qui tourne en 3D — /animation product-spin
7. Transition en cube — /animation cube-transition
8. Blueprint (plan d'architecte) — /animation blueprint
9. Aquarelle — /animation watercolor
10. Line boil (le trait qui vibre) — /animation line-boil
11. Duotone — /animation duotone
12. Bauhaus — /animation bauhaus
13. Tracé d'itinéraire — /animation map-route
14. Slider avant / après — /animation before-after
15. Micro-interactions UI — /animation micro-interactions
16. Ouverture à l'iris — /animation iris
17. Shape wipe (volet en forme) — /animation shape-wipe
18. Speed ramp — /animation speed-ramp
19. Marionnette articulée (puppet rig) — /animation puppet-rig
20. Lignes topographiques — /animation topographic

⬅️ Tu as raté les parties précédentes ? Partie 1 : styles 1 à 20 · Partie 2 : styles 21 à 40 · Partie 3 : styles 41 à 60.

📅 Une nouvelle partie chaque jour pendant 5 jours. La partie 5, la dernière, arrive demain : le lien sera ajouté ici dès sa sortie. Abonne-toi pour ne rien rater !

🔊 Sons de la vidéo : « CARTOONISH POP » par xtrgamr (CC BY 4.0, Freesound) ; autres sons : banque earshot (MIT).

Pour les devs 💻

Le repo est open source (MIT) : github.com/Ty-HA/claude-animations.

Installation via le marketplace de plugins Claude Code :

/plugin marketplace add Ty-HA/claude-animations
/plugin install animation@bthasystem

Ou copie manuelle pour la commande courte /animation :

git clone https://github.com/Ty-HA/claude-animations.git
cp -r claude-animations/skills/animation ~/.claude/skills/

Stack par défaut : Remotion (React), 1080×1920, 30 i/s. Chaque fiche contient un composant déterministe (useCurrentFrame, interpolate, spring, random() seedé) prêt à rendre.

🪙 Combien de tokens ça consomme (et comment optimiser)

Je préfère te le dire franchement : chaque animation consomme des tokens, donc une part de ton quota Claude. Voici les vrais chiffres, mesurés sur les fichiers du skill (≈ 3,6 caractères par token).

• Description du skill : ~120 tokens. Toujours, dans chaque conversation (c'est tout ce que Claude voit tant que tu ne l'utilises pas)
• SKILL.md : ~3 300 tokens. Seulement quand tu tapes /animation …
• Une fiche de style : 500 à 1 050 tokens (médiane ~750). Seulement la fiche du style demandé
• Code de l'animation écrit par Claude : ~500 à 3 000 tokens en sortie. À chaque version
• Vérifier une image du rendu : ~1 500 tokens par image. Si Claude regarde le résultat

Une animation simple, faite proprement : environ 10 000 à 20 000 tokens. Avec 3 ou 4 allers-retours de corrections, compte plutôt 30 000 à 60 000 : à chaque nouveau message, Claude relit tout l'historique de la conversation (en grande partie depuis le cache, ce qui coûte moins cher, mais ça compte quand même).

Pourquoi le skill est déjà optimisé : les 100 fiches font ~74 000 tokens au total, mais Claude n'en charge qu'une seule à la fois. Résultat : ~4 000 tokens au lieu de ~78 000, soit environ 95 % d'économie par rapport à un gros prompt « tout-en-un ». C'est le principe des skills : le chargement progressif.

Mes 8 tips pour économiser des tokens

1. Tout dire dans le premier message : style, texte, format, durée, couleurs. /animation neon "OPEN 24/7" 9:16 5s couleurs rose et cyan évite 2 ou 3 questions-réponses.
2. Une conversation = une animation. Les longues conversations coûtent de plus en plus cher à chaque message. Nouvelle animation → nouvelle conversation (ou /clear dans Claude Code).
3. Vérifier avec une seule image, pas une vidéo complète ni 10 captures : « rends juste la frame 30 et regarde-la ».
4. Corriger précisément : « le texte déborde à droite, réduis la taille à 90 px » coûte bien moins que « c'est pas bien, refais ».
5. Choisir le bon modèle : un modèle plus léger (Sonnet, voire Haiku) suffit pour une animation simple ; garde le plus puissant (Opus) pour les créations complexes ou les gros projets.
6. Ne pas coller de gros fichiers dans le chat : donne le chemin du fichier, Claude ne lira que ce qu'il faut.
7. Réutiliser : demande à Claude de ranger chaque animation réussie comme composant réutilisable, au lieu de la régénérer à chaque vidéo.
8. Surveiller ta conso : dans Claude Code, /context montre ce qui occupe la mémoire de la conversation et /usage ton quota d'abonnement.

Sur un abonnement Pro ou Max, tu ne paies pas au token : tu as un quota qui se recharge. Ces tips te permettent simplement d'en faire beaucoup plus avec le même abonnement.

FAQ

C'est vraiment gratuit ? Le skill, oui, à 100 % (licence MIT). Il te faut seulement un abonnement Claude ; Pro suffit pour tout faire.

Je n'ai pas de Mac. Aucun souci, tout fonctionne sur Windows.

Ça marche sur mon téléphone ? Pour l'instant, je n'ai trouvé aucune confirmation officielle que les skills personnalisés fonctionnent dans l'app mobile. Passe par un ordinateur.

J'ai une erreur « node » pendant le rendu. Installe Node.js (version LTS) depuis nodejs.org, ferme et rouvre Claude Desktop, puis relance. Ou colle l'erreur à Claude : il te guide.

/animation ou /animation:animation ? Via claude.ai ou la copie manuelle : /animation. Via le marketplace de plugins : /animation:animation. Et tu peux toujours écrire « fais-moi une animation glitch ».

Je peux utiliser les vidéos pour mes clients ? Oui. Vérifie juste la licence Remotion si ta structure dépasse 3 personnes.

Besoin d'aller plus loin ?

Je suis développeuse full stack web2 et web3 : sites, apps, dApps, intégrations IA et automatisations sur mesure. Tu veux des animations à tes couleurs, un site qui bouge vraiment, ou un projet Web3 ?

👉 Voir mes services et me contacter sur bthasystem.io

BTHA System, fin de transmission. ✨