// продукт студии · Daily Bandit

Рандомайзер для команды: кто сегодня ведёт ежедневную планёрку

Daily Bandit выбирает ведущего дейлика жребием. Список команды вводится один раз, дальше — четыре режима на выбор: трёхмерная слот-машина, колесо фортуны, гонка и турнир на кубиках. Сервис работает в браузере, без регистрации.

тип
Собственный продукт
для кого
Команды с ежедневными созвонами
направления
Веб-приложения · 3D в браузере
Daily Bandit: трёхмерная слот-машина с именами участников на барабанах, рядом список команды, настройки и история ведущих
слот-машина: два барабана совпали, третий дотягивает до линии · команда вымышленная
01 / задача

Каждое утро один и тот же вопрос

Ежедневная планёрка длится недолго, и её начало часто уходит на выбор ведущего. Знакомые способы работают плохо:

  • ведёт тот, кто первым включил микрофон, — то есть обычно одни и те же люди;
  • очередь по списку сбивается после первого отпуска или больничного;
  • «давайте случайно» упирается в вопрос, чем кидать жребий;
  • обычный генератор чисел не помнит, кто вёл вчера.

Daily Bandit закрывает этот вопрос одним нажатием. Жребий равновероятный, вчерашний ведущий в нём не участвует, а розыгрыш идёт на общем экране и занимает несколько секунд.

02 / один розыгрыш

Сначала жребий, потом барабаны

слот-машина · пятница, участников 8

Джекпот. Сегодня дейлик ведёт Тимур

  1. 1. ЖребийРычаг нажат — генератор случайных чисел браузера сразу выбирает ведущего. Барабаны ещё стоят.
  2. 2. Прокрутки без джекпотаАвтомат делает от одной до десяти прокруток, чаще две-три. Все, кроме последней, заканчиваются без трёх одинаковых имён.
  3. 3. Два барабана совпалиНа последней прокрутке первые два барабана встают на имя ведущего. Линия краснеет, камера приближается, третий барабан тормозит в несколько раз дольше.
  4. 4. ДжекпотТри одинаковых имени на линии, фанфары и конфетти. Имя ведущего с датой и временем записано в историю.

Схема повторяет порядок событий в слот-машине. Сама машина в сервисе трёхмерная — она на снимках ниже.

03 / режимы

Четыре режима на одну команду

ВераВераГлеб
пара — ещё не джекпот

Слот-машина

Три барабана с именами и рычаг. До последней прокрутки на линии часто выпадает пара — «почти».

ведущий выбран до старта

Колесо фортуны

У каждого участника сектор своего цвета. Колесо делает пять оборотов и останавливается сектором ведущего под указателем.

ведущий выбран до старта
  1. Алина
  2. Тимур
  3. Вера
  4. Глеб

Гонка

Дорожка на каждого участника. Ведущий добегает до финиша, остальные останавливаются раньше — на 72–92 % дистанции.

ведущий выбран до старта
АлинаВераГлебНика
ничья — переигровка между 2
АлинаГлеб

Кубик

Каждый бросает кубик, дальше проходит наибольшее число. При ничьей лидеры перебрасывают между собой, пока не останется один.

ведущего определяют броски
04 / честность

Почему жребий честный

история ведущих за неделю · даты условные
  1. пнВера
  2. втЗахар
  3. срАлина
  4. чтОлег
  5. птТимур
Не повторять вчерашнего ведущего
  1. Алина
  2. Тимур
  3. Вера
  4. Глеб
  5. Марьяна
  6. Олегвёл в четверг — пропускает
  7. Захар
  8. Ника

в жребии · шанс каждого

Шансы равные
Весов и «везучих» нет: длина полоски у всех одна. Случайное число даёт Web Crypto API браузера; значения, которые создали бы перекос, отбрасываются.
«Вчерашний» — последний в истории
Настройка убирает из жребия того, кто вёл в прошлый раз, даже если прошлый раз был час назад. Она включена по умолчанию и выключается одним флажком — тогда в жребии снова все.
Анимация исход не меняет
В слот-машине, колесе и гонке ведущий выбран до начала движения, экран только показывает результат.
Кубик устроен иначе
Заранее выбранного ведущего нет. Каждый бросок — отдельное случайное число от 1 до 6, итог складывается из бросков.
05 / что ещё внутри

Мелочи, из которых складывается сервис

  • Команда вводится один раз, по Enter. Каждому участнику сервис сам назначает эмодзи и цвет, повторы имён не принимает.
  • Список общий для всех четырёх режимов, история — тоже. Для пробы есть демо-команда.
  • История хранит последние 50 ведущих с датой и временем и очищается одной кнопкой.
  • Щелчки барабанов, гул и фанфары синтезируются в браузере. Звук отключается кнопкой.
  • Интерфейс переключается между русским и английским.
  • Если в системе включено «уменьшить движение», розыгрыш идёт короче: колесо делает один оборот вместо пяти.
  • Регистрации и входа нет. Имена и история лежат в браузере пользователя.
06 / как выглядит

Экраны Daily Bandit

Команда на снимках вымышленная, даты в истории условные.

Главная страница Daily Bandit: заголовок «Кто ведёт дейлик сегодня?» и карточки четырёх режимов
Главная: четыре режима на выбор.
Режим «Слот-машина»: трёхмерные барабаны с именами участников и рычаг
Слот-машина: барабаны, рычаг и панели.
Слот-машина в момент, когда два барабана совпали, а третий ещё вращается
Два барабана совпали, третий дотягивает.
Окно «Джекпот» с именем ведущего дейлика поверх слот-машины
Джекпот: ведущий выбран и записан в историю.
Режим «Колесо фортуны» с восемью цветными секторами участников
Колесо фортуны: сектор на участника.
Режим «Гонка»: восемь участников бегут по дорожкам к финишу
Гонка: забег к финишной черте.
Режим «Кубик»: первый раунд, ничья и переигровка между лидерами, сверху имя победителя
Кубик: ничья и переигровка лидеров.
Страница управления участниками: список команды, настройки и история ведущих
Участники, настройки и история.
Страница «О проекте» с блоком о том, как выбирается победитель
О проекте: как устроен жребий.
Главная страница Daily Bandit на экране телефона
Главная на телефоне.
Слот-машина Daily Bandit на экране телефона
Слот-машина на телефоне.
Турнир на кубиках на экране телефона: два раунда и имя победителя
Кубик на телефоне.
07 / кому подойдёт

Командам с дейликами — и тем, кому нужна интерактивная механика

Сам сервис подойдёт любой команде, которая каждый день выбирает ведущего, докладчика или дежурного. Он открыт по ссылке, пользоваться им можно сразу.

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

  • розыгрыш или колесо призов для акции и мероприятия;
  • игровой элемент в интернет-магазине или программе лояльности;
  • интерактивный экран для выставки или шоу;
  • трёхмерная сцена на сайте, которая работает без установки приложений.
08 / под капотом
стек: React, TypeScript, Vite · Three.js, React Three Fiber · Zustand
жребий: Web Crypto API, равные шансы без смещения по модулю
звук: Web Audio API, синтез в браузере без звуковых файлов
данные: localStorage в браузере пользователя, без серверной базы
доступность: учёт настройки «уменьшить движение», видимый фокус с клавиатуры

Нужна интерактивная механика для сайта или мероприятия? Напишите в Telegram

Расскажите, что должно происходить на экране и кто будет этим пользоваться, — предложим, как это сделать в браузере.

Написать в Telegram