Анимации без вреда конверсии

Главные правила

• Бери рецепт целиком: html + css + js из get_motion_recipe (или motion/<slug>.json). Код — ванильный, без CDN; GSAP только если он уже есть в проекте из npm (gsap_alt). Когда GSAP или Lottie действительно нужны и как их подключать под строгий CSP — gsap-lottie.md рядом.
• Анимируются только transform, opacity, clip-path, filter. Никогда — ширина, высота, отступы, позиция: это сдвиги макета (CLS). Единственное исключение — stroke-dashoffset у тонкой SVG-линии в рецепте svg-line-draw.
• Первый экран: заголовок и кнопка видны сразу, даже без JS. Эффект появления — только на том, что НЕ является самым крупным элементом первого экрана (иначе страдает LCP).
• Обязателен @media (prefers-reduced-motion: reduce): по полю reduced_motion рецепта эффект убирается (remove), упрощается до плавного появления (soften) или остаётся (keep).
• Бесконечные анимации (лента логотипов, фон, сменное слово) — с паузой по наведению/фокусу и кнопкой паузы (WCAG 2.2.2). Без вспышек чаще 3 раз в секунду.
• Бюджет: не больше 3 одновременных анимаций на экране и один «вау-момент» на страницу. Лучше меньше, но точно.
• Анимации, привязанные к прокрутке (animation-timeline), — только внутри @supports (animation-timeline: view()) и с запасным путём на IntersectionObserver/requestAnimationFrame: в Firefox их нет. Рецепты это уже делают.
• html, body { overflow-x: hidden } замораживает CSS-шкалы прокрутки и выключает position: sticky — пиши overflow-x: clip.

1. Зачем здесь движение: проверка из 5 вопросов

Каждая анимация отвечает хотя бы на один вопрос. Не отвечает — не ставь: «пусто смотрелось» не причина.

2. Характер движения

90 % анимаций страницы берут характер стиля. Одна фирменная кривая на 80 % анимаций и три длительности — tokens.motion дизайн-системы (fast / base / slow).

Вход бери по ease_emphasized стиля; если его нет — cubic-bezier(.16,1,.3,1), уход — cubic-bezier(.3,0,1,1).

3. Длительность

Поправка на расстояние: путь 50px — ×0,8; 200px — ×1,3; 400px — ×1,6; весь экран — ×1,8–2,0. Уход = 65–75 % от появления. На телефоне — ×0,8 (см. раздел 7).

4. Кривая по направлению

5. Очередь и хореография

• Перехлёст: следующий шаг стартует на 60–75 % предыдущего. Исключение — текст на одном месте (смена панели, цены): перехлёст ≤ 20ms, иначе цена «двоится».
• Порядок первого экрана: надзаголовок → строки заголовка → текст → кнопка → картинка.
• Правило 1/3: одновременно движется не больше трети элементов экрана, и ни один не проходит больше трети экрана за отрезок.
• Встречное движение фона — 20–30 % от основного. После связки — 100–200ms тишины.
• Два числа не считаются одновременно (result-bars выстраивает строки в очередь ровно по длительности счёта).

6. Амплитуда

7. Телефон

• Длительности ×0,8, задержки очереди −30 %, одно-два анимируемых свойства вместо трёх.
• Без параллакса и без встречного масштаба (в рецептах уже выключены до 767px).
• Сцены с закреплением (scroll-story-steps, горизонтальные сцены) на телефоне заменяются стопкой, а не уменьшаются.
• Проверка на 390px: нет горизонтальной прокрутки, текст ошибки и подписи помещаются в строку.

8. Уменьшение движения — это дизайн, а не выключатель

• Выставляй конечное состояние: from, который не запустился, прячет контент навсегда.
• В глобальной страховке — animation-duration: .01ms, а не 0s, и animation-iteration-count: 1.
• Слушай change у matchMedia('(prefers-reduced-motion: reduce)'): настройку меняют на открытой странице.
• На тёмной теме интенсивность движения и свечения −10–20 %.

9. Производительность

• Бюджет кадра: 16,7ms при 60 Гц, 8,3ms при 120 Гц, 6,2ms при 165 Гц. Всё, что считается на каждом кадре прокрутки, — сначала все чтения, потом все записи, один requestAnimationFrame.
• Не больше 20 движущихся элементов в экране. Один наблюдатель (IntersectionObserver) на момент, а не на элемент.
• Прокрутку не слушать вне экрана: подписка через IntersectionObserver.
• Не вешать will-change на всё заранее и transition на то, что привязано к прокрутке (начинает отставать).
• Проверять при замедлении CPU ×4–6 (DevTools → Performance → CPU). Ориентир рецептов каталога: медиана кадра прокрутки 16,6ms, длинных задач нет.

10. Приёмка

• Посмотри пять раз подряд — раздражает? Нормально ли это на сотый показ (человек вернулся на страницу)? Нет — убирай или смягчай.
• В браузере (Playwright): нет ошибок в консоли; анимация доходит до конечного состояния; с emulateMedia({ reducedMotion: 'reduce' }) весь контент виден и ничего не движется; без JS контент виден; на 390px нет горизонтальной прокрутки; кадр в середине движения и в конце — глазами.
• Сдвиг макета: высота блока до и после анимации одинаковая (Lighthouse CLS < 0,1).

11. Где на лендинге что ставить

Выбирай из motion_recipes своей дизайн-системы (там же в motion_map — настройки под стиль). Не больше одного заметного приёма на секцию.

Не для рекламных лендингов: заставки и лоадеры перед контентом, покадровый canvas по прокрутке, подмена курсора, сглаженная прокрутка (Lenis, ScrollSmoother), «перемешивание» букв, морфинг SVG-путей (CSS d не работает в Safari).