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

Шесть своих киберпанк-капч. Не потому что у гугла плохая защита — она нормально работает. А потому что хотел: посетитель добрался до формы комментария, написал текст, и в момент проверки «ты точно не робот?» продолжал чувствовать что он на киберпанк-блоге, а не на госуслугах.

Все шесть прямо в этой статье ниже — рабочие, можно потыкать. Кнопка «Проверить» покажет вердикт, «Заново» — перезапустит.

Декодер

Символы хаотично перемешаны, потом по одному встают на свои места. Через секунду-полторы появляется нормальное слово — введи его в поле. Для простого бота это уже не сценарий «забрал скрытое поле и отправил форму»: нужно выполнять JS, ждать анимацию или разбирать состояние страницы. Не настоящая стена, но от массового мусора отсекает.

Лава-шар с температурой

Один ползунок, к которому прицеплен мой же огненный шар (отдельная библиотека, я её делал давно). Тащишь — шар меняет цвет от ледяного синего к раскалённому красному. Над ним пишет «попади в тёплый» — нужно поставить ползунок в правильный диапазон.

Повтори последовательность

Четыре светящиеся кнопки, пара из них вспыхивает по очереди. Запомнил порядок — повтори, кликая в том же порядке. Как в детской игре «Симон» из 80-х. Если включён режим «убрать анимации» (для чувствительных к мерцанию) — вместо вспышек просто пишется список «1.▴ 2. 3.».

Невидимая ловушка

Скрытое от человека поле, которое простые боты часто заполняют (они автоматически пихают значения везде куда могут), плюс таймер: если форма улетела через секунду после открытия страницы — почти наверняка это не человек. Никаких проверок для обычного посетителя, всё происходит само. Ловит массовых ботов, которые тупо обходят формы скриптом — на LLM-ботов это не работает, для них нужны капчи посложнее.

В демо ниже виден отладочный экранчик: «поле пустое: ✓», «прошло секунд: N», «вердикт: ЧЕЛОВЕК / РОБОТ». В реальном использовании это всё скрыто. Кнопка «прикинуться роботом» симулирует поведение бота.

Найди ошибку в 1С-коде

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

Точная позиция

Ползунок 0–100%. Слово видно только в узкой полоске (например, между 67 и 73%) — выходишь за неё, и оно снова рассыпается на шум. Поймай нужную точку, прочти слово, введи. Главное — нельзя «дотащить до конца и победить», нужна точность.

Лава-шар — взял свой же npm-пакет

У меня есть npm-пакет @andromanpro/lava-orb — огненный шарик, который цепляется к ползунку и меняет цвет в зависимости от позиции. Делал давно для другого поста, опубликовал, потом просто лежал.

Капча написалась за час. Цепляю шар к ползунку, проверка на «попал в нужный диапазон» при отправке. Готово.

Что хочется отметить — стандартный ползунок в браузере уродлив. Серая полоска и круглый кружок. Стилизация в CSS — отдельный мини-ад: для каждого браузера свои псевдо-селекторы (для хрома один, для огнелиса другой), и каждый со своими тонкостями. Я сделал градиент полоски от ледяного синего к огненному красному (через золотисто-жёлтый посередине), а сам кружок сделал прозрачным, потому что сверху на него всё равно ложится мой огненный шар. Под полоской — отметки температурных зон с подписями.

Если шар по какой-то причине не загрузился — градиентная полоска остаётся и ползунок продолжает работать. Защита не отваливается.

Точная позиция — почему «до конца дотащил» это скучно

Сначала написал тривиально: тащи ползунок до 100%, тогда слово полностью видно. На отправке проверка «значение >= 100». Готово.

Запустил, попробовал. Скучно. Каждый раз одно и то же — таскаешь до конца, читаешь, вводишь. Никакого вызова — «дотащил — прошёл».

Подумал. Случайная цель? Каждый раз новое значение, например 60–89, проходишь если ползунок выше или равно. Лучше, но всё равно посетитель может перетащить до 100% и пройти. Никакой точности не нужно.

Финальная версия — узкая полоска: цель ±3%. Если ползунок в окне (например 67–73 при цели 70) — слово полностью видно. Перетащил выше или ниже — слово плавно растворяется обратно в шум. На отправке проверяю что ползунок в окне И слово введено правильно.

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

Что дальше

Пакет уже лежит в npm под именем @andromanpro/cyberpunk-captcha, ротация подключена к форме комментариев блога — каждая загрузка поста выдаёт случайный вариант. Если у тебя есть идея для седьмой капчи в этом стиле — пиши в комментариях.

Сами механики капч заняли где-то час активного промптинга — без отделки UI, упаковки в npm и интеграции в форму комментариев. То есть «работающий прототип за час», а не «готовый продукт».

Гораздо больше времени занимает редактирование текстов статей — я терпеть не могу как ИИ собирает фразы, а объяснить модели что именно мне не нравится — не могу. Поэтому вот сижу и редактирую. Но мне это тоже нравится. Надеюсь не выгорю)

GitHub: github.com/andromanpro/cyberpunk-captcha

Живые примеры (отдельный сайт): andromanpro.github.io/cyberpunk-captcha

Установка: npm install @andromanpro/cyberpunk-captcha

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