nimatica
Обсудить проект
2026

nocta

Сайт платформы кибербезопасности

Одностраничный сайт платформы обнаружения и реагирования на угрозы. Всю страницу ведёт одно поле из десяти тысяч частиц: по мере прокрутки оно собирается в вирус, песочные часы, глаз и щит, и историю атаки рассказывают формы, а не стоковые картинки.

Задача

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

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

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

Что сделали

Одна сцена ведёт всю страницу

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

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

Первый экран: слева заголовок, справа вирус, собранный из синих частиц.

Проблема — это одно число, и у числа есть источник

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

Рядом частицы собираются в песочные часы, и одна песчинка в струе красная. Это та же красная частица, которая проходит через все четыре формы, — то самое событие, на которое ещё никто не посмотрел.

Экран проблемы: слева песочные часы из частиц, справа цифра в четырнадцать дней и её источник.

Обнаружение читатель делает сам, курсором

Счётчик в углу считает события с той секунды, как открыли страницу, а строка рядом говорит, что одно из них лишнее. Лишнее — это одна красная частица на десять тысяч.

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

К этому экрану форма превращается в глаз, и красная частица стоит в зрачке.

Экран обнаружения: слева заголовок, справа глаз из частиц с одной красной частицей в зрачке.

Ответ показан щитом, на нём страница и заканчивается

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

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

Экран ответа: слева форма в момент поворота, плотное облако частиц, справа заголовок, абзац и кнопка.

Страница сама говорит, что она такое и кто её сделал

Nocta придумана. Это работа для портфолио, а не клиент, и внизу страницы об этом сказано строкой, а не оставлено читателю на догадку. Там же стоит подпись студии.

Под щитом идёт блок, написанный от себя: каждый экран здесь нарисован, измерен и анимирован руками, и ваш можно сделать так же. Заканчивается он кнопкой WhatsApp, а вторая такая же висит в углу на всех экранах.

Висящая кнопка раскрывается сама через десять секунд, здоровается на языке браузера — английском, русском или португальском — и, если её закрыть, до конца визита больше не открывается.

Последний экран: слева щит, справа блок о студии с кнопкой 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.
  • Весь сайт — один файл: страница, движок и формы вместе.

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

Нужен похожий проект?

Напишите, что должен делать ваш. Ответим в тот же день с оценкой и сроками.

Вопросы по проекту

  • Это замерено, а не на глаз: Lighthouse ставит десктопной странице 93 за скорость, первый экран появляется за 1,1 секунды, время блокировки — 10 миллисекунд. Тяжёлое считает видеокарта, а десять тысяч точек каждой формы посчитаны один раз до публикации и распаковываются при открытии за 6 миллисекунд.

  • Да, и у телефона своя арифметика. Поле сокращается до семи тысяч частиц, симуляция пишется в половинной точности, потому что мобильные видеочипы не умеют рисовать в текстуры полной точности, а страница меряет, где начинается текст каждого экрана, и вписывает форму в место над ним.

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

  • Такие страницы считаются от тарифа «Лендинг», актуальная цифра стоит на странице цен. На неё влияют количество форм, объём текста, который пишем мы, и число языков, на которых страница должна говорить.

Похожие проекты