Как клонировать анимацию с любого сайта в свой проект: пошаговый гайд

Ты обещанный гайд открыл — поехали. К концу статьи у тебя в проекте будет анимация, один в один повторяющая ту, что тебе понравилась на чужом сайте, но написанная твоим собственным кодом с нуля. Разбираться, как она работает, тебе не придётся: всё делает агент. Руками ты не ставишь ничего — только копируешь фразы и смотришь на результат в браузере.

Работает это за счёт бесплатного скилла, который разработчик Нияз Моршед выложил на GitHub — за четыре дня тысяча звёзд. Подходит и для Claude Code, и для Codex. Главная разница с тем, как было раньше: без скилла ты даёшь агенту ссылку и получаешь «нечто похожее», а со скиллом агент разбирает анимацию по частям, повторяет её своим кодом, а потом сам сравнивает результат с референсом, находит расхождения и исправляет их.

1Что понадобится

2Настраиваем по шагам

Шаг 1. Дай агенту увидеть твой проект

До всякой анимации агент должен понимать, с чем работает: на чём собран проект, где главная страница, как его запустить и показать в браузере. Если этого шага не сделать, агент начнёт угадывать и воткнёт анимацию не туда. Заодно проверишь, что он вообще видит твои файлы.

Должно получиться: агент описал твой проект узнаваемо — ты читаешь и понимаешь, что речь про твой сайт, а не про абстрактный. И он дал ссылку, по которой проект открывается у тебя в браузере. Если агент путается или описывает что-то чужое — скажи, где лежит нужная папка, и попроси посмотреть ещё раз.

Шаг 2. Пусть агент сам поставит скилл

Это тот самый скилл Нияза Моршеда с GitHub. Ставить его руками не нужно — агент находит, скачивает и подключает его сам. Твоя задача — только разрешить ему это сделать, когда он спросит. После установки агент умеет не просто смотреть на страницу, а разбирать анимацию на составляющие.

Должно получиться: агент отвечает, что скилл установлен и активен, и своими словами объясняет, что теперь может разобрать анимацию с чужой страницы и воспроизвести её. Если он отвечает размыто в духе «я и так умею анимации» — значит скилл не встал. Попроси прямо: найди именно этот репозиторий на GitHub, установи его и подтверди, что он подключён.

Шаг 3. Дай ссылку и попроси сначала разобрать анимацию

Вот тут и начинается то, за что ты пришёл. Ты даёшь ссылку на страницу, где анимация тебе понравилась, и просишь агента не бросаться писать код, а сначала разобрать: что двигается, с какой скоростью, что происходит при наведении мыши и при прокрутке. Это описание нужно тебе, чтобы на старте понять — агент увидел ту же анимацию, что и ты, или заметил что-то другое на странице.

Должно получиться: список на несколько пунктов, в котором ты узнаёшь ту самую анимацию. Если агент описал другой эффект на той же странице — уточни словами, что тебе нужно: «меня интересует только то, что происходит с картинками при прокрутке» или «только появление заголовка при загрузке».

Шаг 4. Пусть агент напишет её своим кодом с нуля

Это принципиальный момент: агент не копирует чужие файлы, а пишет собственный код по своему разбору. Поэтому на выходе у тебя не плагиат, а твой код, который даёт то же движение. Скажи прямо, куда анимация должна встать в твоём проекте — иначе агент выберет место сам.

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

Шаг 5. Попроси агента сравнить результат с референсом

Самая приятная часть. Агент сам открывает обе версии — твою и оригинальную страницу — и ищет расхождения. Мне это понравилось больше всего: я не искал отличия глазами и не объяснял словами, что «как-то не так дёргается». Пусть он сначала покажет список, а не бросится исправлять: так ты увидишь, что он вообще заметил.

Должно получиться: список расхождений, обычно короткий — движение на доли секунды длиннее, тень появляется раньше, эффект при наведении слабее. Если агент пишет «отличий нет», а глазами ты разницу видишь — скажи ему своими словами, что именно не то, и попроси сравнить ещё раз именно этот момент.

Шаг 6. Пусть он сам исправит расхождения по кругу

Агент правит найденное и после каждой правки снова сравнивает с оригиналом — и так по кругу, пока не станет один в один. У меня в итоге получилось именно один в один. Важно попросить его честно сказать, что осталось другим и почему: иногда часть эффекта держится на платной библиотеке или закрытом скрипте того сайта, и тогда идеального совпадения не будет.

Должно получиться: ты открываешь свою страницу и страницу-оригинал рядом, переключаешься между ними — и разницы в движении не чувствуешь. Если что-то всё ещё царапает глаз, не формулируй технически: скажи «у меня появляется резче, чем у них» и попроси ещё круг сравнения.

Шаг 7. Убери всё чужое, кроме движения

Пока агент гонялся за совпадением, он мог притащить в твой проект чужие картинки, шрифты, фирменные цвета или текст с того сайта. Код у тебя свой, но айдентику чужого бренда копировать незачем — тебе нужны движение и стиль анимации, а не чей-то логотип. Этот шаг делаешь всегда, даже если на глаз всё чисто.

Должно получиться: анимация двигается так же, а всё содержимое — твоё. Открой страницу и пройдись глазами по картинкам, шрифтам и подписям: ничего с чужого сайта там быть не должно. На этом обещание из ролика выполнено — у тебя желаемая анимация, движение и стиль со своим уникальным кодом.

3Кому подходит

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

Человек тут обязательно нужен в двух местах: выбрать эффект, который реально нужен твоему проекту, и сказать финальное «да, то самое». Агент добивается совпадения с референсом, но не решает, уместна ли эта анимация у тебя на главной. И не ждите, что один красивый эффект принесёт заявки: у нас своя контент-фабрика ИИ-роликов, мы строили её год, прежде чем пошли лиды — и идут они с органики, а не с платной рекламы. Такие инструменты ускоряют работу, но длинную стратегию не заменяют.