Design System / Foundations / Motion
Motion
Calm, brief, single-axis. Анимация в AIST.tech — функция, не спецэффект. Объясняет состояние, маркирует ввод, ведёт взгляд — и уходит.
Easing
Один кастомный curve — cubic-bezier(0.2, 0, 0, 1). Быстрый старт, мягкий финиш.
Линейный easing — только для loading-индикаторов.
--ease-standarddefault
linearindicators only
Длительности
Три значения. Fast — мгновенная реакция (hover, focus). Base — дефолт. Slow — смена состояния, fade-in контента.
--duration-fast
120 ms
Hover, focus, активные состояния. Мгновенный feedback.
--duration-base
200 ms
Дефолт. Кнопки, карточки, цвет/transform. 90% переходов.
--duration-slow
320 ms
Entry-анимации (fade+up), смена слоя, drawer/sheet.
Канонические паттерны
Четыре жеста, которые покрывают 95% случаев. Не изобретать новые без нужды.
Hover lift
translateY(-2px) + shadow-hover, 200 ms. Affordance: «это кликабельно».Card hover
Стратегический аналитик
Наведи курсор
Тот же приём, мягче. Тень едва проявляется — карточка должна оставаться плоской.
Fade + up entry
Появление при скролле.
opacity 0→1 + translateY(8px→0), 320 ms, stagger 80 ms.Press feedback
active:translateY(1px). Без flash, без ripple. 120 ms.Правила
| Правило | Объяснение | НЕ делать |
|---|---|---|
| Single-axis | Анимация по одной оси: либо Y (lift), либо opacity, либо color. Не комбинируем X+Y+rotate+scale. | Bounce, spring, ripple, parallax, zoom-in. |
| Brief | Hover — 120–200 ms. Entry — 320 ms максимум. Длиннее — воспринимается как лаг. | duration: 600ms «для плавности». |
| Always animate transform/opacity | Анимировать transform и opacity — GPU-композит, 60 fps. |
Анимировать top/left/width/height/margin — layout-trash. |
| Hover = affordance | Если есть hover-эффект, объект ОБЯЗАН быть кликабельным. Hover — обещание. | Hover-lift на неинтерактивных карточках. |
| Respect prefers-reduced-motion | Все entry-анимации обёрнуты в @media (prefers-reduced-motion: no-preference). |
Игнорировать system preference — accessibility-фейл. |
| One easing | --ease-standard везде. Линейный — только индикаторы прогресса. |
Mix ease-in-out, ease-out, custom curves. |
Где анимация запрещена
- Брендовый logo. Не вращается, не пульсирует, не «дышит».
- Hero-typography. Появляется fade-up один раз на скролле — и всё.
- Numbers and metrics. Не считаются от 0 до значения. Это «casino-feel», запрещено.
- Иконки в статичном UI. Не вращаются на hover, не меняют форму.
- Background gradients. Не «движутся» (animated mesh, breathing blobs).
- MI Analyst data. Таблицы и числа меняются мгновенно — анимация скрывает изменение состояния, что опасно для аналитики.
Принципы
- Анимация объясняет. Если жест ничего не коммуницирует — убрать.
- Calm institutional authority — не дёргается. Spring и bounce звучат как «стартап-вайб», у нас другой регистр.
- Скорость — часть голоса. Быстрые переходы (200 ms) читаются как «профессионально и уверенно».
- Тишина — тоже движение. Не каждое состояние нужно анимировать. Иногда мгновенный switch — честнее.
DO
Hover на кнопке: translateY(-2px) + shadow, 200 ms.
Появление карточек при скролле: fade+up, 320 ms, stagger 80 ms.
DON'T
Spring-overshoot на появлении модала.
Counting animation на «99,9% Uptime» — читается как маркетинг-шум.