GitHub Разработчика
GIF
TWMate.com-553ff23bc4b80fc7b5302ed7d58ab60c.mp4 · 3.7 МБ
TWMate.com-553ff23bc4b80fc7b5302ed7d58ab60c.mp4 · 3.7 МБ
Недавно я увидел на чужом сайте очень плавную анимацию и попросил ИИ-агента воссоздать её. Он выполнил задачу за один проход и сообщил, что всё готово. Однако при сравнении оказалось, что тайминги и кривые плавности совершенно не совпадают с оригиналом.
reanimate — Skill для Claude Code, который позволяет воспроизводить анимации с высокой точностью.
Сначала он записывает оригинальную анимацию и сохраняет её в проекте. Затем таким же образом записывает воссозданную версию и сравнивает обе записи покадрово.
Если обнаруживаются расхождения, анимация дорабатывается. Обычно требуется от двух до пяти итераций. По умолчанию допустимая погрешность таймингов составляет не более 80 миллисекунд.
Записывать результат собственной работы и самостоятельно сравнивать его с оригиналом — довольно хитрый приём.
https://github.com/NiazMorshed2007/reanimate
Инструмент поддерживает разные источники: ссылки на сайты, записи экрана, MP4, GIF и файлы Lottie.
При генерации кода он использует уже существующие в проекте CSS, Framer Motion или GSAP.
Если требуется воспроизвести анимацию в точности, должны совпадать шрифты, цвета и отступы, а расхождение на уровне пикселей не должно превышать 2%.
Автор продемонстрировал работу инструмента, воссоздав анимацию панели инструментов на сайте Vercel. Все 417 кадров совпали с оригиналом.
Если вам понравилась анимация на каком-нибудь сайте и вы хотите изучить её, а затем создать собственную, это отличный способ начать.
При этом права на оригинальные шрифты и изображения сайта по-прежнему принадлежат их владельцам.
📱 @git_developer
❤5
40 · 838 ·