¿Qué es reanimate?
reanimate es un skill de agente para copiar movimiento. Le indicas a Claude Code una página en vivo, una grabación de pantalla, un mp4, un gif o un archivo Lottie, y nombras el elemento y el archivo de destino; el skill graba la referencia en un Chromium sin interfaz con un viewport y una tasa de fotogramas fijos, escribe una especificación con una fila por elemento y propiedad (inicio, duración, desde y hasta, easing, escalonado), construye la animación con lo que ya use el proyecto (CSS, Framer Motion, GSAP o three.js) y después graba la copia del mismo modo y compara tiempos, easing y píxeles. Repite, normalmente de 2 a 5 rondas, y lista lo que aún no coincide después de 5.
Para canvas, WebGL y WebGPU rastrea las llamadas a la GPU en lugar de leer píxeles: código de los shaders, uniforms, pasadas de render, texturas y el grafo de escena de three.js, Pixi, PlayCanvas, Babylon u OGL, sobre un reloj virtual con Math.random sembrado para que dos capturas salgan idénticas. La fidelidad por defecto es solo de movimiento (tiempos dentro de 80 ms, misma familia de easing y mismo orden); pedir pixel-perfect añade fuentes, colores, espaciado y una diferencia media de píxeles del 2 % o menos.
El repositorio es de Niaz Morshed, con licencia MIT, creado el 29 de octubre de 2026 y modificado por última vez el 31 de octubre. Tiene unas 1.570 estrellas, 137 forks, un solo colaborador, ninguna release etiquetada y un sitio con 14 ejemplos clonados de Vercel, Stripe, Clerk, Resend y otros, cada uno medido contra su original.
¿Merece la pena reanimate?
La aportación de reanimate es un bucle de retroalimentación, no un prompt. Un agente al que se le pide reconstruir una animación a partir de un enlace hace una pasada y da el trabajo por terminado, porque no tiene forma de ver los tiempos. Este skill le da ojos: un script de captura que registra fotogramas, keyframes declarados de CSS y Web Animations, estilos calculados y posiciones de los elementos en cada fotograma, y un script de comparación que informa del error de tiempo, la diferencia de píxeles y hojas de diferencias para la referencia y la copia. SKILL.md le dice a Claude que lea cada hoja de contactos y que siga iterando frente a criterios de aprobación fijos en lugar de parar en "parece correcto". Cuando la fuente declara sus propios keyframes, el skill toma de ellos las duraciones y los easings exactos en lugar de estimarlos.
Las pruebas publicadas son inusualmente concretas. En el clon de la barra de herramientas de Vercel coinciden 417 de 417 fotogramas; las rotaciones del cubo del hero de Resend son exactas durante 25 s con un 0,11 % de píxeles distintos; la tarjeta inclinable de Stripe se asienta dentro de 0,4 px y su curva de inclinación en WebGL coincide dentro de 33 ms. Son ejecuciones del propio autor sobre 14 ejemplos, la mayoría de 30 a 90 minutos, no una prueba independiente, pero el método es reproducible y los artefactos de cada ronda quedan en .reanimate/ dentro de tu proyecto como prueba.
Es una herramienta más estrecha y más rigurosa que los skills de movimiento que la rodean. motionmaxxing y bang-motion ayudan a un agente a diseñar movimiento nuevo con buen gusto; reanimate solo copia movimiento existente, y su valor está en que puede mostrar cuánto se parece la copia.
La pega: tiene dos semanas, un solo colaborador y ninguna release, y su alcance invita a problemas. Capturar significa ejecutar páginas arbitrarias de terceros en un navegador sin interfaz local, y un issue abierto el 10 de noviembre de 2026 muestra que una página puede nombrar los archivos de traza con ../ para escribir fuera de la carpeta de captura; el parche propuesto no está fusionado. Las páginas tras un inicio de sesión, YouTube y Loom no se pueden capturar directamente, Windows no está probado, la primera ejecución descarga unos 250 MB y la GPU por software predeterminada es lenta. El README también recuerda que las fuentes, imágenes y el código copiados de otro sitio siguen perteneciendo a sus dueños.
Nuestra opinión: reanimate es el instrumento adecuado para un desarrollador front-end al que le piden que el nuevo hero se sienta exactamente como una referencia, y el equivocado para diseñar movimiento desde cero. Ejecútalo contra sitios de confianza, revisa el diff que escribe y reserva una hora de agente por animación.
Dónde se gana su sitio
Un desarrollador front-end de una startup que rediseña su web de marketing
Reconstruir el hover de una tarjeta a partir de una referencia de diseño en nuestros componentes de Framer Motion
Ejecuta /reanimate con la URL de referencia y el archivo destino; el skill lee los keyframes declarados, escribe el movimiento en Framer Motion y para cuando los tiempos están dentro de 80 ms. Cuenta con dos a cinco rondas de captura.
Un desarrollador creativo que porta un hero WebGL que tiene licencia para reutilizar
Recuperar los shaders, uniforms y tiempos de una escena three.js
Captura con --clock virtual --gl --assets para extraer el código de los shaders, los uniforms constantes y los canales animados, y compara el clon canal a canal con gl.ts compare.
Una ingeniera de design systems que convierte en código la grabación de pantalla de un diseñador de movimiento
Igualar fotograma a fotograma un loader de 2 segundos de un mp4
Pasa el archivo y el rango de tiempo; frames.ts extrae y recorta fotogramas, el skill construye el loader en CSS y compara la grabación de la copia con el vídeo hasta que la diferencia queda por debajo del objetivo.
Antes de decidirte
- Puesta en marcha
- npx skills add NiazMorshed2007/reanimate -g (añade -a claude-code para saltarte la pregunta del agente) y después /reanimate <qué> de <dónde>, en <archivo>. Necesita Bun 1.1 o posterior en macOS o Linux; la primera ejecución instala un ffmpeg estático y el Chromium de Playwright, unos 250 MB.
- Integraciones
- Hecho y probado para Claude Code; otros agentes que leen SKILL.md pueden cargarlo sin pruebas. Scripts de Bun para captura, fotogramas, comparación, ajuste de easing, hojas de contactos y trazas de GPU; se engancha a three.js, Pixi, PlayCanvas, Babylon y OGL.
- Datos y privacidad
- Funciona en local, sin claves de API ni telemetría descritas; capturas, fotogramas y hojas de diferencias van a .reanimate/<name>/ en tu proyecto. Carga páginas de terceros en Chromium sin interfaz, y un issue abierto indica que los ids de traza controlados por la página pueden escribir archivos fuera de la carpeta de captura. MIT; las fuentes, imágenes y el código copiados conservan los derechos de sus dueños.
- Coste a escala
- Gratis. El coste real es el tiempo de agente: los ejemplos del autor llevaron en su mayoría de 30 a 90 minutos cada uno en Claude Code, así que el uso habitual necesita un plan de Claude o un presupuesto de API generosos. El modo de GPU por hardware es más rápido que el SwiftShader predeterminado.
- Límites
- Sin páginas con inicio de sesión, YouTube ni Loom salvo con una grabación de pantalla; los muelles se ajustan en lugar de leerse; los relojes de los workers van en tiempo real; los canvas dentro de iframes necesitan la URL del iframe; los arreglos para Windows están en pull requests abiertas.
Lo bueno
- Mide la copia contra el original en cada ronda en lugar de adivinar
- Lee keyframes y easings exactos cuando la página los declara
- Rastrea escenas WebGL, WebGPU y three.js sobre un reloj virtual determinista
- Construye con la pila que ya tiene el proyecto: CSS, Framer Motion, GSAP o three.js
- Sin claves de API; licencia MIT
Lo malo
- Un colaborador, ninguna release, dos semanas de vida
- Issue abierto de path traversal al capturar páginas no fiables
- No captura directamente páginas con inicio de sesión, YouTube ni Loom
- Windows sin probar; unos 250 MB de descargas en la primera ejecución
- Ejecuciones largas de 30 a 90 minutos que consumen tokens del agente
Ideal para
Desarrolladores front-end que usan Claude Code y necesitan reproducir con precisión un hover, una entrada o un efecto WebGL concretos, con pruebas de lo cerca que está la copia.
Alternativas a reanimate
reanimate: preguntas frecuentes
- ¿Merece la pena reanimate?
- reanimate corrige la verdadera razón por la que los agentes fallan al clonar animaciones (no pueden ver el movimiento) haciendo que el agente mida su copia contra el original hasta que los números coinciden. Le damos un 3.8 sobre 5.
- ¿Cuánto cuesta reanimate?
- Gratis (MIT). Sin claves de API; el coste es el uso de Claude Code en ejecuciones que a menudo duran de 30 a 90 minutos.
- ¿Qué inconvenientes tiene reanimate?
- Un colaborador, ninguna release, dos semanas de vida; issue abierto de path traversal al capturar páginas no fiables; no captura directamente páginas con inicio de sesión, YouTube ni Loom; windows sin probar; unos 250 MB de descargas en la primera ejecución; ejecuciones largas de 30 a 90 minutos que consumen tokens del agente.
- ¿Para quién es reanimate?
- Desarrolladores front-end que usan Claude Code y necesitan reproducir con precisión un hover, una entrada o un efecto WebGL concretos, con pruebas de lo cerca que está la copia.
- ¿Cuánto cuesta reanimate para un equipo o en producción?
- Gratis. El coste real es el tiempo de agente: los ejemplos del autor llevaron en su mayoría de 30 a 90 minutos cada uno en Claude Code, así que el uso habitual necesita un plan de Claude o un presupuesto de API generosos. El modo de GPU por hardware es más rápido que el SwiftShader predeterminado.
- ¿Es reanimate seguro para los datos de la empresa?
- Funciona en local, sin claves de API ni telemetría descritas; capturas, fotogramas y hojas de diferencias van a .reanimate/<name>/ en tu proyecto. Carga páginas de terceros en Chromium sin interfaz, y un issue abierto indica que los ids de traza controlados por la página pueden escribir archivos fuera de la carpeta de captura. MIT; las fuentes, imágenes y el código copiados conservan los derechos de sus dueños.
- ¿Cuáles son las mejores alternativas a reanimate?
- Las alternativas más cercanas que hemos analizado son motionmaxxing, Bang Motion y Playwright Test Agents.
Respuestas comprobadas el 11 nov 2026.