Qu’est-ce que reanimate ?
reanimate est un skill d'agent pour copier le mouvement. Vous indiquez à Claude Code une page en ligne, un enregistrement d'écran, un mp4, un gif ou un fichier Lottie, et vous nommez l'élément et le fichier de destination ; le skill enregistre la référence dans un Chromium headless avec un viewport et une cadence fixes, rédige une spécification avec une ligne par élément et par propriété (début, durée, de et vers, easing, décalage), construit l'animation avec ce que le projet utilise déjà (CSS, Framer Motion, GSAP ou three.js), puis enregistre la copie de la même manière et compare minutage, easing et pixels. Il recommence, en général de 2 à 5 tours, et liste ce qui ne concorde toujours pas après 5.
Pour canvas, WebGL et WebGPU, il trace les appels GPU au lieu de lire les pixels : sources des shaders, uniforms, passes de rendu, textures et graphe de scène de three.js, Pixi, PlayCanvas, Babylon ou OGL, sur une horloge virtuelle avec Math.random initialisé pour que deux captures soient identiques. La fidélité par défaut porte sur le mouvement seul (minutage à 80 ms près, même famille d'easing et même ordre) ; demander le pixel près ajoute polices, couleurs, espacements et un écart moyen de pixels de 2 % ou moins.
Le dépôt est de Niaz Morshed, sous licence MIT, créé le 29 octobre 2026 et modifié pour la dernière fois le 31 octobre. Il compte environ 1 570 étoiles, 137 forks, un seul contributeur, aucune release étiquetée et un site présentant 14 exemples clonés de Vercel, Stripe, Clerk, Resend et d'autres, chacun mesuré par rapport à son original.
reanimate vaut-il le coup ?
L'apport de reanimate est une boucle de rétroaction, pas un prompt. Un agent à qui l'on demande de reconstruire une animation à partir d'un lien fait un passage et crie victoire, faute de pouvoir voir le minutage. Ce skill lui donne des yeux : un script de capture qui enregistre les images, les keyframes CSS et Web Animations déclarées, les styles calculés et la position des éléments à chaque image, et un script de comparaison qui rend compte de l'erreur de minutage, de l'écart de pixels et de planches de différences pour la référence et la copie. SKILL.md demande à Claude de lire chaque planche-contact et de continuer à itérer face à des critères de réussite fixes au lieu de s'arrêter à « ça a l'air bon ». Quand la source déclare ses propres keyframes, le skill en reprend les durées et les easings exacts au lieu de les estimer.
Les preuves publiées sont d'une précision inhabituelle. Sur le clone de la barre d'outils de Vercel, 417 images sur 417 concordent ; les rotations du cube du hero de Resend sont exactes sur 25 s avec 0,11 % de pixels différents ; la carte inclinable de Stripe se stabilise à 0,4 px près, et sa courbe d'inclinaison WebGL concorde à 33 ms près. Ce sont les propres exécutions de l'auteur sur 14 exemples, la plupart de 30 à 90 minutes, pas un banc d'essai indépendant, mais la méthode est reproductible et les artefacts de chaque tour restent dans .reanimate/ de votre projet comme preuve.
C'est un outil plus étroit et plus rigoureux que les skills de mouvement qui l'entourent. motionmaxxing et bang-motion aident un agent à concevoir un mouvement nouveau avec goût ; reanimate ne fait que copier un mouvement existant, et sa valeur tient à ce qu'il peut montrer à quel point la copie est proche.
Le hic : il a deux semaines, un seul contributeur et aucune release, et son objet attire les ennuis. Capturer, c'est exécuter des pages tierces arbitraires dans un navigateur headless local, et une issue ouverte le 10 novembre 2026 montre qu'une page peut nommer des fichiers de trace avec ../ pour écrire hors du dossier de capture ; le correctif proposé n'est pas fusionné. Les pages derrière une connexion, YouTube et Loom ne peuvent pas être capturés directement, Windows n'est pas testé, la première exécution télécharge environ 250 Mo et le GPU logiciel par défaut est lent. Le README rappelle aussi que les polices, images et le code copiés sur un autre site appartiennent toujours à leurs propriétaires.
Notre avis : reanimate est le bon instrument pour un développeur front-end chargé de donner au nouveau hero exactement la sensation d'une référence, et le mauvais pour concevoir un mouvement de zéro. Lancez-le sur des sites de confiance, relisez le diff qu'il écrit et prévoyez une heure d'agent par animation.
Là où il fait la différence
Un développeur front-end d'une start-up qui refond son site marketing
Reconstruire le survol d'une carte d'après une référence de design dans nos composants Framer Motion
Lancez /reanimate avec l'URL de référence et le fichier cible ; le skill lit les keyframes déclarées, écrit le mouvement en Framer Motion et s'arrête quand le minutage est à 80 ms près. Comptez deux à cinq tours de capture.
Un développeur créatif qui porte un hero WebGL qu'il a le droit de réutiliser
Récupérer les shaders, uniforms et le minutage d'une scène three.js
Capturez avec --clock virtual --gl --assets pour extraire les sources des shaders, les uniforms constants et les canaux animés, puis comparez le clone canal par canal avec gl.ts compare.
Une ingénieure design system qui traduit en code l'enregistrement d'écran d'un motion designer
Reproduire image par image un loader de 2 secondes tiré d'un mp4
Donnez le fichier et la plage de temps ; frames.ts extrait et recadre les images, le skill construit le loader en CSS et compare l'enregistrement de la copie à la vidéo jusqu'à ce que l'écart passe sous l'objectif.
Avant de vous engager
- Mise en route
- npx skills add NiazMorshed2007/reanimate -g (ajoutez -a claude-code pour éviter la question sur l'agent), puis /reanimate <quoi> depuis <où>, dans <fichier>. Nécessite Bun 1.1 ou plus récent sous macOS ou Linux ; la première exécution installe un ffmpeg statique et le Chromium de Playwright, environ 250 Mo.
- Intégrations
- Conçu et testé pour Claude Code ; d'autres agents qui lisent SKILL.md peuvent le charger sans test. Scripts Bun pour la capture, les images, la comparaison, l'ajustement d'easing, les planches-contacts et les traces GPU ; se branche sur three.js, Pixi, PlayCanvas, Babylon et OGL.
- Données et confidentialité
- Fonctionne en local, sans clé d'API ni télémétrie décrite ; captures, images et planches de différences vont dans .reanimate/<name>/ de votre projet. Il charge des pages tierces dans Chromium headless, et une issue ouverte signale que des identifiants de trace contrôlés par la page peuvent écrire des fichiers hors du dossier de capture. MIT ; les polices, images et le code copiés restent la propriété de leurs titulaires.
- Coût à grande échelle
- Gratuit. Le vrai coût est le temps d'agent : les exemples de l'auteur ont pris pour la plupart de 30 à 90 minutes chacun dans Claude Code, donc un usage régulier demande un forfait Claude ou un budget d'API généreux. Le mode GPU matériel est plus rapide que SwiftShader, utilisé par défaut.
- Limites
- Pas de pages avec connexion, ni YouTube ou Loom sans enregistrement d'écran ; les ressorts sont ajustés et non lus ; les horloges des workers tournent en temps réel ; les canvas dans des iframes exigent l'URL de l'iframe ; les correctifs Windows attendent dans des pull requests ouvertes.
Les points forts
- Mesure la copie par rapport à l'original à chaque tour au lieu de deviner
- Lit les keyframes et easings exacts quand la page les déclare
- Trace les scènes WebGL, WebGPU et three.js sur une horloge virtuelle déterministe
- Construit dans la pile existante du projet : CSS, Framer Motion, GSAP ou three.js
- Pas de clé d'API ; licence MIT
Les points faibles
- Un contributeur, aucune release, deux semaines d'existence
- Issue de path traversal ouverte lors de la capture de pages non fiables
- Ne capture pas directement les pages avec connexion, YouTube ou Loom
- Windows non testé ; environ 250 Mo de téléchargements au premier lancement
- Exécutions longues de 30 à 90 minutes qui consomment des tokens
Idéal pour
Développeurs front-end sous Claude Code qui doivent reproduire fidèlement un survol, une entrée ou un effet WebGL précis et veulent la preuve de la proximité de la copie.
Alternatives à reanimate
reanimate : questions fréquentes
- reanimate vaut-il le coup ?
- reanimate corrige la vraie raison pour laquelle les agents ratent leurs clones d'animation (ils ne voient pas le mouvement) en faisant mesurer à l'agent sa copie par rapport à l'original jusqu'à ce que les chiffres concordent. Nous lui donnons 3.8 sur 5.
- Combien coûte reanimate ?
- Gratuit (MIT). Pas de clé d'API ; le coût est l'usage de Claude Code pendant des exécutions qui durent souvent de 30 à 90 minutes.
- Quels sont les inconvénients de reanimate ?
- Un contributeur, aucune release, deux semaines d'existence; issue de path traversal ouverte lors de la capture de pages non fiables; ne capture pas directement les pages avec connexion, YouTube ou Loom; windows non testé ; environ 250 Mo de téléchargements au premier lancement; exécutions longues de 30 à 90 minutes qui consomment des tokens.
- À qui s’adresse reanimate ?
- Développeurs front-end sous Claude Code qui doivent reproduire fidèlement un survol, une entrée ou un effet WebGL précis et veulent la preuve de la proximité de la copie.
- Combien coûte reanimate pour une équipe ou en production ?
- Gratuit. Le vrai coût est le temps d'agent : les exemples de l'auteur ont pris pour la plupart de 30 à 90 minutes chacun dans Claude Code, donc un usage régulier demande un forfait Claude ou un budget d'API généreux. Le mode GPU matériel est plus rapide que SwiftShader, utilisé par défaut.
- reanimate est-il sûr pour les données de l’entreprise ?
- Fonctionne en local, sans clé d'API ni télémétrie décrite ; captures, images et planches de différences vont dans .reanimate/<name>/ de votre projet. Il charge des pages tierces dans Chromium headless, et une issue ouverte signale que des identifiants de trace contrôlés par la page peuvent écrire des fichiers hors du dossier de capture. MIT ; les polices, images et le code copiés restent la propriété de leurs titulaires.
- Quelles sont les meilleures alternatives à reanimate ?
- Les alternatives les plus proches que nous avons testées sont motionmaxxing, Bang Motion et Playwright Test Agents.
Réponses vérifiées le 11 nov. 2026.