Noisefloor

Noisefloor — студия моушн-дизайна из Москвы. Мы сделали для неё сайт: чёрный фон #0A0A0B, два кислотных акцента #C6FF00 и #FF2E88, широкий вариативный Unbounded для заголовков, узкий Oswald для названий кейсов, Inter Tight для текста и JetBrains Mono для таймкодов.

Идея в том, что сам сайт работает как показ работ. Заголовок меняет начертание, превью кейсов рисуются кодом, текст откликается на курсор и скролл.

Каждая буква заголовка на главной — отдельный элемент. Вес шрифта Unbounded идёт от 200 до 900: чем ближе буква к курсору, тем она жирнее, на расстоянии больше 520 px — тонкая. Тяжёлые буквы подсвечиваются лаймом. Высота букв растягивается от скорости скролла. Если курсора нет, например на телефоне, вес качается сам по синусоиде. При prefers-reduced-motion заголовок остаётся спокойным и жирным.

Все «ролики» на сайте генерируются в canvas. Семь функций рисуют свои сцены: линии сигнала, тор из точек, растягивающиеся буквы, жидкие пятна, сетку из квадратов, круги на воде и портреты команды из полос. Шоурил в hero переключает сцены с глитчем на склейке. Видеофайлов в проекте нет, поэтому превью весят как код.

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

Все шесть кейсов собираются одним шаблоном case.html по параметру ?id=. Сверху плеер на canvas: пауза по клику, полоса прогресса, таймкод 00:00:ss:ff на 25 кадрах. Ниже задача и решение, плёнка из шести кадров, которую можно листать мышью, список команды и диаграмма сроков по неделям.

Форма из четырёх вопросов: что делаем, бюджет, сроки, кто вы. Бюджет выбирается ползунком из двенадцати шагов от 300 тысяч до 5 миллионов. Справа по ходу заполнения собирается сводка с прогрессом, а форма проверяет поля и показывает «Принято» с номером брифа. Отправки на сервер нет, форма работает только в браузере.