Как дизайнеру подготовить сложную веб-анимацию для разработчика: три сценария из практики

Все мы знаем этот рабочий любовный треугольник: клиент — дизайнер — разработчик.

Канал с гайдами и контентом по claude code, выкладываем новости (когда режут лимиты в 10 раз) и какие инструменты через claude реализуем для проектов, канал: https://t.me/claudedevolper

Клиент: «А давайте при движении мышки у нас из частиц соберётся грузовик, а потом ещё и датчик слежения за ним?»

Дизайнер: «Я нарисовал. Примера анимации нет, но я тебе сейчас всё объясню на словах…»

Разработчик: «А можно хотя бы референс, механику движения и понимание, что должно происходить?»

Знакомо? Особенно когда клиент хочет «как у Apple», дизайнер придумал красоту, а фронтендеру нужно понять, как это реализовать и сколько времени закладывать.

Расскажу, как облегчить жизнь всем троим, когда дело доходит до сложных интерактивных анимаций, геймификации, скролл-эффектов и прочей «вау-фигни».

Ситуация 1. Клиент хочет эффект воды, ряби или капель на hero-блоке при движении курсора

Ситуация не то чтобы страшная, но попотеть придётся. Есть несколько вариантов решения этого вопроса.

Вариант 1: если есть референс — вообще замечательно! Беру страницу с похожим эффектом, нажимаю на правую кнопку мыши или на тачпад, выбираю «Просмотр кода», выделяю весь код и вставляю в любой текстовый редактор. Я пользуюсь стандартным Google Docs, но можно и блокнотом, ну, или скачивайте в формате .txt.

В моём случае был такой сайт:

https://bfd.su/

Далее иду в Grok, прикрепляю файл и пишу промпт:

«Из этого кода надо вычленить кусок, который отвечает за анимацию воды на hero-блоке»

Вот какой результат выдаёт нейронка:

Иииии...ничего не заработало, иду дальше.

Пишу следующий промпт: «Прикрути к коду тёмный фон, чтобы хорошо посмотреть эффект воды»

На превью видно, что фон есть, но эффект еле-еле заметный.

Но мы не сдаёмся!

Пишу дальше: «Код не работает, найди ошибки»

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

Вариант 2: Можно найти похожий эффект в сервисах с готовым кодом и отправить его в качестве рабочего варианта.

Например, такие штуки можно искать на CodePen.

Пишу в поисковой строке «Water ripple effect» и смотрю, что выдаст поиск.

Нахожу наиболее привлекательный вариант и открываю код. Можно также менять настройки, а можно отдать как есть.

CodePen — это кладезь разных эффектов и анимаций, советую его использовать для насмотренности. Там можно кидать анимации в избранное, чтобы не потерять)

Небольшой совет: обращайте внимание на название самого эффекта. Его можно скопировать и использовать для более точного поиска.

Ситуация 2. Клиент хочет «взрыв-схему» бургера (или любого продукта)

Клиент открывает свою бургерную и хочет что-то УНИКАЛЬНОЕ, как у Apple, и чтобы всё вертелось, крутилось, но было минималистично и лаконично. В общем, хочет «взрыв-схему» бургера, завязанную на скролл.

Ок! Хочет — буду делать.

Шаг 1. Генерирую исходную картинку

На просторах Pinterest я нашла промпт, который бы мне подошёл, чтобы сократить время.

Промпт:

Скрытый текст

Иду в бесплатный Gemini и вставляю промпт.

Получается такой результат:

Шаг 2. Собираю бургер обратно

Всё в том же Gemini собираю бургер.

«Assemble the burger–make sure it doesn't fall apart»

Получаю две картинки:

Иду в Figma и готовлю материал:

Делаю однотонный фон, желательно того же цвета, что и фон сайта.
Делаю одинаковый формат — это важно! Один фон, одно позиционирование и один размер картинки.

Шаг 3. Делаю плавный переход в Kling

Выгружаю картинки в формате JPEG и иду в Kling для генерации видео. Зачем? Чтобы потом покадрово разложить видео и привязать кадры к скроллу.

Выбираю формат работы — «Generate».

Выставляю первый и финальный кадр самого видео.

Получаю видео с зацикленным результатом.

Шаг 4. Превращаю видео в интерактивный скролл-эффект

Для классного результата нужны промпты, спецификация и вот это вот всё. Я, честно, лентяйка, поэтому просто переписала уже готовые документы под нужную тематику, также через Grok.

Томить не буду, просто вставлю всё сюда.

Папка с файлами.

Беру 3-й промпт, вставляю его и прикрепляю все остальные документы из папки.

Промпт:

Скрытый текст

ВАЖНО! Названия файлов должны совпадать с названиями в промпте.

Добавляю всё это в Claude и получаю такой результат:

file:///Users/kate/Downloads/grind-burger-preview%20(1)/index.html

Вытаскиваю рабочий кусок кода и отдаю фронтам.

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

Ситуация 3. Логотип распадается и собирается из частиц

Идея классная, но что с ней делать?! Объяснить такое тяжело, но есть несколько вариантов.

Можно вернуться к предыдущим сценариям, а можно перейти в Spline. Там есть возможность для создания своих анимаций, а ещё внедрение уже придуманных эффектов.

Перехожу в раздел «Community» и вбиваю в поиске «Particles».

Нахожу нужный референс:

Захожу в рабочее пространство самого эффекта
Загружаю в него 3D-рендер модели. В моём случае это был сложный грузовик, но в целом, это может быть что вашей душе угодно. Вопрос лишь в том, что чем проще фигура, тем лучше она будет выглядеть — это в целом логично. Условно, квадрат или несложный логотип будут более эффектными и менее замороченными по настройкам.
Далее кручу, верчу и настраиваю сами частицы, делаю их крупнее или мельче, много или мало. Настраиваю интерактивное взаимодействие анимации и мышки, скорость реакции, резкость — ну, вы поняли. Лучше это всё отдавать вашему моушен-дизайнеру, но в целом, разобраться реально. Подробнее на видео:
После того, как видимый результат начал вызывать экстаз и истерический восторг, экспортирую скрипт, который описывает данную анимацию.
Отдаю все файлы фронту и живу в мире и благополучии.

Есть одно НО — этот сервис платный.

Итоговые лайфхаки для дизайнеров и разработчиков:

Не пытайтесь объяснять сложную анимацию только на словах. Лучше сразу прикладывайте референсы, код и видео.
CodePen, Spline Community и готовые эффекты на GitHub — это ваши лучшие друзья.
ИИ (Grok, Claude и Kling) сильно ускоряет процесс, но работает лучше всего в связке: один генерит визуал, второй — код, а третий помогает отлаживать результаты.
Самый быстрый путь к вау-эффектам — комбинация: референс → ИИ-разбор → доработка → готовый код.

Сложные анимации больше не повод для войны в чате. Теперь это просто ещё один инструмент, которым можно пользоваться быстро и с удовольствием.