Концепт студии · 2026

«Частота»

Фестиваль · билеты

ЗадачаБилет покупают с телефона на ходу — после сторис, одной рукой.

Ниша: Музыкальный фестиваль, 15–16 августа, Екатеринбург
Что делали: Фирменный стиль, живой фон, программа фестиваля, расписание, покупка билета
Оплата: В концепте демонстрационная. В работе — эквайринг, билет приходит на почту
Статус: Концепт: фестиваль и артисты вымышлены
Стек: Next.js · TypeScript · WebGL2 · GLSL

Главная мысль

У фестиваля узнаваемое лицо на всём сайте, а билет с QR — за пять экранов без регистрации.

Фестиваль выбирают за один взгляд из сторис

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

Мы дали «Частоте» собственное лицо — живое поле-волну, которое рисуется в браузере. Оно же проходит через весь сайт: первый экран, постеры артистов, билет.

Программа «Частоты» на десктопе: постеры артистов с фильтрами по сцене и дню — Программа на 30 артистов: на телефоне — одной колонкой под большой палец.

Программа «Частоты» на телефоне — Программа на 30 артистов: на телефоне — одной колонкой под большой палец.

Красивая картинка не утяжеляет сайт

Готовая 3D-библиотека добавила бы около 140 КБ ради одной картинки — для телефона в очереди за кофе это лишнее ожидание.

Мы написали одну небольшую программу для видеокарты — 6,5 КБ. Она рисует и первый экран, и все 30 постеров: у каждого артиста свой срез одного поля. Пока она загружается, на месте поля стоит готовая картинка — глазом её не отличить от живого кадра.

весь код графики — вместо около 140 КБ готовой 3D-библиотеки: 6,5КБ
постеров рисует одна программа: 30

Постер отвечает на движение

В программе фестиваля — постеры вымышленных артистов. Наводишь курсор, и постер оживает: картинка уступает место полю, которое следит за мышью. Волна под курсором нарастает и гаснет плавно.

Программа «Частоты»: постер под курсором ожил и превратился в шейдерное поле

Слабый телефон не должен платить за красоту

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

Графика готовится в фоне и не подвешивает страницу, пока человек листает программу.

Поле-волна · запасной вариант на слабой видеокартеTypeScript

const FPS_FLOOR = 24;
const PROBE_MS = 1000;
const STALL = 100; // пауза, а не слабая видеокарта

if (!probed) {
  if (delta > STALL) {
    probeMs = 0; probeFrames = 0;
  } else {
    probeMs += delta; probeFrames += 1;
    if (probeMs >= PROBE_MS) {
      probed = true;
      if (probeFrames / (probeMs / 1000) < FPS_FLOOR) return giveUp();
    }
  }
}

От сторис до QR — без единого пароля

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

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

Уровень
Три уровня. Один билет — оба дня и все три сцены.
Количество
Сколько билетов — и сразу сумма.
Имя и почта
Больше ничего не спрашиваем.
Оплата
В концепте — демо-режим, в работе здесь эквайринг.
QR
Билет уже на экране, его можно скачать.

Палитра — эфир и три полосы частот

Палитра — как спектр на экране приёмника: почти чёрный эфир и три полосы частот. Шейдер берёт эти цвета прямо из CSS-переменных, поэтому поле и интерфейс не расходятся.