Живой 3D-флакон
Полностью процедурный флакон на three.js (сосуд из матового стекла, точёная бронзовая крышка, 150 капсул, видных сквозь стекло) в одном постоянном canvas. Статичный кадр, если WebGL недоступен или анимация отключена.
Кейс · Продукт · Сайт бренда
IntelVit. Бренд ноотропов, запущенный до первого флакона.
Премиальный бренд ноотропов, который основал предприниматель. Сайт с листом ожидания должен был выглядеть как работающий бренд с прямыми продажами (анимация вокруг флакона, дозировка каждого компонента на виду, тариф 49 $ для первых 500 покупателей) ещё до отгрузки первой капсулы.
- Роль
- Сайт бренда · дизайн → код → запуск
- Сроки
- 1 неделя от брифа до запуска
- Статус
- Работает · intelvit.com
Outcomes at a glance
1 неделя
От брифа до работающего листа ожидания
6 + 3
Компонента с раскрытой дозировкой, без смесей с нераскрытым составом
500
Лимит броней по тарифу для первых покупателей, виден с первого экрана
0
Таймеров срочности, промокодов и фальшивых отзывов
Продукт
Флакон из матового стекла. Каждый миллиграмм на этикетке.
IntelVit выпускает один продукт для амбициозных предпринимателей: ежедневную капсулу на основе грибов в цилиндре из матового стекла с бронзовой крышкой. Первая версия сайта и есть продукт: каждый раздел читается как состав на этикетке, каждый экран прокрутки на своём месте, а лист ожидания остаётся единственным способом купить до выпуска первой партии.
Сайт в работе
Три момента с работающего сайта. Флакон. Этикетка. Цена.
Скриншоты сайта IntelVit после редизайна июля 2026 года «The Site Is the Label», в собственной системе бренда Forest Studio: кремовая бумага, оливковые надзаголовки, бронзовые дозировки. Реальная вещь, а не абстракция.
Момент 1 · Первый экран
Живой 3D-флакон и названные дозы
Флакон из матового стекла не фотография, а рендер three.js в реальном времени, и миллиграммы подписаны прямо на первом экране. Ни стоковых фото, ни мозга-робота, ни градиентной сетки.
Момент 2 · Состав
Каждому миллиграмму своя глава
Шесть глав, шесть доз, каждая на уровне, который использовался в исследованиях: название антиквой, доза бронзовым моноширинным шрифтом, механизм одной фразой. Покупатели, которые читают состав, сохраняют эту страницу скриншотом и пересылают друзьям.
Момент 3 · Условия
Одна цена, которая держится
49 $ в месяц для первых 500, зафиксировано навсегда. 79 $ в месяц после запуска. Лимит настоящий, шкала броней настоящая, и на странице нет ни одного таймера срочности. Доверие растёт, когда отказываешься от тёмных паттернов.
Проблема
Добавки продают в пастельных тонах и с оговоркой в четвёртом абзаце.
Большинство брендов ноотропов позиционируют себя как wellness-магазины 2014 года: пастельные градиенты, таймеры срочности, мозаики из блогеров и главный компонент в десятой доле той дозы, что использовалась в исследованиях. Те, кто читает состав, видят это за секунды. Предприниматели тоже.
IntelVit основал человек, который сам принимает этот комплекс. Бриф был однозначным: сайт должен читаться как этикетка. Каждый миллиграмм назван. Никаких смесей с нераскрытым составом. Никаких обратных отсчётов. И при этом сайт должен продавать как премиальный бренд покупателю, который ни разу не покупал ноотропы.
Сайты в категории начинаются с пастельных градиентов и сеток из блогеров, а тому, кто читает состав, это ничего не говорит.
До старта продаж у бренда нет магазина. Лист ожидания должен работать как продукт и не выглядеть обещанием того, чего нет.
Большинство запусков держится на искусственной срочности (таймеры, фальшивые счётчики, баннеры «предложение ограничено»). IntelVit хотел обратного: честный лимит, названные числа, никаких тёмных паттернов.
Что мы сделали
Шесть функций, одна страница-досье.
Всё это есть в текущей версии сайта. Никаких скрытых разделов и заглушек под то, чего мы не делали.
Главы с дозировками
Каждому из шести ноотропов посвящена своя глава досье: название антиквой, латинское название, миллиграммы бронзовым моноширинным шрифтом, механизм действия. Ни одной «фирменной смеси» на странице.
Сцена открытия по прокрутке
Прокрутка откручивает крышку по резьбе, и капсулы дугой вылетают из флакона: плавная прокрутка Lenis на тикере GSAP управляет той же живой 3D-сценой, что и первый экран.
Блок с исследованиями
Ссылки на рецензируемые исследования на полосе глубокого оливкового цвета: исследование, доза, журнал, год, для тех же доз, что в капсуле. Из научных журналов, а не из пресс-релизов.
Прозрачные условия
Тариф 49 $ для первых 500 со счётчиком-одометром и живой шкалой броней; цена 79 $ после запуска названа там же. Без промокодов, без таймеров срочности, без «запросите цену».
Лист ожидания на server action
Сбор почты через Loops с идемпотентной обработкой, типобезопасный server action формы, резервный сценарий в режиме разработки, сообщения об успехе и ошибке прямо в форме. Без клиентской библиотеки состояния.
Как мы это сделали
Сначала бренд, разработка с ИИ.
IntelVit сделан так же, как любой проект IB Digital: опытный инженер ведёт работу, Claude Code превращает задачу в изменения кода, каждый раздел проверяется в паре на соответствие брифу бренда. Первая версия прошла путь от брифа до запуска за неделю на Next.js 16 и React 19, с токенами Tailwind 4 прямо в CSS, поэтому палитра Forest Studio живёт в одном месте.
Темп сохранился: в июле 2026 года сайт пересобрали с нуля в концепции «The Site Is the Label» (сайт как этикетка). Это одностраничник с нумерованными главами досье вокруг живого процедурного 3D-флакона, с хореографией прокрутки на Lenis и GSAP и рендерингом на react-three-fiber. Он вышел одним релизом, по тому же процессу с ИИ, что и первая версия.
Сайт тяжёлый там, где это нужно (3D-продукт в реальном времени, сцены по прокрутке, текст в несколько глав), и лёгкий там, где не нужно. Лист ожидания: один server action. Аналитика: одна инициализация на клиенте. Почта: один вызов API Loops. Рабочие инструменты, а не игрушечные библиотеки.
01
Парное программирование с Claude Code
Каждый раздел собран по тому же процессу с ИИ, что и клиентские проекты. Короткие циклы обратной связи по текстам и вёрстке вместо недель согласования слайдов. Правила тона, списки запрещённых слов и токены палитры закреплены на уровне файлов.
02
Бюджет анимации по слоям
GSAP и Lenis для сцены открытия и появления строк по маске; живой флакон на three.js в одном постоянном canvas с адаптивными уровнями качества. Жёсткое правило: анимации не меняют размеры элементов вёрстки, а при отключённой анимации страница всегда статична.
03
Рабочие инструменты, а не демо
Server actions для листа ожидания, Loops для почтовых цепочек, PostHog для аналитики конверсий, Vercel для деплоя. Сайт до запуска устроен как магазин и готов к подключению Shopify в день, когда приедут флаконы.
Результат
Сайт бренда выглядит как работающий магазин ещё до производства первого флакона.
Предзапуск бренда с прямыми продажами коварен: большинство выкатывает страницу-заглушку и называет её листом ожидания. IB Digital поступили наоборот. Каждый блок читается как состав на этикетке, каждый экран прокрутки на своём месте, а брони по тарифу для первых 500 начали поступать на той же неделе, когда сайт заработал.
Обсудим
30 минут. Одна задача.
Опишите, что нужно сделать, и предложите время. Скажем, какой формат и тариф подходят, или честно порекомендуем другой путь.