Автоматизация UI-анимаций через реверс-инжиниринг
Разработчик NiazMorshed2007 выпустил reanimate — специализированный навык (skill) для Claude Code, который позволяет «срисовать» анимации с любых веб-страниц, видео или GIF-файлов и перенести их в код проекта. Инструмент решает проблему, когда агенты ИИ создают визуальные копии, но не учитывают динамику движения. Reanimate записывает оригинал, воссоздает его в коде, затем записывает копию и сравнивает два видеокадра, итерируя процесс до совпадения метрик.
Техническая реализация: от CSS до WebGL
Система работает в четыре этапа: запись (capture), спецификация (spec), сборка (build) и проверка (verify). Для захвата используется headless-браузер с фиксированным разрешением. Ключевая особенность — поддержка сложных графических сцен. При использовании флага --gl инструмент трассирует вызовы GPU (shaders, uniforms, draw calls) для WebGL, WebGPU и Canvas 2D. Он поддерживает сцены из библиотек three.js, Pixi, PlayCanvas, Babylon и OGL, извлекая источники шейдеров, текстуры и анимированные свойства объектов.
Для обеспечения детерминизма используется виртуальные часы (--clock virtual), которые продвигают страницу по кадрам с фиксированным seed для Math.random. Это позволяет получать идентичные кадры даже при разной производительности GPU, что критично для точного сравнения.
Метрики точности и бенчмарки
Инструмент предлагает два уровня точности: базовый (совпадение движения с погрешностью 80 мс) и «pixel-perfect» (совпадение шрифтов, цветов и размеров с погрешностью ≤ 2% по пикселям). Ниже приведены результаты клонирования реальных компонентов с популярных сайтов:
| Компонент / Сайт | Технологии | Результат сравнения |
|---|---|---|
| Agentic commerce (chat) | three.js, CSS | Синхронизация чата ±43 мс, макет ±0.05 px |
| Card issuing (tilt) | three.js, Web Workers | 0.03% пикселей различаются в покое; наклон ±0.4 px |
| Feature cards (Clerk) | HTML, SVG, WebGL2 | Движение ±40 мс; < 0.6% пикселей различаются |
| Hero cube (Resend) | three.js | Каждый поворот точен за 25 с; 0.11% пикселей различаются |
| Fading stars (React Bits) | WebGL2 | 0 px в покое; 0.014% различий при клике |
Установка и ограничения
Для работы требуется Bun 1.1+ (macOS/Linux). Установка осуществляется одной командой:
npx skills add NiazMorshed2007/reanimate -gПри первом запуске скачивается статический ffmpeg и Chromium для Playwright (общий объем ~250 МБ). Ключевые ограничения: инструмент не может напрямую записывать страницы за авторизацией, YouTube или Loom (требуется скриншот), а физические пружины (springs) аппроксимируются по времени затухания, а не считываются из исходного кода. Также важно соблюдать авторские права на шрифты и изображения, так как reanimate клонирует логику движения, а не контент.
Источник: Github ↗