Reanimate покадрово копирует анимации с сайтов в готовый код

На GitHub представлен Reanimate — открытый инструмент, позволяющий ИИ-агенту с высокой точностью воссоздавать анимации с веб-сайтов, видеозаписей и GIF-файлов в виде готового программного кода. Проект автоматизирует трудоемкий реверс-инжиниринг динамических интерфейсов, избавляя фронтенд-разработчиков от необходимости вручную подбирать параметры движения и разбирать чужие стили.

Принцип работы и интеграция с Claude Code

Reanimate спроектирован как специализированный навык для ИИ-ассистента Claude Code. В отличие от стандартных моделей, генерирующих верстку по статичному скриншоту или текстовому описанию, инструмент использует замкнутый цикл верификации и визуальной подгонки:

• Агент записывает исходную анимацию из указанного веб-источника или медиафайла.
• Система выполняет покадровый разбор смещения, скорости и последовательности каждого элемента.
• На базе собранных метрик генерируется соответствующий код реализации.
• Инструмент сравнивает полученный результат с оригиналом и при наличии расхождений автоматически вносит исправления.

По данным автора проекта, для достижения точного сходства алгоритму обычно требуется от 2 до 5 итераций автономной доработки.

Точность синхронизации и режим pixel-perfect

Ключевым преимуществом Reanimate является строгий контроль таймингов и геометрии. В стандартном режиме работы инструмент удерживает разницу во времени анимации в пределах 80 миллисекунд, что позволяет сохранить естественную динамику и порядок срабатывания эффектов.

Для сценариев, требующих максимальной точности, предусмотрен режим pixel-perfect. При его активации система анализирует расширенный набор параметров:

• Размеры и пропорции графических блоков;
• Точное пространственное расположение элементов;
• Цветовую гамму, градиенты и оттенки;
• Используемые шрифты и параметры типографики.

Целевой порог расхождения в режиме pixel-perfect составляет не более 2%, что обеспечивает практически полное визуальное совпадение с оригинальным интерфейсом.

Стек технологий и поддержка сложной 3D-графики

Возможности Reanimate выходят за рамки базовых переходов интерфейса. Архитектура инструмента рассчитана на работу с разнообразными стандартами веб-графики:

• Классические CSS-анимации и трансформации;
• Динамическая графика на базе Canvas;
• Комплексные 3D-сцены и эффекты частиц на WebGL и WebGPU.

Решение ориентировано на полностью локальное выполнение. Рабочее окружение развертывается с помощью среды Bun, библиотеки автоматизации браузеров Playwright и утилиты FFmpeg. Для работы самого инструмента не требуются платные сторонние API, а исходные материалы распространяются под свободной лицензией MIT.

Ознакомиться с документацией можно на сайте проекта (https://reanimate.niazmorshed.dev/?utm_source=chatgpt.com), а исходный код доступен в репозитории на GitHub (https://github.com/NiazMorshed2007/reanimate?utm_source=chatgpt.com).

Автоматизация реверс-инжиниринга интерфейсов

Воспроизведение чужих визуальных находок традиционно требовало ручного подбора кривых Безье, покадрового анализа видеозаписи и декомпиляции скриптов. Reanimate демонстрирует практический переход к ИИ-агентам полного цикла, которые не просто генерируют черновой код, но и самостоятельно контролируют качество рендера через эмуляцию браузера до достижения заданных числовых метрик.