Главный цвет — тот, который зовёт

На словах проект звучит почти глупо: лампа меняет цвет, когда клод-код что-то делает. Ну да, ещё одна мигалка на столе, спасибо, очень не хватало.

Но смысл оказался не в том, что синий означает работу.

Смысл в жёлтом.

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

Для меня это важнее, чем кажется. Я могу отвернуться от терминала, залезть в другую задачу, провалиться в свой 1С-шный колодец, и лампа боковым зрением скажет: Роман, подойди, без тебя дальше не поедем.

Раскладка получилась такая: синий — агент копает, жёлтый — ждёт меня, зелёный — затих и можно не смотреть, красный — что-то умерло.

Технически там вообще без магии. Клод-код умеет дёргать хуки на событиях. Хук запускает маленький Python-скрипт, тот отправляет один HTTP-запрос в лампу и заканчивает работу.

Никакой вечной службы рядом я не держал. Хватило команды, которая просыпается на секунду.

Мне нужен был светофор, а не дискотека

Сначала я полез смотреть, что вообще можно залить в лампу Гайвера.

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

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

Взял WLED.

Он шьётся из браузера, умеет пресеты, нормально принимает команды по HTTP и не делает вид, что лампа обязательно должна изображать северное сияние. Для моего светофора этого хватало.

Дальше началась возня с кабелями.

Micro-USB как проверка характера

Я воткнул лампу в компьютер. COM-порт не появился.

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

Первая — кабели. Воткнул один, поменял на второй — оба «только зарядка»: с виду нормальные micro-USB, а внутри нет линий данных. Подошёл только третий. Таких кабелей у меня хватает, чтобы убить вечер, но недостаточно, чтобы сразу понять подвох.

Вторая — мост CP2102. Windows сама драйвер не поставила, поэтому даже с рабочим кабелем счастья сразу не случилось. Поставил руками — порт появился.

Вот так и выглядит хард-дебаг без романтики: пара врущих кабелей и не вставший драйвер. Прошивка в этот момент вообще ни при чём.

Роутер был слишком умный

WLED прошился. Лампа подняла свою точку доступа. Я скормил ей домашний WiFi — и она не вошла в сеть.

Клод бодро начал копать в сторону «ты, наверное, выбрал не ту сеть». А у меня где-то в памяти чесалось другое.

вроде бы я читал что лучше разделить, по-моему именно в этом ошибка

И да, тут я оказался прав.

ESP8266 умеет только 2.4 ГГц b/g/n. А Redmi у меня держал 2.4 ГГц в Wi-Fi 6, то есть ax, плюс 2.4 и 5 ГГц жили под одним именем через band-steering. Для современных устройств удобно. Для старого чипа — каша, в которой он просто молчит.

Разделил диапазоны. Включил у Xiaomi «режим совместимости Wi-Fi 5» — по факту он гасит ax. После этого 2.4 стала обычной 802.11n, и лампа зашла в сеть с первого раза.

Я угадал, а клод копал не туда. Не удержался, потребовал признания:

ну вот скажи мне «ты как всегда прав»))) а я тебе же говорил)

Пины не надо угадывать

После WLED всплыла сенсорная кнопка на макушке. Лампа физически её имела, но прошивка не знала, где она висит.

Можно было тыкать пины наугад или лезть смотреть на самой плате, куда идёт провод. Но проще оказалось открыть исходник Гайвера на гитхабе и прочитать.

Там лежало BTN_PIN D2. Заодно там же нашлись параметры матрицы: 16×16, GRB, зигзаг.

Зелёный оказался болтуном

Когда лампа уже светилась, я повесил хуки клод-кода на пресеты и решил, что дело почти закрыто.

Потом запустил агента на фоновую работу: клод думает, а лампа зелёная.

вот ты сейчас думаешь, а лампа зелёная — что-то не так работает

Вот тут стало ясно, что цветом по событию не отделаешься.

Я сначала повесил зелёный на Stop. Звучит логично: ход закончился, значит можно зеленеть. Только у клод-кода Stop — это не «всё готово». Это конец текущего хода. Агент мог отдать работу в фон, сам вернуться в ожидание, а лампа уже сообщала мне: расслабься, всё спокойно.

Враньё.

Я убрал Stop из зелёного сценария. Теперь зелёный приходит от простоя: отдельное событие срабатывает примерно после минуты тишины, когда сессия реально не дёргается и не ждёт моего ответа.

Да, зелёный стал не мгновенным. Зато он начал означать нормальную вещь: можно не смотреть — сессия затихла и меня не дёргает.

Одна лампа, много желающих

Потом я сам себе усложнил жизнь, потому что гоняю несколько сессий клод-кода одновременно.

Одна сессия ждёт моего разрешения и просит жёлтый. Вторая в этот момент работает и ставит синий. Если просто слать цвета в лампу, побеждает последний запрос. А последний запрос — не всегда самый важный.

Пропустить синий не страшно. Пропустить жёлтый — это весь смысл проекта выбросить.

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

Поймал это почти сразу, вживую. Смотрю на лампу, внутренне уже начинаю ругаться, потом сам себя останавливаю:

а не, я вижу, есть активная сессия

И да, лампа была права. Во второй сессии клод ещё работал.

Обидно: железка следит за сессиями внимательнее меня.

Аудит ударил туда, где смешнее всего

Когда репозиторий был уже более-менее собран, я отдал его на ИИ-аудит. Пять агентов под разными углами: код, безопасность, документация — каждый своё.

И четыре из пяти независимо ткнули в одно и то же.

В публичном репозитории лежал ровно тот баг, который я у себя уже починил: Stop → зелёный.

То самое ложное «готово». То самое место, где лампа врала, пока клод ещё работал. У меня на столе это уже было исправлено, а в README и примерах конфига — нет.

Чинил живой экземпляр, а публиковал по памяти. Тупо.

Теперь перед публикацией просто сверяю репо с тем, что реально крутится у меня на столе.

Заодно аудит поймал более тихую мину. .gitignore в публичном репо не закрывал мой локальный файл с реальным IP и заметками. До утечки не дошло, но шёл я к этому уверенно: ещё один ленивый git add, и привет.

Исправил. Хорошо, что аудит это поймал.

Кто кого тут заменил

Код и инструкция лежат тут: github.com/andromanpro/claude-code-status-lamp.

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

Кода я не написал ни строчки — уже полгода за меня это делает ИИ. Да и всю отладку разрулила машина, от драйвера до ложного зелёного.

Мне осталось перебрать три кабеля руками и держать одну чёткую цель, пока лампа не заработает так, как я задумал.

Кто кого заменил — каждый решит сам.

P.S. И да, этот пост он тоже написал сам. Я только вычёркивал строчки, где текст звучал слишком по-ИИшному)

→ открыть на androman.pro

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

Через час он показал почти пять миллионов рублей — точнее, 4 824 000 в эквиваленте API при курсе 80 рублей за доллар.

Я посмотрел на цифру и сказал примерно так:

«Я столько за год не зарабатываю».

Потом выдохнул и поправил себя. Нет, я не потратил пять миллионов. Это важная разница. Столько стоили бы мои Claude Code сессии за два месяца, если бы я платил за них по API-тарифам. Реально я заплатил за Max-подписку: 16 тысяч в месяц, то есть 32 тысячи за два месяца.

Получилось не «я потратил пять миллионов».

Получилось хуже и смешнее.

Получилось: я не потратил примерно 4,79 миллиона рублей, потому что подписка окупилась почти в 150 раз.

И самое странное — это посчитал трекер, который в этот момент сам ещё строился.

Сначала надо было признаться, что я не считаю

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

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

Деньги в этом смысле грубее.

Есть подписка. 16 тысяч в месяц. Есть фактическое потребление моделей. Есть тарифы API. Можно посчитать, сколько стоил бы тот же объём, если бы всё шло не через Max, а через прямую оплату токенов.

Не как бухгалтерскую истину. Как личный датчик масштаба.

Мне нужен был не корпоративный BI, не «панель эффективности цифровой трансформации», прости господи, а простой локальный счётчик: вот сессия, вот модель, вот токены, вот примерная стоимость, вот день, вот сумма.

Ну и, конечно, я не стал делать это один.

Два агента, один NAS и нормальный взрослый процесс

Схема у меня уже сложилась: Claude Code работает архитектором, Codex CLI работает разработчиком, а Gitea на NAS держит всё в виде задач, PR и слияний. Человек посередине иногда делает вид, что руководит процессом.

Роли простые:

1. Claude формулирует фазу, режет задачу, ревьюит результат.
2. Codex лезет в репозиторий, пишет код, чинит тесты, приносит PR.
3. Gitea не даёт этой каше превратиться в «я тут что-то правил в папке».
4. Я смотрю на цифры и периодически говорю: «алло, это точно не взорвётся?»

За один длинный сеанс пролетели несколько фаз.

Phase 1.0 — хук окончания сессии для Claude Code. Когда сессия заканчивается, хук читает данные, находит последнее событие ассистента с расходом токенов, считает примерную стоимость и пишет событие в локальный JSONL.

Phase 1.3 — хук на старте сессии и оценка сложности через claude -p --bare. Идея: на старте новой сессии найти предыдущие сессии без оценки и в фоне попросить Claude прикинуть, сколько часов такая задача заняла бы без ИИ.

Phase 1.0.1 — обратная загрузка истории из ~/.claude/projects/*/*.jsonl. Это и стало большим взрывом цифр: не только новые события, а весь хвост за два месяца.

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

Каждая фаза шла через задачу → реализацию Codex’ом → ревью Claude → PR → слияние. К вечеру в локальной Gitea уже лежали PR #3, #5, #7, плюс добивки вокруг 1.0.2.

Звучит почти прилично.

На практике приличие началось не сразу.

Сначала я создал Gitea-репозиторий с auto_init: True, получил unrelated histories и потом восстанавливал нормальную историю через cherry-pick из reflog’а. Да, взрослый процесс. Да, с ударом лбом о дверной косяк на входе.

Потом первая попытка Codex’а упала на строгой схеме OpenAI: у каждого объекта в схеме должен быть additionalProperties: false. Не «желательно». Не «потом добавим». HTTP 400 и иди думай.

А ещё в working_dir всплыли кракозябры из-за cp1251→utf8. Не смертельно, но привет из мира Windows, где кириллица всегда ждёт в тёмном углу и улыбается.

Трекер смотрит на того, кто его строит

Самый красивый момент случился почти незаметно.

Я тестировал хук окончания сессии. Claude завершал сессию. Хук писал событие в tracker/claude-events.jsonl. Потом мы правили хук. Потом снова завершали сессию. Потом снова писалось событие.

И в какой-то момент я понял: трекер уже трекает собственную постройку.

То есть я смотрю на файл, в котором лежит история создания файла, который записывает историю создания файла.

Нормальная такая рекурсия выходного дня.

Я: «Подожди, он сейчас считает эту же сессию?»

Claude: «Да. Хук окончания сессии глобальный».

Я: «То есть он видит не только этот проект?»

Claude: «Он видит все Claude Code сессии».

И вот тут маленький локальный счётчик превратился в observatorium.

Хук был зарегистрирован глобально в ~/.claude/settings.json. Значит он ловил не только multi-agent, но и параллельные сессии в WMSTnext, и субагентов, и всё, что проходило через Claude Code на этой машине. Не потому что мы так хитро задумали. Просто хук глобальный.

С одной стороны — прекрасно. Полная картина использования.

С другой — приватность и нагрузка сразу перестают быть «потом подумаем». Если Phase 4 когда-нибудь покажет публичные метрики на сайте, сырые транскрипты туда не поедут никогда. Только агрегаты, короткие хэши, обезличенные пути, без содержимого запросов. Иначе это не дашборд, а добровольная публикация собственного чердака.

Второй сюрприз был злее.

Хук на старте сессии для оценки сложности должен запускать claude -p --bare. Флаг --bare тут не декоративный. Он нужен, чтобы оценочная сессия не тащила за собой обычное окружение и не запускала собственные хуки в петлю.

Потому что если каждая оценка запускает новую сессию, а каждая новая сессия запускает оценку, то это уже не автоматизация. Это маленький финансовый чёрный квадрат.

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

Вот зачем нужен второй агент на ревью.

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

Эмпирическое правило дня: Codex лучше ищет по ширине, Claude лучше собирает смысл.

Не абсолютный закон природы. Просто в этот день так работало.

Что я нашёл в шестидесяти тысячах

После обратной загрузки история выглядела так:

• 79,716 событий за период с 2026-03-09 по 2026-05-09.
• 247 файлов транскриптов.
• JSONL после обратной загрузки — около 30 MB.
• Пиковый день — 31 марта, 1,113 calls.
• По моделям: Opus 4.7 — 53,854 calls, Opus 4.6 — 9,418, Sonnet 4.6 — 16,275.

Итоговая сумма по API-тарифам: 4 824 000 рублей.

Сразу оговорка, жирная и скучная: это пока завышение на 10-15%. Старые записи с Opus 4.6 считаются по ценам 4.7, потому что история моделей не идеальна. После пересчёта цен будет точнее. Реалистичнее ожидать 4-4,4 миллиона, а не ровно 4,82.

Но даже если это не пять миллионов, а четыре — порядок не меняется.

Я заплатил 32 тысячи за два месяца Max-подписки.

Если бы платил по API-тарифам — было бы около 4,8 миллиона в текущей грубой оценке.

Экономия относительно API-варианта — 4,79 миллиона по первому расчёту. Даже после уточнения цен останутся миллионы.

И вот тут мозг делает смешную вещь. Он одновременно понимает, что это не настоящие «заработанные деньги», потому что я бы просто не стал так использовать API за прямые деньги, и одновременно не может игнорировать факт: объём вычислений, который я реально прогнал за два месяца, стоит на открытом тарифе как хорошая машина.

Это не бизнес-кейс для презентации.

Это личная фотография масштаба.

Я: «То есть Max за 16 тысяч в месяц — это не дорого?»

Трекер: «Смотря с чем сравнивать».

Я: «С API».

Трекер: «Тогда это почти неприлично дёшево».

Я раньше писал про разгон как про ощущение: больше задач, больше артефактов, больше связей между проектами. Теперь к этому ощущению прирос счётчик.

Не идеальный. Не финальный. Но уже достаточно честный, чтобы стало слегка не по себе.

Что я унёс с собой

Глобальный хук — это власть. Он видит всё, и значит дизайн надо начинать не с красивого дашборда, а с границы приватности. Что пишем, куда пишем, что никогда не публикуем, как обезличиваем путь — это первое решение, не последнее.

Автоматизация должна иметь тормоза. Обратная загрузка на 247 сессий плюс дочерний процесс на старте сессии — почти готовый способ самому себе устроить ад из лимитов запросов. Ограничитель частоты — не украшение, а предохранитель.

И самое неудобное: про деньги надо говорить аккуратно. Я не потратил $60k. Я использовал подписку так, что эквивалентный счёт по API был бы около $60k. Разница принципиальная. Иначе это превращается в инфоцыганскую картинку, от которой самому стыдно.

А теперь хочется ещё хуже

Текущий трекер считает деньги. Следующий слой — время.

Phase 1.3 должен научиться оценивать сложность задачи: сколько часов это заняло бы без ИИ, сколько заняло по реальным часам, какой получился множитель. Не «истина в последней инстанции», а личная шкала. Если задача без ИИ была бы на 8 часов, а с агентами заняла 50 минут — это уже не просто красивое ощущение.

Потом хочется отслеживать настроение.

Не только «сколько токенов», но и сколько раз я матерился. Счётчик раздражения. Благодарности. Моменты, где я пишу «ёбать» не потому что всё сломалось, а потому что трекер показал $60k.

Потом дашборд. Конечно, киберпанк. Графики, крупные числа, локальный HUD, виджет «сколько осталось до лимита», карточки для блога, которые можно публиковать без сырых данных. Тот самый случай, когда эстетика не мешает инженерии, потому что счётчик должен быть видимым. Если он спрятан в JSONL, мозг его быстро перестаёт чувствовать.

Дальше публичная статистика на androman.pro. Только агрегаты. Никаких транскриптов. Никаких приватных путей. Никаких клиентских имён. Просто «за месяц модель сэкономила N часов / N долларов эквивалента / N дней жизни, которые я всё равно потратил на новые задачи».

А где-то в дальнем углу планов лежит AR-оверлей через Xreal: маленький HUD в углу зрения, агент в сети, PR готов, расходы за сегодня, голосовая команда «merge PR».

Звучит как фантастика.

Но сегодня утром у меня не было трекера. К вечеру он уже нашёл пятьдесят с лишним тысяч долларов не-потраченных денег.

Так что я теперь осторожнее со словом «фантастика».

Самое смешное

Самое смешное не в сумме.

Сумма — это просто неоновая вывеска, на которую удобно смотреть с открытым ртом.

Самое смешное в том, что я строил инструмент для измерения собственного ИИ-разгона, а он сразу стал частью этого разгона. Он писал JSONL о сессиях, в которых его писали. Он ловил параллельные ветки. Он обнаружил угрозу собственных оценочных дочерних процессов. Он заставил переписать формулу экономии, потому что первая версия думала не туда.

Счётчик оказался не прибором снаружи системы.

Он оказался ещё одним участником системы.

Подписка окупилась примерно в 150 раз. Трекер это посчитал сам. А я теперь сижу и думаю, сколько ещё вещей вокруг меня уже пора начать считать.

Потому что ощущение — врёт красиво.

JSONL врёт скучнее.

Через три дня

Я открыл черновик утром, хотел внести «пару правок перед публикацией».

Через четыре часа переписываю заново.

Откуда вообще трекер

Если совсем честно — трекер был побочным продуктом.

Изначальная задача звучала по-другому: настроить совместную работу трёх ИИ-агентов. Claude разбивает задачу на куски и проверяет результат — архитектор. Codex реализует — разработчик. OpenClaw — мост через Telegram, чтобы давать команды с телефона из бара. Три модели, три API, три разных протокола. Хотелось чтобы они передавали друг другу задачи и не ругались по поводу того кто из них что испортил.

Чтобы этот конвейер не превратился в чёрный ящик, нужно было видеть кто из агентов что сделал, за сколько токенов и времени. То есть нужен был учёт. А значит — трекер.

Учёт оказался первой готовой частью и пожрал внимание. Заголовок про пять миллионов — оттуда. А мульти-агент тем временем тихо собирался в фоне.

К 12 мая он работает. Я пишу боту в Telegram «обнови README в репо», OpenClaw принимает, Claude составляет план, Codex реализует, DeepSeek (третий ревьюер, появился за эти три дня) проверяет. Я только апрувлю. Это уже не «один человек с одним трекером». Это маленький конвейер из трёх ИИ и одного меня.

В репозитории за три дня прирос не только трекер. Прирос мульти-агент, ради которого его и затевали. И заодно — имя neon-legion (вместо служебного multi-agent) и слоган, в котором счётчик ругательств вынесен прямо в название: «Твоя личная армия. Почти без ебать-колотить. Да, мы считаем маты». Маты считаются не для красоты. У каждой Claude-сессии в дашборде есть поле profanity_count, заполненное по факту. Шутка — это фича.

Где деньги, Лебовски

Тут хочется разобраться с одной неудобной вещью.

На 9 мая трекер показывал 4,8 миллиона. Сейчас, пока пишу эту главу, уже 5,77 миллиона — за три дня плотной работы с моделями цифра прибавила ещё почти миллион. Трекер тикает прямо сейчас. На статье тоже.

Подписка нарастающим итогом — 48 тысяч за два с половиной месяца. Экономия относительно API-варианта — 5,72 миллиона.

Хочется носить эту цифру на бейдже.

Только в кошельке у меня не прибавилось пяти миллионов. Где же деньги, Лебовски?

Их нет, потому что я бы не потратил эти пять миллионов. Если бы подписки не было, я бы не оплатил все эти запросы по API. Я бы просто сделал в десять раз меньше. Экономия — это сравнение с ситуацией, в которой я бы вообще так не работал. Бенчмарк, а не выручка. Цифра на бейдже была бы враньём.

Но интересно другое.

ИИ даёт мне условные 10x к производительности. Не маркетинговая цифра — субъективная оценка, подтверждённая таблицей часов: без ИИ я делал бы в десять раз меньше за те же часы. Допустим, мой месячный оборот по задачам — 2,5 миллиона. Тогда один «ИИ-работник» делает работы примерно на 250 тысяч в месяц.

250 тысяч — это зарплата нормального мидла в РФ. Не сеньора, не лида. Но мидла-с-опытом точно.

Подписка стоит 16 тысяч в месяц на двоих, Claude Max + ChatGPT Pro. На неё работает четыре таких ИИ-мидла одновременно: Claude думает, Codex пишет, DeepSeek ревьюит, OpenClaw таскает между ними сообщения.

Вот где деньги: на каждой ИИ-подписке я не получаю +250 в карман. Я не плачу 250 тысяч зарплаты человеку, которого иначе пришлось бы взять. Дельта — невидимая экономия. Её нельзя положить на стол. Но именно она позволяет мне делать в десять раз больше за те же часы.

В кошельке прибавилось не пяти миллионов. Прибавилось возможности.

Возможность — паршивая единица отчётности. На неё хорошо ложится подписка и плохо ложится ипотека.

Что в итоге

Я: «Так ты считаешь свою собственную статью прямо сейчас?»

Трекер: «Конечно. Я глобальный».

Реальный сегодняшний счёт после догона: 67 тысяч рублей в эквиваленте API за один день.

За три дня в репозиторий приехало много мелочи: тесты, сканер приватности перед публикацией, демо за минуту, починка кракозябр, конфиг в одном файле, плюс одна красивая штука — Hindsight Replay, когда вторая модель пишет критику работы первой. Подробности — в коммитах между 9 и 12 мая.

Главная функция трекера — не показать сколько ты сэкономил.

Главная функция трекера — показать насколько ты эффективен и сколько примерно стоит твой труд, если его будут делать ИИ.

Пока они дороже тебя — будь спокоен.

Если они начнут выполнять ту же работу что и ты, без ошибок и дешевле — ты станешь не нужен.

Трекер посчитает и это.

Посмотреть:

• Живой дашборд — что трекер показывает прямо сейчас: множитель, сэкономлено, активные часы, разбивка по моделям
• github.com/andromanpro/neon-legion — open-source, MIT, stdlib-only Python, локальный pipeline без внешних обращений

→ открыть на androman.pro

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

01 / Установка соединения

Когда страница загружается, главный заголовок делает ту же штуку что и на главной androman.pro — символы из мусорной кучи (█▓▒░#@$%&*+=!?>) по одному встают на свои места, и каждый зафиксированный символ на мгновение вспыхивает голубым. Через ~1.5 секунды заголовок устаканивается с лёгким свечением.

Мета-строка сверху (дата, тег, время чтения) при загрузке расширяется по расстоянию между буквами — как на печатной машинке, не плавное появление. Потом обложка (если есть) делает включение старого ЭЛТ-монитора: сжатая в полоску картинка за 1.6 секунды разворачивается в полный размер с вспышкой яркости.

1.1 Что под капотом

Сами эффекты — связка из двух частей: GSAP ScrollTrigger (библиотека анимаций + модуль отслеживания прокрутки) следит когда элемент въезжает в видимую область страницы, и навешивает CSS-класс. А CSS-анимации с steps() делают саму картинку. Анимации выполняются на видеокарте и не подвисают при нагрузке на страницу.

// Helper: trigger CSS class on scroll-into-view
function triggerOnScroll(selector, className, opts){
  gsap.utils.toArray(selector).forEach(function(el){
    ScrollTrigger.create({
      trigger: el,
      start: opts.start || 'top 88%',
      once: opts.once !== false,
      onEnter: function(){
        el.classList.remove(className);
        void el.offsetWidth;  // reflow gimmick
        el.classList.add(className);
      }
    });
  });
}

// h2/h3 — RGB glitch shift
triggerOnScroll('.post-content > h2, .post-content > h3', 'cyber-glitch');

// Code blocks — scanline reveal
triggerOnScroll('.post-content > pre', 'cyber-scan');

Ключевой трюк — steps(N) в CSS-анимации. Обычное плавное движение (ease-out) даёт современный мягкий переход, а steps(5) или steps(10) — прерывистое, покадровое. Как анимация в старом мультике, не как iOS.

02 / Киберпанк-приёмы

Если разобрать что отделяет «киберпанк» от «современная анимация в блоге», то приёмы вполне конкретные. Не один универсальный, а набор:

• RGB shift — красный, зелёный и синий каналы текста чуть съезжают в разные стороны, как помехи на плохом сигнале
• Scanline — горизонтальная светящаяся линия проходит сверху вниз и «открывает» элемент
• Decoder — символы из мусорной кучи по одному встают на свои места, каждый вспыхивает при фиксации
• CRT power-on — как включается старый ЭЛТ-монитор: сначала тонкая полоска, потом резкое разворачивание с вспышкой яркости
• Stutter — покадровое, прерывистое движение вместо плавного
• Flicker — прозрачность дёргается 0 → 0.4 → 0 → 0.7 → 1, имитация плохого сигнала

Те же приёмы я уже использовал в своих WebGL-экспериментах (lava-orb, orb-2048, fire-particle-editor) — теперь перенёс в посты блога.

2.1 Прилипающий заголовок раздела

Самый полезный трюк для длинных постов — когда подзаголовок доезжает до верха страницы, он там «прилипает» и остаётся на виду пока читаешь раздел. Как только следующий подзаголовок подъезжает снизу — предыдущий отпускается. Всегда видно в каком разделе находишься.

gsap.utils.toArray('.post-content > h2').forEach(function(h2, idx, arr){
  var nextH2 = arr[idx + 1] || null;
  ScrollTrigger.create({
    trigger: h2,
    start: 'top 60px',
    endTrigger: nextH2 || '.post-content',
    end: 'top 60px',
    pin: h2,
    pinSpacing: false,
    pinType: 'fixed'
  });
});

Работает только если подзаголовки идут один за другим — что норма для длинного поста. На короткой странице с одним подзаголовком просто ничего не происходит.

03 / Анимации, привязанные к прокрутке

Помимо «запустить при появлении» есть второй режим — привязка к прокрутке. Эффект не запускается резко, а плавно следует за позицией скролла. Медленно скроллишь — медленный эффект. Быстро — быстрый.

Обложка поста на этом сайте работает в этом режиме: лёгкий параллакс (картинка движется чуть медленнее текста) и нарастающее свечение при уходе из видимой области. Едва заметно, но убирает ощущение статичной вставки.

Чем сильнее привязка к прокрутке, тем тоньше должен быть эффект. Резкие изменения цвета или позиции при быстром скролле — укачивает. Лучше: прозрачность, тени, смещение на 5-15px. Большие движения — только для разовых эффектов при появлении.

3.1 Когда этот режим не подходит

Привязка к прокрутке не работает для:

1. Текстовых эффектов (дешифратор, печатная машинка) — дёргается когда скроллишь туда-сюда
2. Блоков кода с подсветкой синтаксиса — библиотека подсветки расставляет теги при инициализации и конфликтует с анимацией появления
3. Полей ввода — анимация смещения сбивает фокус

Для всего этого — разовый запуск при появлении: toggleActions: 'play none none reverse' или once: true.

04 / Производительность

GSAP вместе с модулем прокрутки весит ~30 КБ в сжатом виде и загружается с внешнего CDN — сети серверов по всему миру, откуда файлы отдаются быстро и кэшируются в браузере. Для повторного посетителя загрузка нулевая: файл уже лежит в кэше с прошлого раза.

На остальных страницах (главная, архив, лаборатория) GSAP не подгружается вообще — в теме стоит проверка, что библиотека нужна только на страницах отдельных постов. Поэтому показатели скорости главной страницы не страдают.

if ( is_singular( 'post' ) ) {
    wp_enqueue_style( 'androman-single-cyber', /* ... */ );
    wp_enqueue_script( 'gsap-core',          /* CDN */ );
    wp_enqueue_script( 'gsap-scrolltrigger', /* CDN */ );
    wp_enqueue_script( 'androman-single-anim', /* local */ );
}

4.1 Режим без анимаций

В Windows, macOS и Android есть системная настройка «уменьшить анимации» — для людей, которым мигание и движение на экране некомфортно. В эффектах это учтено. В CSS прописан override для этого режима:

@media (prefers-reduced-motion: reduce) {
  .cyber-glitch, .cyber-scan, .cyber-crt,
  .cyber-stutter-p, .cyber-stutter-x,
  .cyber-meta-in, .cyber-flicker {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}

И в JavaScript: если включён этот режим, скрипт анимаций сразу завершает работу не запуская ничего. Все элементы которые должны были «появляться» — сразу видны. Контент доступен, анимаций нет.

05 / Что дальше

Тестовый пост — для разовой проверки. Пожил на длинном тексте, выглядит как надо.

Следующее что хочу попробовать — звук: короткий клик когда символ дешифратора встаёт на место, тихий гул при CRT-включении. Плюс пасхалка: ↑↑↓↓←→←→BA включает «режим старого ЭЛТ» на всём сайте — полосы сканирования, насыщенность +40%, чуть больше контраста. Ещё есть идея с магнитным курсором (~30 строк) и 3D-наклоном карточек лаборатории при наведении. Каждое — на час. Пока в списке, не в расписании.

06 / Сравнение CRT vs default

Слева — картинка без эффекта (помечена class="no-anim"). Справа — с CRT power-on: scaleY 0.02→1 (как ЭЛТ-монитор включается из тонкой линии), brightness peak 2.2, saturate 0→1.2→1, hue-rotate 20°→0, blur 2px→0. Длительность 1.6s.

Кликни «▷ REPLAY» чтобы пересмотреть эффект на правой картинке.

▷ REPLAY

// END OF TRANSMISSION · скролл назад оставит тебя на текущей секции

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

→ открыть на androman.pro

В общем делаю автоматический воркфлоу по анализу бизнес-процессов в 1С для обследования предприятий. Добавил генерацию опросника — можно выбрать роль или должность, протыкать варианты ответов на вопросы, которые были выявлены ранее на основе анализа конфигурации и документации, и выгрузить всё в JSON. Не нужно тратить время на многочасовые интервью.

Но дело не в этом.

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

А потом мой взгляд упал на скучные ползунки выбора приоритетов.

Тут-то всё и заверте…

Наступили выходные, а ощущение незавершённости не отпускало. Обычный ползунок от 1 до 10 — это же просто цифра, не показательно.

Пришлось развивать — прототип, другой, третий. Покрутил настройки частиц. Узнал что есть Canvas 2D и WebGL 2 (ну как узнал — просто что они существуют). Добавил DOOM-fire (прям как из культовой игры, ну вы поняли) режим как альтернативный движок пламени. Попробовал сделать взрывы, физику воды, отрывающиеся от ползунка орбы, которые улетают по дуге.

Задача была в том числе — проверить, получится ли через ИИ сделать что-то в незнакомой области. Без глубокого погружения в шейдеры и прочие термины которые я впервые увидел на прошлой неделе.

Получилось.

Я думал — сделаю пару эффектов на ползунок и пойду обратно к опроснику.

Что выросло за 5 недель параллельной работы:

• npm-библиотека @andromanpro/lava-orb — привязывается к любому <input type="range"> одной строкой. От мороза до огня, взрывов и молний.
• 2 одностраничные игры — ORB 2048 (жидкие сливающиеся сферы с процедурной музыкой) и ORB ARKANOID (арканоид где блоки — орбы с физикой волн). Оба работают офлайн одним HTML-файлом.
• 2 интерактивных редактора — для тонкой настройки жидкости и огня в реальном времени. С экспортом пресетов.
• Библиотека из 7 WebGL2-фонов — drop-in для любой страницы.

Всё это — MIT, на GitHub.

Ни одного профильного курса по веб-разработке я не проходил. Я вообще не знаю, что такое box-sizing и display: flex)))

Помните 2048? Ту простую головоломку с плитками, которая в 2014-м разошлась по всем сторам за несколько недель. Сделал свою версию — с жидкими светящимися сферами вместо цифровых плиток. И залип.

Геймплей:
— Классическая сетка 4×4, свайпы / стрелки / WASD
— Ячейки — жидкие metaballs через marching squares, сливаются как капли ртути
— На высоких значениях — процедурный огонь частицами с glow и затуханием
— При 2048 — supernova: space warp, chromatic aberration, 250 частиц, тряска камеры
— Игра продолжается — 4096, 8192, логотип подхватывает

Звук:
8 процедурных треков через Web Audio API, никаких mp3. Oscillator + filter + reverb синтезируются в браузере. Адаптивный темп — чем больше ячеек, тем быстрее.

Рендеринг:
WebGL2 с Canvas2D fallback. 4 фона на выбор (Cyberpunk / Space / Dark / Synthwave). RU/EN локализация.

Бот / Autoplay — запускаешь, смотришь как играет сам. Максимум набирает 65 536 (16 слияний — дальше на сетке 4×4 места нет, но есть настройка для большей сетки!).

Для СДВГ-шников — идеальная сенсорная подкормка. Запускаешь на втором мониторе или в углу экрана, свернул — периферическое зрение ловит постоянное мельтешение жидких сфер, мозгу хорошо, на основной задаче сидишь ровнее.

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

Один файл Orb-2048.html ~330 KB. Скачал на телефон в самолёт — играешь офлайн.

ЗАПУСТИТЬ ORB 2048

Live: andromanpro.github.io/orb-2048

Если 2048 — про «плавное слияние», то арканоид — про «разрушение». Идея: блоки — это не кубики, а светящиеся орбы-капсулы с жидкостью. Она реагирует на удар волной, а при разрушении выливается вниз, передавая волну соседям.

Так и сделал.

Геймплей:
— 15 уровней, каждый со своей темой, музыкой и фоном
— 9 типов орбов — Fire, Ice, Water, Earth, Lava, Steel, Gold, TNT, Rainbow (у каждого своя физика и звук удара)
— 8 power-up — расширение/сужение платформы, огненный шар, мультишар, прилипание, лазерные турели, жизнь, замедление времени
— Комбо-система и локальная таблица рекордов

Технологии:
— WebGL2 SDF-шейдер для орбов — круглый SDF, 2 слоя жидкости с Catmull-Rom интерполяцией, спекулярный блик
— Verlet 6-колоночная пружинная симуляция волн
— Процедурная музыка на каждый уровень

Тюнинг шарика:
Тип хвоста (FIRE / LAVA / PLASMA / ICE), длина S/M/L, размер S/M/L. Превью шарика в настройках — живая анимация на весь экран, клик для запуска.

Бот со скоростью ×2.5. Прицеливается в конкретные орбы, проходит уровни сам. Можно включить и бесконечный режим — уровни продолжают генерироваться сверх 15 штук, бот разбивает бесконечно. Играет лучше меня.

Запустил бота в бесконечном режиме, свернул окно в угол — и пока работаешь в основном, боковым зрением ловишь как шарик дробит орбы, жидкость выливается, комбо растут.

Режим отладки тоже оставил в сборке — FPS, хитбоксы, прыжки между уровнями через [ и ]. Dev-инструменты не прятал.

97 unit-тестов встроенных в game.js. Я сам не представлял, что в браузерной игре буду их писать. Но если разрабатывать с ИИ — приходится проверять каждый шаг.

Один файл ~225 KB, работает офлайн.

ЗАПУСТИТЬ ORB ARKANOID

Live: andromanpro.github.io/orb-arkanoid

Важный юридический момент. Arkanoid — зарегистрированная торговая марка Taito с 1986 года (легендарная японская компания, сейчас в составе Square Enix). Моя игра называется ORB ARKANOID чисто как дань уважения жанру — пока это open-source прикол, никто не придёт.

Но если я начну рубить с этого капусту — Taito быстро найдёт меня через юристов. Код можно форкать (MIT разрешает), но имя «Arkanoid» — не моё чтобы его дарить. Для коммерческого форка придётся переименовать в что-то нейтральное вроде ORB BREAKOUT (слово «breakout» — общий жанр, не товарный знак), поменять логотип — и тогда можно идти в сторы.

Это к вопросу «а можно я возьму и продам» — в принципе можно, но с переименованием.

Решил посчитать — сколько я реально на это потратил.

Прошёлся по логам сессий Claude Code — там у каждого сообщения timestamp. Если между сообщениями меньше 2 минут — это активная работа. Больше 2 минут — отошёл или задумался без ИИ.

Итог: 41 час активного общения. На 7 артефактов, 40 981 строку кода.

Для сравнения, 1С-разработчику без веб-опыта (это я) без ИИ на это ушло бы:
— 3 месяца на изучение стека (HTML / CSS / JS / Canvas2D / WebGL2 / WebAudio)
— Ещё ~6 месяцев на реализацию

Грубая оценка — около 8 месяцев full-time вместо 5 недель коротких периодических сессий. Не научная цифра, просто мой внутренний «сколько бы я на это убил, если бы шёл один».

Ускорение не в «ИИ пишет код за тебя». Оно в том, что ИИ убирает барьер незнания. Можешь формулировать задачу словами и сразу получать рабочий прототип — вместо того чтобы тонуть в документации к шейдерам, которая предполагает, что ты уже знаешь что такое SDF, metaballs и Verlet integration.

Для меня это самая сильная зона ИИ: незнакомые специализированные домены, где сначала нужно месяцами накапливать словарь, а только потом начинать делать.

→ открыть на androman.pro

1С vs веб через ИИ — два разных мира

В 1С не так. Там огромный контекст, галлюцинации модели и загрязнённый контекст: контекст одного проекта просачивается в выводы по другому, имена путаются, факты выдумываются. Платформа сопротивляется.

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

Цифры одного дизайна

На эту тему ушло 5 итераций по 3 варианта в каждой. Итого 15 разных тем, каждая собиралась на основе того, что понравилось в предыдущих. В итоге получилась не «идеальная тема», а тема, которую я наконец не хочу немедленно снести.

Главное что вышло:

• Декодер-заголовок — androman.pro на главной печатается через шумовые символы █▓▒░, потом «защёлкивается» в текст и морфит между androman.pro → .1С → .ai → .dev. Glitch — короткий RGB-бурст 2.5 секунды.
• HUD-углы — agent ONLINE, build v0.6.x, mode roaming, focus hyperfocus. Левый верхний кликается — открывается changelog проекта (RU/EN, версии с alpha до текущей).
• Страница /сейчас — кроме обычного описания фокуса, terminal-блок со 150 случайными dev-фразами в киберпанк-стиле. Клик — мгновенный реролл.
• Команд-палитра — нажми / (на любой раскладке клавиатуры — работает на ЙЦУКЕН тоже), всплывает терминал команд.
• Визуальная лаборатория — 7 моих open-source WebGL/Canvas-проектов собраны в одной странице. У одной из карточек — hover-preview живой 3D-сцены через lazy-load.

Шрифты — все 74 woff2 self-hosted. Никаких Google Fonts CDN, сайт работает без внешних соединений.

Парадокс роста

Заметил парадокс: чем больше разрабатываешь с ИИ, тем сильнее растёт бэклог задач. Раньше идея «было бы круто» оставалась идеей. Сейчас — становится таском в течение часа. Скорость реализации опережает способность приоритизировать.

И ещё — перфекционизм. Если уходишь в него, тратишь неимоверно больше времени, чем если довольствуешься средним вариантом. Но это везде так, принцип Парето — 80% результата за 20% времени, остальные 20% — за всю оставшуюся жизнь.

Workflow получился взрослый

Заодно собрался нормальный workflow разработки сайта: тестовый и прод-контуры, возможность обкатать фичи до выхода в прод. Всё через git, версионирование, автодеплой по rsync через SSH. Бэкап БД и файлов — до любого изменения.

В общем — я доволен. Так и должен выглядеть собственный сайт. Хотя в наше время это уже похоже на ретроградство — социальные сети поглотили личные блоги. Но мне так нравится.

Открытие про безопасность

ИИ заодно проаудировал сайт и подсветил то, чего я не знал: пароли от БД у CMS традиционно хранятся в открытом виде в конфиге. Это касается всех — WordPress, Joomla, Drupal, Magento, любого PHP-стека. Защита идёт не криптографией, а правами файла + правильной настройкой веб-сервера.

Закрыли всё что обычно светится: XMLRPC отключён, REST /users скрыт от анонимов (admin slug больше не виден), ?author=N редиректит на главную, readme.html и license.txt удалены, security-headers через PHP + .htaccess.

Что дальше

Сайт работает. Версия 0.6.x — pre-release, до публикации 1.0 хочу наполнить блог постами и быть уверенным в каждой странице.

Ближайшие планы — перенесу статьи с инфостарта, плюс буду публиковать эксклюзивы здесь. Радар на сайте уже ждёт blip’ов.

→ открыть на androman.pro