Анимация для сайта в Claude Code: Higgsfield MCP, скиллы и движение со смыслом

Анимация — не украшение, а работа

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

Её пример — первый экран лендинга для въездного туризма. Идея: связать российские регионы с образами, которые узнают иностранные туристы. Мурманск — северное сияние и северный олень, Алтай — горы и снежный барс, Камчатка — вулканы, океан и киты. Юлия сгенерировала фоновые иллюстрации в Midjourney, скетчи животных — в Seedance, а собрала композицию в Claude Code. Получился анимированный первый экран, и компания стала ставить эту гифку в email-рассылки. По словам Юлии, показатель интереса к письму вырос в три-четыре раза: с привычных примерно 5 % до 40–45 %.

У анимации, по Юлии, пять ролей: открывать (первое впечатление от элемента), рассказывать (подсветить сложный контент через историю), создавать атмосферу, реагировать (мгновенная обратная связь) и быть интерфейсом — когда человек не смотрит сайт, а взаимодействует с ним. Пример последней роли — Interland от Google: игра, в которую скролл погружает с первого экрана.

Почему движение должно жить на первых трёх экранах

Юлия приводит международные исследования поведения на сайте. Главный вывод: до низа страницы почти не доходят — в среднем досматривают до середины, около 50 % страницы на десктопе и 45 % на мобильном. Отсюда правило: анимация, которая оживает ниже третьего экрана, достанется меньшинству. Самое вовлекающее движение — на первых трёх экранах.

В презентации были ещё шесть сравнений статики и движения, по словам Юлии — 2025–2026 годов:

• при вращающемся индикаторе загрузки до целевого действия дошло почти вдвое больше людей, чем при неподвижном;
• анимированный рекламный баннер собрал примерно на 20 % больше кликов, чем статичный;
• ожидание с анимацией казалось примерно на 22 % короче, а в опыте с эмоциями минута ожидания ощущалась на 31 % короче и вызывала больше позитивных реакций;
• скроллителлинг (скролл + сторителлинг: история рассказывается по мере прокрутки) вызвал на 44 % больше интереса к чтению, чем та же статья статичной страницей;
• по анализу более 2000 e-com-лендингов анимированный первый экран дал +16 процентных пунктов против стокового фото.

Лучше всего силу скроллителлинга видно на примерах из доклада: лендинг Renault Twingo, где история модели раскрывается по скроллу и в финале машину можно рассмотреть со всех сторон, и интерактивный графический роман по рассказу Нам Ле о шестнадцатилетней беженке, которая после падения Сайгона уходит в море. Там вертикальный и горизонтальный скролл чередуются, а анимация становится частью повествования — не визуальным эффектом.

Где кончается вау-эффект и начинается плохой UX

Анимация должна снижать когнитивную нагрузку, а не увеличивать её. Юлия разбирает это с двух сторон.

Глазами дизайнера — это иерархия и ритм. Главный объект двигается сильно, второстепенные — спокойнее, фон почти незаметен. Объекты переходят из одного состояния в другое логично, без «всё бегает и подпрыгивает». У интерфейса один характер движения на всех экранах, а одинаковые действия анимируются одинаково.

Признаки перебора, которые она перечисляет:

• длинное интро на первом экране — человек не доходит до главного контента;
• на курсор реагирует всё подряд, интерактивность превращается в шум;
• сайт перехватывает прокрутку — тренд, заданный Apple, по словам Юлии, уже приелся, и дизайнеры от него отходят;
• анимация вместо навигации — непонятно, куда нажимать;
• слишком много движения — теряется визуальная иерархия;
• тяжёлая графика, которая долго грузится.

И отдельный нюанс: на многих устройствах можно отключить интенсивную анимацию. Для таких пользователей нужна спокойная версия интерфейса. В вёрстке это настройка prefers-reduced-motion — во всех скиллах Юлии она заложена как обязательная.

Higgsfield MCP: живой первый экран, не выходя из Claude Code

Самый быстрый способ оживить первый экран, которым пользуется Юлия, — генерация через MCP прямо из чата Claude Code. Раньше цепочка была длинной: создать картинку в ChatGPT, скачать, анимировать в Kling, снова скачать, положить в проект. Теперь всё в одном окне:

1. Картинка. Через подключённый MCP Higgsfield Юлия генерирует изображение нужной моделью — например, Nano Banana или моделью ChatGPT.
2. Анимация. Там же, в том же чате, оживляет его видеомоделью — например, Seedance.
3. В проект. Claude Code сразу встраивает результат в первый экран лендинга.

Так она делала первые экраны с панорамами Грузии и Армении и акционный сайт с мужчиной-строителем — для него сначала разработала отдельный авторский стиль в Midjourney, сгенерировала в нём все картинки сайта, а потом анимировала через Higgsfield. Результат, по её словам, — живой первый экран «без монтажёра и дизайнера». Не обязательно Higgsfield: подойдёт MCP Kling или другой генеративной нейросети — смысл в том, чтобы никуда не выходить из чата.

Как поставить задачу на скролл-анимацию

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

Пять этапов любой скролл-анимации

1. Исходное состояние — как выглядит экран до того, как что-то произошло.
2. Триггер — что именно запускает анимацию.
3. Действие — что меняется и каким образом.
4. Финальное состояние — к чему приходит анимация.
5. После анимации — объект возвращается в исходное состояние или остаётся изменённым.

Восемь техник — восемь точных слов

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

• горизонтальный pin — секция закрепляется на экране, а при прокрутке вниз контент едет вбок;
• увеличение до полного экрана — по мере скролла изображение растёт на весь экран, затем поверх него поэтапно появляется текст;
• морфинг из точек — фигуры (сфера, куб, спираль) собираются из частиц и перетекают друг в друга;
• раскладка из квадратов — секция из 25 квадратов в четыре стадии: квадрат, фигура, линия; так можно «зашифровать» слово, которое раскроется в конце;
• 3D-раскрытие — цветок, который по мере скролла раскрывается лепесток за лепестком и становится чётким.

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

Сделай скролл-анимацию для секции [название секции] на моём сайте.

Зачем: [что движение должно сделать для пользователя — открыть, рассказать, создать атмосферу, отреагировать].
Техника: [например, pin с горизонтальным треком внутри / zoom до полного экрана с поэтапным текстом].
Настроение и цвета: [настроение], [палитра].

1. Исходное состояние: [как выглядит экран до анимации].
2. Триггер: [что запускает — вход секции в экран, прогресс прокрутки, клик].
3. Действие: [что именно меняется и как; главный объект двигается сильнее, второстепенные спокойнее, фон почти неподвижен].
4. Финальное состояние: [к чему приходит].
5. После анимации: [возвращается в исходное / остаётся изменённым].

Требования: анимируй только transform и opacity; единый ритм с остальными секциями; спокойная версия для prefers-reduced-motion; на мобильном — облегчённый вариант.

Готовые эффекты: фигуры из точек, карусели и библиотеки

Идею анимации не обязательно придумывать с нуля. Юлия берёт её в двух библиотеках: Codrops — современные веб-эффекты (2D, 3D, ховеры, необычные переходы между страницами) с кодом в разных форматах, и Motion Examples — по её словам, больше 400 готовых шаблонов (часть исходников открыта только участникам платного Motion+). Дальше простой ход: отдать пример Claude Code и попросить повторить эффект в своём проекте. Референсы — для вдохновения, не для копирования.

Свои эффекты Юлия упаковала в скиллы Claude Code и раздала участникам NeyroSummit. Как они устроены:

• Фигуры из точек. Готовый HTML-шаблон: около 3400 светящихся частиц на canvas собираются в фигуру и примерно за секунду перетекают в другую при клике по табам. Скилл объясняет, где менять палитру, как добавить свою фигуру (спираль, сердце, контур логотипа), сколько точек оставить для слабых устройств, и запрещает «упрощать» эффект до CSS. Отрисовка выключается, когда секция вне экрана. Юлия советует такие эффекты для геймификации, beauty- и tech-проектов: человеку хочется поводить курсором.
• 3D-карусели. Библиотека пресетов — coverflow, двойная орбита, вогнутая дуга, диагональный спуск, туннель, спираль, вихрь, цилиндр-бегущая строка, колода и другие. Все числа пресета — размеры, углы, перспектива, длительность — скилл считает контрактом, который можно переопределить точечно. Обязательны управление с клавиатуры, перетаскивание с инерцией и спокойный режим для prefers-reduced-motion.
• Signature motion. Скилл, собранный на разборе 25 сайтов-победителей премий за интерактивную анимацию. Он не навешивает эффекты, а выбирает 2–4 «точки памяти» — первый экран, переход между главами, блок с историей или данными, показ продукта — и держит остальное спокойным. Уровень движения подбирается под тип проекта: от «тихой роскоши» для бренда до анимации-функции для дашборда.

Нестандартные карусели, по оценке Юлии, поднимают конверсию лендинга процентов на 10–15: люди устали от обычной горизонтальной ленты карточек. Её любимая — диагональная, она «заставляет остановить взгляд». Вот промпт этого пресета из её коллекции:

Создай 3D-карусель с диагональным спуском. 14 карточек размером 340×432px со скруглением углов 18px. Они сидят на прямой дорожке с шагом 280px. Карточки не повёрнуты по оси Y (yaw); крен сцены компенсируется у каждой карточки с коэффициентом 1, так что дорожка идёт по диагонали, а карточки остаются прямыми. Масштаб убывает как 1/(1+0,43·n), где n — расстояние от карточки в фокусе; непрозрачность падает на 0,3 за шаг; размытие растёт на 2px за шаг, измеряется в экранных пикселях — дели на собственный масштаб каждой карточки, потому что фильтр вычисляется до трансформации предка. Перспектива сцены 1400px, без наклона (pitch), крен -18°. Переход занимает 640ms по cubic-bezier(0.32, 0.72, 0, 1). Перетаскивание с инерцией и примагничиванием к центру; кнопки-стрелки; тап по карточке выводит её в центр; клавиши-стрелки двигают на одну карточку, Home и End переходят к краям; без автопрокрутки. При prefers-reduced-motion сохрани компоновку в точности как описано — кривую, углы, глубину, камеру — и вместо пролистывания делай кроссфейд между карточками за 180ms, чтобы ничего не двигалось само по себе.

Обрати внимание, как устроен промпт: ни одного «красиво» — только числа, поведение при перетаскивании и клавиатуре и отдельная строка про reduced motion. Размеры, шаг и скорость меняй под свою задачу: для крупных читаемых карточек их лучше сделать меньше по количеству.

Midjourney: откуда взять визуальную идею

Анимация оживляет визуал, но сам визуал Юлия по-прежнему делает в Midjourney. На вопрос из чата, не устарел ли он, она ответила резко: дизайнеры крупных брендов, по её словам, работают именно в нём, потому что это единственная нейросеть, адаптированная для профессионального веб-дизайна.

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

Где применять, кроме лендингов: нестандартная подача статистики и аналитических отчётов, интерактивные истории (Юлия собирала через Claude Code интерактивные истории «Титаника» и Восточного экспресса), акционные e-com-лендинги. Ведущий NeyroSummit добавил ещё один ход: такие карусели и эффекты отличают сайт от типичного «нейросетевого» — по умолчанию нейросеть их не сделает.

С чего начать сегодня

Вопросы и ответы