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

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

reanimate — Skill для Claude Code, который позволяет воспроизводить анимации с высокой точностью.

Сначала он записывает оригинальную анимацию и сохраняет её в проекте. Затем таким же образом записывает воссозданную версию и сравнивает обе записи покадрово.

Если обнаруживаются расхождения, анимация дорабатывается. Обычно требуется от двух до пяти итераций. По умолчанию допустимая погрешность таймингов составляет не более 80 миллисекунд.

Записывать результат собственной работы и самостоятельно сравнивать его с оригиналом — довольно хитрый приём.

https://github.com/NiazMorshed2007/reanimate

Инструмент поддерживает разные источники: ссылки на сайты, записи экрана, MP4, GIF и файлы Lottie.

При генерации кода он использует уже существующие в проекте CSS, Framer Motion или GSAP.

Если требуется воспроизвести анимацию в точности, должны совпадать шрифты, цвета и отступы, а расхождение на уровне пикселей не должно превышать 2%.

Автор продемонстрировал работу инструмента, воссоздав анимацию панели инструментов на сайте Vercel. Все 417 кадров совпали с оригиналом.

Если вам понравилась анимация на каком-нибудь сайте и вы хотите изучить её, а затем создать собственную, это отличный способ начать.

При этом права на оригинальные шрифты и изображения сайта по-прежнему принадлежат их владельцам.

📱 @git_developer