Раздел за разделом
Каждый раздел сайта — что стоит сейчас, какие референсы берём, кадр именно того места и живая ссылка. Кликни на кадр — откроется во весь экран. Красные блоки «решить» — вопросы, по которым двигаемся дальше.
Вход: прелоудер
Маска, вскрывающаяся в герой. Не заставка. Лимит 1,2 с, скип по клику, повторный визит мимо.
Диафрагма: четыре кромки уезжают в ноль, герой под ними едет с масштаба 1.2 в 1 по кривой «резкий старт, длинный хвост». Четыре div-а, один таймлайн. На кадре — то, что открывается за ней.
Логика, которую утвердил Жан: прелоудер = маска перехода, герой уже за ней с первого кадра.
Шумовой круговой ревил: одна сцена растворяется в другую через шум, без резаных кромок. Дороже, красивее.
- Диафрагма Teletech (кромки) или шумовой ревил Unseen? Первое — час работы поверх того, что стоит.
Меню: плита
Полноэкранный оверлей, гигантские капсы-строки, нумерация мелко слева. Ховер перекидывает слово в курсив.
Пик 1 Жана: «то, как открывается меню у khidi — ок». Строки на всю высоту, 01–08 слева, крестик слева по центру, соцсети мелко справа.
Главная = меню. Четыре строки сверхжирным, волосяные линии во всю ширину. Смелость показать пустоту.
- Десять разделов в одну плиту не влезают (сол): группировать или скроллить оверлей?
Главная: герой и монолит
Видео-луп площадки + монолит из бетона и металла, читаемый по бликам на кромках. Монохром: у бренда нет цветного акцента.
Монолит не крутится, а РАЗЛАМЫВАЕТСЯ по скроллу (морф-таргет Break) плюс случайный микроглитч в покое. Палитра совпадает с нашей до токена.
Двойной маткап вместо карты окружения: тот же хром вдвое дешевле. Оговорка: маткап не отражает сцену.
Тёмный объект на тёмном, читается только по бликам; сдвиг каналов по кромкам. «Click & hold» — одна скрытая механика.
Пик 2 Жана: минимализм. Монохромная зернистая масса, контурный гигантский логотип поверх.
Один полноэкранный квад без моделей и загрузчиков — самый дешёвый большой объёмный экран.
Ближайший к нам по ДНК сайт пула: бетонное депо; их акцент #ff3814 — их, не наш: у Colossus цветного акцента нет.
- Монолит остаётся объектом или становится РАЗЛОМОМ по скроллу?
- Что видит телефон вместо монолита — статичный кадр или видео?
Главная: ближайшее
Мини-список Awakenings: дата и место разреженным капсом, название жирно, круглая миниатюра. Компактный блок, не герой.
Пик 11 Жана: разрез экрана — фото слева, список ближайших дат справа. Дата контуром под сплошным названием.
Афиша таблицей: день / дата / название красным / зал. Скошенные панели «резаный металл».
Подпись события одной строкой через разделители: ПТ / 21.08 / 23:00 — 06:00 / ЗАЛ 1. Постер как картинка карточки.
Главная: цифры
Zentry-карточки в 3D-наклоне с ФОТО площадки внутри: 3 200 м² · до 6 500 · 200 000+ · 12 м.
Пик 15 Жана: панели с перспективным наклоном, гигантские цифры, моно-подпись в углу, разнобой со стаггером. Наше отличие — фото внутри.
- Наклон за курсором уже стоит на CSS. Добавлять ли жидкий металл на ховер карточки (пик 17)?
Главная: большие медиа
Пик 3 Жана: полноэкранные кадры как тело секций, минимум подписей. Паузы между ними — Outline-минимализм.
Фото не тегом img, а плоскостью в WebGL: зум рябью от точки наведения, плоскость выгибается, чёрная шторка-вскрытие.
смотреть по ссылке
Полноэкранное видео зала, огромный заголовок, подзаголовок моноширинным — «паспортная» интонация.
Кадр толпы + тёмная скруглённая карточка с текстом поверх — приём №6 брендбука живьём. Красный свет как цвет сцены.
Видео вместо героя: эфир как первый экран, строка статуса LIVE с бегущей подписью.
Кадры бетона и металла оживают под движущимся светом: один квад, две текстуры, ~60 строк GLSL.
- Сколько медиа-секций на главной: три? пять?
- Какие кадры есть в наличии под полный экран — 30 фото media + лупы.
Артисты: список HÖR
Пик 5 Жана «по-любому»: строки во всю ширину, на ховере строка инвертируется (светлая плашка, тёмный текст), вторая строка через слэши, позади — размытое медиа артиста.
Эталон анатомии из скрина Жана: портрет слева, курсивный надзаголовок, гигантское имя, заливка на ховере, треклист через слэши.
Позади списка — полноэкранное размытое фото наведённого артиста, меняется от ховера.
Общий холст красит ховер ровно в прямоугольнике карточки (униформы u_domXY / u_domWH). Дорого; сначала доделать DOM.
- Что делает строка на телефоне, где ховера нет: активная строка в центре экрана или постоянная миниатюра?
Артист: страница
Видео сетов в Colossus, появления со штампами colossus®/jilt|zvuk|massive, метка «резидент», аудио JILT.CAST.
Анатомия разделов артиста (Music · Discography · Videos · Tour · Booking) почти дословно наша — и уживается со сквозным 3D-слоем.
Пик 6 Жана: страница артиста как эпизод с плеером; превью, дата, длительность, жанры.
JILT.CAST: лента
16 эпизодов одной лентой: 3 аудио строками-аккордеонами с тонким плеером + 13 видео по паттерну HÖR-библиотеки.
Отдельный заказ Жана: раздел в духе zenaari — треки и миксы резидентов.
Видео-эпизоды сеткой: превью, дата, длительность, жанры. Треклисты раскрываются, не печатаются простынёй.
- Обложки эпизодов — один из трёх типов элементов с жидким металлом на ховере. Оставляем?
Афиша: события
Пик 10 Жана: постер/медиа · дата · зал · лайнап ссылками на артистов · билеты · 2–3 строки описания. Структура — по Resident Advisor.
«Ближайшее» и «Дальше» двумя блоками. Название — единственное цветное у них; у нас — курсив или инверсия. Колонка «зал» сразу продаёт площадку.
Круговая «часовая» сетка 30-часового расписания. Самая индустриальная типографика пула.
Сетка постеров четыре в ряд, подпись сухая: Fri | 21.8 | 23.00 — 05.00. Фильтр слева на клиентском JSON.
Организуй событие: B2B
Пик 12 Жана: типы событий → подходящие залы → вместимость по форматам → что входит (техника Panterra) → процесс → запрос.
Структурный донор ветки: шапка начинается с фразы-действия, прилипшая к низу свёрнутая форма заявки, состав услуги перечнем.
смотреть по ссылке
Зал как полноэкранный слайд ПУСТОГО пространства, название гигантским кеглем, стрелки. Рядом — вместимость / м².
смотреть по ссылке
Пара «вместимость / площадь» цифрами рядом с фото. У нас 3 200 м² и 6 500 — главный аргумент, крупно.
Площадка, живущая только арендой: сайт устроен как отдел продаж, телефон прямо в шапке.
- Один кадр пустого зала на главной как B2B-тизер — какой зал?
Билеты и правила
Пик 9 Жана: брутальная страница — как купить, 21+, правила площадки, zero tolerance, FAQ дверей.
«Общий бруталистский дизайн подчерпнуть» — слово Жана. Голый список, жёсткий чёрный канон, ничего лишнего.
Сквозное: материал и движение
Что живёт на всех страницах: знак в металле, жидкий металл, переходы, зерно. Дозировка строгая — это специя, не фон.
Логотип металлической моделью в холсте 200×200 в подвале. Красный — КОНТРОВЫМ СВЕТОМ 0xF74300, знак не перекрашен. 5 кБ кода. Требует бренд-аппрува Жана.
Выдавленный SVG в модели 16,8 кБ, металл — карта маткап в обычном PNG, без HDR. Самый бюджетный рецепт. Палитра на кадре чужая — берём технику, не мир.
Гиперболический вихрь на курсоре, 40 строк GLSL, ноль ассетов. При переходе фон ВСАСЫВАЕТСЯ в точку курсора и выплёвывается с новой картинкой.
Тело шейдера жидкого металла, ~23 строки GLSL. Брать шейдер, не компонент — рендерер у нас уже свой.
Сцена не нужна, слой поверх — да: глитч, плёночный шум, сдвиг каналов. Палитра уже наша.
Displacement-переход между секциями — один из самых дешёвых больших эффектов в вебе.
- Знак в металле: даёшь бренд-аппрув на экструзию и цветной свет?
- Переход IFZ (вихрь) или Akaru (displacement) — или оба на разных уровнях?
Планка: дешёвое вау
Сайты, где «вау» получено без тяжёлой сцены. Смотреть до того, как заказывать 3D.
Ощущение почти как у топовых WebGL-сайтов при ТРУД 1. Самое выгодное соотношение во всём улове.
Самый моушновый клубный сайт пула: Lenis, GSAP, ScrollTrigger, Lottie. Ноль WebGL.
Типографика как главный герой, дисторшн текста, рваная сетка. Один холст на всё приложение.
Тёмный техно-брутализм + 3D + шум и глитч. Формат дешёвый, труд идёт на дисциплину.
Бетонная текстура + шейдер отражающего пола + видео текстурой — поверх статического хоста.
Самый проработанный моушн без 3D: курсор-«червь», единственный правильный гейт reduced-motion на участке.