Motion Dance
Многопользовательская танцевальная игра, где контроллер это обычная веб-камера. Ты повторяешь движения за тренером. Игра оценивает каждое движение и говорит, что именно поправить.
Играть: https://admit-hackathon.vercel.app
Нужны Chrome и веб-камера. Устанавливать ничего не нужно. Если камеры нет, открой ту же ссылку с ?demo в конце. Там танцует автотанцор.
Игра говорит на трёх языках: қазақша, русский и English. Переключатель стоит на первом экране и в лобби. Игра запоминает выбор, а при первом запуске берёт язык браузера. Подсказки во время танца тоже приходят на выбранном языке.
Демо
Полное видео на 2 минуты: docs/demo.mp4.
Запись игры от 30 сентября. Сначала лобби с кодом комнаты, потом танец вдвоем, andrew и Yernar. Видно оценки, подсказки для руки и живую таблицу очков.
Почему мы это сделали
Во время nfactorial incubator 26 мы начинали утро с короткой разминки. Кто-то включал видео в духе Just Dance, и мы пару минут двигались перед тем, как снова сесть за ноутбуки.
Мы сидим за компьютером часами. Эти минуты помогали. Захотелось превратить такой короткий перерыв в игру, в которую можно играть с друзьями.
Так появился Motion Dance для Admit Hackathon 2026, кейс Motion.
Как играть
- Открой ссылку и нажми "Включить камеру и танцевать".
- Выбери песню. Игра откалибрует тебя примерно за секунду, пока ты стоишь ровно.
- Сделай разминку из 3 поз. Она учит главному правилу. Танцуй как в зеркале.
- Танцуй одну песню. Около минуты, от 48 до 64 движений, примерно одно движение в такт.
- После каждого движения видишь оценку и подсказку по самой неточной части тела. В конце очки, звезды, комбо, точность по частям тела и рекорды на этом устройстве.
Чтобы играть вместе, один человек создает комнату и получает код из 6 цифр. До 4 игроков заходят с телефонов или компьютеров и танцуют одну песню одновременно. Все видят живую таблицу очков. На широком экране рядом с тренером танцуют аватары других игроков. Чужой промах видно сразу, аватар вздрагивает.
Главная идея
Камера вместо джойстика.
Учить контроллер не нужно, покупать ничего не нужно. Встань в 1,5 до 2 м от камеры, чтобы в кадре были голова, плечи и разведенные в стороны руки. Можно играть сидя. Важнее всего руки и наклон корпуса.
Отличие в режиме ошибки. Обычные танцевальные игры пишут "мимо" и идут дальше. Наша превращает промах в инструкцию.
Ты видишь "Левую руку выше", "Согни правую руку в локте" или "Держи левую руку в кадре". Рядом большая стрелка показывает, куда двигаться, а полоса показывает, насколько близко ты к цели. В углу есть призрак цели в окне камеры. Он рисует, где должны быть руки. Зеленый значит совпало, желтый значит близко, красный значит мимо.
Как устроена игра
TypeScript, Vite, Vitest, MediaPipe Tasks Vision 1.0.1 Pose Lite, Three.js, PeerJS. Фреймворков для интерфейса нет.
Поза это src/pose. Кадр с веб-камеры идет в MediaPipe Pose Landmarker, GPU с откатом на CPU. Код превращает точки в углы, измеренные в ширинах плеч, поэтому расстояние до камеры не меняет оценку. Точки сглаживаются, задержка камеры около 150 мс компенсируется сдвигом окон.
Правила это src/dance. Там 25 движений, записанных как целевые углы рук, локтей, наклона и приседа. Каждое движение оценивается наполовину по средней ошибке и наполовину по худшей части, поэтому одна плохая рука не прячется за три точные. Полный балл в пределах 18 градусов, ноль от 50 градусов. Оценки perfect от 0.85 за 100 очков, good от 0.65 за 70, ok от 0.4 за 40, иначе miss. Звезды на 20, 40, 60, 75 и 90 процентах.
Мультиплеер это src/multiplayer. Браузеры соединяются напрямую по WebRTC через бесплатный публичный брокер PeerJS. Своего сервера нет. Каждый игрок шлет позу как 6 чисел 10 раз в секунду. Этого хватает, чтобы оживить удаленные аватары.
Музыка это src/audio. Шесть песен синтезируются в браузере, аранжировки наши. Седьмая карточка это свой файл MP3, M4A, WAV или OGG. Файл остается на устройстве. Код находит темп и первую долю и ставит движения в такт, до 90 секунд. Народные и классические мелодии в общественном достоянии, аранжировки наши.
Тренер это Michelle из Mixamo в том виде, как она лежит в примерах three.js. Файла нет в гите. scripts/fetch-models.mjs скачивает его при первом pnpm dev или pnpm build. Аватары других игроков это три персонажа из коллекции 100 Avatars студии Polygonal Mind: Хуанита, Мальчик-улитка и бабушка Эухения. Коллекция выложена под лицензией CC0, ее можно свободно использовать и публиковать, поэтому сжатые модели лежат в public/avatars/. pnpm import:avatars заново скачивает исходники и сжимает текстуры. Их же можно купить в магазине за монеты: Хуанита стоит 100, Мальчик-улитка 150, бабушка Эухения 200, Мишель бесплатна. Кроме них в магазине ещё 272 персонажа той же коллекции, от 100 до 300 монет. pnpm import:catalog проверяет каждого из 300 персонажей как танцора и рисует ему портрет. В репозитории лежат только портреты, а модель скачивается из Arweave, постоянного хранилища коллекции, когда игрок выбирает персонажа. Персонажей со страшным или неподходящим для детей видом в магазине нет. Выбранный персонаж танцует на сцене вместо тренера, и друзья в комнате видят тебя им же. Эти персонажи сохраняют свои цвета, из одежды на них надевается только шапка. Если модель не загрузилась, аватаром становится копия тренера в другой одежде. Анимация наша везде. Код ставит кости по тем же целевым углам, по которым идет оценка. Если модель не загрузилась, танцует встроенная мультяшная фигура.
Распознавание, судья и смена экранов написаны чистыми функциями вида состояние плюс вход дает новое состояние. Тесты проверяют, что точное движение получает perfect, любое чужое не выше ok, попадание в долю с задержкой 150 мс все равно дает perfect, а подсказки называют нужную руку и угол.
Структура проекта
src/pose камера, трекер MediaPipe, жесты, генератор поз для тестов
src/dance 25 движений, судья с подсказками, окна по времени, песни
src/app порядок экранов, разбор после песни, рекорды по песням
src/stage тренер на Three.js, одежда, шапки, темы под каждую песню
src/audio синтезатор, аранжировки, поиск темпа для своих файлов
src/ui лобби, HUD, пиктограммы, окно камеры с призраком цели, переключатель языка
src/i18n словари на казахском, русском и английском
src/multiplayer коды комнат, WebRTC транспорт, синк позы 10 Гц
tests тесты Vitest для судьи, трекера, песен и сценария
Детали палитры и компонентов в DESIGN.md. Логика экранов в PRODUCT.md.
Запуск
Нужны Node 22 или новее и pnpm. Если pnpm нет, включи его через corepack enable.
pnpm install
pnpm dev # http://localhost:5173
pnpm test # тесты судьи, трекера и сценария
pnpm build # сборка в dist/
При первом открытии браузер качает MediaPipe Pose Lite с wasm движком, около 17 МБ. При первом dev или build качается модель тренера, 3,3 МБ, в public/models.
Камера работает только на localhost или https. Проверяли в Chrome. Firefox и Safari пока не проверяли.
Режим без камеры:
# открыть http://localhost:5173/?demo
# E опускает левую руку, чтобы увидеть подсказку
# W поднимает руку, чтобы начать заново
# A и D наклоняют корпус, чтобы выбрать песню на итогах
Проверка двух устройств: запусти pnpm dev, потом pnpm e2e:multiplayer. То же против живого сайта через BASE=https://admit-hackathon.vercel.app/ pnpm e2e:multiplayer.
Деплой на Vercel из main. Каждый пуш гоняет тесты и сборку в .github/workflows/ci.yml.
vercel link
vercel build --prod
vercel deploy --prebuilt --prod
Команда
Aibar Yerzhuman и Yernar Merkhanov. Два разработчика. К хакатону собрали игру, распознавание, сцену и мультиплеер.
Контекст хакатона
Admit Hackathon 2026, кейс Motion, игровой трек. Весь код игры написан после старта 28 сентября 2026. Ранний прототип раннера остался в истории коммитов. То, что судьи видят по живой ссылке, собирается из этого репозитория.
