Увидел красивую анимацию на чужом сайте — забери её к себе

Знакомо? Заходишь на сайт, а там карточка плавно наклоняется за курсором. Или логотипы едут лентой и тормозят под мышкой. Хочется такое же у себя. Просишь ИИ — и получаешь что-то похожее «на глаз». Дёргается, не тот ритм, не та плавность.

Смотри, в чём подвох: агент не видит движение. Он смотрит на код или скриншот, делает один заход и говорит «готово». Сравнить он не может — ему нечем.

29 октября вышел навык reanimate для Claude Code. Он даёт агенту глаза и линейку. Снимает оригинал на видео, собирает копию, снимает её точно так же — и сравнивает. Пока цифры не сойдутся.

Как это устроено

• Запись. Безголовый браузер снимает оригинал с фиксированным размером окна и частотой кадров. Плюс выписывает все CSS-анимации и где каждый элемент стоит на каждом кадре.
• Таблица. Одна строка — один элемент и одно свойство: когда стартует, сколько длится, откуда куда, с каким замедлением.
• Сборка. Пишет анимацию тем, что уже есть в твоём проекте: CSS, Framer Motion, GSAP, three.js.
• Сверка. Снимает копию так же, сравнивает тайминг, плавность и пиксели. Чинит самое большое расхождение — и снова. Обычно 2–5 кругов.

Источником может быть ссылка, запись экрана, mp4, gif или файл Lottie. Ключи API не нужны.

Чему научишься

• Проверять, а не верить. Главный приём навыка: агент меряет свою работу, а не говорит «вроде похоже». Это работает далеко за пределами анимаций.
• Разбирать движение на части. Ты начнёшь видеть в анимации не магию, а таблицу: старт, длительность, замедление, задержка между элементами.
• Брать идею, а не воровать. По умолчанию навык копирует только движение. Цвета, шрифты и картинки — твои.

Готовый стартовый промпт

Поставь навык (нужен Bun, macOS или Linux):

npx skills add NiazMorshed2007/reanimate -g

А дальше главное — сказать точно, что, где и куда:

Хочешь копию «один в один»? Допиши match it exactly — тогда сверяются ещё шрифты, размеры и цвета.

Что в итоге

У тебя компонент в своём проекте, который двигается как оригинал. Плюс листы «оригинал / копия» кадр к кадру и отчёт: что совпало, а что нет и почему. Автор так повторил 18 анимаций с vercel.com, stripe.com и clerk.com — обычно за 30–90 минут каждую.

Честно о рамках: первый запуск скачает ffmpeg и Chromium, это около 250 МБ. Агентный прогон длинный — тратит токены твоей подписки. Windows не проверяли. И это стартовая точка, а не готовый дизайн: собери поверх своё.

Год назад агент мог только угадать анимацию. Теперь он её меряет.

Источник: reanimate — навык для Claude Code (GitHub, NiazMorshed2007)