Журнал сеньора вайбкодера уроки из опыта, заметки и инсайты

Личный публичный архив мыслей: оформленные как уроки наблюдения, рефлексия, идеи и недельные сводки.

RSS
← Назад к ленте

Как помодоро-таймер случайно стал игрой

hero

Иногда задача кажется слишком простой, чтобы из неё могла вырасти отдельная история. «Сделать помодоро-таймер» — что тут развивать? Экран, 25 минут, кнопка старт, перерыв, сброс. Таких приложений сотни.

Но именно с такими простыми задачами часто происходит самое интересное: сначала делаешь инструмент, потом начинаешь подкручивать ощущение, добавляешь маленькую деталь за деталью — и в какой-то момент понимаешь, что это уже не просто таймер. Это маленькая игровая площадка, которую хочется развивать дальше.

Так у меня получилось с «Пиксель Фокусом».

Начиналось всё как обычный таймер

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

Но почти сразу стало понятно, что обычный таймер скучный. Он выполняет функцию, но не создаёт желания возвращаться. А помодоро — это ведь не только про отсчёт времени. Это про ритуал: сел, включил, вошёл в режим, прошёл кусок работы, получил маленькое завершение.

Отсюда и появился ретро-стиль. Не «деловая продуктивность» с белыми карточками и стерильными графиками, а пиксельная игра из 90-х: тёмный экран, красная панель, крупные цифры, шум ЭЛТ, сканлайны, ощущение старого монитора. Не потому что так практичнее, а потому что так приятнее находиться внутри процесса.

Таймер превратился в уровень

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

Помодоро обычно показывает проценты, круговую диаграмму или полоску. У меня это стало похоже на маленький уровень: четыре чекпоинта — работа, отдых, работа, длинный отдых. Между ними идёт персонаж. Сессия перестала быть просто числом 25:00; она стала маршрутом.

Это сильно меняет ощущение. Когда видишь не только оставшееся время, но и то, где ты находишься внутри цикла, задача воспринимается не как бесконечное «надо поработать», а как прохождение короткой дистанции. Есть старт, есть этапы, есть финиш.

Вроде мелочь. Но именно такие мелочи и делают интерфейс живым.

Потом появились картриджи

Следующий слой — пресеты. Их можно было оставить обычным выпадающим списком: классика, глубокий фокус, спринт, учёба. Но в ретро-логике это уже просилось не как настройки, а как картриджи.

У каждого режима своя длительность и свой характер:

  • «Классика» — привычные 25 / 5 / 15.
  • «Спринт» — короткие рывки, когда нет настроя.
  • «Учёба» — длинные сессии и длинные перерывы.
  • «Глубокий фокус» — режим для большой задачи, когда нужно надолго провалиться в работу.

И снова это не только функция. Это выбор режима игры. Как будто перед стартом ты вставляешь другой картридж и заранее задаёшь себе темп.

Герои внезапно изменили масштаб идеи

Потом появились герои. Сначала это можно было воспринимать как украшение: пусть по карте ходит не абстрактная точка, а персонаж. Но когда персонажей стало много, приложение опять поменяло масштаб.

Сейчас внутри уже есть каталог пиксельных героев: кодер, обычные персонажи, ребёнок с шариком, рыцарь, кот, робот и другие. У каждого свой спрайт, своё движение, своё настроение. Герой появляется на карте, в превью, на отдельной вкладке.

И тут таймер начал ощущаться не как «инструмент с декоративным персонажем», а как заготовка под игру. Потому что если есть герой, сразу возникают вопросы:

  • А может ли он прокачиваться?
  • Можно ли открывать новых персонажей за завершённые циклы?
  • Должны ли у героев быть способности или просто характер?
  • Может ли рабочий день превращаться в серию маленьких забегов?

Я пока не знаю, надо ли туда идти. Но сам факт, что такие вопросы появляются, уже показателен. Обычный помодоро таких вопросов не вызывает.

Мир начал жить сам по себе

Ещё один важный слой — окружение.

В приложении не просто статичный фон. Небо меняется по реальному времени: ночь, рассвет, день, закат, сумерки. Солнце проходит дугу по небу, ночью появляется луна, звёзды проявляются и мерцают. Облака движутся по сцене. Фон приложения тоже живёт слоями, с параллаксом и звёздной прокруткой.

А потом к этому добавились события: дождь, гроза, радуга, птицы, бабочки, светлячки, метеоры, воздушный шар, самолёт, НЛО, листья, цветы. Часть событий дневные, часть ночные, тяжёлая погода меняет сцену сильнее, после дождя может появиться радуга.

И это уже совсем не похоже на «таймер с красивым фоном». Это маленький мир, который продолжает жить, пока ты работаешь. Ты не управляешь им напрямую, но он создаёт ощущение места.

Мне нравится именно эта странная смесь: с одной стороны, приложение помогает не отвлекаться. С другой — оно само становится достаточно живым, чтобы за ним хотелось наблюдать.

Звук сделал интерфейс физическим

Звуковые эффекты добавили ещё один слой. Они синтезируются прямо в браузере через Web Audio API: клики, переключение вкладок, старт, пауза, сброс, переходы фаз, завершение цикла.

Это маленькие 8-битные сигналы, но они важны. Без звука интерфейс просто меняет состояние. Со звуком он отвечает. Нажал кнопку — получил короткий пиксельный щелчок. Завершил фазу — услышал джингл. Перешёл к длинному отдыху — приложение как будто отмечает событие.

В играх это базовая вещь: действие должно ощущаться. В продуктивных приложениях про это часто забывают. А зря.

Сейчас это всё ещё помодоро, но уже не только он

Функционально приложение остаётся таймером. В нём есть фокус-цикл, произвольный таймер, пресеты, уведомления, сохранение выбранного режима и героя. Оно работает как практичный инструмент.

Но по ощущению оно уже стало чем-то шире. В нём есть:

  • маршрут вместо сухой полоски прогресса;
  • герой вместо безличного индикатора;
  • картриджи вместо обычных настроек;
  • смена времени суток;
  • случайные события;
  • звуки;
  • ЭЛТ-эффект, шум, сканлайны и VHS-полосы;
  • желание открывать вкладку не только «по необходимости», а просто потому что там приятно.

И вот на этом месте появляется новая мысль: может быть, это нужно переписать нормально на React-проекте и начать развивать уже не как однофайловую игрушку, а как отдельную игру вокруг фокуса.

Не просто «таймер с пикселями», а игровую оболочку для рабочих сессий.

Я пока не знаю, куда это приведёт

Самое честное здесь — у меня нет готового плана.

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

Пока мне не хочется насильно придумывать большую концепцию. Интереснее наблюдать, как идея сама вытягивает следующие шаги.

Это, наверное, и есть главный кайф в таких проектах. Ты начинаешь с понятной задачи, которую можно закрыть за вечер. Потом в процессе появляется стиль. Потом стиль начинает требовать механики. Потом механика начинает требовать архитектуры. И внезапно у тебя уже не задача, а маленькая вселенная, которую жалко бросать.

«Пиксель Фокус» для меня сейчас именно в этой точке. Он ещё не игра, но уже перестал быть просто таймером.

И мне любопытно, что будет дальше.