Перестал играть в игры, заметно реже смотрю фильмы. И в целом — почти не отвлекаюсь от разработки. Потому что мои отвлечения — это такая же разработка, как и то, что я делаю на работе. Сам процесс кардинально поменялся. Вместо рутинного залипания в коде — постановка задачи, корректировка, уточнение деталей, визуальная проверка. Убрав всю неинтересную шелуху, я сосредоточился на главном. Это похоже на мышь в эксперименте про кнопку счастья — которая давит и давит, потому что хорошо. Я нашёл эту кнопку у себя. В прошлой статье про ИИглу я достаточно точно описал, как формируется эта зависимость. Нормальная ли это ситуация — покажет время. А пока — вот что я придумал в перерывах между тремя другими проектами.
Шесть своих киберпанк-капч. Не потому что у гугла плохая защита — она нормально работает. А потому что хотел: посетитель добрался до формы комментария, написал текст, и в момент проверки «ты точно не робот?» продолжал чувствовать что он на киберпанк-блоге, а не на госуслугах.
Все шесть прямо в этой статье ниже — рабочие, можно потыкать. Кнопка «Проверить» покажет вердикт, «Заново» — перезапустит.
Декодер
Символы хаотично перемешаны, потом по одному встают на свои места. Через секунду-полторы появляется нормальное слово — введи его в поле. Для простого бота это уже не сценарий «забрал скрытое поле и отправил форму»: нужно выполнять 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