Задача
Продукт по безопасности трудно показать. Фотографировать нечего, скриншоты — это панели, которые у всех выглядят одинаково, а слова на странице те же, что у любого конкурента. Такой сайт читают как буклет и закрывают.
Поэтому страницу построили вокруг одного объекта, который движется, и он рассказывает историю атаки: что-то проникло внутрь, время идёт, никто не замечает, чужое находят, чужое запирают. Четыре формы, четыре экрана, без подписей-пояснений.
Механика поля частиц взята с сайта, который мы разобрали и собрали заново своим кодом, — только формулы симуляции. Тема, формы, палитра, тексты и взаимодействие свои.
Что сделали
Одна сцена ведёт всю страницу
Десять тысяч частиц живут в одном поле. Каждая — не точка, а каркас куба, поэтому форма из них читается как тело с передом и спиной и остаётся понятной, когда поворачивается.
Единственный орган управления — прокрутка. Страница едет, частицы летят к следующей цели, и форма пересобирается прямо на глазах. Видео здесь нет и последовательности картинок нет, поэтому страницу нельзя застать между двумя кадрами и дважды одинаково она не проигрывается.

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

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

Ответ показан щитом, на нём страница и заканчивается
Последняя форма — щит в три четверти, с ободом, ребром и собственной толщиной, поэтому он читается как предмет, а не как иконка. Кнопка стоит напротив него, на том экране, где читатель только что увидел, как чужое заперли.
Все формы здесь объёмные намеренно. Между экранами поле поворачивается и рассыпается, и плоская картинка схлопнулась бы в линию, как только встала боком, — первый вариант глаза выбросили именно поэтому.

Страница сама говорит, что она такое и кто её сделал
Nocta придумана. Это работа для портфолио, а не клиент, и внизу страницы об этом сказано строкой, а не оставлено читателю на догадку. Там же стоит подпись студии.
Под щитом идёт блок, написанный от себя: каждый экран здесь нарисован, измерен и анимирован руками, и ваш можно сделать так же. Заканчивается он кнопкой WhatsApp, а вторая такая же висит в углу на всех экранах.
Висящая кнопка раскрывается сама через десять секунд, здоровается на языке браузера — английском, русском или португальском — и, если её закрыть, до конца визита больше не открывается.

Техническая часть
Вся страница написана руками и проверена замером. Вот что показали цифры про скорость, сцену, телефон и вес файла.


Частицы и сцена
Десять тысяч частиц одной сеткой
Поле — одна инстансированная сетка: десять тысяч каркасов куба из одной геометрии, плюс второй слой крупных частиц перед ними.
Формы посчитаны до публикации страницы
Посчитать, куда встают десять тысяч точек в четырёх формах, — это около сорока секунд, и сначала браузер делал это при каждом заходе: полминуты ожидания.
Телефон — отдельная инженерная задача
На первом же живом телефоне поля просто не было.


Скорость и качество
93 за скорость на странице с 3D-сценой
Lighthouse замеряет десктопную страницу на 93 по скорости: первый экран рисуется за 1,1 секунды, время блокировки — 10 миллисекунд, сдвиг вёрстки — 0,003.
95 за доступность, 96 за практики
Lighthouse ставит странице 95 за доступность и 96 за лучшие практики.
Один файл и один запрос наружу
Сайт — один HTML-файл на 848 КБ, внутри которого 3D-движок, шейдеры, формы и стили. Открыть живую страницу


Честность
У цифры на странице есть источник
Две недели, которые злоумышленник проводит внутри сети, — не выдуманное для вёрстки число: это глобальная медиана из отчёта Mandiant M-Trends 2026, и источник напечатан под цифрой.
Демо говорит, что оно демо
Nocta — придуманный для портфолио бренд, и внизу страницы это сказано прямым текстом рядом с подписью студии.
Мобильная версия

Что получилось
- Десять тысяч частиц держат 61 кадр в секунду на десктопе.
- Lighthouse на десктопе: 93 за скорость, 95 за доступность, 96 за практики.
- Первый экран стоит через 1,1 секунды, сдвиг вёрстки — 0,003.
- Весь сайт — один файл: страница, движок и формы вместе.
Страница доказывает продукт единственным способом, каким продукт по безопасности можно доказать на сайте: читатель сам находит одно лишнее событие из десяти тысяч и видит, как его запирают. Всё остальное на странице — цифра, источник, предложение — стоит вокруг этой минуты.


