«Видишь, как градиент в этой карточке плавает при наведении? И тень тоже оживает», — сказал клиент, показывая в зуме прототип. Его главной изюминкой была эта анимация. Задача была ясной: «Сделайте то же самое у нас в проекте на React с Framer Motion». Если движение на новом сайте будет грубым, весь макет покажется чужим.
Первый запрос: просто повторить
Я залила запись экрана с прототипом в папку и дала команду: «/reanimate». Навык работает с живым сайтом, записью экрана, MP4, GIF или файлом Lottie. Я выбрала видео и действовала по умолчанию.
По умолчанию reanimate воспроизводит движение, оставляя визуальное оформление пользователю.
Claude сгенерировал код на Framer Motion. Я открыла демо — карточка двигалась почти так же, но градиент оставался статичным, а тени были не те. «Похоже, «движение» он понял как пересчёт координат, а текстуры выпали», — сказала я Лере.
«Ну, «match it exactly», очевидно же, — бросила она. — Там же в описании есть режим «pixel-perfect». Попробуй с ним».
Уточнение цели: «match it exactly»
Режим «pixel-perfect» учитывает шрифты, размеры, цвета, отступы и ресурсы, с целевым средним расхождением пикселей не более 2%.
Я перезапустила процесс с запросом: «reanimate this with pixel-perfect accuracy». Навык начал сравнивать копию с оригиналом по времени, easing и пикселям, а затем исправлять крупнейшее расхождение. Обычно это занимает от 2 до 5 раундов; у нас их было три.
Результат улучшился: тени встали на место, градиент заработал. Но в отчёте остался пункт: «Failed to match external asset: background.jpg».
«А у них градиент — это картинка, а не CSS, — догадалась Лера. — Он рассчитал движение для элемента правильно. Но исходник лежит на их сервере. Его он не может просто взять».
Граница автоматического копирования
Навык реконструирует анимации покадрово. Для реализации он использует технологии, уже применяемые в проекте: CSS, Framer Motion, GSAP или three.js.
Код был рабочий, логика движения сохранена. Но те самые 2% расхождения — это граница, где нужно смотреть человеком. В моём случае ошибка была не в вычислениях, а в праве на чужой ресурс.
Я скопировала полученный компонент в проект, заменила ссылку на background.jpg на наш локальный градиент — и всё заработало точно, как задумывал клиент.
Клиент получил готовую анимацию на своём стеке. А я — понимание, что «pixel-perfect» не магия, а набор проверок, и последняя из них — за авторским правом — всегда остаётся дизайнеру.