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

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