Промпты для анимации сайта: готовый набор

Коротко

Промпт на анимацию не работает как «сделай красиво». Работает промпт, в котором заданы четыре вещи: стек (CSS, GSAP или Motion), список секций с типом движения, числовые рамки (длительность, задержка, easing) и запреты — что анимировать нельзя. Всё остальное агент придумает сам, и придумает плохо.

Ниже — один мастер-промпт, который вставляется в Claude Code, Cursor, Lovable или v0 целиком, и семь коротких промптов на отдельные приёмы: hero-появление, scroll-reveal, stagger в списках, hover на карточках, липкая секция, счётчики и 3D-блок. Их можно докидывать в уже собранный сайт по одному.

Главное правило, которое экономит часы правок: анимируйте только transform и opacity — это единственные свойства, которые не запускают пересчёт раскладки (web.dev). Второе правило: в промпте всегда должна быть строка про prefers-reduced-motion, иначе агент про доступность не вспомнит никогда. Третье: не прячьте под opacity: 0 заголовок первого экрана — он у вас, скорее всего, LCP-элемент, и красивое появление превратится в медленную загрузку.

Зачем это нужно

ИИ-агент по умолчанию делает статичный сайт: блоки, отступы, кнопка. Попросишь «добавь анимации» — получишь три случайных fade-in с длительностью в секунду, дёргающийся hover и параллакс, который на телефоне превращается в кашу.

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

Продавать эти решения в виде библиотеки промптов — рабочая бизнес-модель: за неё просят по $239–359 разово. Что там внутри и где такая библиотека не тянет — в обзоре MotionSites, короткая справка — в карточке арсенала. Но структура промпта в них не секретная, и написать свой под собственный стиль — час работы один раз.

Готовый пример целиком

Вставляйте как первое сообщение в пустой проект. Русский текст агенты разбирают нормально; термины вроде stagger, easing, scroll-reveal оставляйте английскими — так агент точнее попадает в реальные API.

Собери одностраничный лендинг для [ЧТО ЗА ПРОДУКТ] и добавь анимации по правилам ниже.

СТЕК
- Только HTML, CSS и минимум JS. Никаких анимационных библиотек.
- Появление при скролле — через IntersectionObserver, не через слушатель scroll.
- Никаких зависимостей, которых нет в package.json.

СЕКЦИИ И ДВИЖЕНИЕ
1. Hero: заголовок и подзаголовок видны сразу, без анимации появления.
   Двигается только фоновый градиент — медленно, 12s, infinite, transform.
2. Логотипы клиентов: горизонтальная бесконечная лента, 30s linear, пауза при hover.
3. Фичи (3 карточки): scroll-reveal снизу вверх, translateY(24px) → 0 + opacity 0 → 1,
   stagger 80ms между карточками, срабатывает один раз.
4. Как это работает (4 шага): та же анимация, но stagger 120ms.
5. Цены: карточки без появления, только hover — scale(1.02) и усиление тени.
6. FAQ: аккордеон с плавным раскрытием по высоте, 250ms.
7. Футер: без анимаций.

ЧИСЛА
- Длительность появления: 400ms. Hover: 200ms.
- Easing: cubic-bezier(0.22, 1, 0.36, 1) для появления, ease-out для hover.
- Смещение при появлении: не больше 24px.
- Порог IntersectionObserver: 0.15, rootMargin: "0px 0px -10% 0px".

ЗАПРЕТЫ
- Анимировать разрешено только transform и opacity. Не трогать width, height, top, left, margin.
- Не анимировать заголовок hero: это LCP-элемент.
- Никакого параллакса и scroll-jacking.
- Не более двух одновременно движущихся элементов на экране.
- Ничего не должно смещать раскладку после загрузки: место под элементы резервируй заранее.

ДОСТУПНОСТЬ
- Все анимации оберни в @media (prefers-reduced-motion: no-preference).
- В блоке @media (prefers-reduced-motion: reduce) элементы сразу в конечном состоянии, без переходов.

ПРОВЕРКА
- После сборки перечисли все анимированные элементы таблицей: секция, свойство, длительность, триггер.

Последний блок — самый полезный. Таблица в ответе агента сразу показывает, где он нарушил правила: если в колонке «свойство» появились height или margin, вы это увидите до того, как откроете сайт.

Разбор по частям

Мастер-промпт состоит из шести блоков, и каждый закрывает конкретный способ агента напортачить.

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

1. Hero без вреда для скорости. «В hero не анимируй текст и картинку. Добавь движение только фону: два размытых цветных пятна, transform: translate по кругу, 15s, infinite, ease-in-out, разные фазы. Никаких filter: blur() в анимации — блюр задай статикой».

2. Scroll-reveal. «Сделай появление секций при скролле через IntersectionObserver: opacity 0→1 и translateY(24px)→0 за 400ms, порог 0.15, класс добавляется один раз и не снимается при обратном скролле».

3. Stagger в списке. «Пункты списка появляются друг за другом с задержкой 80ms. Задержку задай через CSS-переменную --i в инлайн-стиле элемента, не отдельным классом на каждый пункт».

4. Hover на карточках. «При наведении карточка: scale(1.02), тень плотнее, длительность 200ms, ease-out. Возврат — та же длительность. Добавь @media (hover: hover), чтобы на тач-устройствах эффект не залипал».

5. Липкая секция. «Сделай секцию position: sticky на высоту 200vh: пока она держится, три текстовых блока сменяют друг друга по opacity. Не перехватывай прокрутку, скорость скролла не меняй».

6. Счётчики. «Числа в блоке метрик считаются от 0 до целевого значения за 1.2s, запуск — при первом попадании в вьюпорт. Зарезервируй ширину под финальное число, чтобы блок не прыгал».

7. 3D-блок. «Добавь карточке наклон за курсором: perspective: 1000px, максимум 6 градусов по каждой оси, возврат в 0 за 300ms при уходе курсора. Только transform, обработчик с requestAnimationFrame, на тач-устройствах отключить».

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

Чего в него класть не надо

Слова «современный», «премиальный», «как у Apple». Агент их понимает как разрешение фантазировать. Вместо этого — числа и запреты.

Просьбу «добавь анимации везде». Хорошая страница анимирует три-четыре места. Всё остальное должно стоять неподвижно, иначе движение перестаёт что-либо значить.

Требование параллакса и scroll-jacking. Перехват прокрутки ломает поиск по странице, клавиатурную навигацию и инерцию на трекпадах. Если очень нужно — только на одну секцию, и с обычной прокруткой на мобильных.

Скролл-анимации на чистом CSS без оговорок. animation-timeline: view() выглядит элегантно, но MDN до сих пор помечает свойство как не-Baseline: поддержка около 84%, Chrome и Edge с версии 115, Safari с 26.0, Firefox с 155 (caniuse). Для лендинга приемлемо, для корпоративного сайта — пишите в промпте «используй IntersectionObserver, не animation-timeline».

Библиотеку «на всякий случай». Если анимаций пять штук, GSAP не нужен. Если их тридцать и они связаны между собой по таймлайну — нужен, и тогда пишите прямо: «используй GSAP и ScrollTrigger». С 2025 года GSAP со всеми плагинами бесплатен (gsap.com), а для React-проектов есть Motion с бесплатным ядром.

Ссылку на видео-фон без бюджета. Просите видео в hero — сразу ставьте рамку: «постер-картинка обязательна, видео подгружается после load, вес файла не больше 1.5 МБ». Иначе первый экран будет грузиться на мобильном интернете неприлично долго.

Как поддерживать в актуальном виде

Промпт — такой же артефакт проекта, как конфиг. Держите его в файле рядом с кодом (prompts/animation.md) и правьте по одному правилу за раз.

Практика, которая работает: каждый раз, когда вы что-то доправляете за агентом руками, спрашивайте — это разовая правка или правило? Если правило, дописывайте строку в блок «Запреты». Через три-четыре проекта у вас будет промпт, который попадает с первого раза, потому что в нём накоплены именно ваши грабли.

Раз в пару месяцев проверяйте два пункта: не изменилась ли поддержка animation-timeline (тогда часть JS уходит в CSS) и не поменялись ли дефолты вашего билдера. И держите в промпте раздел «Проверка» — он единственный, кто ловит регресс без вашего участия.

Как это встраивается в полный цикл сборки сайта — в общем гайде и в разборе про лендинг нейросетью.

Частые вопросы

Промпты работают в Lovable и v0 так же, как в Claude Code?

Не так же. Claude Code и Cursor работают с файлами и выполняют запреты буквально — там мастер-промпт отрабатывает лучше всего. Lovable и v0 сильнее навязывают свои шаблоны: часть числовых параметров они переопределят. Для них дробите промпт: сначала структура страницы, потом отдельным сообщением блок анимаций.

Почему нельзя анимировать появление заголовка в hero?

Потому что этот заголовок обычно и есть самый крупный элемент первого экрана, по которому считается LCP. Если он стартует с opacity: 0, метрика фиксируется позже — по факту вы платите за красивое появление скоростью загрузки. Хотите движение в hero — двигайте фон, а не текст.

Что делать, если агент всё равно анимирует height и margin?

Просите переписать точечно: «замени анимацию height на transform: scaleY() с transform-origin: top, а анимацию margin — на translateY». Общая формулировка «оптимизируй анимации» почти всегда игнорируется, потому что агенту не за что зацепиться. И держите в промпте блок «Проверка» с таблицей — тогда нарушение видно сразу.

Обязательно ли добавлять prefers-reduced-motion?

Да, и это одна строка. Настройка «уменьшить движение» есть в macOS, iOS, Windows и Android, браузеры отдают её как медиа-признак с января 2020 года (MDN). Для части людей агрессивные параллаксы вызывают физическое недомогание. Плюс это же самый дешёвый способ проверить сайт: включили «уменьшить движение» — всё должно остаться читаемым и работающим.

Стоит ли покупать готовую библиотеку промптов вместо своей?

Если вы делаете лендинги на потоке и вам нужен чужой визуальный вкус — да, это экономит часы. Если вы собираете один-два сайта в год — нет: мастер-промпт выше плюс ваши правки закрывают ту же задачу бесплатно. Промежуточный вариант: взять бесплатные промпты из такой библиотеки, разобрать их структуру и собрать свой шаблон. Бесплатные источники компонентов и промптов собраны в разборе аналогов MotionSites.