Масса и инерция
Панели и карточки имеют расчётную массу. Тяжёлый элемент разгоняется медленнее и дольше — это читается как «плотность», а не «глитч».
Разбор · UI-анимации
Неощутимая роскошь микроанимаций
Как движение в интерфейсе превращает «нажатие» в прикосновение. Разбираем физику, кривые ускорения и производительность — те невидимые слои, из которых складывается тактильность премиального продукта.
4.9 / 5 · 120+ продуктовых команд · 142 компонента
Game.SRC · движок движения
Движение как материал интерфейса
Микроанимации — это не украшение, а физика. Мы проектируем перемещение, инерцию и отклик так, чтобы интерфейс ощущался собранным из реальных материалов: плотных, тёплых, предсказуемых.
60 fps · stable
142готовых компонента
01 · Физика движения
Физика движения в интерфейсах
Каждое перемещение в Game.SRC описывается не «задержкой в миллисекунды», а физикой: масса, ускорение, трение. Так экран начинает вести себя как объект с инерцией.
Время-замок
Базовый такт движения — 320 мс. Все микроанимации кратны ему: 160, 320, 480 мс. Пользователь не замечает сетку, но чувствует её ритм.
Приближение к цели
Перемещение никогда не «выстреливает» в точку. Элемент приближается с затуханием, как тело, ставящееся на стол, — без резкого конца.
02 · Отстройка
Отстройка от банальных бинарных анимаций
«Появилось — исчезло» — это язык эконом-интерфейсов. Премиальный продукт двигается иначе: состояние не переключается, а прорастает из предыдущего.
Связка состояний
Открытие карточки активов не «всплывает из ниоткуда». Она вырастает из плитки в списке, сохраняя позицию и масштаб — переход читается как одно действие.
Запрет «дёрганий»
Никаких скачков по осям X/Y в одном кадре. Движение всегда по одной траектории; если нужно два вектора — они разнесены по времени, а не суммируются.
Тактильный отклик
Нажатие даётся за 60 мс — до завершения анимации. Кнопка «сжимается» на 2 пикселя и отдаёт вес. Это имитация нажатия физической клавиши.
03 · Кривые ускорения
Настройка кривых ускорения
ease-in-out — это компромисс, который прощают только в прототипах. В готовом продукте каждая кривая подобрана под конкретную задачу и материал.
cubic-bezier(.2,.7,.2,1)базовая кривая появления
320 мсстандартный такт движения
−18%воспринимаемая «жёсткость» UI
6типов кривых в библиотеке
04 · Производительность
Оптимизация производительности
Роскошь, которая тормозит, перестаёт быть роскошью. Мы держим движение на 60 fps даже на среднем устройстве, закрывая тяжёлые операции от композитора.
Только transform и opacity
Анимируются исключительно свойства, обрабатываемые GPU. Никаких layout-скачков: width, height и margin в движении запрещены на уровне линтера.
Бюджет кадра
Суммарное время работы на одном экране — не более 400 мс. Если параллельно летят три элемента, их кривые автоматически сжимаются до 240 мс.
Уважение к prefers-reduced-motion
При системном флаге движения отключаются: состояния переключаются мгновенно, без потери информации. Роскошь не должна вредить пользователю.
Готовы дать интерфейсу ощущение прикосновения?
Запланируйте 30-минутную демонстрацию движка движения Game.SRC. Покажем кривые, тактовый ритм и производительность на вашем реальном проекте.
Вопросы
Частые вопросы
Коротко о главном — о совместимости, лицензиях и поддержке.
Компоненты и кривые движения поставляются для React, Vue, Svelte и как нативный Web-компонент. Токены анимации доступны в формате CSS-переменных, Figma-токенов и JSON для автоматической генерации.
Да. На этапе онбординга мы пересобираем слой кривых и такта движения под характер бренда — от «лёгкого и быстрого» до «плотного и взвешенного», не трогая архитектуру компонентов.
Лицензия привязана к команде, а не к продукту. Одна подписка покрывает все продукты вашей компании и включает обновления токенов, компонентов и кривых движения.
В каждый тариф входит доступ к архитектору интерфейсов, ревью новых экранов и квартальные сессии по эволюции системы. Для тарифа «Атelier» — выделенная команда.