Хрум2D-персонаж · 2026
Кабанчик на собственном риге, который живёт на сайте и в Lottie
Персонаж на SVG-риге: состояния, действия, мимика и реакции на курсор. Циклы запекаются в Lottie для приложений и интерфейсов.
На русском и английском
Персонаж отвечает человеку
Следит за курсором глазами и головой, на поглаживание и касание пятачка отвечает своей реакцией.
Восемь состояний без рывков
Ожидание, шаг, галоп, прыжок, любопытство, радость, сон и удивление. Переходы сглажены, копыта не скользят по земле.
Позу можно поправить, а не перерисовать
Рисунок лежит в одном SVG-файле, риг собирает его в иерархию узлов, ноги работают на обратной кинематике.
49 чисел описывают позу
Те же циклы работают в Lottie
Скрипт запекает циклы рига в стандартный Lottie JSON, его проигрывает обычный плеер lottie-web.
41 КБ цикл ожидания в gzip
Готов к работе в продукте
Загрузка, уведомление, пустой экран, помощник и страница ошибки уже показаны с Хрумом.
Как устроено
TypeScript и Canvas, без внешних запросов.
- Рисунок
- Один редактируемый SVG со слоями, градиентами и точками вращения.
- Движение
- Пружины ушей, хвоста и головы, моргание и взгляд поверх основной позы.
- Скорость
- Лес рисуется в фоновом потоке, разделы вне экрана не рисуются.
- Проверки
- Числовые проверки скольжения копыт и резких скачков позы.
Познакомьтесь с Хрумом