Анимация

Помогать понимать состояние и следующий шаг, поддерживать характер бренда. Отделяем функциональные переходы интерфейса от выразительной анимации бренда.

В панели есть «Как в системе», «Меньше» и «Больше». Базовые токены переходов — 180/220/280 мс; в усиленном режиме — 240/300/380 мс. Раскрытие секций длится 160 или 240 мс. Это короткая обратная связь, без постоянных декоративных циклов.

«Меньше» отключает движение и переходы. Системный prefers-reduced-motion имеет приоритет во всех режимах, включая «Больше». Текст не появляется через снижение прозрачности: читаемость сохраняется в ходе раскрытия.

Logo Motion 1.0: знак раскрывается направленным скольжением за 1,2 с; надписи появляются следом. В шапке всех страниц появление проигрывается один раз при первом посещении в текущей вкладке, затем включается постоянный шестисекундный цикл со сноубордистом. Перезагрузка сразу запускает цикл. Навигация доступна сразу, место под знак зарезервировано. Уменьшенное движение показывает статичный знак.

В финальном промоблоке — квадратная композиция с 6-секундным циклом и доступной кнопкой паузы. Цикл останавливается за пределами экрана и в скрытой вкладке. Ручная пауза сохраняется при возвращении. При уменьшенном движении показывается статичный знак.

Движение не скрывает информацию, не мешает управлению и не запускает лишние циклы. Используйте действующие токены; проверяйте мобильный сценарий и уменьшенное движение при изменении компонента.

Не используйте параллакс и мигание. Цикл Logo Motion — управляемый элемент промоблока: его можно остановить, он не запускается при уменьшенном движении. Информация и действия доступны сразу.

Ключевые позы: исходная → первый поворот → смена канта → второй поворот → исходная. Суставная модель связывает голову, плечи, корпус, таз, руки, бёдра, голени и доску. Стопы закреплены в координатах доски; колени решаются по длинам ног. Движущиеся контурные маски восстанавливают цветные области за силуэтом.

Цикл бесшовный: исходная и финальная позы совпадают, масштаб возвращается к 100%. Небольшая снежная пыль остаётся внутри знака. Буквы и их пропорции не меняются; общий масштаб увеличивается максимум до 100,6%.

Пять состояний: статичное, появление 0,48 с, цикл 3,2 с, отклик 0,56 с и исчезновение 0,28 с. Небольшой жест смысловой детали поддерживает действие: доставка скользит, экипировка поднимается, сноуборд поворачивается. Контур остаётся простым, акцент плавно меняет интенсивность. Критичный красный сохраняет значение.

Библиотека в разделе «Графика и иконки» содержит поиск, выбор состояний и цвета, воспроизведение, паузу, перемотку, шаг по кадрам и скачивания. Только выбранный образец запускает цикл; при уменьшенном движении он статичен. Экспортированный SVG содержит тот же таймлайн и системный статичный вариант.

Исчезновение длится 0,6 с и заканчивается пустым прозрачным кадром. Заставка 7,8 с соединяет появление, полный цикл и исчезновение. Используйте прямой альфа-канал; не обрезайте охранное поле. Видеофайлы и архивы скачиваются по запросу и не загружаются автоматически.

Предпросмотр поддерживает паузу, повтор, перемотку и шаг по кадрам. При уменьшенном движении доступны перемотка и скачивания. Для автономного SVG сохраняется статичный вариант через prefers-reduced-motion.

В навигации и рабочих формах смысл доступен до анимации. Постоянные циклы используются в специально выделенном предпросмотре или промоблоке с паузой; несколько одновременно движущихся образцов не запускаются.

Не используйте длительность анимации как искусственную задержку подтверждения заказа. При скрытой вкладке и вне экрана воспроизведение останавливается; возвращение не отменяет ручную паузу. Сайт не включает звук без действия пользователя.