Проблема: ИИ не видит движение
Обычные LLM-агенты часто справляются с версткой, но проваливаются при попытке скопировать сложную анимацию: они не могут «увидеть» динамику или оценить отклонения. Reanimate решает эту проблему через итеративный цикл записи и сравнения. Система записывает оригинал в реальном браузере, извлекает параметры движения (тайминг, кривые Безье, траектории), воссоздает их в коде (CSS, Framer Motion, GSAP, Three.js), а затем записывает копию для сравнения.
Как это работает: 5 шагов к точности
Процесс автоматизирован и работает в цикле, пока метрики не совпадут:
- Запись (Record): Скриншоты и видео оригинала в фиксированном размере и частоте кадров.
- Анализ (Write it down): Разбор каждого анимированного элемента на параметры: старт, длительность, дистанция, easing.
- Воспроизведение (Rebuild): Генерация кода с учетом стека проекта.
- Сравнение (Compare): Запись копии теми же параметрами и поиск различий (тайминг, easing, пиксели).
- Итерация (Repeat): Исправление наибольших расхождений. Обычно требуется 2–5 раундов.
Для WebGL и Canvas система также перехватывает шейдеры, юниформы и сцены Three.js, используя одинаковое зерно генератора случайных чисел для воспроизводимости.
Результаты: Бенчмарки и метрики
Инструмент демонстрирует впечатляющую точность на примерах с сайтов Vercel, Turborepo и Next.js. Ниже приведены ключевые метрики успешных реплик:
| Пример (Источник) | Тип анимации | Совпадение кадров (Frame Match) | Точность тайминга | Особенности |
|---|---|---|---|---|
| Vercel Toolbar | Появление кнопок, blur-эффекты, drag | 417 из 417 кадров идентичны | 0 ms задержка | Layout: ≤ 0.02 px |
| Vercel Hero (Drop to deploy) | WebGPU/WebGL рендеринг, световые эффекты | ≤ 1 уровень различия пикселей | 0 ms | Разница в зерне шума WebGPU: 0.16% пикселей |
| Vercel Fluid Ocean | WebGPU сетка 512x512 точек | 0 px различий (12 сек) | Идентично | Скорость: 0.600 (как в оригинале) |
| Turborepo Speedometer | SVG стрелка, пружинная физика | 0 px различий (4 сек) | 31–33 ms (оригинал: 32–34 ms) | Физика пружины аппроксимирована |
Технические детали и ограничения
Reanimate работает на Bun (macOS/Linux), требует около 250 МБ для загрузки Chromium и ffmpeg, и не использует API-ключи. Установка осуществляется через команду npx skills add NiazMorshed2007/reanimate -g.
Ограничения:
- Не работает со страницами, требующими логина, а также с YouTube и Loom (требуется ручная запись экрана).
- Физика пружин (springs) не считывается напрямую, а аппроксимируется по перелету и затуханию.
- Web Workers работают в реальном времени, что может влиять на синхронизацию.
- Копирует только визуальное поведение и логику; шрифты, изображения и код остаются собственностью оригинала.
Инструмент позволяет получить «близкую к идеалу» стартовую точку для разработки, экономя часы ручной отладки анимаций.
Источник: Niazmorshed ↗