Все мы знаем этот рабочий любовный треугольник: клиент — дизайнер — разработчик.
Клиент: «А давайте при движении мышки у нас из частиц соберётся грузовик, а потом ещё и датчик слежения за ним?»
Дизайнер: «Я нарисовал. Примера анимации нет, но я тебе сейчас всё объясню на словах…»
Разработчик: «А можно хотя бы референс, механику движения и понимание, что должно происходить?»
Знакомо? Особенно когда клиент хочет «как у Apple», дизайнер придумал красоту, а фронтендеру нужно понять, как это реализовать и сколько времени закладывать.
Расскажу, как облегчить жизнь всем троим, когда дело доходит до сложных интерактивных анимаций, геймификации, скролл-эффектов и прочей «вау-фигни».
Ситуация 1. Клиент хочет эффект воды, ряби или капель на hero-блоке при движении курсора
Ситуация не то чтобы страшная, но попотеть придётся. Есть несколько вариантов решения этого вопроса.
Вариант 1: если есть референс — вообще замечательно! Беру страницу с похожим эффектом, нажимаю на правую кнопку мыши или на тачпад, выбираю «Просмотр кода», выделяю весь код и вставляю в любой текстовый редактор. Я пользуюсь стандартным Google Docs, но можно и блокнотом, ну, или скачивайте в формате .txt.
В моём случае был такой сайт:
https://bfd.su/
Далее иду в Grok, прикрепляю файл и пишу промпт:
«Из этого кода надо вычленить кусок, который отвечает за анимацию воды на hero-блоке»
Вот какой результат выдаёт нейронка:
Иииии…ничего не заработало, иду дальше.
Пишу следующий промпт: «Прикрути к коду тёмный фон, чтобы хорошо посмотреть эффект воды»
На превью видно, что фон есть, но эффект еле-еле заметный.
Но мы не сдаёмся!
Пишу дальше: «Код не работает, найди ошибки»
Тут уже виден сам эффект: он реагирует на мышь, и рябь есть. Этот код можно скопировать, приложить к макету и отдать разработчикам. Если требуется замедлить эффект, сделать капли более крупными или мелкими — меняем настройки, но лучше попросить об этом знающих и умеющих людей. В конце концов, можно попросить об этом и нейронку, если таковых нет.
Вариант 2: Можно найти похожий эффект в сервисах с готовым кодом и отправить его в качестве рабочего варианта.
Например, такие штуки можно искать на CodePen.
Пишу в поисковой строке «Water ripple effect» и смотрю, что выдаст поиск.
Нахожу наиболее привлекательный вариант и открываю код. Можно также менять настройки, а можно отдать как есть.
CodePen — это кладезь разных эффектов и анимаций, советую его использовать для насмотренности. Там можно кидать анимации в избранное, чтобы не потерять)
Небольшой совет: обращайте внимание на название самого эффекта. Его можно скопировать и использовать для более точного поиска.
Ситуация 2. Клиент хочет «взрыв-схему» бургера (или любого продукта)
Клиент открывает свою бургерную и хочет что-то УНИКАЛЬНОЕ, как у Apple, и чтобы всё вертелось, крутилось, но было минималистично и лаконично. В общем, хочет «взрыв-схему» бургера, завязанную на скролл.
Ок! Хочет — буду делать.
Шаг 1. Генерирую исходную картинку
На просторах Pinterest я нашла промпт, который бы мне подошёл, чтобы сократить время.
Промпт:
Скрытый текст
«A hyper-realistic, mid-air exploded view of a towering veggie burger with multi-grain bun, sharp cheddar, grilled mushroom patty, roasted red pepper, and crisp breadcrumbs, and red cherry tomatoes hover in dynamic suspension around the ingredients, as if caught in a flavorful gust of wind. The lighting is warm and directional, highlighting moisture droplets, textures, and sheen across every layer. Photorealistic rendering with extreme depth of field, dramatic shadows, and vibrant organic color grading evokes the sense of a fresh, gourmet plant-based meal captured in an action freeze-frame»
Иду в бесплатный Gemini и вставляю промпт.
Получается такой результат:
Шаг 2. Собираю бургер обратно
Всё в том же Gemini собираю бургер.
«Assemble the burger–make sure it doesn’t fall apart»
Получаю две картинки:
Иду в Figma и готовлю материал:
-
Делаю однотонный фон, желательно того же цвета, что и фон сайта.
-
Делаю одинаковый формат — это важно! Один фон, одно позиционирование и один размер картинки.
Шаг 3. Делаю плавный переход в Kling
Выгружаю картинки в формате JPEG и иду в Kling для генерации видео. Зачем? Чтобы потом покадрово разложить видео и привязать кадры к скроллу.
Выбираю формат работы — «Generate».
Выставляю первый и финальный кадр самого видео.
Получаю видео с зацикленным результатом.
Шаг 4. Превращаю видео в интерактивный скролл-эффект
Для классного результата нужны промпты, спецификация и вот это вот всё. Я, честно, лентяйка, поэтому просто переписала уже готовые документы под нужную тематику, также через Grok.
Томить не буду, просто вставлю всё сюда.
Беру 3-й промпт, вставляю его и прикрепляю все остальные документы из папки.
Промпт:
Скрытый текст
«Мне нужно создать лендинг для бургерного заведения. Я хочу добавить scroll-анимацию в центральную секцию сайта — бургер «разлетается» на слои по мере скролла (exploded view). Мне нужен премиальный, высококачественный вид, далёкий от типичного фастфуд-дизайна.
Файлы в проекте:
-
landing.md — полное ТЗ с текстами, структурой страницы и описанием секций. Следуй ему.
-
scroll-animation-config.md — конфигурация scroll-анимации: пайплайн, параметры canvas, предзагрузка кадров, логика скролла. Используй как техническую спецификацию.
-
video.mp4 — исходное видео с анимацией бургера. Из него нужно извлечь кадры для scroll-анимации.
-
logo.png — логотип для хедера.
Техстек:
-
Next.js
-
Tailwind CSS
Важно: Для извлечения кадров из видео нужен FFmpeg. Если не установлен — сначала установи его. Конвертация video.mp4 → секвенция кадров WebP описана в scroll-animation-config.md»
ВАЖНО! Названия файлов должны совпадать с названиями в промпте.
Добавляю всё это в 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) сильно ускоряет процесс, но работает лучше всего в связке: один генерит визуал, второй — код, а третий помогает отлаживать результаты.
-
Самый быстрый путь к вау-эффектам — комбинация: референс → ИИ-разбор → доработка → готовый код.
Сложные анимации больше не повод для войны в чате. Теперь это просто ещё один инструмент, которым можно пользоваться быстро и с удовольствием.
Автор: tim_kate1010
