Лендинг как аргумент: 3D-мозг на скролле, голосовой AI и квиз‑бот для интенсива «Мозг лидера»

Когда сам сайт должен продавать формат

Есть класс проектов, где лендинг — не «страница про мероприятие», а сам аргумент в пользу покупки. «Всемогущие нейроны. Мозг лидера» — офлайн‑интенсив, где профессор‑нейрофизиолог с 170+ научными публикациями и предприниматель с компанией, оценённой в миллиард рублей, за один день объясняют, как работает мозг руководителя. Продавать такое скучным набором блоков «Спикеры / Программа / Купить» — значит проиграть ещё до старта: продукт про работу мозга, а страница выглядит как любая другая.

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

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

Что за проект

Тип	Промо‑лендинг офлайн‑интенсива + Telegram-бот лид‑магнита
Стек	Vanilla JS, Three.js, GSAP + ScrollTrigger, современные AI-модели (текст + голос), Node-прокси, Caddy, aiogram 3
Объём	~9 000 строк фронтенда, ~1 900 строк бота
Зависимости в рантайме	Три CDN-библиотеки. Ни React, ни сборщика, ни node_modules на клиенте
Сайт	12 полноэкранных секций со scroll-snap

Проект живёт с 2017 года и пережил три поколения позиционирования: от «Всемогущих нейронов 3» через «Когнитивное долголетие» к нынешнему «Мозгу лидера». Каждый ребрендинг менял оффер, спикеров и цены, но не трогал ядро рендера. Это, пожалуй, главный практический вывод всего кейса — о нём в конце.

Идея: одна метафора и три двери в воронку

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

flowchart TB
    V["Посетитель"] --> L["Лендинг «Мозг лидера»<br/>12 секций со scroll-snap"]

    L --> F["Форма брони"]
    L --> AI["Голосовой AI-консультант<br/>текст + голос"]
    L --> Q["Нейро-квиз в Telegram<br/>7 вопросов → PDF"]

    F --> TG["Telegram<br/>топик на каждого лида"]
    AI --> TG
    Q --> PDF["Персональный PDF-разбор"]
    PDF --> TG

    TG --> M["Менеджер<br/>отвечает из мессенджера"]

    style AI fill:#0ea5e9,color:#fff
    style Q fill:#7c3aed,color:#fff
    style TG fill:#22c55e,color:#fff
    style M fill:#f59e0b,color:#fff

Тёплый посетитель бронирует через форму. Сомневающийся — спрашивает голосового консультанта. Холодный, который ещё ничего не решил, проходит бесплатный нейротест и получает персональный документ. Тот же принцип «несколько входов в одну воронку» я разбирал в кейсе про лендинг itc34.ru, и он повторяется не случайно — это рабочая схема для любого продукта с высоким чеком.

Мозг, который реагирует на скролл

Центральный объект — не 3D-модель из Blender, а процедурно сгенерированная нейросеть. Мозг собирается в рантайме из эллипсоидов, вокселей и кривых Безье: облако поверхностных частиц, тела нейронов, дендриты между ними и импульсы, бегущие по связям.

Почему процедурно, а не готовой моделью: .glb мозга приличного качества весит мегабайты и всё равно выглядит как медицинская иллюстрация. Облако точек весит практически ноль, грузится мгновенно и позволяет менять плотность под устройство — что и стало ключом к мобильной оптимизации.

Прогресс скролла (от 0 до 1) прогоняется через четыре фазы. Каждая фаза задаёт свои цель‑значения для цвета, скорости импульсов и активности связей, а рендер‑цикл линейно интерполирует к ним каждый кадр. Отсюда ощущение, что мозг разгоняется и остывает сам, а не дёргается вслед за колесом мыши.

flowchart LR
    scroll["Позиция скролла<br/>0.0 → 1.0"] --> phase{"Фаза"}
    phase -->|"0.00–0.18"| idle["idle<br/>голубой · редкие импульсы"]
    phase -->|"0.18–0.45"| act["activate<br/>связи загораются"]
    phase -->|"0.45–0.68"| peak["peak<br/>фиолетовый · шторм импульсов"]
    phase -->|"0.68–0.92"| calm["calm<br/>затухание"]

    idle & act & peak & calm --> lerp["плавная интерполяция<br/>к целям каждый кадр"]
    lerp --> render["requestAnimationFrame<br/>Three.js"]

Мобильные устройства получают не «то же самое, но помельче», а другой профиль рендера: вдвое меньше частиц, вчетверо меньше импульсов, минимальный pixelRatio и режим энергосбережения GPU. Обработчик изменения размера окна намеренно игнорирует изменения высоты — иначе показ и скрытие адресной строки в мобильном Safari пересоздавал бы рендер‑таргет по десять раз за один свайп.

Скролл, который не дёргается на iOS

Полноэкранные секции со scroll-snap — приём с дурной репутацией, и заслуженной. Первая версия вешала snap на корень документа, и на iOS Safari страница мелко тряслась при каждом касании.

Лечение оказалось структурным: snap перенесли на отдельный контейнер, высоту секций перевели со 100vh на 100dvh (динамическая высота вьюпорта), а backdrop-filter: blur() на мобильных заменили на непрозрачные фоны — GPU-фильтр поверх WebGL-канваса стоил больше, чем сам мозг.

Анимации появления тоже расщеплены по платформам. На десктопе — GSAP ScrollTrigger со всеми его возможностями. На мобильных — обычный IntersectionObserver, потому что ScrollTrigger внутри кастомного скролл‑контейнера на iOS ведёт себя нестабильно. Одна абстракция появления секции, две реализации под капотом.

Контент вынесен из кода

Заказчик менял даты, цены и состав спикеров чаще, чем хотелось бы редактировать HTML. Поэтому весь изменяемый контент живёт в пяти JSON-файлах, которые подгружаются лениво: секция входит во вьюпорт (с запасом), только тогда летит запрос.

• event.json — дата, время, город, площадка;
• program.json — четыре блока интенсива;
• pricing.json — три тарифа;
• testimonials.json — отзывы для слайдера;
• faq.json — вопросы и ответы.

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

Отдельная деталь для витрины портфолио: на демо‑стенде event.json хранит не абсолютную, а относительную дату — «сегодня + 3 дня». Скрипт разворачивает её в конкретное число и перегенерирует человекочитаемую подпись. Обратный отсчёт на демо всегда живой и никогда не «протухает», а на боевом сайте в том же поле стоит настоящая дата — код одинаковый.

Спикеры поданы через один и тот же паттерн «наука + практика»: профессор‑нейрофизиолог и предприниматель на одной сцене. Регалии вынесены в бейджи, чтобы не тонуть в тексте.

Голосовой AI-консультант

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

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

Отдельная деталь промпта, которая заметно улучшила голосовой режим: модели запрещено говорить «введите» и «напишите» — только «назовите» и «скажите». Пользователь ведь разговаривает, а не печатает. Та же мелочь всплывала и в других голосовых консультантах — она универсальна для этого формата.

Ключ не должен жить в браузере

Первая версия ходила в модель прямо из клиента, а API-ключ прятала base64-«обфускацией». Это, разумеется, не защита: ключ виден в исходниках страницы за десять секунд.

Правильное решение — тонкий серверный посредник. Node-прокси (около 100 строк) делает ровно две вещи: подставляет ключ в HTTP-запросы к модели и релеит WebSocket-кадры между браузером и голосовым API. Ключ ограничен по IP сервера и в клиентский бандл не попадает вовсе.

sequenceDiagram
    participant U as Пользователь
    participant W as Виджет консультанта
    participant P as Node-прокси
    participant G as Голосовое AI-API
    participant T as Telegram

    U->>W: клик по микрофону
    W->>W: запись 16 кГц
    W->>P: WSS-соединение
    P->>G: живая сессия (ключ на сервере)
    G-->>P: сессия готова
    P-->>W: сессия готова

    loop живой диалог
        U->>W: речь
        W->>P: аудио-чанки
        P->>G: релей
        G-->>P: аудио + транскрипт
        P-->>W: релей кадров
        W->>U: воспроизведение + визуализатор
    end

    G-->>P: вызов функции «отправить заявку»
    P-->>W: вызов функции
    W->>T: имя, телефон, тариф, UTM
    G->>U: «Заявка принята, менеджер свяжется»

Живой WebSocket через мобильный интернет — вещь хрупкая, поэтому в виджете есть переподключение с нарастающей задержкой (три попытки), таймаут установки сессии и жёсткая привязка колбэков к идентификатору соединения: ответы от уже закрытой сессии молча отбрасываются. Без этого «мёртвая» сессия успевала дописать чужую реплику в чат. Воспроизведение выстраивается в очередь по времени старта, иначе аудио‑чанки накладываются друг на друга и речь превращается в кашу.

Квиз‑бот, который квалифицирует за три минуты

Не каждый посетитель готов платить сразу. Для них — бесплатный вход: секция лид‑магнита ведёт в Telegram-бот по deep-link с меткой источника.

Бот (Python, aiogram 3, SQLite) даёт нейротест из семи вопросов. Первые шесть приносят от 1 до 4 баллов — максимум 24. Седьмой баллов не даёт: он спрашивает про приоритет. Сумма определяет профиль, а самый частый тег среди ответов — приоритетную технику.

Баллы	Профиль
≤ 12	Нейроновичок
13–18	Нейропрактик
≥ 19	Нейромастер

На выходе пользователь получает два PDF. Первый — общая презентация «5 нейротехник», статичный файл. Второй — персональный отчёт, который генератор собирает на лету: обложка, таблица результата, разбор профиля, приоритетная техника и рекомендации под конкретный тег.

Такой PDF — уже не «лид‑магнит ради галочки», а документ, который человеку не стыдно переслать коллеге. И он же — повод для менеджера начать разговор с фразы «вижу, у вас просела концентрация», а не «здравствуйте, вас интересует наш интенсив?».

Первый файл — презентацию «5 нейротехник» — я собирал сам под этот интенсив. Вот она целиком, прямо на странице:

Если предпочитаете смотреть в движении — вот та же презентация листаемым видео:

А вот пример персонального отчёта, который генератор собирает на лету под конкретный результат теста:

CRM из форум‑топиков Telegram

Отдельная находка проекта: полноценной CRM здесь нет и не нужно. Роль карточки лида играет топик в супергруппе. Тот же приём я разбирал отдельно — когда Telegram заменяет CRM, а когда на этом теряют деньги.

sequenceDiagram
    participant U as Лид
    participant B as Квиз-бот
    participant DB as SQLite
    participant S as Супергруппа (форум)
    participant M as Менеджер

    U->>B: /start с меткой источника
    B->>DB: пользователь + utm_source
    U->>B: 7 ответов
    B->>B: подсчёт → профиль + тег
    B->>U: персональный PDF
    B->>U: презентация «5 нейротехник»

    B->>S: создать топик «🧠 Имя (@user)»
    B->>S: карточка: балл, профиль, приоритет
    B->>DB: сохранить thread_id

    M->>S: пишет в топик
    S->>B: сообщение из топика
    B->>U: копия в личку
    U->>B: отвечает
    B->>S: копия в его топик

Каждому лиду — свой топик, где менеджер переписывается с ним, не выходя из Telegram. Сообщения проксируются в обе стороны и логируются в SQLite. Идентификатор топика хранится у пользователя, так что топик создаётся ровно один раз. Метка источника из deep-link (lead_site, lead_instagram и т. д.) попадает в карточку лида и агрегируется в статистике — видно, какой канал приводит людей.

Результаты и отзывы — тоже часть аргумента

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

Тарифов три, с выделенным рекомендованным и честным дефицитом мест. Цены живут в JSON — тот самый слой, который заказчик правит сам, без разработчика.

Мобильная версия

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

Живая запись прокрутки на телефоне (около 35 секунд) хорошо показывает, как мозг проходит все четыре фазы синхронно со скроллом — плавно, без рывков, ради которых и затевалась вся история с разделением рендера по платформам.

Деплой

Ничего экзотического: статика лежит на диске сервера, прокси крутится под systemd, Caddy сам получает и продлевает TLS-сертификат. Весь деплой — scp десяти файлов и перезагрузка конфига веб‑сервера. Для лендинга, который переживёт от силы пару месяцев активной рекламы, это ровно столько инфраструктуры, сколько нужно, и ни строчкой больше.

Честно об ограничениях

Кейс был бы нечестным без списка того, что осталось шероховатым. Ни одна из этих вещей не катастрофа, но вместе они — хорошая иллюстрация того, что зрелость проекта измеряется не только тем, что работает.

Отправка заявок шла напрямую из браузера. Ключ AI-модели мы сразу спрятали за прокси, а вот отправку сообщений в Telegram виджет и форма поначалу делали сами, из клиента. Правильно — проводить её через тот же серверный прокси отдельным эндпоинтом, чтобы наружу вообще ничего не утекало. Хрестоматийное напоминание: на клиенте не должно лежать ни одного секрета, а «обфускация» на стороне браузера не защищает ни от чего.

Markdown в чате не рендерится. Модель отвечает **Бизнес** — 19 000 ₽, а виджет выводит звёздочки как есть. Нужен минимальный парсер жирного текста и списков — небольшая, но заметная глазу недоработка.

Приветствие консультанта отстало от ребрендинга. Виджет одно время здоровался фразой про «Когнитивное долголетие» — название прошлой итерации, — хотя всё остальное давно переехало на «Мозг лидера». Строка была захардкожена отдельно от контента, который вынесен в JSON. Ровно тот случай, когда одна забытая константа выдаёт, что граница «ядро / контент» проведена не везде одинаково аккуратно.

История чата дублировалась. При восстановлении сессии из хранилища браузера приветствие добавлялось поверх сохранённого — в длинной сессии было видно два одинаковых сообщения подряд.

Вывод

Три ребрендинга за девять месяцев не потребовали ни одной правки в рендер‑цикле Three.js. Менялись JSON-файлы, тексты секций и системный промпт консультанта — то есть ровно тот слой, который и должен меняться.

Это и есть главный результат: не «мы сделали красивый WebGL», а граница между стабильным ядром и изменчивым контентом проведена в правильном месте. Ядро — процедурный мозг, фазовая машина скролла, релей голосовой сессии. Контент — всё остальное, и оно правится без разработчика.

Отсутствие фреймворка тут не идеология, а следствие. Когда стабильного кода девять тысяч строк и он не меняется, React нечего переиспользовать. А три CDN-скрипта грузятся быстрее любого бандла — что для лендинга, живущего на платном трафике, аргумент посильнее, чем удобство разработки.

Посмотреть вживую

Перейти на сайтneurons.dev.uspeshnyy.ru Телеграм‑бот@NeuroEvents_bot Исходники на GitHubNeurons-Landing

Следующий шаг: хотите промо‑сайт, который сам ведёт посетителя к заявке — голосом, квизом или формой — и складывает всё в один Telegram, напишите мне в Telegram.

Читайте также

• Лендинг вместо менеджера: itc34.ru — те же три входа в одну воронку на другом продукте
• Как продать дорогой кэмп на 10 мест — премиальный лендинг, голосовой ассистент и Telegram-воронка
• Telegram вместо CRM — когда топик на лида заменяет карточку, а когда нет
• Куда утекают заявки: 7 дыр в воронке — что закрывают лид‑магнит и мгновенный ответ
• Разбор лендинга услуг: где он теряет клиентов — те же барьеры на чужом примере